From 682c0ec2517a1c01968eed212424410f9d812d60 Mon Sep 17 00:00:00 2001
From: josephalexantony-aot <alex.antony@aot-technologies.com>
Date: Fri, 27 Sep 2024 03:12:14 -0700
Subject: [PATCH 1/2] FWF-3643:[Feature] - UI refurbish and Import initial
 changes.

---
 .../src/components/SvgIcons/index.tsx         |  95 +++++++++++
 .../src/request/requestService.ts             |  25 ++-
 forms-flow-theme/scss/_card.scss              |  10 +-
 forms-flow-theme/scss/_forms.scss             |   6 +-
 forms-flow-theme/scss/_modal.scss             |  79 ++++++---
 forms-flow-theme/scss/_table.scss             |  32 +++-
 forms-flow-theme/scss/_theme.scss             |   2 +-
 forms-flow-theme/scss/_variables.scss         |   5 +
 forms-flow-theme/scss/fileUpload.scss         | 150 +++++++++++-------
 9 files changed, 316 insertions(+), 88 deletions(-)

diff --git a/forms-flow-components/src/components/SvgIcons/index.tsx b/forms-flow-components/src/components/SvgIcons/index.tsx
index 3a5612bbb..3d80e8311 100644
--- a/forms-flow-components/src/components/SvgIcons/index.tsx
+++ b/forms-flow-components/src/components/SvgIcons/index.tsx
@@ -240,6 +240,51 @@ export const CloseIcon = ({
   </svg>
 );
 
+export const SuccessIcon = ({ color = baseColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill={color}
+  >
+    <path
+      d="M2.50001 7.99987C2.49986 7.03434 2.75388 6.08579 3.23655 5.24957C3.71921 4.41334 4.41351 3.71891 5.24964 3.23608C6.08577 2.75325 7.03427 2.49905 7.99979 2.49901C8.96532 2.49897 9.91384 2.75311 10.75 3.23587C10.8648 3.30113 11.0007 3.31834 11.1281 3.28374C11.2556 3.24915 11.3641 3.16556 11.4301 3.05121C11.4962 2.93687 11.5143 2.80106 11.4805 2.67341C11.4468 2.54576 11.3639 2.43664 11.25 2.36987C10.0109 1.65445 8.57029 1.36789 7.15169 1.55463C5.73309 1.74137 4.41575 2.39097 3.40396 3.40269C2.39218 4.41441 1.74249 5.73172 1.55566 7.1503C1.36883 8.56889 1.6553 10.0095 2.37064 11.2487C3.08597 12.4879 4.19021 13.4564 5.51208 14.0041C6.83396 14.5517 8.29961 14.6479 9.68173 14.2777C11.0638 13.9075 12.2852 13.0916 13.1564 11.9566C14.0275 10.8215 14.4998 9.4307 14.5 7.99987C14.5 7.86726 14.4473 7.74008 14.3536 7.64631C14.2598 7.55255 14.1326 7.49987 14 7.49987C13.8674 7.49987 13.7402 7.55255 13.6465 7.64631C13.5527 7.74008 13.5 7.86726 13.5 7.99987C13.5 9.45856 12.9205 10.8575 11.8891 11.889C10.8576 12.9204 9.4587 13.4999 8.00001 13.4999C6.54132 13.4999 5.14237 12.9204 4.11092 11.889C3.07947 10.8575 2.50001 9.45856 2.50001 7.99987Z"
+      fill="#253DF4"
+    />
+    <path
+      d="M15.354 3.35387C15.4005 3.30738 15.4374 3.25219 15.4625 3.19145C15.4877 3.13071 15.5006 3.06561 15.5006 2.99987C15.5006 2.93412 15.4877 2.86902 15.4625 2.80828C15.4374 2.74754 15.4005 2.69236 15.354 2.64587C15.3075 2.59938 15.2523 2.5625 15.1916 2.53734C15.1309 2.51219 15.0658 2.49924 15 2.49924C14.9343 2.49924 14.8692 2.51219 14.8084 2.53734C14.7477 2.5625 14.6925 2.59938 14.646 2.64587L8.00001 9.29287L5.35401 6.64587C5.30752 6.59938 5.25233 6.5625 5.19159 6.53734C5.13085 6.51219 5.06575 6.49924 5.00001 6.49924C4.93427 6.49924 4.86916 6.51219 4.80843 6.53734C4.74769 6.5625 4.6925 6.59938 4.64601 6.64587C4.59952 6.69236 4.56264 6.74754 4.53749 6.80828C4.51233 6.86902 4.49938 6.93412 4.49938 6.99987C4.49938 7.06561 4.51233 7.13071 4.53749 7.19145C4.56264 7.25219 4.59952 7.30738 4.64601 7.35387L7.64601 10.3539C7.69245 10.4004 7.74763 10.4374 7.80838 10.4626C7.86912 10.4878 7.93424 10.5008 8.00001 10.5008C8.06578 10.5008 8.1309 10.4878 8.19164 10.4626C8.25239 10.4374 8.30756 10.4004 8.35401 10.3539L15.354 3.35387Z"
+      fill="#253DF4"
+    />
+  </svg>
+);
+
+export const FailedIcon = ({ color = baseColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill={color}
+  >
+    <g clipPath="url(#clip0_4491_5670)">
+      <path
+        d="M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z"
+        fill="#FF4242"
+      />
+      <path
+        d="M4.646 4.646C4.69245 4.59944 4.74762 4.56249 4.80837 4.53729C4.86911 4.51208 4.93423 4.49911 5 4.49911C5.06577 4.49911 5.13089 4.51208 5.19163 4.53729C5.25238 4.56249 5.30755 4.59944 5.354 4.646L8 7.293L10.646 4.646C10.6925 4.59951 10.7477 4.56264 10.8084 4.53748C10.8692 4.51232 10.9343 4.49937 11 4.49937C11.0657 4.49937 11.1308 4.51232 11.1916 4.53748C11.2523 4.56264 11.3075 4.59951 11.354 4.646C11.4005 4.69249 11.4374 4.74768 11.4625 4.80842C11.4877 4.86916 11.5006 4.93426 11.5006 5C11.5006 5.06574 11.4877 5.13084 11.4625 5.19158C11.4374 5.25232 11.4005 5.30751 11.354 5.354L8.707 8L11.354 10.646C11.4005 10.6925 11.4374 10.7477 11.4625 10.8084C11.4877 10.8692 11.5006 10.9343 11.5006 11C11.5006 11.0657 11.4877 11.1308 11.4625 11.1916C11.4374 11.2523 11.4005 11.3075 11.354 11.354C11.3075 11.4005 11.2523 11.4374 11.1916 11.4625C11.1308 11.4877 11.0657 11.5006 11 11.5006C10.9343 11.5006 10.8692 11.4877 10.8084 11.4625C10.7477 11.4374 10.6925 11.4005 10.646 11.354L8 8.707L5.354 11.354C5.30751 11.4005 5.25232 11.4374 5.19158 11.4625C5.13084 11.4877 5.06574 11.5006 5 11.5006C4.93426 11.5006 4.86916 11.4877 4.80842 11.4625C4.74768 11.4374 4.69249 11.4005 4.646 11.354C4.59951 11.3075 4.56264 11.2523 4.53748 11.1916C4.51232 11.1308 4.49937 11.0657 4.49937 11C4.49937 10.9343 4.51232 10.8692 4.53748 10.8084C4.56264 10.7477 4.59951 10.6925 4.646 10.646L7.293 8L4.646 5.354C4.59944 5.30755 4.56249 5.25238 4.53729 5.19163C4.51208 5.13089 4.49911 5.06577 4.49911 5C4.49911 4.93423 4.51208 4.86911 4.53729 4.80837C4.56249 4.74762 4.59944 4.69245 4.646 4.646Z"
+        fill="#FF4242"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4491_5670">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
 export const ExportIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -276,6 +321,56 @@ export const ImportIcon = ({ color = baseColor, ...props }) => (
   </svg>
 );
 
+export const IButton = ({ color = grayColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="13"
+    viewBox="0 0 12 13"
+    fill={color}
+  >
+    <g clip-path="url(#clip0_4691_5740)">
+      <path
+        d="M6 11.75C4.60761 11.75 3.27226 11.1969 2.28769 10.2123C1.30312 9.22774 0.75 7.89239 0.75 6.5C0.75 5.10761 1.30312 3.77226 2.28769 2.78769C3.27226 1.80312 4.60761 1.25 6 1.25C7.39239 1.25 8.72774 1.80312 9.71231 2.78769C10.6969 3.77226 11.25 5.10761 11.25 6.5C11.25 7.89239 10.6969 9.22774 9.71231 10.2123C8.72774 11.1969 7.39239 11.75 6 11.75ZM6 12.5C7.5913 12.5 9.11742 11.8679 10.2426 10.7426C11.3679 9.61742 12 8.0913 12 6.5C12 4.9087 11.3679 3.38258 10.2426 2.25736C9.11742 1.13214 7.5913 0.5 6 0.5C4.4087 0.5 2.88258 1.13214 1.75736 2.25736C0.632141 3.38258 0 4.9087 0 6.5C0 8.0913 0.632141 9.61742 1.75736 10.7426C2.88258 11.8679 4.4087 12.5 6 12.5Z"
+        fill="#303436"
+      />
+      <path
+        d="M6.6975 5.441L4.98 5.65625L4.9185 5.94125L5.256 6.0035C5.4765 6.056 5.52 6.1355 5.472 6.35525L4.9185 8.95625C4.773 9.629 4.99725 9.9455 5.5245 9.9455C5.93325 9.9455 6.408 9.7565 6.62325 9.497L6.68925 9.185C6.53925 9.317 6.32025 9.3695 6.17475 9.3695C5.9685 9.3695 5.8935 9.22475 5.94675 8.96975L6.6975 5.441ZM6.75 3.875C6.75 4.07391 6.67098 4.26468 6.53033 4.40533C6.38968 4.54598 6.19891 4.625 6 4.625C5.80109 4.625 5.61032 4.54598 5.46967 4.40533C5.32902 4.26468 5.25 4.07391 5.25 3.875C5.25 3.67609 5.32902 3.48532 5.46967 3.34467C5.61032 3.20402 5.80109 3.125 6 3.125C6.19891 3.125 6.38968 3.20402 6.53033 3.34467C6.67098 3.48532 6.75 3.67609 6.75 3.875Z"
+        fill="#303436"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4691_5740">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="translate(0 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const DownArrowIcon = ({ color = grayColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 16 16"
+    fill={ color}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.64599 4.64604C1.69244 4.59948 1.74761 4.56253 1.80836 4.53733C1.86911 4.51212 1.93423 4.49915 1.99999 4.49915C2.06576 4.49915 2.13088 4.51212 2.19163 4.53733C2.25237 4.56253 2.30755 4.59948 2.35399 4.64604L7.99999 10.293L13.646 4.64604C13.6925 4.59955 13.7477 4.56267 13.8084 4.53752C13.8691 4.51236 13.9342 4.49941 14 4.49941C14.0657 4.49941 14.1308 4.51236 14.1916 4.53752C14.2523 4.56267 14.3075 4.59955 14.354 4.64604C14.4005 4.69253 14.4374 4.74772 14.4625 4.80846C14.4877 4.86919 14.5006 4.9343 14.5006 5.00004C14.5006 5.06578 14.4877 5.13088 14.4625 5.19162C14.4374 5.25236 14.4005 5.30755 14.354 5.35404L8.35399 11.354C8.30755 11.4006 8.25237 11.4375 8.19163 11.4628C8.13088 11.488 8.06576 11.5009 7.99999 11.5009C7.93423 11.5009 7.86911 11.488 7.80836 11.4628C7.74761 11.4375 7.69244 11.4006 7.64599 11.354L1.64599 5.35404C1.59943 5.30759 1.56249 5.25242 1.53728 5.19167C1.51207 5.13093 1.4991 5.06581 1.4991 5.00004C1.4991 4.93427 1.51207 4.86915 1.53728 4.80841C1.56249 4.74766 1.59943 4.69248 1.64599 4.64604Z"
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="2"
+    />
+  </svg>
+);
+
 export const PencilIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/forms-flow-service/src/request/requestService.ts b/forms-flow-service/src/request/requestService.ts
index eb4b5213b..dba90119f 100644
--- a/forms-flow-service/src/request/requestService.ts
+++ b/forms-flow-service/src/request/requestService.ts
@@ -68,7 +68,30 @@ class RequestService {
         : headers,
     });
   }
-  public static httpPOSTBlobRequest(
+
+  public static httpMultipartPOSTRequest(
+    url: string,
+    importData: File,
+    supportData: string, 
+    token: string | null,
+    isBearer: boolean = true,
+    headers: object | null = null
+  ): any {
+    const formData = new FormData();
+    formData.append("file", importData);
+    formData.append("data", supportData);
+      return axios.post(url, formData, {
+      headers: {
+        ...headers,
+        Authorization: isBearer
+          ? `Bearer ${token || StorageService.get(StorageService.User.AUTH_TOKEN)}`
+          : token,
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  }  
+
+    public static httpPOSTBlobRequest(
     url: string,
     params: object | null,
     data: object,
diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss
index b6ddb743c..4e4787d79 100644
--- a/forms-flow-theme/scss/_card.scss
+++ b/forms-flow-theme/scss/_card.scss
@@ -24,11 +24,11 @@
   }
   
   .flow-builder {
-    min-height: 27.25rem;
+    height: calc(100vh - 18rem) !important;
   }
   
   .form-builder {
-    height: 28.75rem;
+    height: calc(100vh - 16.5rem) !important;
     overflow-x: hidden;
     scrollbar-width: none !important;
   
@@ -53,7 +53,7 @@
     width: 100% !important;
     height: auto !important;
     border-radius: var(--radius-0100) !important;
-    margin: var(--spacer-150) 0;
+    margin-bottom: var(--spacer-150);
   
     .editor-header-text {
       color: var(--ff-white);
@@ -77,7 +77,7 @@
     padding-right: 2.25rem !important;
     background-color: var(--ff-base-200);
     width: 6.0625rem;
-    min-height: 35.4375rem;
+    height: calc(100vh - 9.8rem) !important;
     cursor: pointer;
     height: auto;
     position: absolute;
@@ -121,7 +121,7 @@
     padding-left: var(--spacer-200) !important;
     padding-right: 2.25rem !important;
     background-color: var(--ff-base-200);
-    min-height: 35.4375rem;
+    height: calc(100vh - 9.8rem) !important;
     height: auto;
     position: absolute;
     right: -15%;
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index c4f83a0b1..2cb42e833 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -123,7 +123,7 @@ select option:hover {
       font-size: var(--font-size-xs);
       font-weight: var(--font-weight-sm);
       line-height: var(--text-line-height);
-      padding: var(--spacer-075);
+      padding: var(--spacer-050);
       padding-right: var(--spacer-250);
 
   
@@ -390,3 +390,7 @@ select option:hover {
     }
   }
 }
+
+.valiation-astrisk {
+  color: var(--ff-base-600);
+}
\ No newline at end of file
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
index 841debee9..f20664f2b 100644
--- a/forms-flow-theme/scss/_modal.scss
+++ b/forms-flow-theme/scss/_modal.scss
@@ -17,6 +17,10 @@
   }
 }
 
+.modal.fade .modal-dialog { 
+  transition: transform 0.7s ease-out !important;
+}
+
 .modal-header,
 .modal-footer {
   justify-content: space-between !important;
@@ -25,20 +29,25 @@
   margin-left: 0 !important;
   padding: var(--spacer-200) 2.5rem !important;
   flex-shrink: 0;
-  color: var(--ff-gray-800, #303436);  
-  font-size: var(--spacer-150);  
+  color: var(--ff-gray-800, #303436);
+  font-size: var(--spacer-150);
   font-weight: var(--font-weight-sm);
   line-height: normal;
 }
+
 .modal-title {
-font-size: var(--font-size-lg) !important;
-font-weight: var(--font-weight-sm) !important;
-line-height: 120% !important;
-text-transform: capitalize !important;
+  font-size: var(--font-size-lg) !important;
+  font-weight: var(--font-weight-sm) !important;
+  line-height: 120% !important;
+  text-transform: capitalize !important;
 }
-.modal-title, .modal-title b, .modal-title strong {
+
+.modal-title,
+.modal-title b,
+.modal-title strong {
   font-weight: var(--font-weight-sm) !important;
 }
+
 .modal-content {
   position: relative;
   display: flex;
@@ -62,9 +71,9 @@ text-transform: capitalize !important;
 
   &.modal-content-heading {
     color: var(--ff-base-600, #253DF4);
-    
+
     font-size: var(--font-size-sm);
-    
+
     font-weight: var(--ff-font-weight-xl);
     line-height: 120%;
     letter-spacing: 0.02rem;
@@ -72,9 +81,9 @@ text-transform: capitalize !important;
 
   &.modal-content-text {
     color: var(--ff-gray-800, #303436);
-    
+
     font-size: var(--ff--font-size-sm);
-    
+
     font-weight: var(--font-weight-sm);
     line-height: 120%;
     text-align: left;
@@ -89,12 +98,17 @@ text-transform: capitalize !important;
   }
 }
 
+.build-modal-body {
+  padding: 2rem 2.5rem !important;
+}
+
 .message-primary {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-sm);
   line-height: 120%;
   margin-bottom: var(--spacer-150);
 }
+
 .message-secondary {
   color: var(--gray-gray-80, #303436);
   font-size: var(--font-size-sm);
@@ -107,6 +121,10 @@ text-transform: capitalize !important;
   max-width: 50% !important;
 }
 
+.h-40  {
+  min-height: 40px !important;
+}
+
 .content-wrapper {
   display: flex;
   width: 14.0625rem;
@@ -134,9 +152,10 @@ text-transform: capitalize !important;
     border-right: 0 !important;
   }
 }
-.create-form-modal-ee{
-  .modal-dialog{
-    max-width: 57rem ;
+
+.create-form-modal-ee {
+  .modal-dialog {
+    max-width: 57rem;
   }
 }
 
@@ -154,9 +173,9 @@ text-transform: capitalize !important;
 
 .Modal-content-heading {
   color: var(--ff-base-600, #253DF4);
-  
+
   font-size: var(--spacer-100);
-  
+
   font-weight: 700;
   line-height: 120%;
   letter-spacing: 0.02rem;
@@ -164,10 +183,34 @@ text-transform: capitalize !important;
 
 .modal-content-text {
   color: var(--ff-gray-800, #303436);
-  
+
   font-size: var(--spacer-100);
-  
+
   font-weight: 400;
   line-height: 120%;
   text-align: left;
 }
+
+//action modal
+.custom-action-flex {
+  gap: var(--spacer-100);
+  display: flex;
+}
+
+.custom-action-model-body {
+  padding: var(--spacer-200) var(--spacer-250);
+
+}
+
+.action-form {
+  padding: 1.875rem var(--spacer-125);
+}
+
+.custom-modal-content {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  width: 50% !important;
+  max-width: 100%;
+  margin: auto;
+  
+}
\ No newline at end of file
diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss
index c77437b69..cd619f220 100644
--- a/forms-flow-theme/scss/_table.scss
+++ b/forms-flow-theme/scss/_table.scss
@@ -1,5 +1,6 @@
 .custom-tables-wrapper {
-  height: 39.75rem;
+  height: auto;
+  max-height: calc(100vh - 6.8rem);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none !important;
@@ -11,6 +12,7 @@
 }
 
 .custom-tables {
+  table-layout: fixed;
   width: 100%;
   border-collapse: separate !important;
   border-spacing: 0 !important;
@@ -20,11 +22,13 @@
   th,
   td {
     vertical-align: middle !important;
-    padding: 1.45rem 1.5rem !important;
+    padding: var(--spacer-125) var(--spacer-150) !important;
+    font-size: 0.875rem !important;
   }
 
   thead {
     display: table;
+    table-layout: fixed;
     width: 100%;
     z-index: 2;
     background-color: var(--ff-white);
@@ -55,6 +59,7 @@
     display: block;
     width: 100%;
     overflow-y: auto;
+    font-size: 0.875rem !important;
 
     tr {
       display: table;
@@ -89,15 +94,15 @@
 }
 
 .width-40 {
-  width: 28rem !important;
+  width: 25rem !important;
   max-width: 40% !important;
   min-width: 40% !important;
 }
 
-.width-30 {
+.width-25 {
   width: 18.75rem !important;
   max-width: 30% !important;
-  min-width: 30% !important;
+  min-width: 25% !important;
 }
 
 .text-container {
@@ -109,7 +114,6 @@
   height: 3rem;
   line-height: 1.5rem;
   color: var(--ff-Black, #000);
-  font-size: 0.875rem !important;
   font-weight: var(--font-weight-sm);
 }
 
@@ -144,3 +148,19 @@
   font-weight: var(--ff-font-weight-xs);
   line-height: 120%;
 }
+
+.w-20 {
+  width: 20% !important;
+}
+
+.w-30 {
+  width: 30% !important;
+}
+
+.w-13 {
+  width: 13% !important;
+}
+
+.w-12 {
+  width: 12% !important;
+}
\ No newline at end of file
diff --git a/forms-flow-theme/scss/_theme.scss b/forms-flow-theme/scss/_theme.scss
index 52c58ef34..f43e49b67 100644
--- a/forms-flow-theme/scss/_theme.scss
+++ b/forms-flow-theme/scss/_theme.scss
@@ -43,7 +43,7 @@ $danger: #dc3545;
 $dark: #000000;
 $gray: #232323;
 $info: #008599;
-$main-bg: #f7f7f7;
+$main-bg: $gray-000;
 $alert: #ffbb00;
 $body-bg: $white;
 $body-color: $white;
diff --git a/forms-flow-theme/scss/_variables.scss b/forms-flow-theme/scss/_variables.scss
index 03229c25d..a4c0a5d01 100644
--- a/forms-flow-theme/scss/_variables.scss
+++ b/forms-flow-theme/scss/_variables.scss
@@ -194,6 +194,11 @@ hr {
     max-width: 82.5rem;
   }
 }
+.container {
+  width: auto !important;
+    padding-left: 8px !important;
+    padding-right: 24px !important;
+}
 
 .main-container {
   overflow: hidden !important;
diff --git a/forms-flow-theme/scss/fileUpload.scss b/forms-flow-theme/scss/fileUpload.scss
index 4b25423f4..591f87b71 100644
--- a/forms-flow-theme/scss/fileUpload.scss
+++ b/forms-flow-theme/scss/fileUpload.scss
@@ -4,6 +4,7 @@ $upload-text-color: var(--ff-gray-800, #303436);
 $upload-text-description-color: var(--ff-gray-400, #949B9E);
 $upload-status-success-color: var(--ff-base-600, #253DF4);
 $upload-status-progress-color: var(--ff-gray-400, #949B9E);
+$upload-status-error-color: var(--ff-red-000, #ff4242);
 
 .file-upload {
   display: flex;
@@ -16,72 +17,109 @@ $upload-status-progress-color: var(--ff-gray-400, #949B9E);
   background-color: $file-upload-bg-color;
   cursor: pointer;
   text-align: center;
-}
 
-.upload-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
+  .upload-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 
-.upload-text {
-  color: $upload-text-color;
-  text-align: center;  
-  font-size: 0.875rem;  
-  font-weight: var(--font-weight-sm);
-  line-height: 120%;
-  padding: var(--spacer-100) 0;
-  margin: 0;
-}
+  .upload-text {
+    color: $upload-text-color;
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-sm);
+    line-height: 120%;
+    padding: var(--spacer-100) 0;
+    margin: 0;
+  }
 
-.upload-text-description {
-  color: $upload-text-description-color;
-  text-align: center;
+  .upload-text-description {
+    color: $upload-text-description-color;
+    text-align: center;
     font-size: 0.875rem;
     font-weight: var(--font-weight-sm);
-  line-height: 120%;
-}
+    line-height: 120%;
+  }
 
-.upload-file-name {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacer-150);
-  align-self: stretch;
-}
+  .upload-file-name {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacer-150);
+    align-self: stretch;
+  }
 
-.upload-details {
-  display: flex;
-  height: auto !important;
-  align-items: center;
-  gap: var(--spacer-100);
-  align-self: stretch;
-}
+  .upload-boady {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacer-100);
+    align-self: stretch;
+  }
 
-.upload-status-success {
-  color: $upload-status-success-color;
-  text-align: right;  
-  font-size: 0.875rem;  
-  font-weight: var(--font-weight-sm);
-  line-height: 120%;
-}
+  .upload-details {
+    margin-top: var(--spacer-100);
+    display: flex;
+    height: auto !important;
+    align-items: center;
+    gap: var(--spacer-050);
+    align-self: stretch;
+  }
 
-.upload-status-progress {
-  color: $upload-status-progress-color;
-  text-align: right;
+  .upload-form-details {
+    overflow: hidden;
+    color: var(--ff-Black, #000);
+    text-overflow: ellipsis;
     font-size: 0.875rem;
     font-weight: var(--font-weight-sm);
-  line-height: 120%;
-}
+    line-height: 120%;
+  }
 
-.progress {
-  height: 1.5rem !important;
-}
+  .import-error-note {
+    display: flex;
+    padding: var(--spacer-100);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacer-050);
+    align-self: stretch;
+    border-radius: var(--spacer-100);
+    background: var(gray-000, #F2F2F3);
+  }
 
-.progress,
-.progress-stacked {
-  --ff-progress-border-radius: var(--radius-0150) !important;
-}
\ No newline at end of file
+  .upload-status-success {
+    color: $upload-status-success-color;
+    text-align: right;
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-sm);
+    line-height: 120%;
+  }
+
+  .upload-status-error {
+    color: $upload-status-error-color;
+    text-align: right;
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-sm);
+    line-height: 120%;
+  }
+
+  .upload-status-progress {
+    color: $upload-status-progress-color;
+    text-align: right;
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-sm);
+    line-height: 120%;
+  }
+
+  .progress {
+    height: 1.5rem !important;
+  }
+
+  .progress,
+  .progress-stacked {
+    --ff-progress-border-radius: var(--radius-0150) !important;
+  }
+}

From 7d1b5840f3d9e0d91b2ac5fc82b42029e1c7ae39 Mon Sep 17 00:00:00 2001
From: josephalexantony-aot <alex.antony@aot-technologies.com>
Date: Fri, 27 Sep 2024 03:25:54 -0700
Subject: [PATCH 2/2] FWF-3643: [Feature] - File upload scss update

---
 forms-flow-theme/scss/fileUpload.scss | 186 +++++++++++++-------------
 1 file changed, 93 insertions(+), 93 deletions(-)

diff --git a/forms-flow-theme/scss/fileUpload.scss b/forms-flow-theme/scss/fileUpload.scss
index 591f87b71..a79b8a76c 100644
--- a/forms-flow-theme/scss/fileUpload.scss
+++ b/forms-flow-theme/scss/fileUpload.scss
@@ -17,109 +17,109 @@ $upload-status-error-color: var(--ff-red-000, #ff4242);
   background-color: $file-upload-bg-color;
   cursor: pointer;
   text-align: center;
+}
 
-  .upload-area {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .upload-text {
-    color: $upload-text-color;
-    text-align: center;
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-sm);
-    line-height: 120%;
-    padding: var(--spacer-100) 0;
-    margin: 0;
-  }
+.upload-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 
-  .upload-text-description {
-    color: $upload-text-description-color;
-    text-align: center;
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-sm);
-    line-height: 120%;
-  }
+.upload-text {
+  color: $upload-text-color;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-sm);
+  line-height: 120%;
+  padding: var(--spacer-100) 0;
+  margin: 0;
+}
 
-  .upload-file-name {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacer-150);
-    align-self: stretch;
-  }
+.upload-text-description {
+  color: $upload-text-description-color;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-sm);
+  line-height: 120%;
+}
 
-  .upload-boady {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacer-100);
-    align-self: stretch;
-  }
+.upload-file-name {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacer-150);
+  align-self: stretch;
+}
 
-  .upload-details {
-    margin-top: var(--spacer-100);
-    display: flex;
-    height: auto !important;
-    align-items: center;
-    gap: var(--spacer-050);
-    align-self: stretch;
-  }
+.upload-boady {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacer-100);
+  align-self: stretch;
+}
 
-  .upload-form-details {
-    overflow: hidden;
-    color: var(--ff-Black, #000);
-    text-overflow: ellipsis;
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-sm);
-    line-height: 120%;
-  }
+.upload-details {
+  margin-top: var(--spacer-100);
+  display: flex;
+  height: auto !important;
+  align-items: center;
+  gap: var(--spacer-050);
+  align-self: stretch;
+}
 
-  .import-error-note {
-    display: flex;
-    padding: var(--spacer-100);
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacer-050);
-    align-self: stretch;
-    border-radius: var(--spacer-100);
-    background: var(gray-000, #F2F2F3);
-  }
+.upload-form-details {
+  overflow: hidden;
+  color: var(--ff-Black, #000);
+  text-overflow: ellipsis;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-sm);
+  line-height: 120%;
+}
 
-  .upload-status-success {
-    color: $upload-status-success-color;
-    text-align: right;
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-sm);
-    line-height: 120%;
-  }
+.import-error-note {
+  display: flex;
+  padding: var(--spacer-100);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacer-050);
+  align-self: stretch;
+  border-radius: var(--spacer-100);
+  background-color: var(--ff-gray-000, #F2F2F3);
+}
 
-  .upload-status-error {
-    color: $upload-status-error-color;
-    text-align: right;
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-sm);
-    line-height: 120%;
-  }
+.upload-status-success {
+  color: $upload-status-success-color;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-sm);
+  line-height: 120%;
+}
 
-  .upload-status-progress {
-    color: $upload-status-progress-color;
-    text-align: right;
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-sm);
-    line-height: 120%;
-  }
+.upload-status-error {
+  color: $upload-status-error-color;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-sm);
+  line-height: 120%;
+}
 
-  .progress {
-    height: 1.5rem !important;
-  }
+.upload-status-progress {
+  color: $upload-status-progress-color;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-sm);
+  line-height: 120%;
+}
 
-  .progress,
-  .progress-stacked {
-    --ff-progress-border-radius: var(--radius-0150) !important;
-  }
+.progress {
+  height: var(--spacer-150) !important;
 }
+
+.progress,
+.progress-stacked {
+  --ff-progress-border-radius: var(--radius-0150) !important;
+}
\ No newline at end of file