Merge pull request #669 from Safelite/SSR-1201-correct-spacing-issues

Adjust spacing on multiple pages.

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 {

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;

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 {

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>