Merge pull request #1137 from Safelite/feature/kroell/modal-defects

Modal defects

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 $white, 0 0 0 5.5px $heritage-blue-secondary; 
                 }
             }
         }

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.cmsWidgetName === 'RainDefenseModal') {
+                return 'rain-repel';
+            }
+            return '';
+        },
     },
     methods: {
         openModal() {
@@ -104,4 +111,7 @@ export default {
         }
     }
 }
+.rain-repel {
+    height: 3.5rem;
+}
 </style>

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 $white, 0 0 0 5.5px $heritage-blue-secondary; 
+                }
+                font-weight: 600;
+                color: $heritage-blue-secondary;
+                border-color: $heritage-blue-secondary;
             }
         }
     }

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

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 {