From 6f89fddb4a2489b55ab667d7282fa7fa62c76a05 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 15 Feb 2022 18:58:24 -0500
Subject: [PATCH] CSR-266 refactor buttons per Rachel Figma update.

---
 src/ux-components/button-main/button-main.vue | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index f36c018d2..c916ab12b 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-2"
+    class="btn d-flex align-items-center py-3 px-2 delay"
     :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >
@@ -51,12 +51,10 @@ export default {
 .btn {
   &.btn-primary {
     position: relative;
-    background: $blue-700;
-    @include blue-gradient;
+    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
     border: none;
     border-radius: $border-radius-lg;
     color: $white;
-    transition: all 150ms linear;
     justify-content: center;
     &:hover {
       background: linear-gradient(
@@ -71,7 +69,11 @@ export default {
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
       color: $white;
-      @include blue-gradient;
+      background: linear-gradient(
+        270deg,
+        rgba(6, 87, 124, 1) 0%,
+        rgba(6, 87, 124, 1) 100%
+      );
     }
     &:disabled {
       background: $gray-100 !important;
@@ -89,6 +91,9 @@ export default {
       color: $white;
       background: $blue-700;
     }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
+    }
   }
   &.btn-secondary {
     position: relative;
@@ -101,18 +106,13 @@ export default {
       color: $white;
       @include blue-gradient;
     }
-    &:active {
-      @include blue-gradient;
-      color: $white;
-    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
       // Keyboard focus for accessibility
       outline: none;
       box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
-      color: $blue;
-      //@include blue-gradient;
-      background: $white;
+      color: $white;
+      @include blue-gradient;
     }
     &:disabled {
       background: transparent;
@@ -125,6 +125,9 @@ export default {
       color: $white;
       @include blue-gradient;
     }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
+    }
   }
 }
 </style>