fix(accordion): styles

isomerpages · Mar 14, 2024 · 1b5e0ba · 1b5e0ba
1 parent 89198d5
commit 1b5e0ba
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 60 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
@@ -17,25 +17,31 @@ export const IsomerDetailGroupView = ({
   const selected = activePos >= startPos && activePos <= endPos
 
   const { onDrawerOpen } = useEditorDrawerContext()
+
+  // todo: get drawer reviewed in staging
+  const isProd = process.env.REACT_APP_ENV === "production"
+
   const otherButtons = (
     <>
       <Box
-        display={selected ? "block" : "none"}
+        display={selected ? "flex" : "none"}
         position="absolute"
         width="100%"
+        justifyContent="end"
       >
         <HStack
+          bgColor="interaction.mainLight.default"
+          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">
+          {!isProd && (
+            <Tooltip label="Edit accordion block" hasArrow placement="top">
               <IconButton
                 _hover={{ bg: "gray.100" }}
                 _active={{ bg: "gray.200" }}
@@ -56,30 +62,31 @@ export const IsomerDetailGroupView = ({
                 />
               </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
@@ -112,18 +119,18 @@ export const IsomerDetailGroupView = ({
   )
   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,8 @@
       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");
+        font-family: "sgds-icons";
+        content: "\E93C";
         justify-content: center;
         align-items: center;
         width: 1.5em;
@@ -193,8 +184,14 @@
       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");
+      font-family: "sgds-icons";
+      content: "\E93C";
+      transform: rotate(180deg);
     }
 
     :last-child {
@@ -203,11 +200,6 @@
 
     [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/elements/base.scss b/src/styles/isomer-cms/elements/base.scss
@@ -4,7 +4,7 @@
 
 body {
   font-family: "Inter", sans-serif;
-  font-size: 16px;
+  font-size: 20px;
   background: $base-background;
   margin: 0;
   padding: 0;

diff --git a/src/styles/isomer-cms/pages/Editor.module.scss b/src/styles/isomer-cms/pages/Editor.module.scss
@@ -188,9 +188,9 @@ 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");
+  font-family: "sgds-icons";
+  content: "\E93C";
   transition: 0.25s transform ease;
-  padding-top: 0.25rem;
 }
 
 details.isomer-details[open] summary::after {
@@ -218,7 +218,6 @@ details.isomer-details {
   }
 
   div.isomer-details-content > p {
-    color: var(--site-secondary-color);
     margin-left: 1rem;
     margin-right: 1.25rem;
     margin-bottom: 1rem;
@@ -251,7 +250,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 {