Merge pull request #216 from Safelite/feature/Digital/SSR-241

CSS changes for welcome & vehicle parts page

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

@@ -4,7 +4,8 @@
         :class="
             isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
         ">
-        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5">
+        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5" 
+            :class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
 
@@ -121,6 +122,8 @@ export default {
         useTextForValue: Boolean,
         valueToLogType: String,
         additionalButtonStyling: String,
+        isSmallQuestionText: Boolean,
+        isSmallQuestionLabelText: Boolean,
     },
     beforeMount() {
         if (this.buttonTypeObject) {
@@ -134,13 +137,20 @@ export default {
     },
     computed: {
         getFieldSetClasses() {
-            if (this.isOverflowScrollable) {
-                return "container-fluid overflow-scroll position-absolute pt-1 py-0";
-            } else if (this.buttonTypeString == "listCard") {
-                return "w-100";
-            } else {
-                return "";
-            }
+            const baseClasses = this.isOverflowScrollable
+                ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
+                : this.buttonTypeString == "listCard"
+                ? "w-100"
+                : "";
+
+            const SmallQuestionTextClass = this.isSmallQuestionText
+                ? baseClasses + "small-question-text"
+                : baseClasses;            
+
+            const SmallQuestionLabelText = this.isSmallQuestionLabelText
+                ? SmallQuestionTextClass + "small-question-label-text"
+                : SmallQuestionTextClass;
+            return SmallQuestionLabelText;
         },
         getComponentLoopWrapperClasses() {
             let classes;
@@ -254,35 +264,35 @@ export default {
     }
 }
 
-.vehicle-parts {
-    .question-text {
+.small-question-text {
+    &.question-text {
         span {
             font-size: 0.875rem;
             text-align: left;
             margin: 0 0 0.5rem 0;
         }
     }
-    .question-text {
+    &.question-text {
         margin: 0;
     }
-    fieldset {
+    &fieldset {
         .ui-radio {
             margin: 0;
         }
     }
 }
 
-.welcome {
-  .question-text {
-      span {
+.small-question-label-text {
+    &.question-text {
+        span {
           text-align: left;
           margin: 0 0 0.25rem 0;
       }
   }
-  .question-text {
+  &.question-text {
       margin: 0;
   }
-  fieldset {
+  &fieldset {
       .ui-radio {
           margin: 0;
       }

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -25,6 +25,7 @@
                                 textPosition="text-start"
                                 :loaderEnabled="false"
                                 isRequired
+                                isSmallQuestionText
                                 :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
                                 :validationRules="partValidationRules" />
                         </div>

src/layouts/welcome-page/welcome-page.vue

@@ -120,6 +120,7 @@
                         buttonTypeString="listButtonHorizontal"
                         validationRules="damage-option-required"
                         isRequired
+                        isSmallQuestionLabelText
                         ref="glassOnlyDamage"
                         v-if="this.displayGlassOnlyQuestion"
                         disableAutoFill/>