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;
+      color: $blue;
-      @include blue-gradient;
+      //@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

@@ -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;