Merge pull request #2827 from Safelite/feature/bug-fix/CASH-1437

Feature/bug fix/cash 1437

public/css/hop-styling.css

@@ -53,6 +53,7 @@ body select {
   background-color: #fff;
   font-family: Urbanist, Arial, Helvetica, sans-serif;
   font-weight: 400;
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
 body input:focus, body input:focus-visible,
 body select:focus,

public/scss/hop-styling.scss

@@ -63,6 +63,7 @@ body {
         background-color: #fff;
         font-family: Urbanist, Arial, Helvetica, sans-serif;
         font-weight: 400;
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
         &:focus,
         &:focus-visible {
             box-shadow: 0 0 0 2.5px #1574a1;

src/layouts/estimate/estimate.vue

@@ -286,5 +286,6 @@ export default {
 .select-option {
     font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
     font-weight: 600;
+    color: $black;
 }
 </style>

src/layouts/mobile-details/mobile-details.vue

@@ -240,4 +240,7 @@ export default {
     color: $gray-600;
     font-family: UrbanistRegular;
 }
+:deep(.caption) {
+    font-size: 0.875rem;
+}
 </style>

src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue

@@ -20,8 +20,8 @@
                     <span v-else>{{ getInlineAltText(token) }}</span>
                 </span>
                 <span v-else v-html="token"></span>
+                <span class="nbsp">&nbsp;</span>
             </span>
-            &nbsp;
             <a
                 id="afterpay-learnmore"
                 href="#"
@@ -139,7 +139,7 @@ export default {
         line-height: 2rem;
         @include media-breakpoint-down(md) {
             border-bottom: 1px solid;
-            padding-bottom: 1rem;
+            padding-bottom: 0.5rem;
             width: 100%;
             justify-content: center;
 
@@ -170,4 +170,8 @@ export default {
         font-size: 0.875rem;
     }
 }
+#afterpay-learnmore {
+    font-weight: 600;
+    font-size: 0.875rem;
+}
 </style>

src/layouts/quote/quote.vue

@@ -57,7 +57,7 @@
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="mt-6 d-flex"
+                        class="mt-4 d-flex"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"
@@ -899,6 +899,9 @@ export default {
 
 <style lang="scss" scoped>
 // Unique to quote page for 2.0/Heritage parity
+.prevent-modal-scroll.modal-open .container.quote .row:not(.save-progress-popup) {
+    opacity: 0;
+}
 .quote {
     padding-bottom: 2rem;
 

src/layouts/schedule/schedule.vue

@@ -1794,7 +1794,7 @@ export default {
     text-underline-offset: 4px;
 }
 
-.text-block.duration-text-block b {
+:deep(.text-block.duration-text-block b) {
     font-family: UrbanistSemibold;
 }
 :deep(.alert-warning.widget-name-AlertRecalNoMobileWidget .alert-heading),

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -15,7 +15,7 @@
                 <alert
                     v-if="shouldDisplayDropOffAlert"
                     ref="alertDropoffInformation"
-                    class="mb-4 drop-off-alert"
+                    class="mt-4 mb-4 drop-off-alert"
                     :cmsWidgetName="dropOffTimeSlotAlertCMSWidgetName"
                     alertClass="alert-info"
                     v-bind:isDismissible="false" />

src/ux-components/list-button/list-button.vue

@@ -79,7 +79,7 @@ export default {
             color: $black;
             font-weight: 500;
             background: $blue-100;
-            box-shadow: 0 0 0 1px $blue;
+            border: 1px solid $blue;
         }
         &:checked:focus + .list-button-content {
             box-shadow: 0 0 0 2.5px $blue;