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] 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