From c25181797d8aec47a831e788049efd3d68310046 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Tue, 9 Nov 2021 13:53:07 -0500
Subject: [PATCH] Update color variables per updated Figma file. Add mixin for
 blue gradient background. Update button spinner to display white on blue
 background and blue on white background.

---
 src/styles/commonButtonStyles.scss | 20 ++++++++++++++++--
 src/styles/commonStyles.scss       |  7 ++++++
 src/styles/uxVariables.scss        | 34 +++++++++++++++---------------
 3 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/styles/commonButtonStyles.scss b/src/styles/commonButtonStyles.scss
index 4f409cb76..889b3a3f5 100644
--- a/src/styles/commonButtonStyles.scss
+++ b/src/styles/commonButtonStyles.scss
@@ -3,7 +3,7 @@
   &.btn-primary {
     position: relative;
     background: $blue-700;
-    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+    @include blue-gradient;
     border: none;
     border-radius: $border-radius-lg;
     height: 48px;
@@ -53,7 +53,7 @@
     transition: all 150ms linear;
     &:hover {
       color: $white;
-      background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+      @include blue-gradient;
     }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible { // Keyboard focus for accessibility
@@ -76,6 +76,22 @@
           }
         }
       }
+      &:focus:hover {
+        &:after {
+          content: url(../../assets/img/icons/button-spinner-white.svg);
+          position: absolute;
+          right: 14px;
+          width: 16px;
+          height: 16px;
+          margin-left: 12px;
+          animation: rotation 1s infinite linear;
+          @keyframes rotation {
+            100% {
+              transform:rotate(360deg);
+            }
+          }
+        }
+      }
     }
     &:disabled {
       background: transparent;
diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss
index ab36e35c5..d47d79fa4 100644
--- a/src/styles/commonStyles.scss
+++ b/src/styles/commonStyles.scss
@@ -22,3 +22,10 @@ body {
       cursor: pointer;
     }
   }
+
+//Custom Mixins
+
+//Blue gradient background mixin
+@mixin blue-gradient {
+  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+}
diff --git a/src/styles/uxVariables.scss b/src/styles/uxVariables.scss
index c6c1fb8ba..31ad10d5d 100644
--- a/src/styles/uxVariables.scss
+++ b/src/styles/uxVariables.scss
@@ -2,7 +2,7 @@
 
 // White/black
 $white:    #FFFFFF;
-$black:    #000;
+$black:    #000000;
 
 // Blues
 $blue-100:   #E4F1F7;// Used in theme
@@ -17,35 +17,35 @@ $blue-900:   #002433;// Used in theme
 
 // Reds
 $red-100:    #FFE6E4;
-$red-200:    #FDC0BB;
-$red-300:    #FB9A93;
-$red-400:    #EB5E54;
-$red:        #DA291C;// Default Red
-$red-600:    #B0160B;
-$red-700:    #870900;
-$red-800:    #5D0600;
+$red-200:    #FCBFBB;
+$red-300:    #F89892;
+$red-400:    #E65C53;
+$red:        #D4281C;// Default Red
+$red-600:    #AC160B;
+$red-700:    #840900;
+$red-800:    #5B0600;
 $red-900:    #330300;
 
 // Greens
 $green-100:  #E3F2EA;
 $green-200:  #BCEDD4;
 $green-300:  #94D7B6;
-$green-400:  #EB594F;// Used in theme
+$green-400:  #5ABC8C;// Used in theme
 $green-500:  #2CA168;
-$green:      #C40E01;// Default Green
+$green:      #0C7E47;// Default Green
 $green-700:  #006A36;
 $green-800:  #004F28;
 $green-900:  #00331A;
 
 // Yellows
 $yellow-100: #FFF5EB;
-$yellow-200: #FFE7C7;
-$yellow-300: #FFD8A1;
-$yellow-400: #FFB25C;
-$yellow:     #F88F1C;// Default Yellow
-$yellow-600: #C76902;
-$yellow-700: #964E00;
-$yellow-800: #643400;
+$yellow-200: #FFE1C6;
+$yellow-300: #FFCAA0;
+$yellow-400: #F5975D;
+$yellow:     #E86421;// Default Yellow
+$yellow-600: #BB4B06;
+$yellow-700: #8E3C00;
+$yellow-800: #602D00;
 $yellow-900: #331A00;
 
 // Grays