From 1b5e0ba70989fa9025ac35fda4e854673daf9e07 Mon Sep 17 00:00:00 2001
From: Kishore <42832651+kishore03109@users.noreply.github.com>
Date: Thu, 14 Mar 2024 08:35:16 +0800
Subject: [PATCH 1/3] fix(accordion): styles

---
 .../components/BlockWrapper/BlockWrapper.tsx  |  1 +
 .../Details/IsomerDetailGroupView.tsx         | 81 ++++++++++---------
 .../extensions/Details/IsomerDetails.ts       |  2 +-
 src/layouts/components/Editor/styles.scss     | 26 +++---
 src/styles/isomer-cms/elements/base.scss      |  2 +-
 .../isomer-cms/pages/Editor.module.scss       | 10 ++-
 6 files changed, 62 insertions(+), 60 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"
         >
           <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
index f83f57702..69fc435d4 100644
--- 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,7 +119,7 @@ export const IsomerDetailGroupView = ({
   )
   return (
     <BlockWrapper
-      name="Accordion grid"
+      name="Accordion"
       isSelected={selected}
       childButtons={otherButtons}
       padding-top="0.5rem"
@@ -120,10 +127,10 @@ export const IsomerDetailGroupView = ({
     >
       <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
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..97033716a 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,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
index d8dc44456..627a60d36 100644
--- 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
index f87e2f837..cf8a8aed0 100644
--- 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 {

From d0fb171fb5af908aeb7ef58d8f340cfdad467f3f Mon Sep 17 00:00:00 2001
From: Kishore <42832651+kishore03109@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:18:02 +0800
Subject: [PATCH 2/3] chore(comments): for clarity

---
 src/layouts/components/Editor/styles.scss      | 2 ++
 src/styles/isomer-cms/elements/base.scss       | 2 +-
 src/styles/isomer-cms/pages/Editor.module.scss | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/components/Editor/styles.scss b/src/layouts/components/Editor/styles.scss
index 97033716a..15d446091 100644
--- a/src/layouts/components/Editor/styles.scss
+++ b/src/layouts/components/Editor/styles.scss
@@ -167,6 +167,7 @@
       color: black;
 
       &::after {
+        // Using sgds-icons.chevron-down
         font-family: "sgds-icons";
         content: "\E93C";
         justify-content: center;
@@ -189,6 +190,7 @@
     }
 
     &.is-open > button::after {
+      // Using sgds-icons.chevron-down
       font-family: "sgds-icons";
       content: "\E93C";
       transform: rotate(180deg);
diff --git a/src/styles/isomer-cms/elements/base.scss b/src/styles/isomer-cms/elements/base.scss
index 627a60d36..d8dc44456 100644
--- 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: 20px;
+  font-size: 16px;
   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
index cf8a8aed0..09b65850c 100644
--- a/src/styles/isomer-cms/pages/Editor.module.scss
+++ b/src/styles/isomer-cms/pages/Editor.module.scss
@@ -188,6 +188,7 @@ details.isomer-details summary::marker {
 }
 
 details.isomer-details summary::after {
+  // Using sgds-icons.chevron-down
   font-family: "sgds-icons";
   content: "\E93C";
   transition: 0.25s transform ease;

From 825766a6fc7aa300ba44a87899b624107c255e31 Mon Sep 17 00:00:00 2001
From: Kishore <42832651+kishore03109@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:25:06 +0800
Subject: [PATCH 3/3] chore(accordion): remove drawer code

---
 .../Details/IsomerDetailGroupView.tsx         | 67 +++++++------------
 src/layouts/components/Editor/styles.scss     |  4 --
 .../isomer-cms/pages/Editor.module.scss       |  3 +-
 3 files changed, 28 insertions(+), 46 deletions(-)

diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx
index 69fc435d4..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,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,14 @@ 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>
     </>
diff --git a/src/layouts/components/Editor/styles.scss b/src/layouts/components/Editor/styles.scss
index 15d446091..ece6e9b12 100644
--- 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
index 09b65850c..68e806ed4 100644
--- 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;