Merge pull request #206 from Safelite/CSR-241-qa-updates

CSR-241 QA color updates.

src/layouts/component-test/component-test.vue

@@ -674,19 +674,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3">
-        <textLink navigation="true" text="Navigation Link" /><br /><br />
-        <textLink text="Default Link" /><br /><br />
-        <textLink textSmall="true" text="Small Link" /><br /><br />
-        <textLink footer="true" text="Footer Link" href="https://google.com" />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -926,16 +913,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Funnel Footer</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <funnelFooter/>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -950,7 +927,6 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
 import textLink from "@/ux-components/text-link/text-link";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
   name: "App",
   components: {
@@ -963,8 +939,7 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
-    textLink,
+    textLink
-    funnelFooter
   },
   data() {
     return {

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -153,7 +153,7 @@ export default {
     width: 100%;
     color: $gray-600;
     &:hover {
-      box-shadow: 0 0 0 4px $blue-100;
+      box-shadow: 0 0 0 4px $blue-300;
       cursor: pointer;
       z-index: 2;
     }

src/ux-components/list-button/list-button.vue

@@ -133,7 +133,7 @@ export default {
       position: static; //override bootstrap
       height: 0;
       opacity: 0;
-    
+
       &:focus-visible + label {
         box-shadow: 0 0 0 2.5px $blue inset;
       }
@@ -162,7 +162,7 @@ export default {
 
     &:hover {
       @include media-breakpoint-up(sm) {
-        box-shadow: 0 0 0 4px $blue-100;
+        box-shadow: 0 0 0 4px $blue-300;
       }
       cursor: pointer;
     }

src/ux-components/list-card/list-card.vue

@@ -32,12 +32,12 @@
         >
           {{buttonLabel}}
         </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
           {{buttonLabelSubCopy}}
         </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+          <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
             {{ buttonLabelSubCopy }}
           </p>
         </div>
@@ -134,7 +134,7 @@ export default {
     max-width: 100%;
   }
   &:hover {
-    box-shadow: 0px 0px 0px 6px $blue-100;
+    box-shadow: 0px 0px 0px 4px $blue-300;
     border: 1px solid transparent;
   }
   input[type="checkbox"],
@@ -150,6 +150,9 @@ export default {
       }
       p {
         text-align: center;
+        &.sub-copy {
+          color: $gray-550;
+        }
       }
     }
     &:focus + label {
@@ -237,6 +240,9 @@ export default {
         }
         p {
           text-align: left;
+          &.sub-copy {
+            color: $gray-550;
+          }
         }
       }
     }