Merge pull request #437 from Ajay-aot/bugfix/FWF-4305-color-corrections

color correction with new variables
AOT-Technologies · Feb 12, 2025 · bdf6e7c · bdf6e7c
2 parents 89a2939 + 8f47f01
commit bdf6e7c
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 160 deletions.
diff --git 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
@@ -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);
+$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
@@ -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
@@ -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
@@ -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 {
@@ -81,12 +82,13 @@ $btn-font-weight: bold;
 
 
 .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,
@@ -121,6 +123,12 @@ $btn-font-weight: bold;
   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;
@@ -151,9 +159,7 @@ $btn-font-weight: bold;
     }
 
     &.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 {
@@ -188,6 +194,9 @@ $btn-font-weight: bold;
     &:focus {
       outline: none !important;
     }
+    &.btn:disabled {
+      @extend .btn-disabled;
+    }
   }
 
   &.btn-dark {
@@ -219,12 +228,18 @@ $btn-font-weight: bold;
     }
   }
 
-  &.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;
@@ -238,11 +253,10 @@ $btn-font-weight: bold;
   }
 
   &.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;
@@ -256,11 +270,10 @@ $btn-font-weight: bold;
   }
 
   &.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/_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/_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/_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);
@@ -904,7 +905,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
@@ -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 {