From 3399ab735d8f661a26bbaf635a7cf1fbfb8d6865 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 3 Nov 2022 14:35:17 -0400
Subject: [PATCH 1/8] CSR-920 replace generic button with button-main.

---
 src/common-components/modal/modal.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 12055ed05..35c3fb9dc 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -22,10 +22,13 @@
                     <p class="mb-0" v-html="this.ModalBodyText"></p>
                 </div>
                 <div class="modal-footer px-5 py-4">
-                    <button
-                        class="btn btn-primary w-100"
-                        data-bs-dismiss="modal"
-                        v-html="this.ModalCloseButtonText"></button>
+                    <buttonMain
+                        ref="buttonMain"
+                        isPrimary
+                        v-html="this.ModalCloseButtonText"
+                        class="w-100"
+                        @click-event="buttonClick"
+                        data-bs-dismiss="modal" />
                 </div>
             </div>
         </div>
@@ -33,6 +36,8 @@
 </template>
 
 <script>
+import buttonMain from "@/ux-components/button-main/button-main";
+
 export default {
     name: "modal",
     props: {
@@ -55,6 +60,9 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
     },
+    components: {
+        buttonMain,
+    },
 };
 </script>
 
@@ -104,7 +112,6 @@ export default {
             box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
             button {
                 margin: 0;
-                height: 3rem;
             }
         }
     }

From 4a6ed04c1eb31b175957e5003a67516696bbd97b Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 3 Nov 2022 15:01:43 -0400
Subject: [PATCH 2/8] Remove unneeded ref

---
 src/common-components/modal/modal.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 35c3fb9dc..5bcc22c28 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -23,7 +23,6 @@
                 </div>
                 <div class="modal-footer px-5 py-4">
                     <buttonMain
-                        ref="buttonMain"
                         isPrimary
                         v-html="this.ModalCloseButtonText"
                         class="w-100"

From 66a85db183374548a424ee89c888a4916fd78fd3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 8 Nov 2022 13:27:07 -0500
Subject: [PATCH 3/8] Update modal to use button-main and ModalCloseButtonText.

---
 src/common-components/modal/modal.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 5bcc22c28..21fab28ee 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -22,12 +22,13 @@
                     <p class="mb-0" v-html="this.ModalBodyText"></p>
                 </div>
                 <div class="modal-footer px-5 py-4">
-                    <buttonMain
-                        isPrimary
-                        v-html="this.ModalCloseButtonText"
-                        class="w-100"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
+                  <buttonMain
+                      class="w-100"
+                      ref="buttonMain"
+                      isPrimary
+                      :buttonText="ModalCloseButtonText"
+                      @click-event="buttonClick"
+                      data-bs-dismiss="modal" />
                 </div>
             </div>
         </div>

From fb66fa14a399b6208dafcaee077380d74f51d5a7 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 8 Nov 2022 13:32:51 -0500
Subject: [PATCH 4/8] Format code.

---
 src/common-components/modal/modal.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 21fab28ee..1546860a8 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -22,13 +22,13 @@
                     <p class="mb-0" v-html="this.ModalBodyText"></p>
                 </div>
                 <div class="modal-footer px-5 py-4">
-                  <buttonMain
-                      class="w-100"
-                      ref="buttonMain"
-                      isPrimary
-                      :buttonText="ModalCloseButtonText"
-                      @click-event="buttonClick"
-                      data-bs-dismiss="modal" />
+                    <buttonMain
+                        class="w-100"
+                        ref="buttonMain"
+                        isPrimary
+                        :buttonText="ModalCloseButtonText"
+                        @click-event="buttonClick"
+                        data-bs-dismiss="modal" />
                 </div>
             </div>
         </div>

From 53810f8c9d2e4d3613b96a37734571b63e0ee88f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 9 Nov 2022 08:52:39 -0500
Subject: [PATCH 5/8] Add rounded corners and search icon for testing only.

Remove includeSearchIcon, questionAlignment, placeholderText after testing.
---
 src/layouts/vin-lookup/vin-lookup.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 429075a40..286ac7909 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -10,7 +10,11 @@
             <div class="fade-on-route-transition sub-container make-tall">
                 <div class="row mt-2">
                     <div class="col">
+                      <!-- includeSearchIcon and questionAlignment, placeholderText for testing only. Remove after testing. -->
                         <textboxQuestion
