From b5dbb1aebf1a22ae13dbddce08b1b6d3ff09e5eb Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 18 Oct 2023 16:20:11 -0400
Subject: [PATCH] CSR-1711 fix spacing issues.

---
 .../checkbox-question/checkbox-question.vue                 | 6 +++---
 .../textbox-question/textbox-question.vue                   | 2 +-
 src/fmg-components/vehicle-banner/vehicle-banner.vue        | 2 +-
 src/layouts/customer-details/customer-details.vue           | 2 +-
 src/layouts/schedule/location-alerts/location-alerts.vue    | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/digital-components/checkbox-question/checkbox-question.vue b/src/digital-components/checkbox-question/checkbox-question.vue
index 50245d025..f117b0b57 100644
--- a/src/digital-components/checkbox-question/checkbox-question.vue
+++ b/src/digital-components/checkbox-question/checkbox-question.vue
@@ -1,16 +1,16 @@
 <template>
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-    <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <div class="form-check ui-checkbox d-flex align-items-center" :class="[hasError ? 'has-error' : '']">
+        <label class="d-flex align-items-start" :for="buttonID">
         <input
             v-model="value"
-            class="form-check-input"
+            class="form-check-input me-2"
             type="checkbox"
             aria-checked="false"
             :name="checkboxName"
             :id="buttonID"
             :tabindex="tabIndex"
             :aria-required="isRequired" />
-        <label class="d-flex align-items-start" :for="buttonID">
             <p v-html="checkboxLabelCopy" class="m-0"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index f8fad8779..11f232135 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -67,7 +67,7 @@
         </div>
         <div v-show="errorMessage" class="row form-test-error">
             <span
-                class="d-inline-flex small my-1"
+                class="d-inline-flex small mt-1"
                 aria-atomic="true"
                 aria-live="polite"
                 :class="[centerErrorMessage ? 'center-error-message' : '']"
diff --git a/src/fmg-components/vehicle-banner/vehicle-banner.vue b/src/fmg-components/vehicle-banner/vehicle-banner.vue
index 8bff4e9e2..e88f5b719 100644
--- a/src/fmg-components/vehicle-banner/vehicle-banner.vue
+++ b/src/fmg-components/vehicle-banner/vehicle-banner.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="vehicle_banner mb-3 text-center">
+    <div class="vehicle_banner mb-4 text-center">
         <img class="vehicle-image img-fluid" :src="vehicleImageToDisplay" alt="" />
     </div>
 </template>
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 6e5fc0f09..cd6cc17b0 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -8,7 +8,7 @@
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
                     <textboxQuestion
                         class="mb-4"
                         cmsWidgetName="FirstNameWidget"
diff --git a/src/layouts/schedule/location-alerts/location-alerts.vue b/src/layouts/schedule/location-alerts/location-alerts.vue
index 66f26e263..80d7a5b00 100644
--- a/src/layouts/schedule/location-alerts/location-alerts.vue
+++ b/src/layouts/schedule/location-alerts/location-alerts.vue
@@ -3,7 +3,7 @@
         v-for="alert in prefixedAlertReasons"
         :key="alert.cmsWidgetName"
         :ref="alert.cmsWidgetName"
-        class="mt-2 mb-3"
+        class="mt-5 mb-4"
         :cmsWidgetName="alert.cmsWidgetName"
         alertClass="alert-warning" />
 </template>