Merge pull request #216 from Safelite/CSR-262-error-styling

CSR-266 Fix list-card colors and focus/active state of secondary button.

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>

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;