From e0a8e6d70e364e7bc30224de3c56662d821ae278 Mon Sep 17 00:00:00 2001 From: Kishore <42832651+kishore03109@users.noreply.github.com> Date: Tue, 19 Mar 2024 17:26:10 +0800 Subject: [PATCH] fix(accordion): styles (#1834) ## Problem Design review for accordions, addressing changes [here](https://www.notion.so/opengov/Accordion-design-QA-7a07a952d7514f6989e8d04f61c1fac8?pvs=4). ## Solution Fix styling issues --- .../components/BlockWrapper/BlockWrapper.tsx | 1 + .../Details/IsomerDetailGroupView.tsx | 130 ++++++++---------- .../extensions/Details/IsomerDetails.ts | 2 +- src/layouts/components/Editor/styles.scss | 32 ++--- .../isomer-cms/pages/Editor.module.scss | 14 +- 5 files changed, 83 insertions(+), 96 deletions(-) diff --git a/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx index 4bc487fae..bc5d1f594 100644 --- a/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx +++ b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx @@ -31,6 +31,7 @@ export const BlockWrapper = ({ backgroundColor="#055AFF" textColor="white" p="0.25rem" + mt="-0.75rem" > {name} diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx index f83f57702..e4d1151d0 100644 --- a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx +++ b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx @@ -1,8 +1,6 @@ import { Box, HStack, Icon, IconButton, Tooltip } from "@chakra-ui/react" import { NodeViewContent, NodeViewProps } from "@tiptap/react" -import { BiPencil, BiPlus, BiTrash } from "react-icons/bi" - -import { useEditorDrawerContext } from "contexts/EditorDrawerContext" +import { BiPlus, BiTrash } from "react-icons/bi" import { BlockWrapper } from "../../components/BlockWrapper" @@ -14,72 +12,50 @@ export const IsomerDetailGroupView = ({ const startPos = getPos() const endPos = startPos + node.nodeSize const activePos = editor.state.selection.anchor - const selected = activePos >= startPos && activePos <= endPos + const selected = activePos >= startPos && activePos < endPos - const { onDrawerOpen } = useEditorDrawerContext() const otherButtons = ( <> - - - - - - - - { - editor.chain().focus().unsetDetailsGroup().run() - }} - bgColor="transparent" - border="none" - h="1.75rem" - w="1.75rem" - minH="1.75rem" - minW="1.75rem" - p="0.25rem" - aria-label="delete accordion block" - > - - - - + + { + editor.chain().focus().unsetDetailsGroup().run() + }} + bgColor="transparent" + border="none" + h="1.75rem" + w="1.75rem" + minH="1.75rem" + minW="1.75rem" + p="0.25rem" + aria-label="delete accordion block" + > + + + } + icon={ + + } onClick={() => { editor.chain().appendDetail(startPos, endPos).run() }} @@ -105,14 +90,21 @@ export const IsomerDetailGroupView = ({ left="50%" transform="translateX(-50%)" zIndex={2} - background="white" + bgColor="#fafafa" + border=" 1px solid" + borderColor="base.divider.medium" + h="1.75rem" + w="1.75rem" + minW="1.75rem" + minH="1.75rem" + p="0.25rem 0.5rem" /> ) return ( diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts index 8b082d529..803bed29c 100644 --- a/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts +++ b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts @@ -10,7 +10,7 @@ export const IsomerDetails = Details.extend({ const outerDiv = document.createElement("div") const i = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name, - class: "isomer-detail", + class: "isomer-details", }) Object.entries(i).forEach(([key, value]) => outerDiv.setAttribute(key, value) diff --git a/src/layouts/components/Editor/styles.scss b/src/layouts/components/Editor/styles.scss index dc233b983..ece6e9b12 100644 --- a/src/layouts/components/Editor/styles.scss +++ b/src/layouts/components/Editor/styles.scss @@ -148,18 +148,8 @@ border-bottom: 0; } - summary { - color: #4372d6; - font-size: 1.25rem; - font-style: normal; - font-weight: 700; - line-height: 1.75rem; /* 140% */ - letter-spacing: -0.0175rem; - } - [data-type="details"] { display: flex; - border-bottom: 1px solid #d4d4d4; padding: 0.5rem; margin-top: 0; @@ -177,7 +167,9 @@ color: black; &::after { - content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M16.293%209.29297L12%2013.586L7.70697%209.29297L6.29297%2010.707L12%2016.414L17.707%2010.707L16.293%209.29297Z%22%20fill%3D%22%23484848%22%2F%3E%3C%2Fsvg%3E"); + // Using sgds-icons.chevron-down + font-family: "sgds-icons"; + content: "\E93C"; justify-content: center; align-items: center; width: 1.5em; @@ -193,21 +185,19 @@ list-style: none; } + &.is-open summary { + font-weight: 700; + } + &.is-open > button::after { - content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.29297%2013.2932L7.70697%2014.7072L12%2010.4142L16.293%2014.7072L17.707%2013.2932L12%207.58618L6.29297%2013.2932Z%22%20fill%3D%22%234372D6%22%2F%3E%3C%2Fsvg%3E"); + // Using sgds-icons.chevron-down + font-family: "sgds-icons"; + content: "\E93C"; + transform: rotate(180deg); } :last-child { margin-bottom: 0; } - - [data-type="detailsContent"] > p { - color: #838894; - font-size: 1.25rem; - font-style: normal; - font-weight: 400; - line-height: 2.2rem; /* 176% */ - letter-spacing: -0.0175rem; - } } } diff --git a/src/styles/isomer-cms/pages/Editor.module.scss b/src/styles/isomer-cms/pages/Editor.module.scss index f87e2f837..68e806ed4 100644 --- a/src/styles/isomer-cms/pages/Editor.module.scss +++ b/src/styles/isomer-cms/pages/Editor.module.scss @@ -188,9 +188,11 @@ details.isomer-details summary::marker { } details.isomer-details summary::after { - content: url("https://raw.githubusercontent.com/atisawd/boxicons/master/svg/solid/bxs-chevron-down.svg"); + // Using sgds-icons.chevron-down + font-family: "sgds-icons"; + content: "\E93C"; transition: 0.25s transform ease; - padding-top: 0.25rem; + margin-left: 0.75rem; } details.isomer-details[open] summary::after { @@ -217,8 +219,7 @@ details.isomer-details { flex: 1 1 auto; } - div.isomer-details-content > p { - color: var(--site-secondary-color); + div.isomer-details-content > * { margin-left: 1rem; margin-right: 1.25rem; margin-bottom: 1rem; @@ -251,7 +252,10 @@ details.isomer-details ~ details.isomer-details { .isomer-accordion-white > details.isomer-details > summary { background-color: #fff; - color: #4372d6; +} + +.isomer-accordion-white > details.isomer-details[open] > summary { + font-weight: 700; } .isomer-accordion-gray > details.isomer-details > summary {