Merge pull request #417 from Safelite/feature/digital/SSR-639

Feature/digital/ssr 639

src/layouts/coverage-statement/coverage-statement.vue

@@ -29,7 +29,7 @@
                                   </div>
                                   <div
                                     ref="secondaryText"
-                                    class="text-center mt-4 fw-bold text-black"
+                                    class="text-center mt-4 mb-1 fw-bold text-black"
                                     v-html="secondaryText">
                                   </div>
                                   <div
@@ -39,19 +39,19 @@
                                   </div>
                                   <div
                                     v-if="displayQuote"
-                                    class="d-flex justify-content-center cost mb-5">
+                                    class="d-flex justify-content-center cost mb-0">
                                     {{ formattedServicePrice }}
                                   </div>
                                   <div
                                     v-if="verifiedITAC"
-                                    class="d-flex justify-content-center mb-4">
+                                    class="d-flex justify-content-center mb-4 deductible-text">
                                     {{ deductibleText }}&nbsp;
                                     <span class="text-success fw-bold">{{ formattedDeductible }}</span>
                                   </div>
                                   <alert
                                     v-if="verifiedITAC"
                                     ref="verifiedITACAlert"
-                                    class="mb-4"
+                                    class="mb-5"
                                     cmsWidgetName="VerifiedITACAlert"
                                     :manualHeadline="verifiedITACAlertHeader"
                                     :manualCopy="verifiedITACAlertBody"
@@ -59,16 +59,15 @@
                                     :isDismissible="false">
                                   </alert>
                                   <div
-                                    class="fw-bold text-black mb-2"
+                                    class="fw-bold text-black mt-5 mb-2"
                                     v-html="nextStepsHeader">
                                   </div>
                                   <div
                                     class="body-text"
                                     v-html="nextStepsBody">
                                   </div>
-                                  <buttonQuestion
+                                <buttonQuestion
                                     v-if="displayQuote"
-                                    id="coverage-button-question"
                                     v-model="selectedProvider"
                                     cmsWidgetName="ServiceProviderQuestion"
                                     :questionText="questionText"
@@ -76,7 +75,7 @@
                                     buttonTypeString="listButton"
                                     isRequired
                                     :validationRules="rules.selectionRequired">
-                                  </buttonQuestion>
+                                </buttonQuestion>
                               </div>
                               <siteFooter
                                 ref="siteFooter"
@@ -417,49 +416,52 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.body-text {
-  p {
-    font-size: 14px;
-    line-height: 24px;
-    margin-bottom: 8px;
-  }
-}
 
 .cost {
   color: $green;
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: 300;
-  margin-bottom: 24px;
+  line-height: 2.75rem;
-  line-height: 44px;
 }
 
-#coverage-button-question {
+.deductible-text {
-  .question-text {
+    line-height: 1.5rem;
-    margin-bottom: 8px;
-  }
-  .question-text > span {
-    text-align: left;
-    line-height: 24px;
-  }
 }
 
-.deductible-modal {
+::v-deep p {
+    line-height: 1.5rem;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+    strong {
+        color: $black;
+    }
+}
+
+::v-deep .question-text {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    & > span {
+        text-align: left;
+    }
+}
+
+::v-deep .deductible-modal {
   p {
-    margin-bottom: 0px;
+    margin-bottom: 0 !important;
+    font-size: 1rem;
+    line-height: 1.625rem;
   }
-
-  .modal-body p:last-child {
-    font-size: 16px;
-    line-height: 26px;
-  }
-
-  .my-4 {
-    margin-top: 8px !important;
-    margin-bottom: 0px !important;
-  }
-
   img.mb-4 {
     margin: 0 !important;
   }
+  h5 {
+    color: black;
+  }
+  p:last-child {
+    margin-top: 0.5rem;
+  }
 }
+
 </style>

src/layouts/coverage-statement/recal-modal/recal-modal.vue

@@ -4,7 +4,7 @@
         :modalId="ModalName"
         :footerButtonText="ModalCloseButtonText"
         @footer-button-event="closeModal">
-        <div class="recal-modal-body ps-4 pe-4 pt-0 pb-5">
+        <div class="recal-modal-body">
             <h5
                 class="mb-4 text-center"
                 v-html="ModalHeadline"></h5>
@@ -16,7 +16,7 @@
                 class="fw-bold mb-2 subheader-text"
                 v-html="ModalSubheadertext"></p>
             <p
-                class="mb-0 small"
+                class="mb-0 small modal-body"
                 v-html="ModalBodyText"></p>
             <p
                 v-if="ModalSubBodyText"
@@ -74,21 +74,16 @@ export default {
 
 <style lang="scss" scoped>
 
-    .recal-modal-body {
+::v-deep .recal-modal-body {
-        .modal-sub-body {
+    h5 {
-            color: $gray-600;
+        color: $black;
-        }
+    }
-        ul {
+    .modal-body {
-            margin-bottom: 0;
+        strong {
-        }
-        p {
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-        .subheader-text {
             color: $black;
+            font-weight: 400;
         }
     }
+}
 
 </style>