refactor: adjust the accordio tab header (#590)

* refactor: adjust the accordio tab header * refactor: add the change accordion tab header icon * refactor: adjust side paddings
devhatt · Aug 20, 2024 · 893a84e · 893a84e
1 parent a4d8b88
commit 893a84e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/src/components/AccordionTab/AccordionTab.module.scss b/src/components/AccordionTab/AccordionTab.module.scss
@@ -19,10 +19,8 @@
   display: none;
 
   color: $primaryWhite;
-  font-size: 4rem;
-  font-weight: 900;
 
-  margin-right: 2rem;
+  margin-top: 0.2rem;
 
   cursor: pointer;
 }
@@ -57,19 +55,18 @@
     font-size: 1.6rem;
     line-height: 1;
 
-    padding: 1.2rem;
+    padding: 1.3rem 2.2rem;
 
     position: relative;
 
     background-color: $secondaryPurple;
     border-radius: 17px 17px 0 0;
 
-    &::before {
-      font-size: 1.8rem;
+    .innerHeader {
+      display: flex;
+      gap: 1.5rem;
 
-      margin-right: 1rem;
-
-      content: '⬤';
+      align-items: center;
     }
   }
 

diff --git a/src/components/AccordionTab/AccordionTab.tsx b/src/components/AccordionTab/AccordionTab.tsx
@@ -17,16 +17,18 @@ function AccordionTab({
   const handleClose = (): void => {
     if (props.onChangeOpen) props.onChangeOpen(!isOpen);
   };
-
   const renderCloseButton = (): ReactNode => (
     <button className={scss.closeButton} onClick={handleClose} type="button">
-      <Icon icon="minus" size={16} />
+      <Icon icon={isOpen ? 'minus' : 'plus'} size={16} />
     </button>
   );
 
   const renderHeader = (): ReactNode => (
     <div className={scss.header}>
-      <p className={scss.headerTitle}>{props.title}</p>
+      <div className={scss.innerHeader}>
+        <Icon icon="circle" size={12} />
+        <p className={scss.headerTitle}>{props.title}</p>
+      </div>
       {hideCloseButton ? null : renderCloseButton()}
     </div>
   );

diff --git a/src/components/Icon/data.ts b/src/components/Icon/data.ts
@@ -1,6 +1,7 @@
 import Alert from './icons/alert.svg?react';
 import ArrowRight from './icons/arrow-right.svg?react';
 import Check from './icons/check.svg?react';
+import Circle from './icons/circle.svg?react';
 import Close from './icons/close.svg?react';
 import TriangleDropArrow from './icons/drop-down.svg?react';
 import Hamburguer from './icons/hamburguer.svg?react';
@@ -18,6 +19,7 @@ export const icons = {
   alert: Alert,
   'arrow-right': ArrowRight,
   check: Check,
+  circle: Circle,
   close: Close,
   hamburguer: Hamburguer,
   'left-arrow': LeftArrow,

diff --git a/src/components/Icon/icons/circle.svg b/src/components/Icon/icons/circle.svg