From 1eff8b58a9648be269b6c5c88861bcc7cc50d381 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 14:55:13 -0500
Subject: [PATCH] CSR-241 QA color updates.

---
 src/layouts/component-test/component-test.vue | 27 +------------------
 .../list-button-horizontal.vue                |  2 +-
 src/ux-components/list-button/list-button.vue |  4 +--
 src/ux-components/list-card/list-card.vue     | 12 ++++++---
 4 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index fdb92ab23..e20892105 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/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,
-    funnelFooter
+    textLink
   },
   data() {
     return {
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 0751e3bca..034f97c07 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/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;
     }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 3256906e3..fcf4ae799 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/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;
     }
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c3f399404..95f886d5a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/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;
+          }
         }
       }
     }