vehicle damage updates

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

@@ -14,7 +14,7 @@
                 'small-question-label-text': isSmallQuestionLabelText,
             }">
             <span
-                class="fw-bold w-100"
+                class="w-100"
                 :class="questionTextClasses">{{ questionText }}</span>
         </div>
         <div class="w-100 d-flex justify-content-center">
@@ -64,8 +64,8 @@
                             :suppressError="suppressError" />
                         <!-- For nested questions -->
                         <transition
-name="fade"
-mode="out-in">
+                            name="fade"
+                            mode="out-in">
                             <div
                                 v-if="
                                     typeof selectedValues == 'string' &&
@@ -79,8 +79,8 @@ mode="out-in">
             </fieldset>
         </div>
         <div
-v-if="!suppressError"
-class="row form-test-error mt-1">
+            v-if="!suppressError"
+            class="row form-test-error mt-1">
             <error-message :name="formatString(groupName)"></error-message>
         </div>
     </div>
@@ -328,6 +328,21 @@ export default {
         }
     }
 
+    .question-text {
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        line-height: 1.625rem;
+
+        span {
+            &.select-all-glass-parts {
+                color: #525656;
+            }
+            &.button-question-text-left {
+                text-align: left;
+            }
+        }
+    }
+
     &.provider-preference {
         .question-text {
             span {
@@ -336,12 +351,6 @@ export default {
         }
     }
 }
-.question-text {
-    margin-top: 1.5rem;
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    line-height: 1.625rem;
-}
 
 .small-question-text {
     &.question-text {

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -7,6 +7,7 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonTypeString="listCard"
+            :questionTextClasses="['button-question-text-left','select-all-glass-parts']"
             isRequired
             validationRules="damage-location-required" />
     </div>

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -4,7 +4,7 @@
         mode="out-in">
         <div
             v-if="shouldDisplayReplaceOptionsQuestion"
-            class="replace-options-question"
+            class="replace-options-question-container"
             :class="answersToDisplay.length < 2 ? 'd-none' : ''"
             aria-live="polite">
             <buttonQuestion
@@ -15,6 +15,7 @@
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonTypeString="listCard"
+                :questionTextClasses="['replace-options-question-item']"
                 :validationRules="validationRules"
                 :suppressError="suppressError"
                 :isRequired="isRequired" />
@@ -110,3 +111,9 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+.replace-options-question-container {
+    margin-top: 1rem;
+}
+</style>

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -491,7 +491,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .iss-heritage-container-width {
     .vehicle-damage-container {
         position: relative;
@@ -499,8 +499,8 @@ export default {
         padding-left: .9375rem;
         padding-right: .9375rem;
 
-        .question-text {
-            margin-top: 0; //would need deep is changed to scoped. Was already not scoped.
+        .vehicle-damage-question-container {
+            margin-top: 0.625rem; // 10px
         }
     }
 }

src/styles/common-typography-styles.scss

@@ -81,6 +81,14 @@ caption,
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Urbanist";
+  src:
+    url("@/assets/fonts/Urbanist-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+
 @font-face {
   font-family: "Urbanist";
   src: