From 06d82efec6c9d9ba7c0280bf233e54086789b3ea Mon Sep 17 00:00:00 2001
From: Ajay krishna <ajay.k@aot-technologies.com>
Date: Wed, 5 Feb 2025 13:40:36 +0530
Subject: [PATCH 1/3] color correction with new variables

---
 .../src/components/users/users.scss           |   2 +-
 forms-flow-admin/src/variables.scss           |   5 +-
 .../CustomComponents/ImportModal.tsx          |   2 +-
 forms-flow-theme/scss/_aiAssistant.scss       |   3 +-
 forms-flow-theme/scss/_button.scss            |   7 +-
 forms-flow-theme/scss/_forms.scss             |  18 +--
 forms-flow-theme/scss/_modal.scss             |   5 +-
 forms-flow-theme/scss/_table.scss             |   3 +-
 forms-flow-theme/scss/_theme.scss             | 118 ++----------------
 forms-flow-theme/scss/_typography.scss        |   3 +-
 forms-flow-theme/scss/_variables.scss         |   9 +-
 forms-flow-theme/scss/external/formio.scss    |   6 +-
 forms-flow-theme/scss/fileUpload.scss         |  10 +-
 forms-flow-theme/scss/inputBox.scss           |   6 +-
 14 files changed, 54 insertions(+), 143 deletions(-)

diff --git a/forms-flow-admin/src/components/users/users.scss b/forms-flow-admin/src/components/users/users.scss
index a38e75872..17cb91861 100644
--- a/forms-flow-admin/src/components/users/users.scss
+++ b/forms-flow-admin/src/components/users/users.scss
@@ -18,7 +18,7 @@
 }
 
 .role-highlighted {
-    background-color: $gray-100;
+    background-color: $gray-medium;
     border-radius: 5px;
 
 }
diff --git a/forms-flow-admin/src/variables.scss b/forms-flow-admin/src/variables.scss
index 1867c607f..786833c60 100644
--- a/forms-flow-admin/src/variables.scss
+++ b/forms-flow-admin/src/variables.scss
@@ -1,4 +1,3 @@
-$dark: var(--ff-dark);
+$dark: var(--ff-black);
 $white: var(--ff-white);
