From a1b457fdffe6934e1b8fc5fef98e8e899d672f2c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 30 Apr 2024 17:45:45 -0400
Subject: [PATCH] Adjust spacing on multiple pages.

Writing scss to make pages comply with Figma mocks.
---
 .../button-question/button-question.vue       |  4 ---
 .../shop-list-button/shop-list-button.vue     |  2 +-
 .../service-location/service-location.vue     |  7 ++--
 src/layouts/vehicle-damage/vehicle-damage.vue | 35 ++++++++++++++++---
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index d3cd1db5..e2388e65 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -338,10 +338,6 @@ export default {
     margin-bottom: 1rem;
     font-size: 1rem;
     line-height: 1.625rem;
-
-    & > span {
-        text-align: left;
-    }
 }
 
 .small-question-text {
diff --git a/src/iss-components/shop-list-button/shop-list-button.vue b/src/iss-components/shop-list-button/shop-list-button.vue
index 935d11fc..f27cc3a5 100644
--- a/src/iss-components/shop-list-button/shop-list-button.vue
+++ b/src/iss-components/shop-list-button/shop-list-button.vue
@@ -178,7 +178,7 @@ export default {
           padding: 0.125rem 0.5rem;
 
           .availability-badge {
-              display: inline;
+              display: inline-flex;
               width: 13px;
               height: 12px;
               background-position: center;
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 39629c53..c1c3bd4c 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -54,7 +54,7 @@
                 </div>
             </div>
             <div class="row justify-content-center appointment-type">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6">
                     <appointmentTypeQuestion
                         v-show="isAppointmentTypeDisplayed"
                         ref="appointmentTypeQuestion"
@@ -516,7 +516,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 $page-side-padding: 1.5rem;
 
 .fade-on-route-transition {
@@ -528,8 +528,9 @@ $page-side-padding: 1.5rem;
 }
 
 .question-text {
-    & > span {
+    span {
         line-height: 1.5rem;
+        text-align: center;
     }
 }
 .list-card-content p {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index f4eb66fd..81b1bafb 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -43,8 +43,7 @@
                         v-model="selectedWindshieldOptions"
                         :hasRepairReplaceConflict="hasRepairReplaceConflict"
                         :hasSplitSingleConflict="hasSplitSingleConflict"
-                        :selectedDamageLocations="selectedDamageLocations"
-                        class="mb-3" />
+                        :selectedDamageLocations="selectedDamageLocations" />
                 </div>
             </div>
             <div class="row justify-content-center">
@@ -65,8 +64,7 @@
                         v-model="sideDoorOptionsData"
                         cmsWidgetName="SideDoorSideQuestion"
                         groupName="SideDoorSideQuestion"
-                        :selectedDamageLocations="selectedDamageLocations"
-                        class="mb-1" />
+                        :selectedDamageLocations="selectedDamageLocations" />
                 </div>
             </div>
             <div class="row justify-content-center">
@@ -503,9 +501,38 @@ export default {
 
 <style lang="scss">
 .replace-options-question {
+    .row {
+        margin-top: 0;
+        .col-12 {
+            margin: 0 0 .5rem 0;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+    .question-text {
+        margin: 0;
+        span {
+            padding: 1rem 0;
+            text-align: center;
+        }
+    }
     .two-list-card-width {
         width: 100%;
         flex: 0 auto;
     }
 }
+.damage-location-question {
+    span {
+        font-size: 1.25rem;
+        font-weight: 400;
+    }
+}
+.button-question,
+.windshield-damage-type-question,
+.damage-location-question {
+    .col {
+        margin-top: 0;
+    }
+}
 </style>