From 9e5845014cbbc89d2cadf4304bc8bfda72f631c2 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Mon, 22 May 2023 17:08:54 -0400
Subject: [PATCH] style fixes

---
 .../service-package-question.vue              |  2 +-
 .../service-packages/service-packages.vue     | 82 ++++++++++++-------
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/src/layouts/service-packages/service-package-question/service-package-question.vue b/src/layouts/service-packages/service-package-question/service-package-question.vue
index 53a6cd7b..b75266cc 100644
--- a/src/layouts/service-packages/service-package-question/service-package-question.vue
+++ b/src/layouts/service-packages/service-package-question/service-package-question.vue
@@ -170,7 +170,7 @@
             },
             getPackagePriceString(packageName) {
                 const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
-                return '$' + formattedPriceFloat;
+                return '$' + formattedPriceFloat + '*';
             },
             getPackagePrice(packageName) {
                 let priceFloat = 0;
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index b990f2d0..7bd0120f 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -1,36 +1,40 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+      <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles">
-            <loadingModal ref="loadingModal" />
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
-                           justification="left"
-                           issContainingPage="service-packages"
-                           class="my-5"/>
             <div class="fade-on-route-transition sub-container make-tall">
-                <servicePackageQuestion ref="servicePackage"
-                                        cmsWidgetName="ServicePackage"
-                                        groupName="ServicePackageQuestion"
-                                        :availableLineItems="availableLineItems"
-                                        @vapsItemsSelected="vapsItemsSelectedAction"
-                                        v-on:link-event="openModalAction"
-                                        validationRules="option-required"
-                                        isRequired />
-                <textBlock cmsWidgetName="PriceDisclaimerWidget"
-                           justifyText="left"
-                           typeStyle="caption"
-                           style="margin-bottom: 6rem;"
-                           class="mt-2 mx-6" />
-                <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
-                <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
-                <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
-                <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
-                <siteFooter cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="!meta.valid"
-                            @back-clicked="backButtonAction"
-                            @ForwardClicked="forwardButtonAction" />
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
+                                justification="left"
+                                issContainingPage="service-packages"
+                                />
+                <div class="mx-5">
+            
+                    <servicePackageQuestion ref="servicePackage"
+                                            cmsWidgetName="ServicePackage"
+                                            groupName="ServicePackageQuestion"
+                                            :availableLineItems="availableLineItems"
+                                            @vapsItemsSelected="vapsItemsSelectedAction"
+                                            v-on:link-event="openModalAction"
+                                            validationRules="option-required"
+                                            isRequired 
+                    />
+                    
+                    <p class="caption disclaimer" v-html="PriceDisclaimerText"></p> 
+                    
+                    <siteFooter cmsWidgetName="SiteFooterWidget"
+                                :isForwardActionDisabled="!meta.valid"
+                                @back-clicked="backButtonAction"
+                                @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
         </div>
+        <loadingModal ref="loadingModal" />
+        <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
+        <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
+        <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
+        <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+        
+                
     </Form>
 </template>
 
@@ -113,6 +117,11 @@
                 pricedGlassParts:   []
             };
         },
+        computed: {
+            PriceDisclaimerText() {
+                return this.getCmsContent("PriceDisclaimerWidget", "Text");
+            },
+        },
         methods: {
             openModalAction(modalName) {
                 this.$refs[modalName.args].openModal();
@@ -158,4 +167,19 @@
             contentGroupModal
         }
     };
-</script>
\ No newline at end of file
+</script>
+<style lang="scss">
+    .subheader-secondary {
+        margin-top: .5rem;
+        padding: 0px; 
+    }
+
+    .disclaimer {
+        margin-top: 1.3rem;
+
+        a {
+            color: #4D5151;
+            font-weight: 400;
+        }
+    }
+</style>
\ No newline at end of file