From ff1c1c9d7fdba569155af16ed9d5df205a9b8f12 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 15 Feb 2022 15:41:09 -0500
Subject: [PATCH 1/6] CSR-266 qa updates

---
 src/ux-components/button-main/button-main.vue | 11 ++++++++---
 src/ux-components/list-card/list-card.vue     | 15 ++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index e14c29f9c..79cf5bb22 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -2,7 +2,7 @@
   <button
     :aria-disabled="isDisabled"
     class="btn d-flex align-items-center py-3 px-2"
-    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >
     <span class="m-0">{{ this.buttonText }}</span>
@@ -102,8 +102,9 @@ export default {
       // Keyboard focus for accessibility
       outline: none;
       box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
-      color: $white;
-      @include blue-gradient;
+      color: $blue;
+      //@include blue-gradient;
+      background: $white;
     }
     &:disabled {
       background: transparent;
@@ -112,6 +113,10 @@ export default {
       border: 1px solid $gray-300;
       border-radius: $border-radius-lg;
     }
+    &.has-loader {
+      color: $white;
+      @include blue-gradient;
+    }
   }
 }
 </style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7550c9ec4..7dd9ef207 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="'col' + colLength">
-    <div 
+    <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
     >
@@ -108,11 +108,11 @@ export default {
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const { 
+    const {
         value: inputValue,
         handleChange,
         errors,
-    } = useField(props.groupName, props.validationRules, 
+    } = useField(props.groupName, props.validationRules,
     {
       type: inputType,
       checkedValue: props.value,
@@ -155,6 +155,7 @@ export default {
         cursor: pointer;
       }
       p {
+        color: $gray-600;
         text-align: center;
         &.sub-copy {
           color: $gray-550;
@@ -170,6 +171,14 @@ export default {
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
+    &:checked + label {
+      p {
+        color: $black;
+      }
+      .sub-copy {
+        color: $gray-600;
+      }
+    }
     + label::before {
       content: "";
       position: absolute;

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 2/6] 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

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 3/6] 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>

From e2e7f194b48ada80ab29ebd6853ad766747ed261 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 08:57:23 -0500
Subject: [PATCH 4/6] CSR-262 validation styling updates.

---
 .../button-question/button-question.vue            |  2 +-
 src/layouts/component-test/component-test.vue      |  1 -
 src/layouts/form-test/form-test.vue                |  3 ++-
 src/styles/common-error-styles.scss                | 14 +++++++++-----
 src/ux-components/button-main/button-main.vue      |  2 +-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 5df9531df..b3ea56043 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -37,7 +37,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+    <div class="row mt-2 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 42d00a906..43d67533f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -18,7 +18,6 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 1e6d0d7b2..f12abb261 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -8,7 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ values, meta, errors }"
-        >        
+        >
             <damageLocationQuestion
               ref="damageLocation"
               v-model="selectedDamageLocations"
@@ -20,6 +20,7 @@
               :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
             />
             <alert
+              class="my-3"
               v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 491d6d926..71ae4f2f3 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,18 +1,22 @@
 .has-error {
   &.list-button,
-  &.list-card,
-  &.list-button-horizontal {
+  &.list-card {
     border: 1px solid transparent;
-    box-shadow: 0 0 0 1px $red;
     color: $red;
     label {
-      box-shadow: 0 0 0 2.5px $red;
+      border: 1px solid $red;
       border-radius: .5rem;
     }
   }
   input[type=checkbox]:focus + label,
   input[type=radio]:checked + label {
-    box-shadow: 0 0 0 2.5px transparent;
+    box-shadow: 0 0 0 2.5px transparent !important;
+  }
+  &.list-button-horizontal {
+    color: $red;
+    label {
+      border: 1px solid $red;
+    }
   }
 }
 
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index c916ab12b..e4a3e6acb 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 delay"
+    class="btn d-flex align-items-center py-3 px-4 delay"
     :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >

From c3f308cf7e2f8193e220aa949187ca77b518299e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 11:29:40 -0500
Subject: [PATCH 5/6] Update validation styling, add cursor to disabled button.

---
 src/styles/common-error-styles.scss           |  5 ++++-
 src/ux-components/button-main/button-main.vue | 10 ++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 71ae4f2f3..880d54acc 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -9,6 +9,8 @@
     }
   }
   input[type=checkbox]:focus + label,
+  input[type=radio]:focus + label,
+  input[type=checkbox]:checked + label,
   input[type=radio]:checked + label {
     box-shadow: 0 0 0 2.5px transparent !important;
   }
@@ -30,7 +32,8 @@
   &.btn.btn-primary {
     color: $gray;
     background: $gray-200;
-    cursor: default;
+    cursor: pointer;
+    pointer-events: all;
   }
   &.btn.btn-primary:hover,
   &.btn.btn-primary:focus,
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index e4a3e6acb..3b8b744f5 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -76,16 +76,18 @@ export default {
       );
     }
     &:disabled {
-      background: $gray-100 !important;
+      background: $gray-200 !important;
       background: linear-gradient(
         270deg,
-        $gray-100 0%,
-        $gray-100 100%
+        $gray-200 0%,
+        $gray-200 100%
       ) !important;
-      color: $gray !important;
+      color: $gray-550 !important;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
     }
     &.has-loader {
       color: $white;

From 4f435164540605f6d71aa7ad46c8cbf9d78a1e3c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 11:38:57 -0500
Subject: [PATCH 6/6] Fix border issue on list-card-horizontal.

---
 .../list-button-horizontal/list-button-horizontal.vue            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 5044a7fb0..60208e3c0 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -166,6 +166,7 @@ export default {
     label {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
+      z-index: 2;
     }
   }
   &:last-of-type {