From c098a6a2d1fe8ced8ad882161b49a5805fa7b98f Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Sun, 22 Jan 2023 20:31:44 -0500
Subject: [PATCH] SSR-234

---
 src/digital-components/modal/modal.vue     | 23 ++++++++++++++++------
 src/styles/shared-input-button-styles.scss |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 9845e089..8d961830 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -3,7 +3,7 @@
     <div
         class="modal fade modal-component"
         v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="this.cmsWidgetName"
+        :id="cmsWidgetName"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
         aria-hidden="true">
@@ -17,13 +17,18 @@
                         aria-label="Close"></button>
                 </div>
                 <div class="modal-body ps-4 pe-4 pt-5 pb-4">
-                    <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>
+                    <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
+                    <h5 class="mb-4" v-html="ModalHeadline"></h5>
+                    <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+                    <p class="mb-0" v-html="ModalBodyText"></p>
+                    <p
+                        class="my-4 caption modal-sub-body"
+                        v-if="ModalSubBodyText"
+                        v-html="ModalSubBodyText"></p>
                 </div>
                 <div class="modal-footer px-5 py-4">
                     <buttonMain
+                        isPrimary
                         class="w-100"
                         ref="buttonMain"
                         suppressLoader
@@ -54,6 +59,9 @@ export default {
         ModalBodyText() {
             return this.getCmsContent(this.cmsWidgetName, "BodyText");
         },
+        ModalSubBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
         ModalImage() {
             return this.getCmsContent(this.cmsWidgetName, "Image");
         },
@@ -97,6 +105,9 @@ export default {
                 box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
                 border-radius: 1.5rem 1.5rem 0 0;
                 .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
                     ul {
                         margin-bottom: 0;
                     }
@@ -130,4 +141,4 @@ body {
         }
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
index dbffa5b0..9af066bb 100644
--- a/src/styles/shared-input-button-styles.scss
+++ b/src/styles/shared-input-button-styles.scss
@@ -7,7 +7,7 @@
         &.list-card {
             &:not(.selected) {
                 position: relative;
-                z-index: 4;
+                z-index: 5;
                 @include box-shadow-hover($blue-300);
             }
         }