From ca3aad4112272db26563015f5ac883d55b74a8ba Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 27 Apr 2023 16:26:06 -0400
Subject: [PATCH 1/8] resize site-header to match Figma specs

---
 src/iss-components/site-header/menu-modal/menu-modal.vue | 6 +++---
 src/iss-components/site-header/site-header.vue           | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index 214076d0..1330a6da 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -63,7 +63,7 @@ export default {
     },
     methods: {
         show() {
-            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
+            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
             this.isActive = true;
             document.querySelector('.fade-on-route-transition').scrollTo({
                 top: 0,  behavior: 'instant'
@@ -123,8 +123,8 @@ export default {
     &.menu-modal {
         max-width: 576px;
         left: auto;
-        height: calc(100% - 72px);
-        top: 72px;
+        height: calc(100% - 56px);
+        top: 56px;
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
diff --git a/src/iss-components/site-header/site-header.vue b/src/iss-components/site-header/site-header.vue
index 75a82bef..7aa03480 100644
--- a/src/iss-components/site-header/site-header.vue
+++ b/src/iss-components/site-header/site-header.vue
@@ -88,13 +88,12 @@ export default({
 
     <style lang="scss" scoped>
     .site-header {
-        height: 72px;
+        height: 56px;
     }
     .alert {
         left: 0;
         top: 72px;
     }
-
     #siteHeaderImage {
         height: 2.5rem;
     }

From cc7fee11da5d715d2676220fc026b9c296838f46 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 27 Apr 2023 16:26:37 -0400
Subject: [PATCH 2/8] remove margin-bottom from site-header

---
 src/iss-components/site-header/site-header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/iss-components/site-header/site-header.vue b/src/iss-components/site-header/site-header.vue
index 7aa03480..55a87e25 100644
--- a/src/iss-components/site-header/site-header.vue
+++ b/src/iss-components/site-header/site-header.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="site-header d-flex justify-content-center align-items-center flex-column py-2 mb-4" :style="logoBackgroundStyle">
+        <div class="site-header d-flex justify-content-center align-items-center flex-column py-2" :style="logoBackgroundStyle">
             <img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
             <menuModal/>
         </div>

From 50ff72b91cd61c49111f1092ed70b3502a70ecf6 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Fri, 28 Apr 2023 16:57:33 -0400
Subject: [PATCH 3/8] updates to margins around site-header

---
 src/layouts/address-lookup/address-lookup.vue               | 4 ++--
 src/layouts/address-vehicles/address-vehicles.vue           | 2 +-
 src/layouts/coverage-statement/coverage-statement.vue       | 2 +-
 src/layouts/license-plate-lookup/license-plate-lookup.vue   | 2 +-
 src/layouts/policy-holder-details/policy-holder-details.vue | 1 +
 src/layouts/vehicle-damage/vehicle-damage.vue               | 4 ++--
 src/layouts/vehicle-lookup/vehicle-lookup.vue               | 4 ++--
 src/layouts/vin-lookup/vin-lookup.vue                       | 2 +-
 src/layouts/welcome-page/welcome-page.vue                   | 4 ++--
 9 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index a2c345f3..ea0b4622 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -9,11 +9,11 @@
                             <div class="col">
                                 <div class="select-car-form rounded">
                                     <vehicleBanner
-                                    class="mb-3"
+                                    class="mt-2 mb-4"
                                     cmsWidgetName="VehicleBannerWidget"
                                     ref="vehicleBanner"
                                     :displayGenericVehicleImage="false" />
-                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" class="mb-5" />
                                     <alert
                                     ref="alertVinNotFound"
                                     v-if="displayVinNotFoundAlert"
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 69593ea4..6c04803b 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -8,7 +8,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="fade-on-route-transition sub-container overflow-scroll px-5">
         <vehicleBanner
-          class="mb-3"
+          class="mt-2 mb-4"
           cmsWidgetName="VehicleBannerWidget"
           :displayGenericVehicleImage="false" />
         <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index d6aa5d42..dd4048db 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -12,7 +12,7 @@
                                   cmsWidgetName="verifyingCoverageStatement"
                                   typeStyle="h5"
                                   justifyText="center"
-                                  class="mt-0 mb-4"
+                                  class="mt-4 mb-4"
                                   id="coverage-statement-text-block"
                                   />
                                   <div>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index b1c49299..485e6b7d 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -8,7 +8,7 @@
                         <div class="row px-3">
                             <div class="col">
                                 <div class="select-car-form rounded">
-                                    <vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <vehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
                                     <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
                                     <alert
                                     ref="alertVinNotFound"
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 6a75e5b7..e0ccd451 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -17,6 +17,7 @@
                             disableAutoFill
                             validationRules="first-name-required" />
                             <textboxQuestion
+                            class="mt-4"
                             inputId="lastNameField"
                             cmsWidgetName="PolicyholderLastNameQuestion"
                             v-model="customerQuestions.lastName"
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index daf6b9a1..fb3fc0bb 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,7 +4,7 @@
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
                 <div class="container-fluid pb-2">
-                    <div class="row mt-4 px-3">
+                    <div class="row mt-2 px-3">
                         <div class="col">
                             <alert
                             ref="vehicleChangeAlert"
@@ -14,7 +14,7 @@
                             alertClass="alert-warning"
                             :isDismissible="false" />
                             <vehicleBanner
-                            class="mb-3"
+                            class="mb-4"
                             cmsWidgetName="VehicleBannerWidget"
                             :displayGenericVehicleImage="false" />
                             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 6d30d29e..9bebbd57 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -8,8 +8,8 @@
                         <div class="row px-3">
                             <div class="col">
                                 <div class="select-car-form rounded">
-                                    <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
-                                    <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
                                     <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
                                     <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
                                 </div>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 8221c7c6..58356d9c 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -8,7 +8,7 @@
                         <div class="row px-3">
                             <div class="col">
                                 <div class="select-car-form rounded">
-                                    <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                    <vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
                                     <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                                     <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
                                     <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 737c636c..bb43b7c2 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -3,9 +3,9 @@
         <div class="page-container-grouped-styles welcome">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
                 <div class="container-fluid pb-2">
-                    <div class="row mt-4 px-3">
+                    <div class="row mt-5 px-3">
                         <div class="col">
                             <textboxQuestion
                             inputId="policyNumberField"

From 84755f3c264a76cdc6266494d49716a17f1676d1 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 1 May 2023 11:11:50 -0400
Subject: [PATCH 4/8] update spacing around site-header

---
 .../questions-page-layout.vue                 |  2 +-
 .../policy-vehicles/policy-vehicles.vue       |  2 +-
 .../provider-preference.vue                   |  2 +-
 .../service-location/service-location.vue     | 21 ++++---------------
 .../service-packages/service-packages.vue     |  3 ++-
 src/layouts/vehicle-parts/vehicle-parts.vue   |  2 +-
 6 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
index be67de5b..49bde25e 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -8,7 +8,7 @@
                     <div class="row px-3">
                         <div class="col">
                             <div class="select-car-form rounded">
-                                <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                <vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
                                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                                 <alert
                                 ref="alertFewMoreQuestions"
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index c41ded4d..d21a16fe 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -8,7 +8,7 @@
                         <div class="row">
                             <div class="col">
                                 <div class="select-car-form rounded text-center">
-                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-4" />
                                     <policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions"/>
                                     <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
                                 </div>
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index c9079718..eb049925 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -6,7 +6,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
+                <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" class="mt-4"/>
                 <button v-on:click="forwardButtonAction">Temp Forward Button</button>
                 <div>
                     <siteFooter
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index b40a01d9..c78468db 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5 mb-1" />
                 <div class="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row px-3">
@@ -28,8 +28,7 @@
                                         buttonTypeString="listCard"
                                         isRequired
                                         v-model="selectedAppointmentType"
-                                        validationRules="selection-required"
-                                        class="service-location-button-question"/>
+                                        validationRules="selection-required" />
                                     <div class="select-car">
                                         <div class="container-fluid pb-2">
                                             <div class="row px-3">
@@ -235,7 +234,7 @@ export default {
 }
 .question-text {
     & > span {
-        line-height: 1.500rem;
+        line-height: 1.5rem;
     }
 }
 .list-card-content p {
@@ -246,12 +245,6 @@ export default {
         line-height: 1.250rem;
     }
 }
-.siteHeader{
-    .site-header{
-        margin-bottom: 1.25rem !important;
-    }
-
-}
 .choose-option{
     .button-question >div {
         &:first-of-type {
@@ -262,13 +255,7 @@ export default {
 }
 .button-question{
     .row.form-test-error{
-        line-height:1.500rem;
-        padding-left: 0rem !important;
-    }
-}
-.service-location-button-question {
-    .question-text {
-        margin-top: 1.5rem;
+        line-height:1.5rem;
     }
 }
 </style>
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 14adb371..1c427ec4 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -5,7 +5,8 @@
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
                            justification="left"
-                           issContainingPage="service-packages"/>
+                           issContainingPage="service-packages"
+                           class="my-5"/>
             <div class="fade-on-route-transition sub-container make-tall">
                 <servicePackageQuestion ref="servicePackage"
                                         cmsWidgetName="ServicePackage"
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 7dfa03f5..24413af3 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -9,7 +9,7 @@
                             <div class="col">
                                 <div class="select-car-form rounded">
                                     <vehicleBanner
-                                    class="mb-3"
+                                    class="mt-2 mb-4"
                                     ref="vehicleBanner"
                                     cmsWidgetName="VehicleBannerWidget"
                                     :displayGenericVehicleImage="false" />

From 6142d3639751321f497ea0ca44eb76b2543a18b3 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 1 May 2023 11:45:34 -0400
Subject: [PATCH 5/8] margin fix

---
 .../questions-page-layout/questions-page-layout.vue            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
index 49bde25e..657d02b9 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -16,7 +16,8 @@
                                 alertClass="alert-warning"
                                 :manualHeadline="alertFewMoreQuestionsHeader"
                                 :manualCopy="alertFewMoreQuestionsCopy"
-                                v-bind:isDismissible="false" />
+                                v-bind:isDismissible="false" 
+                                class="mt-5"/>
                                 <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                                     <questionChain
                                     ref="questionChain"

From 5b106ca7cfe3e5e79feb20585b212ba134f41f39 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 1 May 2023 11:56:11 -0400
Subject: [PATCH 6/8] remove styling - affects other pages

---
 src/layouts/policy-holder-details/policy-holder-details.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index e0ccd451..bf726402 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -168,11 +168,6 @@ export default {
     }
     </script>
     <style lang="scss">
-    .alert.alert-warning
-    {
-        margin-top: 20px;
-    }
-
     #sub-header p {
         font-size: 16px;
         line-height: 26px;

From d894545222d248d0446637bf508641257fddb224 Mon Sep 17 00:00:00 2001
From: Manjiri Jethe <manjiri.jethe@safelite.com>
Date: Tue, 2 May 2023 12:16:52 +0530
Subject: [PATCH 7/8] CSS & error changes

SSR-385
---
 .../policy-vehicles-question.vue              | 11 +++++++++-
 .../policy-vehicles/policy-vehicles.vue       | 22 +++++++++++++++----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
index 8e862b6b..62f2522e 100644
--- a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
@@ -29,4 +29,13 @@ export default ({
     },
 })
 </script>
-  
\ No newline at end of file
+<style lang="scss">
+.question-text {
+  margin-top: 1rem;
+    & > span {
+        font-size: 1.25rem;
+        font-weight: 400 !important;
+        line-height: 2rem;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index d21a16fe..8059b5b8 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -2,14 +2,14 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget"/>
                 <div class="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row">
                             <div class="col">
                                 <div class="select-car-form rounded text-center">
                                     <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-4" />
-                                    <policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions"/>
+                                    <policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions" validationRules="option-required"/>
                                     <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
                                 </div>
                             </div>
@@ -29,11 +29,15 @@ import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-qu
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { Form } from "vee-validate";
+import { Form,defineRule } from "vee-validate";
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { issPageValues } from "@/router/router-constants/issPage-values";
 import { useMainStore } from '@/store';
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
 
+// DEFINE VALIDATION RULES
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 export default {
     name: "policy-vehicles",
     mixins: [BaseFormMixin],
@@ -94,4 +98,14 @@ export default {
             Form,
         },
     }
-</script>
\ No newline at end of file
+</script>
+<style lang="scss">
+.header{
+    margin-bottom: 0rem !important;
+}
+.form-test-error{
+    text-align: left;
+    margin-top: 0rem !important;
+    line-height: 1.50rem;
+}
+</style>
\ No newline at end of file

From ec2a01a9d966020420ffd8222f5e1a3cdfa1f229 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 2 May 2023 09:54:29 -0400
Subject: [PATCH 8/8] spacing change for service-location page

---
 src/layouts/service-location/service-location.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index c78468db..133fab9c 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5 mb-1" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5" />
                 <div class="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row px-3">