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
isomerpages · Mar 19, 2024 · e0a8e6d · e0a8e6d
1 parent 334c847
commit e0a8e6d
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 96 deletions.
diff --git 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"
         >
           <Text textStyle="caption-1" contentEditable="false">
             {name}

diff --git 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,89 +12,76 @@ 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 = (
     <>
       <Box
-        display={selected ? "block" : "none"}
+        display={selected ? "flex" : "none"}
         position="absolute"
         width="100%"
+        justifyContent="end"
       >
         <HStack
+          bgColor="#fafafa"
+          borderRadius="0.25rem"
+          border="1px solid"
           borderColor="base.divider.medium"
-          display="flex"
-          justifyContent="flex-end"
+          boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
+          px="0.5rem"
+          py="0.25rem"
+          mr="-0.5rem"
+          mt="-1.5rem"
         >
-          <Box
-            backgroundColor={selected ? "white" : "transparent"}
-            marginTop="-0.25rem"
-            boxShadow="0px 0px 4px 0px rgba(0, 0, 0, 0.8)"
-            borderRadius="4px"
-          >
-            <Tooltip label="Edit accordion grid" hasArrow placement="top">
-              <IconButton
-                _hover={{ bg: "gray.100" }}
-                _active={{ bg: "gray.200" }}
-                onClick={onDrawerOpen("accordion")}
-                bgColor="transparent"
-                border="none"
-                h="1.75rem"
-                w="1.75rem"
-                minH="1.75rem"
-                minW="1.75rem"
-                p="0.25rem"
-                aria-label="edit accordion block"
-              >
-                <Icon
-                  as={BiPencil}
-                  fontSize="1.25rem"
-                  color="base.content.medium"
-                />
-              </IconButton>
-            </Tooltip>
-            <Tooltip label="Delete accordion " hasArrow placement="top">
-              <IconButton
-                _hover={{ bg: "gray.100" }}
-                _active={{ bg: "gray.200" }}
-                onClick={() => {
-                  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
-                  as={BiTrash}
-                  fontSize="1.25rem"
-                  color="interaction.critical.default"
-                />
-              </IconButton>
-            </Tooltip>
-          </Box>
+          <Tooltip label="Delete accordion block" hasArrow placement="top">
+            <IconButton
+              _hover={{ bg: "gray.100" }}
+              _active={{ bg: "gray.200" }}
+              onClick={() => {
+                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
+                as={BiTrash}
+                fontSize="1.25rem"
+                color="interaction.critical.default"
+              />
+            </IconButton>
+          </Tooltip>
         </HStack>
       </Box>
       <Box
         position="absolute"
         bottom="0"
         left="50%"
         transform="translateX(-50%)"
-        mb="-1.5rem"
-        zIndex={1}
-        background="white"
-        h="2.75rem"
-        w="2.75rem"
+        mb="-1rem"
+        zIndex={2}
+        px="0.5rem"
+        py="0.25rem"
+        mr="-0.5rem"
+        bgColor="interaction.mainLight.default"
+        borderRadius="0.25rem"
+        border="1px solid"
+        borderColor="base.divider.medium"
+        boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
       >
         <IconButton
+          _hover={{ bg: "gray.100" }}
+          _active={{ bg: "gray.200" }}
           variant="outline"
           aria-label="Add accordion"
-          icon={<Icon as={BiPlus} w="1.5rem" h="1.5rem" />}
+          icon={
+            <Icon as={BiPlus} fontSize="1.25rem" color="base.content.medium" />
+          }
           onClick={() => {
             editor.chain().appendDetail(startPos, endPos).run()
           }}
@@ -105,25 +90,32 @@ 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"
         />
       </Box>
     </>
   )
   return (
     <BlockWrapper
-      name="Accordion grid"
+      name="Accordion"
       isSelected={selected}
       childButtons={otherButtons}
       padding-top="0.5rem"
       padding-bottom="0.5rem"
     >
       <Box
         borderColor="base.divider.strong"
-        borderWidth="1px"
-        mt="1rem"
         h="100%"
         w="100%"
+        borderTop="1px solid #d4d4d4"
+        borderBottom="1px solid #d4d4d4"
       >
         <NodeViewContent />
       </Box>

diff --git 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
@@ -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
@@ -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 {