SSR-1201 style updates.

src/digital-components/modal/modal.vue

@@ -8,7 +8,7 @@
         aria-hidden="true"
         v-on="{
             'hidden.bs.modal': onModalClosed,
-            'shown.bs.modal': onModalOpened,
+            'shown.bs.modal': onModalOpened
         }">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
@@ -56,19 +56,19 @@ export default {
     // eslint-disable-next-line vue/multi-word-component-names
     name: 'modal',
     components: {
-        modalButtonMain,
+        modalButtonMain
     },
     props: {
         modalId: String,
         headerText: String,
         footerButtonText: String,
         onModalOpenedCallback: {
-            type: Function,
+            type: Function
         },
         onModalClosedCallback: {
-            type: Function,
+            type: Function
         },
-        isButtonDisabled: Boolean,
+        isButtonDisabled: Boolean
     },
     emits: ['footer-button-event', 'isModalOpened'],
     setup(props) {
@@ -83,7 +83,7 @@ export default {
             modalId,
             meta,
             validate,
-            resetForm,
+            resetForm
         };
     },
     computed: {
@@ -92,7 +92,7 @@ export default {
                 return !this.meta.valid;
             }
             return !this.meta.dirty || !this.meta.valid;
-        },
+        }
     },
     methods: {
         async validateAndEmit() {
@@ -126,8 +126,8 @@ export default {
             );
             modal?.hide();
             this.$emit('isModalOpened', false);
-        },
-    },
+        }
+    }
 };
 </script>
 
@@ -163,6 +163,8 @@ export default {
         width: 100%;
         bottom: 0;
         z-index: 5;
+        border-radius: 0;
+        background-color: $gray-100;
     }
     &.modal-component {
         .modal-dialog {

src/iss-components/site-header/site-header.vue

@@ -12,7 +12,7 @@
         </div>
         <alert
             v-if="displayGlobalAlert"
-            class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
+            class="rounded-0 w-100 border-0 shadow-sm start-0 my-3"
             cmsWidgetName="GlobalAlert"
             :manualHeadline="globalAlertMessage.messageHeadline"
             :manualCopy="globalAlertMessage.messageCopy"
@@ -140,10 +140,6 @@ export default {
     height: 56px;
     position: relative;
 }
-.alert {
-    left: 0;
-    top: 72px;
-}
 #siteHeaderImage {
     width: 7.125rem;
     height: auto;

src/layouts/order-confirmation/order-confirmation.vue

@@ -4,10 +4,14 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="main-content-container">
+        <div class="container-fluid fade-on-route-transition">
+            <div class="row justify-content-center">
+                <div class="col-md-6 px-0 px-md-2">
+                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <div class="text-center text-color--black pt-5 pb-5 fs-5">
                         <img :src="orderConfirmationImage" />
                         <span
@@ -86,7 +90,7 @@ import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
 // Supporting files
 import {
     fetchCmsContentForPage,
-    processIfStatements,
+    processIfStatements
 } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
@@ -96,7 +100,7 @@ import {
     get12HourTimeFormat,
     get12HourTimeMobileFormat,
     convertDateStringToDate,
-    getDisplayTextForDurationLength,
+    getDisplayTextForDurationLength
 } from '@/helpers/date-helper.js';
 import { toTitleCase } from '@/helpers/text-helper.js';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
@@ -111,7 +115,7 @@ export default {
         vehicleBanner,
         siteFooter,
         addToCalendar,
-        cartDropdown,
+        cartDropdown
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -123,8 +127,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
-            },
+                promise: cmsContentPromise
+            }
         ];
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -186,7 +190,7 @@ export default {
             return dateObject.toLocaleDateString('en-us', {
                 weekday: 'long',
                 month: 'long',
-                day: 'numeric',
+                day: 'numeric'
             });
         },
         appointmentTimeFormatted() {
@@ -328,7 +332,7 @@ export default {
         },
         selectedVaps() {
             return this.submittedOrder.lineItems.vaps;
-        },
+        }
     },
     mounted() {
         if (this.carrierUrl) {
@@ -444,8 +448,8 @@ export default {
                 default:
                     return null;
             }
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>