added helptext in the dropdown

glific · Nov 27, 2024 · 1b7c318 · 1b7c318
1 parent e687b65
commit 1b7c318
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/containers/Template/List/Template.module.css b/src/containers/Template/List/Template.module.css
@@ -64,12 +64,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-}
-
-.AlignCenter span {
-  display: flex;
-  align-items: flex-start;
 }
 
 .Status svg {
@@ -136,7 +130,7 @@
   border-radius: 24px;
   border: 1px solid #cccccc;
   display: flex;
-  width: 130px;
+  width: 140px;
   margin: auto;
   height: 36px !important;
   background: #ffffff;
@@ -155,3 +149,9 @@
   width: 20%;
   min-width: 100px;
 }
+
+.Select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/src/containers/Template/List/Template.tsx b/src/containers/Template/List/Template.tsx
@@ -160,23 +160,17 @@ export const Template = ({
       case 'REJECTED':
         statusValue = (
           <div className={styles.AlignCenter}>
-            <span>
-              <RejectedIcon />
-              {t('Rejected')}
-            </span>
-            <HelpIcon darkIcon={false} helpData={rejectedTemplateInfo} />
+            <RejectedIcon />
+            {t('Rejected')}
           </div>
         );
         break;
 
       case 'FAILED':
         statusValue = (
           <div className={styles.AlignCenter}>
-            <span>
-              <RejectedIcon />
-              {t('Failed')}
-            </span>
-            <HelpIcon darkIcon={false} helpData={failedTemplateInfo} />
+            <RejectedIcon />
+            {t('Failed')}
           </div>
         );
         break;
@@ -331,10 +325,15 @@ export const Template = ({
           onChange={handleCheckedBox}
           className={styles.DropDown}
           data-testid="dropdown-template"
+          classes={{
+            select: styles.Select,
+          }}
         >
           {statusList.map((status: any) => (
-            <MenuItem data-testid="template-item" key={status} value={status}>
+            <MenuItem className={styles.Select} data-testid="template-item" key={status} value={status}>
               {status}
+              {status === 'Rejected' && <HelpIcon darkIcon={false} helpData={rejectedTemplateInfo} />}
+              {status === 'Failed' && <HelpIcon darkIcon={false} helpData={failedTemplateInfo} />}
             </MenuItem>
           ))}
         </Select>