From 5bbb6dc9f5ff20adccabfef7e5d6102bff6b0596 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 15 Feb 2022 17:00:11 -0500
Subject: [PATCH] CSR-266 update styles.

---
 src/layouts/component-test/component-test.vue |  2 +-
 src/styles/common-error-styles.scss           | 14 +++++++++++---
 src/ux-components/button-main/button-main.vue |  8 ++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 3f1ae5ad9..42d00a906 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -62,7 +62,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain buttonText="secondary" loaderColor="white" sizeInRem="1" />
+        <buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
       </div>
     </div>
     <div class="row">
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 331c508a5..491d6d926 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -2,16 +2,24 @@
   &.list-button,
   &.list-card,
   &.list-button-horizontal {
+    border: 1px solid transparent;
+    box-shadow: 0 0 0 1px $red;
     color: $red;
     label {
-      border: 1px solid $red;
+      box-shadow: 0 0 0 2.5px $red;
+      border-radius: .5rem;
     }
   }
+  input[type=checkbox]:focus + label,
+  input[type=radio]:checked + label {
+    box-shadow: 0 0 0 2.5px transparent;
+  }
 }
 
 .form-test-error {
   color: $red;
-  font-weight: bold;
+  font-size: .875rem;
+  font-weight: 500;
 }
 
 .form-test-invalid {
@@ -28,4 +36,4 @@
     box-shadow: none;
   }
 
-}
\ No newline at end of file
+}
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 79cf5bb22..f36c018d2 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -85,6 +85,10 @@ export default {
       border: none;
       border-radius: $border-radius-lg;
     }
+    &.has-loader {
+      color: $white;
+      background: $blue-700;
+    }
   }
   &.btn-secondary {
     position: relative;
@@ -97,6 +101,10 @@ export default {
       color: $white;
       @include blue-gradient;
     }
+    &:active {
+      @include blue-gradient;
+      color: $white;
+    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
       // Keyboard focus for accessibility