more styling updates

src/digital-components/button-question/button-question.vue

@@ -236,7 +236,7 @@ export default {
                 case 'servicePackageRadio':
                     classes = 'package-wrapper';
                     if (this.isHorizontalLayout) {
-                        classes += ' flex-fill';
+                        classes += ' flex-grow-0 flex-shrink-0';
                     }
                     break;
                 case 'providerPrefRadio':
@@ -332,6 +332,12 @@ export default {
 
 <style lang="scss" scoped>
 .button-question {
+    :deep(.package-wrapper) {
+        @media (min-width: 768px) {
+            flex: 0 0 calc(33.333% - 0.67rem);
+            max-width: calc(33.333% - 0.67rem);
+        }
+    }
     color: $black;
 
     .radio-button-container {
@@ -352,6 +358,11 @@ export default {
             &.button-question-text-left {
                 text-align: left;
             }
+            &.service-package-question-text {
+                font-weight: 500;
+                text-align: center;
+                margin-bottom: 0.5rem;
+            }
         }
     }
 

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

@@ -2,8 +2,11 @@
     <buttonQuestion
         ref="buttonQuestion"
         v-model="selectedPackageName"
+        class="service-package-question"
         :answers="servicePackageAnswers"
         :groupName="groupName"
+        :questionText="questionText"
+        :questionTextClasses="['service-package-question-text']"
         buttonTypeString="servicePackageRadio"
         :buttonTypeObject="servicePackageRadio"
         :validationRules="validationRules"
@@ -50,7 +53,8 @@ export default {
     data() {
         return {
             servicePackageRadio,
-            selectedPackageName: ''
+            selectedPackageName: '',
+            questionText: 'Select an option:'
         };
     },
     computed: {
@@ -280,3 +284,10 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+.service-package-question-text {
+    font-weight: 500;
+    text-align: center;
+}
+</style>

src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue

@@ -143,7 +143,8 @@ export default {
                     width: 100%;
                     padding: 1rem;
                     border: 1px solid $gray-300;
-                    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+                    //box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
                     border-radius: 0.5rem;
                     overflow: hidden;
                     min-height: 60px;

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

@@ -24,21 +24,23 @@
                         isRequired
                         @vapsItemsSelected="vapsItemsSelectedAction"
                         @link-event="openModalAction" />
-                    <buttonMain
-                        ref="buttonMain"
-                        class="w-100"
-                        variant="navigation"
-                        :buttonText="'Continue'"
-                        @clickEvent="forwardButtonAction" />
+                    <div class="d-flex justify-content-center mt-8 mb-4">
+                        <buttonMain
+                            ref="buttonMain"
+                            class="continue-button"
+                            variant="navigation"
+                            :buttonText="'Continue'"
+                            @clickEvent="forwardButtonAction" />
+                    </div>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
                         :isForwardButtonHidden="true"
                         @backClicked="navigateBack" />
-                    <p
-                        class="caption disclaimer"
-                        v-html="PriceDisclaimerText"></p>
                 </div>
+                <p
+                    class="caption disclaimer"
+                    v-html="PriceDisclaimerText"></p>
             </div>
             <loadingModal
                 ref="loadingModal"
@@ -239,6 +241,7 @@ export default {
 }
 .disclaimer {
     margin: 0.5rem 0 1.5rem 0;
+    padding-left: 3rem;
     :deep(.external-text) {
         text-decoration: none;
     }
@@ -249,4 +252,7 @@ export default {
     }
 }
 
+.continue-button {
+    width: 60%
+}
 </style>