From d552915d28b8f5d097c55fbaf49434dddd49e1b8 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 10 Aug 2023 14:58:17 -0400
Subject: [PATCH 1/6] styling fixes WIP

---
 .../coverage-statement/coverage-statement.vue | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 243e619e..9569e027 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/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,7 +39,7 @@
                                   </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
@@ -68,8 +68,8 @@
                                   </div>
                                   <buttonQuestion
                                     v-if="displayQuote"
-                                    id="coverage-button-question"
                                     v-model="selectedProvider"
+                                    class="coverage-button-question"
                                     cmsWidgetName="ServiceProviderQuestion"
                                     :questionText="questionText"
                                     :answers="answersFromCms"
@@ -429,20 +429,17 @@ export default {
   color: $green;
   font-size: 32px;
   font-weight: 300;
-  margin-bottom: 24px;
   line-height: 44px;
 }
 
-#coverage-button-question {
-  .question-text {
-    margin-bottom: 8px;
-  }
-  .question-text > span {
-    text-align: left;
-    line-height: 24px;
-  }
+.coverage-button-question {
+    .question-text {
+        margin-bottom: 8px;
+        & > span {
+            text-align: left !important;
+        }
+    }
 }
-
 .deductible-modal {
   p {
     margin-bottom: 0px;

From 7a3e99d68c4d91587026194947b6d095b02e653a Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 15 Aug 2023 14:00:26 -0400
Subject: [PATCH 2/6] styling WIP

---
 .../coverage-statement/coverage-statement.vue | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 9569e027..74511ceb 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -66,17 +66,19 @@
                                     class="body-text"
                                     v-html="nextStepsBody">
                                   </div>
-                                  <buttonQuestion
-                                    v-if="displayQuote"
-                                    v-model="selectedProvider"
-                                    class="coverage-button-question"
-                                    cmsWidgetName="ServiceProviderQuestion"
-                                    :questionText="questionText"
-                                    :answers="answersFromCms"
-                                    buttonTypeString="listButton"
-                                    isRequired
-                                    :validationRules="rules.selectionRequired">
-                                  </buttonQuestion>
+                                  <div
+                                    class="button-wrapper">
+                                    <buttonQuestion
+                                        v-if="displayQuote"
+                                        v-model="selectedProvider"
+                                        cmsWidgetName="ServiceProviderQuestion"
+                                        :questionText="questionText"
+                                        :answers="answersFromCms"
+                                        buttonTypeString="listButton"
+                                        isRequired
+                                        :validationRules="rules.selectionRequired">
+                                    </buttonQuestion>
+                                  </div>
                               </div>
                               <siteFooter
                                 ref="siteFooter"
@@ -432,21 +434,22 @@ export default {
   line-height: 44px;
 }
 
-.coverage-button-question {
-    .question-text {
-        margin-bottom: 8px;
-        & > span {
-            text-align: left !important;
-        }
+.question-text {
+    & > span {
+        text-align: left;
     }
 }
+
 .deductible-modal {
   p {
-    margin-bottom: 0px;
+    margin-bottom: 0px !important;
   }
 
+  h5.mb-4 {
+    color: black;
+  }
   .modal-body p:last-child {
-    font-size: 16px;
+    font-size: 16px !important;
     line-height: 26px;
   }
 

From 3869d5f10f415c776683dff7f8c5e4abf2715e6a Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 15 Aug 2023 15:41:48 -0400
Subject: [PATCH 3/6] all ITAC styling correct

---
 .../coverage-statement/coverage-statement.vue | 78 ++++++++++---------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 74511ceb..1576531c 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -44,14 +44,14 @@
                                   </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"
@@ -66,19 +66,16 @@
                                     class="body-text"
                                     v-html="nextStepsBody">
                                   </div>
-                                  <div
-                                    class="button-wrapper">
-                                    <buttonQuestion
-                                        v-if="displayQuote"
-                                        v-model="selectedProvider"
-                                        cmsWidgetName="ServiceProviderQuestion"
-                                        :questionText="questionText"
-                                        :answers="answersFromCms"
-                                        buttonTypeString="listButton"
-                                        isRequired
-                                        :validationRules="rules.selectionRequired">
-                                    </buttonQuestion>
-                                  </div>
+                                <buttonQuestion
+                                    v-if="displayQuote"
+                                    v-model="selectedProvider"
+                                    cmsWidgetName="ServiceProviderQuestion"
+                                    :questionText="questionText"
+                                    :answers="answersFromCms"
+                                    buttonTypeString="listButton"
+                                    isRequired
+                                    :validationRules="rules.selectionRequired">
+                                </buttonQuestion>
                               </div>
                               <siteFooter
                                 ref="siteFooter"
@@ -419,13 +416,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.body-text {
-  p {
-    font-size: 14px;
-    line-height: 24px;
-    margin-bottom: 8px;
-  }
-}
 
 .cost {
   color: $green;
@@ -434,32 +424,46 @@ export default {
   line-height: 44px;
 }
 
-.question-text {
+.deductible-text {
+    line-height: 24px;
+}
+
+::v-deep p {
+    line-height: 24px;
+    font-size: 14px;
+    margin-bottom: 8px;
+}
+
+::v-deep .question-text {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
     & > span {
         text-align: left;
     }
 }
 
-.deductible-modal {
+::v-deep .deductible-modal {
   p {
     margin-bottom: 0px !important;
-  }
-
-  h5.mb-4 {
-    color: black;
-  }
-  .modal-body p:last-child {
-    font-size: 16px !important;
+    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;
+  }
 }
+
+//   .my-4 {
+//     margin-top: 8px !important;
+//     margin-bottom: 0px !important;
+//   }
+
 </style>

From 2f8eeacb20251d4e3a7c702b30939e5e3ae9c46d Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 15 Aug 2023 15:59:09 -0400
Subject: [PATCH 4/6] verified deductible styling WIP

---
 .../coverage-statement/coverage-statement.vue       |  2 +-
 .../coverage-statement/recal-modal/recal-modal.vue  | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 1576531c..39fcb78f 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -59,7 +59,7 @@
                                     :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
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
index 51315321..4dcc7206 100644
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue
+++ b/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>
@@ -75,16 +75,17 @@ export default {
 <style lang="scss" scoped>
 
     .recal-modal-body {
-        .modal-sub-body {
-            color: $gray-600;
-        }
-        ul {
-            margin-bottom: 0;
+        h5 {
+            color: black;
         }
+        
         p {
             &:last-child {
                 margin-bottom: 0;
             }
+            & strong {
+            color: black;
+            }
         }
         .subheader-text {
             color: $black;

From 22ad36341affa66c4e7b02a3a54681024d1d9ee0 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 16 Aug 2023 11:28:37 -0400
Subject: [PATCH 5/6] recal modal styling fix

---
 .../recal-modal/recal-modal.vue               | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
index 4dcc7206..b7794d5a 100644
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
@@ -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,22 +74,16 @@ export default {
 
 <style lang="scss" scoped>
 
-    .recal-modal-body {
-        h5 {
-            color: black;
-        }
-        
-        p {
-            &:last-child {
-                margin-bottom: 0;
-            }
-            & strong {
-            color: black;
-            }
-        }
-        .subheader-text {
+::v-deep .recal-modal-body {
+    h5 {
+        color: $black;
+    }
+    .modal-body {
+        strong {
             color: $black;
+            font-weight: 400;
         }
     }
+}
 
 </style>

From 4f5e1a09f00e21b7c096810945ad40db1f803d53 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 16 Aug 2023 11:28:59 -0400
Subject: [PATCH 6/6] styling fixes, conversion from px to rem

---
 .../coverage-statement/coverage-statement.vue | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 39fcb78f..4e800566 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -419,19 +419,22 @@ export default {
 
 .cost {
   color: $green;
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: 300;
-  line-height: 44px;
+  line-height: 2.75rem;
 }
 
 .deductible-text {
-    line-height: 24px;
+    line-height: 1.5rem;
 }
 
 ::v-deep p {
-    line-height: 24px;
-    font-size: 14px;
-    margin-bottom: 8px;
+    line-height: 1.5rem;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+    strong {
+        color: $black;
+    }
 }
 
 ::v-deep .question-text {
@@ -446,9 +449,9 @@ export default {
 
 ::v-deep .deductible-modal {
   p {
-    margin-bottom: 0px !important;
-    font-size: 16px;
-    line-height: 26px;
+    margin-bottom: 0 !important;
+    font-size: 1rem;
+    line-height: 1.625rem;
   }
   img.mb-4 {
     margin: 0 !important;
@@ -461,9 +464,4 @@ export default {
   }
 }
 
-//   .my-4 {
-//     margin-top: 8px !important;
-//     margin-bottom: 0px !important;
-//   }
-
 </style>