initial styling changes

src/iss-components/site-sub-header/site-sub-header.vue

@@ -169,8 +169,8 @@ p {
         color: $darker-gray;
     }
     &.service-packages-subtext {
-        font-weight: 500;
-        line-height: 24px;
+        font-weight: 400;
+        line-height: 26px;
         span {
             font-size: 1rem;
         }

src/layouts/service-packages/service-packages.vue

@@ -11,9 +11,8 @@
             <div class="iss-heritage-container-width">
                 <div class="service-packages-container iss-heritage-content-container-width">
                     <siteSubHeader
-                        class="mt-4"
-                        subHeaderClasses="mt-5"
-                        justification="left"
+                        class="subheader mt-4"
+                        justification="center"
                         cmsWidgetName="SiteSubHeaderWidget"
                         issContainingPage="service-packages" />
                     <servicePackageQuestion
@@ -25,14 +24,20 @@
                         isRequired
                         @vapsItemsSelected="vapsItemsSelectedAction"
                         @link-event="openModalAction" />
-                    <p
-                        class="caption disclaimer"
-                        v-html="PriceDisclaimerText"></p>
+                    <buttonMain
+                        ref="buttonMain"
+                        class="w-100"
+                        variant="navigation"
+                        :buttonText="'Continue'"
+                        @clickEvent="forwardButtonAction" />
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBack"
-                        @ForwardClicked="forwardButtonAction" />
+                        :isForwardButtonHidden="true"
+                        @backClicked="navigateBack" />
+                    <p
+                        class="caption disclaimer"
+                        v-html="PriceDisclaimerText"></p>
                 </div>
             </div>
             <loadingModal
@@ -72,6 +77,7 @@ import globalRules from '@/constants/global-rules';
 import servicePackageQuestion from '@/layouts/service-packages/service-package-question/service-package-question.vue';
 import issPageValues from '@/router/router-constants/issPage-values';
 import bailoutMessage from '@/constants/bailoutMessage';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
 
 const store = useMainStore();
 
@@ -85,7 +91,8 @@ export default {
         Form,
         servicePackageQuestion,
         loadingModal,
-        contentGroupModal
+        contentGroupModal,
+        buttonMain
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -214,25 +221,27 @@ export default {
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
+        display: block;
+        :deep(.subheader-primary) {
+            display: block;
+        }
+        :deep(.subheader-secondary) {
+            display: block;
+            text-align: center;
+            margin-top: 0.75rem;
+            padding: 0px;
+        }
     }
 }
-
-.subheader-secondary {
-    margin-top: 0.5rem;
-    padding: 0px;
-}
-
 .disclaimer {
     margin: 0.5rem 0 1.5rem 0;
-
-    a {
-        color: #4d5151;
-        font-weight: 400;
+    :deep(.external-text) {
+        text-decoration: none;
     }
 }
 .service-packages {
     :deep(strong) {
-        font-weight: $font-weight-bold;
+        font-weight: 400;
     }
 }