SSR-1924 Fix custom client loader color

src/iss-components/site-footer/site-footer.vue

@@ -18,7 +18,6 @@
                         ref="buttonMain"
                         isPrimary
                         :buttonText="buttonText"
-                        loaderColor="white"
                         :class="
                             (disableForwardAction || isForwardActionDisabled) &&
                             'form-test-invalid'

src/styles/client-customizations.scss

@@ -12,6 +12,9 @@
     $button-text-color: #181643;
     $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
 
+    //Variables
+    --iss-loader-color: #{$button-text-color};
+
     .site-header {
         background-color: $header-background;
     }
@@ -47,12 +50,6 @@
 
             }
         }
-
-        .loader {
-            &:after {
-                background-color: $button-text-color;
-            }
-        }
     }
 
     &.modal-open {
@@ -100,6 +97,9 @@
     $button-text-color: #fff;
     $svg-fill-color: '%231574a1'; // Color of calendar icon. Place HEX code *after* %23
 
+    //Variables
+    --iss-loader-color: #{$button-text-color};
+
     .site-header {
         background-color: $header-background;
     }
@@ -137,12 +137,6 @@
 
             }
         }
-
-        .loader {
-            &:after {
-                background-color: $button-text-color;
-            }
-        }
     }
 
     &.modal-open {
@@ -190,6 +184,9 @@
     $button-text-color: #fff;
     $svg-fill-color: '%231c57a5'; // Color of calendar icon. Place HEX code *after* %23
 
+    //Variables
+    --iss-loader-color: #{$button-text-color};
+
     .site-header {
         background-color: $header-background;
     }
@@ -225,12 +222,6 @@
 
             }
         }
-
-        .loader {
-            &:after {
-                background-color: $button-text-color;
-            }
-        }
     }
 
     &.modal-open {
@@ -278,6 +269,9 @@
     $button-text-color: #fff;
     $svg-fill-color: '%23007a3e'; // Color of calendar icon. Place HEX code *after* %23
 
+    //Variables
+    --iss-loader-color: #{$button-text-color};
+
     .site-header {
         background-color: $header-background;
     }
@@ -313,12 +307,6 @@
 
             }
         }
-
-        .loader {
-            &:after {
-                background-color: $button-text-color;
-            }
-        }
     }
 
     &.modal-open {
@@ -366,6 +354,9 @@
     $button-text-color: #fff;
     $svg-fill-color: '%23007395'; // Color of calendar icon. Place HEX code *after* %23
 
+    //Variables
+    --iss-loader-color: #{$button-text-color};
+
     .site-header {
         background-color: $header-background;
     }
@@ -401,12 +392,6 @@
 
             }
         }
-
-        .loader {
-            &:after {
-                background-color: $button-text-color;
-            }
-        }
     }
 
     &.modal-open {

src/styles/common-styles.scss

@@ -124,4 +124,8 @@ body {
             height: auto;
         }
     }
+}
+
+:root {
+    --iss-loader-color: white;
 }

src/ux-components/button-main/button-main.vue

@@ -12,7 +12,7 @@
         <loader
             v-if="isLoaderDisplayed && !suppressLoader"
             class="ms-2"
-            :class="[loaderColor, loaderPosition]" />
+            :class="[loaderPosition]" />
     </button>
 </template>
 
@@ -28,7 +28,6 @@ export default {
         isPrimary: Boolean,
         buttonText: String,
         isDisabled: Boolean,
-        loaderColor: String,
         loaderPosition: String,
         isFloat: Boolean,
         suppressLoader: Boolean
@@ -69,8 +68,8 @@ export default {
         @media (hover: hover) {
             background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
-         // Mouse, touch, stylus focus
-    &:focus-visible {
+        // Mouse, touch, stylus focus
+        &:focus-visible {
             // Keyboard focus for accessibility
             outline: none;
             box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
@@ -112,7 +111,7 @@ export default {
             @include blue-gradient;
         }
         &:focus, // Mouse, touch, stylus focus
-    &:focus-visible {
+        &:focus-visible {
             // Keyboard focus for accessibility
             outline: none;
             box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;

src/ux-components/loader/loader.vue

@@ -21,10 +21,6 @@ export default {
             type: Boolean,
             default: false
         },
-        /* Color options: red, green, blue, white, black */
-        loaderColor: {
-            type: String
-        },
         /* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
         loaderPosition: {
             type: String
@@ -112,20 +108,7 @@ export default {
   }
   //Spinner color
   &:after {
-      //Default spinner color (blue) if no other color is specified from the options below
-      background-color: $blue;
-  }
-  &.red:after {
-      background-color: $red;
-  }
-  &.green:after {
-      background-color: $green;
-  }
-  &.white:after {
-      background-color: $white;
-  }
-  &.black:after {
-      background-color: $black;
+      background-color: var(--iss-loader-color);
   }
 }
 </style>