chore(accordion): remove drawer code

isomerpages · Mar 18, 2024 · 555656f · 555656f
1 parent d0fb171
commit 555656f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 46 deletions.
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,12 +12,7 @@ export const IsomerDetailGroupView = ({
   const startPos = getPos()
   const endPos = startPos + node.nodeSize
   const activePos = editor.state.selection.anchor
-  const selected = activePos >= startPos && activePos <= endPos
-
-  const { onDrawerOpen } = useEditorDrawerContext()
-
-  // todo: get drawer reviewed in staging
-  const isProd = process.env.REACT_APP_ENV === "production"
+  const selected = activePos >= startPos && activePos < endPos
 
   const otherButtons = (
     <>
@@ -30,7 +23,7 @@ export const IsomerDetailGroupView = ({
         justifyContent="end"
       >
         <HStack
-          bgColor="interaction.mainLight.default"
+          bgColor="#fafafa"
           borderRadius="0.25rem"
           border="1px solid"
           borderColor="base.divider.medium"
@@ -40,30 +33,6 @@ export const IsomerDetailGroupView = ({
           mr="-0.5rem"
           mt="-1.5rem"
         >
-          {!isProd && (
-            <Tooltip label="Edit accordion block" 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 block" hasArrow placement="top">
             <IconButton
               _hover={{ bg: "gray.100" }}
@@ -94,16 +63,25 @@ export const IsomerDetailGroupView = ({
         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()
           }}
@@ -112,7 +90,13 @@ export const IsomerDetailGroupView = ({
           left="50%"
           transform="translateX(-50%)"
           zIndex={2}
-          background="white"
+          bgColor="#fafafa"
+          border="none"
+          h="1.75rem"
+          w="1.75rem"
+          minW="1.75rem"
+          minH="1.75rem"
+          p="0.25rem 0.5rem"
         />
       </Box>
     </>

diff --git a/src/layouts/components/Editor/styles.scss b/src/layouts/components/Editor/styles.scss
@@ -199,9 +199,5 @@
     :last-child {
       margin-bottom: 0;
     }
-
-    [data-type="detailsContent"] > p {
-      color: #838894;
-    }
   }
 }
diff --git a/src/styles/isomer-cms/pages/Editor.module.scss b/src/styles/isomer-cms/pages/Editor.module.scss
@@ -192,6 +192,7 @@ details.isomer-details summary::after {
   font-family: "sgds-icons";
   content: "\E93C";
   transition: 0.25s transform ease;
+  margin-left: 0.75rem;
 }
 
 details.isomer-details[open] summary::after {
@@ -218,7 +219,7 @@ details.isomer-details {
     flex: 1 1 auto;
   }
 
-  div.isomer-details-content > p {
+  div.isomer-details-content > * {
     margin-left: 1rem;
     margin-right: 1.25rem;
     margin-bottom: 1rem;