UI updates

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

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;

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;
 

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