From e9470fb213d0dd5203c0864990af6afd83850412 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 9 Mar 2026 14:40:30 -0400
Subject: [PATCH] modal fixes

---
 src/digital-components/modal/modal.vue               |  7 ++++++-
 .../content-group-modal/content-group-modal.vue      | 12 +++++++++++-
 src/iss-components/recal-modal/recal-modal.vue       |  8 +++++++-
 .../steering-modal/steering-modal.vue                |  2 +-
 .../tpa-recal-modal/tpa-recal-modal.vue              |  5 ++++-
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index edb60a81..1750e75c 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -281,8 +281,13 @@ export default {
                 border-color: $blue;
                 font-weight: 400;
                 &:hover {
-                    background-color: #167cac;
+                    background-color: $heritage-blue-secondary;
                     color: $white;
+                    border-color: $heritage-blue-secondary;
+                }
+                &:active,
+                &:focus {
+                    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px $heritage-blue-secondary; 
                 }
             }
         }
diff --git a/src/iss-components/content-group-modal/content-group-modal.vue b/src/iss-components/content-group-modal/content-group-modal.vue
index 03612653..aa6246d8 100644
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -7,6 +7,7 @@
         <img
             :src="ModalImage"
             class="mw-100 d-flex"
+            :class="imgClass"
             alt="" />
         <h5
             class="header-text"
@@ -59,7 +60,13 @@ export default {
         },
         ModalCloseButtonText() {
             return this.getCmsContent(this.cmsWidgetName, 'FooterText');
-        }
+        },
+        imgClass() {
+            if (this.ModalImage === this.getCmsContent('RainDefenseModal', 'Image')) {
+                return 'rain-repel';
+            }
+            return '';
+        },
     },
     methods: {
         openModal() {
@@ -104,4 +111,7 @@ export default {
         }
     }
 }
+.rain-repel {
+    height: 55px;
+}
 </style>
diff --git a/src/iss-components/recal-modal/recal-modal.vue b/src/iss-components/recal-modal/recal-modal.vue
index 311c4f82..852befa2 100644
--- a/src/iss-components/recal-modal/recal-modal.vue
+++ b/src/iss-components/recal-modal/recal-modal.vue
@@ -74,8 +74,14 @@ export default {
             button {
                 &:hover {
                     background-color: $white;
-                    color: #167cac;
+                    color: $heritage-blue-secondary;
                 }
+                &:focus, &:active {
+                    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px $heritage-blue-secondary; 
+                }
+                font-weight: 600;
+                color: $heritage-blue-secondary;
+                border-color: $heritage-blue-secondary;
             }
         }
     }
diff --git a/src/layouts/provider-preference/steering-modal/steering-modal.vue b/src/layouts/provider-preference/steering-modal/steering-modal.vue
index e93f1feb..fb324ced 100644
--- a/src/layouts/provider-preference/steering-modal/steering-modal.vue
+++ b/src/layouts/provider-preference/steering-modal/steering-modal.vue
@@ -81,7 +81,7 @@ export default {
     .modal-footer {
         justify-content: center;
         button {
-            background-color: #167cac;
+            background-color: $heritage-blue-secondary;
             color: $white;
             width: 71%;
         }
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
index 5e295340..549e933b 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -32,7 +32,7 @@
                         isRequired>
                     </buttonQuestion>
                     <checkBox
-                    v-if="showAcknowledgementCheckbox"
+                        v-if="showAcknowledgementCheckbox"
                         ref="tpaAcknowledgement"
                         v-model="acknowledged"
                         class="mb-2 mt-4"
@@ -171,6 +171,9 @@ export default {
             background-color: $green;
             color: $white;
             font-weight: $font-weight-bold;
+            &:hover {
+                background-color: $green;
+            }
         }
     }
     .tpa-recal-question > div:first-of-type {