-$gray-100: var(--ff-gray-100);
-$gray-200: var(--ff-gray-200);
\ No newline at end of file
+$gray-medium: var(--ff-gray-medium);
diff --git a/forms-flow-components/src/components/CustomComponents/ImportModal.tsx b/forms-flow-components/src/components/CustomComponents/ImportModal.tsx
index e4fe1da82..9d4696091 100644
--- a/forms-flow-components/src/components/CustomComponents/ImportModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/ImportModal.tsx
@@ -73,7 +73,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
   }) => {
     const { t } = useTranslation();
     const computedStyle = getComputedStyle(document.documentElement);
-    const redColor = computedStyle.getPropertyValue("--ff-red-000");
+    const redColor = computedStyle.getPropertyValue("--ff-danger");
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [uploadProgress, setUploadProgress] = useState(0);
     const hasVersion = (item) => item?.majorVersion != null || item?.minorVersion != null;
diff --git a/forms-flow-theme/scss/_aiAssistant.scss b/forms-flow-theme/scss/_aiAssistant.scss
index 599a27729..a28dac7e6 100644
--- a/forms-flow-theme/scss/_aiAssistant.scss
+++ b/forms-flow-theme/scss/_aiAssistant.scss
@@ -3,6 +3,7 @@ $primary-light: var(--ff-primary-light);
 $gray-darkest: var(--ff-gray-darkest);
 $gray-medium: var(--ff-gray-medium);
 $gray-medium-dark: var(--ff-gray-medium-dark);
+$danger-color: var(--ff-danger);
 .ai-modal {
   .modal-dialog {
     margin-top: 2.5vh !important;
@@ -154,7 +155,7 @@ $gray-medium-dark: var(--ff-gray-medium-dark);
     }
 
     .danger-message {
-      color: var(--ff-red-000);
+      color: $danger-color;
     }
 
     .form-container {
diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss
index 32da2d2c8..f3bff20b0 100644
--- a/forms-flow-theme/scss/_button.scss
+++ b/forms-flow-theme/scss/_button.scss
@@ -10,6 +10,7 @@ $gray-medium-dark: var(--ff-gray-medium-dark);
 $dropdown-btn-size: 3.2275rem;
 $btn-border-radius: 50%;
 $btn-font-weight: bold;
+$danger-color: var(--ff-danger);
 
 .btn-light {
   background-color: $white-color !important;
@@ -20,7 +21,7 @@ $btn-font-weight: bold;
 }
 
 .form-select {
-  color: $dark !important;
+  color: $black-color !important;
 }
 
 .btn-info {
@@ -65,12 +66,12 @@ $btn-font-weight: bold;
 }
 
 .delete_button {
-  color: var(--ff-danger);
+  color: $danger-color;
   cursor: pointer;
   transition: transform 0.5s, color 0.5s;
 
   &:hover {
-    color: var(--ff-danger); // This line can be omitted since the color remains the same.
+    color: $danger-color; // This line can be omitted since the color remains the same.
   }
 
   &:active {
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index e7dd7528d..7c82e400f 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -5,7 +5,7 @@ $primary-light: var(--ff-primary-light);
 $gray-darkest: var(--ff-gray-darkest);
 $gray-medium: var(--ff-gray-medium);
 $gray-medium-dark: var(--ff-gray-medium-dark);
-
+$danger-color: var(--ff-danger);
 .forms-text {
   vertical-align: bottom;
   margin-left: 0.625rem;
@@ -97,17 +97,17 @@ select option:hover {
 
 .formio-error-wrapper,
 .has-error {
-  color: var(--ff-danger);
-  border-color: var(--ff-danger);
+  color: $danger-color;
+  border-color: $danger-color;
 }
 
 .formio-error-wrapper,
 .has-error label {
-  color: var(--ff-danger);
+  color: $danger-color;
 }
 
 .formio-errors .error {
-  color: var(--ff-danger);
+  color: $danger-color;
 }
 
 .formio-wizard-nav-container {
@@ -264,11 +264,11 @@ select option:hover {
 
   &.is-invalid {
     background-image: none !important;
-    border: 1px solid var(--ff-red-000) !important;
+    border: 1px solid $danger-color !important;
 
     &:focus {
-      outline: 1px solid var(--ff-red-000) !important;
-      border: 1px solid var(--ff-red-000) !important;
+      outline: 1px solid $danger-color !important;
+      border: 1px solid $danger-color !important;
     }
   }
 
@@ -331,7 +331,7 @@ select option:hover {
 
   .custom-feedback {
     display: flex;
-    color: var(--ff-red-000);
+    color: $danger-color;
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-sm);
     line-height: var(--text-line-height);
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
index 0833e5c5a..74698cb70 100644
--- a/forms-flow-theme/scss/_modal.scss
+++ b/forms-flow-theme/scss/_modal.scss
@@ -5,6 +5,7 @@ $primary-light: var(--ff-primary-light);
 $gray-dark: var(--ff-gray-dark);
 $gray-medium: var(--ff-gray-medium);
 $gray-medium-dark: var(--ff-gray-medium-dark);
+$black-color: var(--ff-black);
 
 .modal {
   .modal-dialog {
@@ -314,7 +315,7 @@ $gray-medium-dark: var(--ff-gray-medium-dark);
 
   .template-title,
   .template-desc {
-    color: var(--ff-dark);
+    color: $black-color;
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-sm);
     line-height: var(--text-line-height);
@@ -895,7 +896,7 @@ $gray-medium-dark: var(--ff-gray-medium-dark);
     font-size: var(--font-size-sm);
   }
   .selected-var-text{
-    color: var(--ff-dark);
+    color: $black-color;
     font-size: var(--font-size-sm);
     padding-bottom: var(--spacer-050);
   }
diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss
index c8c6abe5d..c101b8420 100644
--- a/forms-flow-theme/scss/_table.scss
+++ b/forms-flow-theme/scss/_table.scss
@@ -7,6 +7,7 @@ $status-margin: var(--spacer-050);
 $status-radius: 50%;
 $gray-medium: var(--ff-gray-medium);
 $gray-medium-dark: var(--ff-gray-medium-dark);
+$green-color: var(--ff-green);
 
 .custom-tables-wrapper {
   height: auto;
@@ -143,7 +144,7 @@ $gray-medium-dark: var(--ff-gray-medium-dark);
 
 .status-live {
   @extend .status-circle;
-  background-color: var(--ff-live);
+  background-color: $green-color;
 }
 
 .status-draft {
diff --git a/forms-flow-theme/scss/_theme.scss b/forms-flow-theme/scss/_theme.scss
index dcb6a9305..76fcfe6f6 100644
--- a/forms-flow-theme/scss/_theme.scss
+++ b/forms-flow-theme/scss/_theme.scss
@@ -1,32 +1,13 @@
 //New Colors
-
-$base: hsl(233, 90%, 55%);
-$gray: hsl(199, 5%, 40%);
-$black: hsl(0, 0%, 0%);
-$white: hsl(0, 0%, 100%);
-$red-000: hsl(0, 100%, 63%);
-$live: hsl(95, 90%, 40%);
-
-// @function set-lightness($color, $target-lightness) {
-//   //USE: call the function with a color and its expected lightness. (the L of HSL will be replaced).
-//   $hue: hue($color);
-//   $saturation: saturation($color);
-//   @return hsl($hue, $saturation, $target-lightness);
-// }
+$black: #000000;
+$white: #ffffff;
+$danger: #FF4242;
+$green: #57C20A;
+$green-dark: #006621;
 
 //primary shades
 $primary: #253DF4;
 $primary-light: #E2E1FC;
-// $base-1000: set-lightness($base, 15%); //darker.
-// $base-900: set-lightness($base, 25%);
-// $base-800: set-lightness($base, 35%);
-// $base-700: set-lightness($base, 45%);
-// $base-600: set-lightness($base, 55%); //Used as primary color.
-// $base-500: set-lightness($base, 65%);
-// $base-400: set-lightness($base, 75%);
-// $base-300: set-lightness($base, 85%);
-// $base-200: set-lightness($base, 90%);
-// $base-100: set-lightness($base, 95%); //brighter.
 
 //gray shades
 $gray-darkest: #303436;
@@ -34,79 +15,23 @@ $gray-dark: #4C4C4C;
 $gray-medium-dark: #AFB4B6;
 $gray-medium: #E4E6E7;
 $gray-light: #F2F2F3;
-// $gray-1000: set-lightness($gray, 5%);
-// $gray-900: set-lightness($gray, 10%);
-// $gray-800: set-lightness($gray, 20%);
-// $gray-700: set-lightness($gray, 30%);
-// $gray-600: set-lightness($gray, 40%);
-// $gray-500: set-lightness($gray, 50%);
-// $gray-400: set-lightness($gray, 60%);
-// $gray-300: set-lightness($gray, 70%);
-// $gray-200: set-lightness($gray, 80%);
-// $gray-100: set-lightness($gray, 90%);
-// $gray-000: set-lightness($gray, 95%);
 
 
-$success: #198754;
-$danger: #dc3545;
-$dark: #000000;
-$gray: #232323;
-$info: #008599;
-$main-bg: $gray-medium;
-$alert: #ffbb00;
-$body-bg: $white;
-$body-color: $white;
-$dropdown-link-color: $dark;
-$dropdown-link-hover-bg: $gray-medium;
-$dropdown-link-hover-color: $dark;
-$btn-color: $dark;
-$popover-body-color: $dark;
-$btn-disabled-border-color: $gray-medium;
+$success: $green-dark;
+$btn-color: $black;
+//no-code colors
 $no-code-success: #1B9C85;
 $no-code-secondary: #EA9389;
 $no-code-warning: #faad14;
 
 $theme-colors: (
   "primary": $primary,
-  "secondary": $secondary,
   "success": $success,
-  "danger": $danger,
   "black":$black,
-  "dark": $dark,
   "white": $white,
-  "gray": $gray,
-  "info": $info,
-  "main-bg": $main-bg,
-  "body-bg":$white,
-  "body-color":$white,
-  "input-color": $dark,
-  "btn-disabled-border-color":$btn-disabled-border-color,
 );
 
 $custom-colors: (
-  // "base-1000": $base-1000, //darker
-  // "base-900": $base-900,
-  // "base-800": $base-800,
-  // "base-700": $base-700,
-  // "base-600": $base-600, //primary
-  // "base-500": $base-500,
-  // "base-400": $base-400,
-  // "base-300": $base-300,
-  // "base-200": $base-200,
-  // "base-100": $base-100, //lighter
-
-  // "gray-1000": $gray-1000, //darker
-  // "gray-900": $gray-900,
-  // "gray-800": $gray-800,
-  // "gray-700": $gray-700,
-  // "gray-600": $gray-600,
-  // "gray-500": $gray-500,
-  // "gray-400": $gray-400,
-  // "gray-300": $gray-300,
-  // "gray-200": $gray-200,
-  // "gray-100": $gray-100,
-  // "gray-000": $gray-000, //lighter
-
   //blue shades
   "primary": $primary,
   "primary-light": $primary-light,
@@ -121,21 +46,8 @@ $custom-colors: (
   //others
   "black": $black,
   "white": $white,
-  "live": $live,
-  "red-000": $red-000,
-  //old colors - to be removed.
-  // "primary-100": tint-color($primary, 95%),
-  // "primary-200": tint-color($primary, 60%),
-  // "primary-300": tint-color($primary, 20%),
-  // "primary-400": tint-color($primary, 10%),
-  // "primary-500": shade-color($primary, 10%),
-  // "primary-600": shade-color($primary, 40%),
-  // "primary-700": shade-color($primary, 60%),
-  // "danger-200": tint-color($danger, 80%),
-  // "danger-400": tint-color($danger, 40%),
-  // "success-200": tint-color($success, 85%),
-  // "alert-200": tint-color($alert, 80%),
-  // "alert-400": tint-color($alert, 55%),
+  "green": $green,
+  "danger": $danger,
 );
 
 // Merge the maps
@@ -210,14 +122,6 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --shadow-3xl: 0px 24px 48px -8px rgba(48, 52, 54, 0.016);
   --shadow-nav: 4px 0px 8px -2px rgba(48, 52, 54, 0.08);
   //radius
-  // --radius-025: 0.25rem;
-  // --radius-050: 0.5rem;
-  // --radius-075: 0.75rem;
-  // --radius-0100: 1rem;
-  // --radius-0125: 1.25rem;
-  // --radius-0150: 1.5rem;
-  // --radius-200: 2rem;
-
   --radius-sm: 1.09375rem; //17.5px
   --radius-md: 1.34375rem; //21.5px
   --radius-lg: 1.59375rem; //25.5px
@@ -235,7 +139,7 @@ body {
 }
 
 .info-background {
-  background-color: var(--ff-danger-200);
+  background-color: var(--ff-danger);
 }
 
 .custom_primary_color {
diff --git a/forms-flow-theme/scss/_typography.scss b/forms-flow-theme/scss/_typography.scss
index 4d883e7e4..f0255628d 100644
--- a/forms-flow-theme/scss/_typography.scss
+++ b/forms-flow-theme/scss/_typography.scss
@@ -1,5 +1,6 @@
 $gray-darkest: var(--ff-gray-darkest);
 $primary: var(--ff-primary);
+$black-color: var(--ff-black);
 .input-group-text {
   color: $gray-darkest !important;
 }
@@ -20,7 +21,7 @@ a {
 }
 
 .list-group-item:first-child, .list-group-item + .list-group-item {
-  color: var(--ff-dark);
+  color: $black-color;
 }
 
 .application-head {
diff --git a/forms-flow-theme/scss/_variables.scss b/forms-flow-theme/scss/_variables.scss
index f28ecd12c..5fb06d072 100644
--- a/forms-flow-theme/scss/_variables.scss
+++ b/forms-flow-theme/scss/_variables.scss
@@ -3,6 +3,7 @@ $gray-darkest: var(--ff-gray-darkest);
 $gray-medium: var(--ff-gray-medium);
 $gray-medium-dark: var(--ff-gray-medium-dark);
 $primary-color: var(--ff-primary);
+$danger-color: var(--ff-danger);
 .task-container {
   height: 100% !important;
 }
@@ -29,7 +30,7 @@ $primary-color: var(--ff-primary);
 }
 
 .is-invalid {
-  background-color: var(--ff-danger-400);
+  background-color: $danger-color;
 }
 
 .active-tab {
@@ -77,8 +78,8 @@ $primary-color: var(--ff-primary);
 }
 
 .taskvariable-alert {
-  background-color: var(--ff-alert-200) !important;
-  border: solid 0.125rem var(--ff-alert-400) !important;
+  background-color: $danger-color !important;
+  border: solid 0.125rem $danger-color!important;
 }
 
 .select {
@@ -200,7 +201,7 @@ hr {
 
 .main-container {
   overflow: hidden !important;
-  background: var(--ff-main-bg);
+  background: $gray-medium;
   margin-left: var(--navbar-width);
   margin-top: 0;
   height: 100vh !important;
diff --git a/forms-flow-theme/scss/external/formio.scss b/forms-flow-theme/scss/external/formio.scss
index e24d465f0..24d1bcc29 100644
--- a/forms-flow-theme/scss/external/formio.scss
+++ b/forms-flow-theme/scss/external/formio.scss
@@ -1,6 +1,8 @@
 // Variables for reused values
 $primary: var(--ff-primary);
 $primary-light: var(--ff-primary-light);
+$gray-darkest: var(--ff-gray-darkest);
+$gray-dark: var(--ff-gray-dark);
 
 .btn-group-xxs>.btn, .btn-xxs, .component-btn-group .component-settings-button{
     width: auto !important;
@@ -19,7 +21,7 @@ $primary-light: var(--ff-primary-light);
   }
 
   .formbuilder .formarea .breadcrumb {
-    background-color: $gray-800 !important;
+    background-color: $gray-darkest !important;
     padding: 10px;
   }
   .formbuilder .formarea .breadcrumb li{
@@ -32,7 +34,7 @@ $primary-light: var(--ff-primary-light);
     background-color: $success;
   }
    .formbuilder .formarea .breadcrumb li .badge-info{
-    background-color: $gray-600;
+    background-color: $gray-dark;
   }
 
   // Settings button on hovering formio component
diff --git a/forms-flow-theme/scss/fileUpload.scss b/forms-flow-theme/scss/fileUpload.scss
index 02494150a..35164fca3 100644
--- a/forms-flow-theme/scss/fileUpload.scss
+++ b/forms-flow-theme/scss/fileUpload.scss
@@ -2,7 +2,7 @@ $primary: var(--ff-primary);
 $ff-white: var(--ff-white);
 $gray-darkest: var(--ff-gray-darkest);
 $gray-medium: var(--ff-gray-medium);
-$ff-red: var(--ff-red-000);
+$ff-red: var(--ff-danger);
 $font-size-xs: var(--font-size-xs);
 
 .file-upload {
@@ -26,7 +26,7 @@ $font-size-xs: var(--font-size-xs);
 }
 
 .upload-text {
-  color: $gray-800;
+  color: $gray-darkest;
   text-align: center;
   font-size: $font-size-xs;
   font-weight: var(--font-weight-sm);
@@ -36,7 +36,7 @@ $font-size-xs: var(--font-size-xs);
 }
 
 .upload-size-text {
-  color: $gray-400;
+  color: $gray-medium-dark;
   text-align: center;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-sm);
@@ -44,7 +44,7 @@ $font-size-xs: var(--font-size-xs);
 }
 
 .upload-text-description {
-  color: $gray-400;
+  color: $gray-medium-dark;
   text-align: center;
   font-size: $font-size-xs;
   font-weight: var(--font-weight-sm);
@@ -107,7 +107,7 @@ $font-size-xs: var(--font-size-xs);
 }
 
 .upload-status-progress {
-  @include upload-status-styles($gray-400);
+  @include upload-status-styles($gray-medium-dark);
 }
 
 .progress {
diff --git a/forms-flow-theme/scss/inputBox.scss b/forms-flow-theme/scss/inputBox.scss
index f48977a6e..75ed35ac9 100644
--- a/forms-flow-theme/scss/inputBox.scss
+++ b/forms-flow-theme/scss/inputBox.scss
@@ -1,7 +1,7 @@
 $form-input-border-radius: var(--radius-lg);
 $primary: var(--ff-primary);
 $form-input-focus-outline: 2px solid var(--ff-primary);
-$red-000: var(--ff-red-000);
+$danger-color: var(--ff-danger);
 $input-error-box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
 $gray-medium: var(--ff-gray-medium);
 $white-color: var(--ff-white);
@@ -36,14 +36,14 @@ $white-color: var(--ff-white);
 }
 
 .input-error {
-  border-color: $red-000 !important;
+  border-color: $danger-color !important;
   outline: none;
   box-shadow: $input-error-box-shadow;
 }
 
 .validation-text {
   font-size: small;
-  color: $red-000 !important;
+  color: $danger-color !important;
 }
 
 .validation-astrisk {

From 8e31af6594aa4b56d84b575717bbeb7bf52cc11f Mon Sep 17 00:00:00 2001
From: Ajay krishna <ajay.k@aot-technologies.com>
Date: Thu, 6 Feb 2025 13:34:49 +0530
Subject: [PATCH 2/3] style issue fix

---
 forms-flow-theme/scss/_button.scss    | 3 ++-
 forms-flow-theme/scss/_icon.scss      | 4 ++--
 forms-flow-theme/scss/_variables.scss | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss
index f3bff20b0..a88500bc8 100644
--- a/forms-flow-theme/scss/_button.scss
+++ b/forms-flow-theme/scss/_button.scss
@@ -82,12 +82,13 @@ $danger-color: var(--ff-danger);
 
 
 .bg-primary {
-  background-color: $primary!important;
+  background-color: $primary !important;
 }
 
 .table-primary {
   --bs-table-color: #fff;
   --ff-table-bg: $primary !important;
+  background-color: $primary !important;
 }
 
 .btn-wizard-nav-submit,
diff --git a/forms-flow-theme/scss/_icon.scss b/forms-flow-theme/scss/_icon.scss
index 1bc254ad5..5b0357c4a 100644
--- a/forms-flow-theme/scss/_icon.scss
+++ b/forms-flow-theme/scss/_icon.scss
@@ -1,10 +1,10 @@
-$primary-light: var(--ff-primary-light);
+$primary: var(--ff-primary);
 .icon-wp-forms {
   height: 30px;
 }
 
 i.fa.fa-question-circle.text-muted {
-  color: $primary-light !important;
+  color: $primary !important;
 }
 .icon-wrapper-change {
   cursor: pointer;
diff --git a/forms-flow-theme/scss/_variables.scss b/forms-flow-theme/scss/_variables.scss
index 5fb06d072..45b2d8468 100644
--- a/forms-flow-theme/scss/_variables.scss
+++ b/forms-flow-theme/scss/_variables.scss
@@ -1,6 +1,7 @@
 $prefix: "ff-";
 $gray-darkest: var(--ff-gray-darkest);
 $gray-medium: var(--ff-gray-medium);
+$gray-light: var(--ff-gray-light);
 $gray-medium-dark: var(--ff-gray-medium-dark);
 $primary-color: var(--ff-primary);
 $danger-color: var(--ff-danger);
@@ -201,7 +202,7 @@ hr {
 
 .main-container {
   overflow: hidden !important;
-  background: $gray-medium;
+  background: $gray-light;
   margin-left: var(--navbar-width);
   margin-top: 0;
   height: 100vh !important;

From ba455924957d7a40acec5971bd092d8a832ba6df Mon Sep 17 00:00:00 2001
From: Ajay krishna <ajay.k@aot-technologies.com>
Date: Mon, 10 Feb 2025 16:17:38 +0530
Subject: [PATCH 3/3] style changes in button and fileUpload

---
 forms-flow-theme/scss/_button.scss    | 37 +++++++++++++++++----------
 forms-flow-theme/scss/fileUpload.scss |  5 ++--
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss
index a88500bc8..2c792cb8d 100644
--- a/forms-flow-theme/scss/_button.scss
+++ b/forms-flow-theme/scss/_button.scss
@@ -123,6 +123,12 @@ $danger-color: var(--ff-danger);
   width: fit-content;
 }
 
+.btn-disabled {
+  background-color: $gray-medium-dark !important;
+  color: var(--primary-btn-font-color) !important;
+  border-color: $gray-medium-dark !important;
+}
+
 .btn {
   border: none !important;
   display: inline-flex !important;
@@ -153,9 +159,7 @@ $danger-color: var(--ff-danger);
     }
 
     &.btn:disabled {
-      background-color: $gray-medium-dark !important;
-      color: var(--primary-btn-font-color) !important;
-      border-color: $gray-medium-dark !important;
+      @extend .btn-disabled;
     }
 
     &+.dropdown-toggle+.dropdown-menu {
@@ -190,6 +194,9 @@ $danger-color: var(--ff-danger);
     &:focus {
       outline: none !important;
     }
+    &.btn:disabled {
+      @extend .btn-disabled;
+    }
   }
 
   &.btn-dark {
@@ -221,12 +228,18 @@ $danger-color: var(--ff-danger);
     }
   }
 
-  &.btn-sm {
-    font-size: var(--font-size-xs) !important;
+  &.btn-table {
     padding: var(--spacer-050) var(--spacer-100) !important;
-    font-weight: var(--font-weight-xl) !important;
     border-radius: var(--radius-sm) !important;
+    line-height: var(--text-line-height);
+  }
 
+  &.btn-sm {
+    font-size: var(--font-size-xs) !important;
+    padding: var(--spacer-075) var(--spacer-100) !important;
+    font-weight: var(--font-weight-xl) !important;
+    border-radius: var(--radius-md) !important;
+    line-height: var(--text-line-height);
     ~.dropdown-menu .dropdown-item {
       font-size: var(--font-size-xs);
       font-weight: var(--font-weight-xl) !important;
@@ -240,11 +253,10 @@ $danger-color: var(--ff-danger);
   }
 
   &.btn-md {
-    font-size: var(--font-size-sm) !important;
-    padding: var(--spacer-075) var(--spacer-150) !important;
-    font-weight: var(--font-weight-xl) !important;
+    padding: var(--spacer-100) var(--spacer-150) !important;
+    font-weight: var(--font-weight-lg) !important;
     border-radius: var(--radius-md) !important;
-
+    line-height: var(--text-line-height);
     ~.dropdown-menu .dropdown-item {
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-xl) !important;
@@ -258,11 +270,10 @@ $danger-color: var(--ff-danger);
   }
 
   &.btn-lg {
-    font-size: var(--font-size-sm) !important;
-    padding: var(--spacer-100) var(--spacer-200) !important;
+    padding: var(--spacer-100) var(--spacer-150) !important;
     font-weight: var(--font-weight-xl) !important;
     border-radius: var(--radius-lg) !important;
-
+    line-height: var(--text-line-height);
     ~.dropdown-menu .dropdown-item {
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-xl) !important;
diff --git a/forms-flow-theme/scss/fileUpload.scss b/forms-flow-theme/scss/fileUpload.scss
index 35164fca3..bb4e3fd88 100644
--- a/forms-flow-theme/scss/fileUpload.scss
+++ b/forms-flow-theme/scss/fileUpload.scss
@@ -2,7 +2,8 @@ $primary: var(--ff-primary);
 $ff-white: var(--ff-white);
 $gray-darkest: var(--ff-gray-darkest);
 $gray-medium: var(--ff-gray-medium);
-$ff-red: var(--ff-danger);
+$gray-medium-dark: var(--ff-gray-medium-dark);
+$danger: var(--ff-danger);
 $font-size-xs: var(--font-size-xs);
 
 .file-upload {
@@ -103,7 +104,7 @@ $font-size-xs: var(--font-size-xs);
 }
 
 .upload-status-error {
-  @include upload-status-styles($ff-red);
+  @include upload-status-styles($danger);
 }
 
 .upload-status-progress {