From 3e179e4637ec2a5c670bbf2667ad42d4f42a8ac3 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 13 Jan 2026 15:27:01 -0500
Subject: [PATCH] UI updates

---
 .../policy-vehicles-question.vue              | 16 ++++----
 .../policy-vehicles/policy-vehicles.vue       |  2 +-
 src/styles/common-validation-styles.scss      | 41 +++++++++++++++++--
 src/ux-components/list-button/list-button.vue |  1 +
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
index 5f811333..82bca171 100644
--- a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
@@ -1,13 +1,13 @@
 <template>
     <buttonQuestion
-    ref="policyVehiclesQuestion"
-    v-model="selectedVehicleVin"
-    groupName="policyVehiclesQuestionOption"
-    buttonTypeString="listButton"
-    isOverflowScrollable
-    :answers="answers"
-    isRequired
-    :validationRules="validationRules" />
+        ref="policyVehiclesQuestion"
+        v-model="selectedVehicleVin"
+        groupName="policyVehiclesQuestionOption"
+        buttonTypeString="listButton"
+        isOverflowScrollable
+        :answers="answers"
+        isRequired
+        :validationRules="validationRules" />
 </template>
 <script>
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index d488faf8..e9080e58 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -122,7 +122,7 @@ export default {
                         vehicle: v,
                         Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
                         Name: v.vin,
-                        SubText: `VIN ${vinStart}${vinEnd}`
+                        SubText: `VIN: ${vinStart}${vinEnd}`
                     };
                 }) ?? [];
             return mappedData;
diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 50a7afca..02a7b48b 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -29,6 +29,7 @@ html {
 
         &.list-card {
             border: 1px solid $red;
+            border-radius: 0.5rem;
         }
 
         &.ui-radio {
@@ -49,8 +50,7 @@ html {
 
         // END HOVER
 
-        &.list-button,
-        &.list-card {
+        &.list-button {
             color: $red;
 
             input[type="checkbox"]:focus+label,
@@ -67,6 +67,23 @@ html {
             }
         }
 
+        &.list-card {
+            color: $red;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $red;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $red;
+            }
+
+            &:hover {
+                border-radius: 0.5rem;
+            }
+        }
+
         &.list-button-horizontal {
             color: $red;
 
@@ -142,6 +159,7 @@ html {
             border: 1px solid $success;
             position: relative;
             z-index: 4;
+            border-radius: 60px;
 
             .button-content {
                 border: none;
@@ -159,6 +177,7 @@ html {
 
         &.list-card {
             border: 1px solid $success;
+            border-radius: 0.5rem;
         }
 
         &.ui-radio {
@@ -179,7 +198,23 @@ html {
 
         // END HOVER
 
-        &.list-button,
+        &.list-button {
+            color: $success;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $success;
+            }
+
+            &:hover {
+                border-radius: 60px;
+            }
+        }
+
         &.list-card {
             color: $success;
 
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 47bf1f1b..f9e102b5 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -107,6 +107,7 @@ $heritage-checked-border-color: #0070d1;
   span {
       &.small {
           color: $darker-gray;
+          font-size: 1rem;
       }
   }
 }