(feat) : Close button aligned with title and description

openmrs · Aug 17, 2024 · 40d05d5 · 40d05d5
1 parent f2af591
commit 40d05d5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 33 deletions.
diff --git a/src/root.component.tsx b/src/root.component.tsx
@@ -10,7 +10,7 @@ const RootComponent: React.FC = () => {
   const [steps, setSteps] = React.useState<Step[]>([]);
   const [stepIndex, setStepIndex] = React.useState(0);
 
-  // To disable the beacon for all steps
+  // Set steps with default step options
   const updateSteps = (newSteps: Step[]) => {
     setSteps(
       newSteps.map((step) => ({

diff --git a/src/tooltip/tooltip.component.tsx b/src/tooltip/tooltip.component.tsx
@@ -31,18 +31,20 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({
   return (
     <div {...tooltipProps} className={styles.tooltipcontainer}>
       <div className={styles.tooltipheader}>
-        <h4 className={styles.tooltiptitle}>{step.title}</h4>
-        <Button {...skipProps} size="sm" kind="ghost">
+        <div className={styles.container}>
+          <h4 className={styles.tooltiptitle}>{step.title}</h4>
+          <div className={styles.tooltipcontent}>{step.content}</div>
+        </div>
+        <Button {...skipProps} size="sm" kind="ghost" className={styles.closeButton}>
           <Close />
         </Button>
       </div>
-      <div className={styles.tooltipcontent}>{step.content}</div>
       <div className={styles.tooltipfooter}>
         <span className={styles.tooltipstep}>{`${index + 1} of ${totalSteps}`}</span>
         <div className={styles.buttonContainer}>
           {!step.hideBackButton && index > 0 && (
             <Button {...backProps} size="sm" kind="ghost" className={styles.buttonback}>
-              <div className={styles.arrowContainer}>
+              <div className={styles.arrowLeft}>
                 <ArrowLeft />
               </div>
               {t('back', 'Back')}

diff --git a/src/tooltip/tooltip.scss b/src/tooltip/tooltip.scss
@@ -16,47 +16,67 @@
     align-items: center;
     margin-bottom: spacing.$spacing-01;
 
-    .tooltiptitle {
-      @include type.type-style('heading-02');
-    }
+  .container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .tooltiptitle {
+    @include type.type-style('heading-02');
+    margin-bottom: spacing.$spacing-02; 
   }
 
-  .tooltipcontent {
+  .closeButton {
+    margin-left: auto;
+    align-self: flex-start; 
+  }
+}
+
+.tooltipcontent {
     color: $color-gray-70;
     @include type.type-style('body-compact-01');
-  }
+    width: 100%; 
+    margin-top: spacing.$spacing-01; 
+}
+
 
   .tooltipfooter {
     margin-top: spacing.$spacing-03;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    .tooltipstep {
-      color: $color-gray-70;
-      @include type.type-style('body-compact-01');
-    }
+  .tooltipstep {
+    color: $color-gray-70;
+    @include type.type-style('body-compact-01');
+  }
 
-    .buttonContainer {
+  .buttonContainer {
+    display: flex;
+    gap: spacing.$spacing-03; 
+
+  .buttonback,
+  .buttonnext {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: spacing.$spacing-02;
+    width: spacing.$spacing-12;
+
+    .arrowLeft,
+    .arrowContainer {
       display: flex;
-      gap: spacing.$spacing-03; 
-
-      .buttonback, .buttonnext {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: spacing.$spacing-12; 
-        padding: spacing.$spacing-02;
-
-        .arrowContainer {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-left: spacing.$spacing-02;
-          margin-right: spacing.$spacing-02;
-
-        }
-      }
+      align-items: center;
+      justify-content: center;
+      margin-left: spacing.$spacing-02;
+    }
+
+    .arrowLeft svg {
+      fill: $color-blue-60-2 !important;
+      margin-right: spacing.$spacing-02;
     }
   }
 }
+}
+}