+                            includeSearchIcon
+                            questionAlignment="center"
+                            placeholderText="Styled for testing only"
                             cmsWidgetName="VinNumberQuestionWidget"
                             v-model="vin"
                             inputId="vin"

From 774306f886cc27899e009e45b6b8305eee7b9c8b Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 9 Nov 2022 10:00:23 -0500
Subject: [PATCH 6/8] Format code.

---
 src/layouts/vin-lookup/vin-lookup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 286ac7909..e4e34f131 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -10,7 +10,7 @@
             <div class="fade-on-route-transition sub-container make-tall">
                 <div class="row mt-2">
                     <div class="col">
-                      <!-- includeSearchIcon and questionAlignment, placeholderText for testing only. Remove after testing. -->
+                        <!-- includeSearchIcon and questionAlignment, placeholderText for testing only. Remove after testing. -->
                         <textboxQuestion
                             includeSearchIcon
                             questionAlignment="center"

From 65f65b4ad1ec428c0752fe3baf71eebfe973507f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 10 Nov 2022 07:58:18 -0500
Subject: [PATCH 7/8] Fix modal images to size and scale properly.

---
 src/common-components/modal/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 1546860a8..aa88fe9ea 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -16,7 +16,7 @@
                         aria-label="Close"></button>
                 </div>
                 <div class="modal-body ps-4 pe-4 pt-5 pb-4">
-                    <img :src="this.ModalImage" class="w-100 mb-4" alt="" />
+                    <img :src="this.ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
                     <h5 class="mb-4" v-html="this.ModalHeadline"></h5>
                     <p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
                     <p class="mb-0" v-html="this.ModalBodyText"></p>

From 6d233b521d8420bf1c9c19a80f688449cf44a66f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 11 Nov 2022 09:04:57 -0500
Subject: [PATCH 8/8] CSR-933 fix error styles.

---
 src/styles/common-error-styles.scss           |  9 ++
 src/ux-components/list-button/list-button.vue | 90 +++++++++----------
 2 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index c9ac0c4d9..ce9aaaf67 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -3,6 +3,7 @@ html {
         // START HOVER
         &.list-button-horizontal,
         &.list-button,
+        &.list-button.list-group,
         &.list-card {
             border: 1px solid $red;
             position: relative;
@@ -16,6 +17,9 @@ html {
                 @include box-shadow-hover($red-200);
                 z-index: 5;
             }
+            input[type="radio"]:focus + .list-button-content {
+                box-shadow: 0 0 0 2.5px $red;
+            }
         }
 
         &.ui-radio {
@@ -26,6 +30,11 @@ html {
                 }
             }
         }
+        .form-check-input {
+            &:focus {
+                @include box-shadow-hover($red-200);
+            }
+        }
         // END HOVER
 
         &.list-button,
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 031805509..33df5568a 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -60,56 +60,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.list-group {
-    .loader {
-        position: absolute;
-    }
-    &.list-button {
-        outline: none;
-        input[type="radio"],
-        input[type="checkbox"] {
-            position: static; //override bootstrap
+.loader {
+    position: absolute;
+}
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
 
-            &:focus-visible + .list-button-content {
-                box-shadow: 0 0 0 2.5px $blue;
-            }
-            &:focus + .list-button-content {
-                box-shadow: 0 0 0 2.5px $blue;
-            }
-            &:checked + .list-button-content {
-                color: $black;
-                font-weight: 500;
-                background: $blue-100;
-                box-shadow: 0 0 0 1px $blue;
-            }
-            &:checked:focus + .list-button-content {
-                box-shadow: 0 0 0 2.5px $blue;
-            }
-            &:checked + .list-button-content p,
-            &:checked + .list-button-content span {
-                font-weight: 500;
-            }
-            &:checked + .list-button-content span:nth-child(2) {
-                font-weight: 400;
-                color: $gray-600;
-            }
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
         }
     }
-    .list-button-content {
-        color: $gray-600;
-        position: relative;
-        background: $white;
-        transition: all 150ms linear;
-        border-radius: $border-radius-lg;
-        border: 1px solid $gray-500;
-        width: 100%;
-        outline: none;
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
 
-        span {
-            &.small {
-                font-size: 0.75rem;
-                color: $gray-550;
-            }
+    span {
+        &.small {
+            font-size: 0.75rem;
+            color: $gray-550;
         }
     }
 }