From f97b90c45ba46f19761161ffc3df0b2f18e171ba Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Wed, 6 Nov 2024 22:46:50 -0800
Subject: [PATCH 1/3] Updated reusable pill component

---
 .../src/components/CustomComponents/Pills.tsx          | 10 +++++++---
 forms-flow-theme/scss/_forms.scss                      |  7 +++++--
 forms-flow-theme/scss/_modal.scss                      |  9 ++++++++-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/forms-flow-components/src/components/CustomComponents/Pills.tsx b/forms-flow-components/src/components/CustomComponents/Pills.tsx
index 0b5026ca..121cb100 100644
--- a/forms-flow-components/src/components/CustomComponents/Pills.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Pills.tsx
@@ -4,11 +4,12 @@ import {  DeleteIcon } from "../SvgIcons/index";
 
 interface CustomPillProps {
   label: string;
-  icon?: boolean;
+  secondaryLabel: string;
+  icon?: React.ReactNode;
   bg: string;
   dataTestid?: string;
   ariaLabel?: string;
-  onClick?: () => void;
+  onClick?: () => void; 
 }
 
 export const CustomPill: React.FC<CustomPillProps> = ({
@@ -17,12 +18,15 @@ export const CustomPill: React.FC<CustomPillProps> = ({
   bg,
   dataTestid = "",
   ariaLabel = "",
+  secondaryLabel="",
   onClick,
 }) => {
   return (
     <div>
       <Badge pill variant={bg} data-testid={dataTestid} aria-label={ariaLabel}>
-        {label} {icon && <DeleteIcon color="#253DF4" onClick={onClick} />}
+        <span className="primary-label">{label}</span> 
+        { secondaryLabel && (<span className="secondary-label" >{secondaryLabel}</span>)}
+        {icon && <span onClick={onClick}>{icon}</span>}
       </Badge>{" "}
     </div>
   );
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index 87bd36f4..8aad7488 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -340,14 +340,17 @@ select option:hover {
   display: inline-flex !important;
   padding-block: var(--spacer-050) !important;
   padding-inline: var(--spacer-100) !important;
-  color: var(--ff-black) !important;
+  color: var(--ff-gray-800) !important;
   gap: var(--spacer-050) !important;
-  border-radius: var(--ff-border-radius-xl) !important;
   background-color: var(--ff-base-100) !important;
   border: none !important;
   align-items: center !important;
   font-size: var(--font-size-sm) !important;
   font-weight: var(--ff-badge-font-md) !important;
+  border-radius: var(--radius-0150) !important;
+  .secondary-label{
+    color: var(--ff-gray-500);
+  }
 }
 
 /* ------------------------- Tabs Style ------------------------ */
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
index 431b3e91..245e551c 100644
--- a/forms-flow-theme/scss/_modal.scss
+++ b/forms-flow-theme/scss/_modal.scss
@@ -560,6 +560,12 @@
 .build-modal{
   width: 60.318% !important;
   max-width: 60.318% !important;
+  .modal-body{
+    padding: 0px !important;
+  }
+  .modal-content{
+    overflow: hidden;
+  }
   .modal-header{
     border-bottom: 1px solid var(--ff-gray-000);
   }
@@ -581,9 +587,10 @@
     display: flex;
     flex-direction: column;
     border-right: 1px solid var(--ff-gray-000) !important;
+    padding-left: var(--spacer-250) !important;
     padding: var(--spacer-200);
     cursor: pointer;
     background: none;
     border: none;
-  }
+  }     
 }

From 1b6d736a0ce915715cb7cd24f170240078046259 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Wed, 6 Nov 2024 22:58:10 -0800
Subject: [PATCH 2/3] span changed to button

---
 .../src/components/CustomComponents/Pills.tsx              | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/forms-flow-components/src/components/CustomComponents/Pills.tsx b/forms-flow-components/src/components/CustomComponents/Pills.tsx
index 121cb100..e32f257d 100644
--- a/forms-flow-components/src/components/CustomComponents/Pills.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Pills.tsx
@@ -26,7 +26,12 @@ export const CustomPill: React.FC<CustomPillProps> = ({
       <Badge pill variant={bg} data-testid={dataTestid} aria-label={ariaLabel}>
         <span className="primary-label">{label}</span> 
         { secondaryLabel && (<span className="secondary-label" >{secondaryLabel}</span>)}
-        {icon && <span onClick={onClick}>{icon}</span>}
+        {icon && 
+        <button 
+        className="button-as-div"
+        aria-label="click icon" 
+        data-testid="click-icon"
+        onClick={onClick}>{icon}</button>}
       </Badge>{" "}
     </div>
   );

From ab2bab059dab2db6fa0401016b4eb3daa5958761 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Wed, 6 Nov 2024 23:18:24 -0800
Subject: [PATCH 3/3] Updates to the buildmodal

---
 .../src/components/CustomComponents/BuildModal.tsx             | 1 +
 forms-flow-theme/scss/_modal.scss                              | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
index 95314fc6..bccced82 100644
--- a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
@@ -58,6 +58,7 @@ export const BuildModal: React.FC<BuildModalProps> = React.memo(
         aria-labelledby="build-modal-title"
         aria-describedby="build-modal-message"
         dialogClassName="build-modal"
+        size="sm"
       >
         <Modal.Header>
           <Modal.Title id="build-modal-title">
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
index 245e551c..2d411c4c 100644
--- a/forms-flow-theme/scss/_modal.scss
+++ b/forms-flow-theme/scss/_modal.scss
@@ -558,8 +558,6 @@
  align-self: stretch;
 }
 .build-modal{
-  width: 60.318% !important;
-  max-width: 60.318% !important;
   .modal-body{
     padding: 0px !important;
   }
@@ -580,6 +578,7 @@
   }
   .content-body{
     @extend .content-style;
+    text-align: left;
     color: var(--ff-gray-800);
     font-weight: var(--font-weight-sm);
   }