From 68ccfcbb15dbdb9ba2b4b6af7930d5a461f72dfe Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 28 Feb 2022 10:37:43 -0500
Subject: [PATCH 1/2] Adjusting button-question so question text is always
 black font and adjusting list-card padding bottom to 3 rem

---
 src/common-components/button-question/button-question.vue | 8 +++++---
 src/ux-components/list-card/list-card.vue                 | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 805afbc1a..2c5d1168f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,6 +1,6 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
-  <div :class="isOverflowScrollable ? 'button_question' : ''">
+  <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
     <div v-if="questionText" class="mt-5 mb-4 d-flex">
       <span class="text-center fs-5 fw-bold w-100">{{ questionText }}</span>
     </div>
@@ -146,8 +146,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.button_question {
-  color: $black;
+.button-question-overflow {
   height: calc(100vh - 280px);
 
   .overflow-scroll {
@@ -156,4 +155,7 @@ export default {
     -webkit-overflow-scrolling: touch;
   }
 }
+.button-question {
+  color: $black;
+}
 </style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 526744af5..af20ab797 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -17,7 +17,7 @@
       />
       <label
         :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
+        class="d-flex w-100 align-items-center px-3 h-100"
         :class="getLabelClasses" tabindex="-1"
       >
         <img

From cec09ad185121d468db176bec5657d7c42e80b3c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 28 Feb 2022 10:46:41 -0500
Subject: [PATCH 2/2] Fixing padding change to padding bottom and updating unit
 test to reflect

---
 src/ux-components/list-card/list-card.spec.js | 2 +-
 src/ux-components/list-card/list-card.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 2176e683d..398c89c78 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -188,7 +188,7 @@ describe("list-card.vue", () => {
 
     // Assert
     const label = wrapper.find("label");
-    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
   });
 
   it("Should emit button value on click", async () => {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index af20ab797..a939b5a94 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -17,7 +17,7 @@
       />
       <label
         :for="buttonID"
-        class="d-flex w-100 align-items-center px-3 h-100"
+        class="d-flex w-100 align-items-center px-2 h-100"
         :class="getLabelClasses" tabindex="-1"
       >
         <img
@@ -92,7 +92,7 @@ export default {
         }
         return classes;
       } else {
-        return "flex-column pt-4 pb-2";
+        return "flex-column pt-4 pb-3";
       }
     },
   },