Merge pull request #2479 from Safelite/feature/bugfix/CASH-556

Feature/bugfix/cash 556

src/digital-components/date-picker/date-picker.vue

@@ -853,7 +853,7 @@ export default {
         }
     }
     .calendar-grid-container {
-        margin: 0 auto 2rem auto;
+        margin: 0 auto 1rem auto;
         max-width: 400px;
         position: relative;
         transition:
@@ -1075,12 +1075,16 @@ export default {
                         border-radius: 50%;
                         background-color: $black;
                         position: absolute;
-                        top: 28px;
+                        top: 1.875rem;
                     }
                     .first-day {
                         color: $blue;
                     }
                 }
+                input[type="radio"]:checked + label:after {
+                    background-color: $black;
+                    top: 2rem;
+                }
             }
         }
 
@@ -1206,6 +1210,7 @@ export default {
                 }
             }
             label {
+                color: $gray-500;
                 flex-direction: column;
                 height: 2.5rem;
                 width: 100%;
@@ -1228,10 +1233,11 @@ export default {
                 }
             }
             &.current-day {
-                label:after {
+                label {
-                    margin-top: -0.25rem;
+                    font-weight: 600;
-                    position: relative;
+                    font-family: "AvertaSemibold";
-                    top: 0.5rem;
+                    color: $black;
+                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
                 }
             }
         }
@@ -1242,6 +1248,7 @@ export default {
                     color: $black;
                     font-weight: 400;
                     font-family: "AvertaSemibold";
+                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
 
                     &.price {
                         font-family: "AvertaRegular";
@@ -1274,7 +1281,6 @@ export default {
         max-width: 100%;
         flex-wrap: wrap;
         gap: 0 0.5rem;
-        justify-content: center;
 
         & > div {
             flex: 0 0 calc(50% - 0.25rem);

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

@@ -22,6 +22,10 @@
             v-model="selectedRouteCode"
             isRequired
             validationRules="time-slot-required" />
+        <div
+            class="supplemental-information"
+            v-if="supplementalInformationBlock"
+            v-html="supplementalInformationBlock" />
         <div
             v-if="hasWaitListExperiment && displayWaitListFeature"
             class="mt-5 bg-light rounded waitlist">
@@ -36,23 +40,16 @@
                 v-model="waitListRequested"
                 @click="waitListChecked" />
         </div>
-        <div
+        <div v-if="waitListRequested" class="rounded waitlist-success" ref="waitlistSuccessMessage">
-            v-if="waitListRequested"
-            class="mt-5 rounded waitlist-success"
-            ref="waitlistSuccessMessage">
             <img :src="waitListSuccessImage" class="success-image" />
             <span v-html="waitListSuccessText" class="success-text"></span>
         </div>
-        <div
-            class="mt-5 mb-2 supplemental-information"
-            v-if="supplementalInformationBlock"
-            v-html="supplementalInformationBlock" />
         <textBlock
             v-show="disclaimerTextBlockCopy"
             :customText="disclaimerTextBlockCopy"
             justifyText="left"
             typeStyle="caption"
-            class="mb-2" />
+            class="disclaimer" />
     </div>
 </template>
 
@@ -574,6 +571,7 @@ export default {
         line-height: 1.5rem;
         font-size: 0.875rem;
         text-align: left;
+        margin: 1rem 0 1.5rem;
         li strong {
             font-weight: bold;
         }
@@ -586,6 +584,7 @@ export default {
         border-radius: 8px;
         font-size: 1rem;
         padding: 16px;
+        text-align: left;
 
         .ui-checkbox {
             padding-left: 0px;
@@ -599,6 +598,7 @@ export default {
         }
     }
     .waitlist-success {
+        margin: 1rem 0 0;
         background-color: #ecf5e9;
         display: flex;
         align-items: flex-start;
@@ -606,9 +606,11 @@ export default {
         border-radius: 5px;
         font-size: 1.125rem;
         padding: 0.75rem 1rem;
-        margin-bottom: -0.5rem;
         .success-text {
             margin-left: 0.5rem;
+            p {
+                margin-bottom: 0;
+            }
         }
         .success-image {
             margin-top: 4.5px;
@@ -617,5 +619,9 @@ export default {
             color: #0c7e47;
         }
     }
+    .disclaimer {
+        text-align: left;
+        margin: 1.5rem 0 0;
+    }
 }
 </style>