From 7f2a56d8131ba1811fcb3cf50e6ba152d145b9df Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 14 Oct 2022 12:39:31 -0400
Subject: [PATCH 1/3] WIP modal updates.

---
 src/common-components/modal/modal.vue | 33 ++++++++++++++++++++++-----
 src/styles/ux-variables.scss          |  3 ++-
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 4dd99fbc5..f0da7f9c9 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -3,14 +3,17 @@
   <div class="modal fade modal-component" :id="this.cmsWidgetName" tabindex="-1" aria-labelledby="ModalComponentLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
         <div class="modal-body ps-4 pe-4 pt-5 pb-4">
           <img :src="this.ModalImage" class="w-100 mb-4" alt="" />
           <h5 class="mb-4" v-html="this.ModalHeadline"></h5>
           <p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
           <p class="mb-0" v-html="this.ModalBodyText"></p>
         </div>
-        <div class="modal-footer px-4 pt-4 pb-5">
-          <button class="btn btn-secondary w-100" data-bs-dismiss="modal" v-html="this.ModalCloseButtonText"></button>
+        <div class="modal-footer px-5 py-4">
+          <button class="btn btn-primary w-100" data-bs-dismiss="modal" v-html="this.ModalCloseButtonText"></button>
         </div>
       </div>
     </div>
@@ -45,17 +48,29 @@ export default {
 
 <style lang="scss">
 .modal {
+  top: auto;
+  bottom: 0;
+  height: auto;
   h5,
   strong,
   .subheader-text {
     color: $black;
   }
+  .modal-header {
+    border-bottom: none;
+    .btn-close {
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+      opacity: 1;
+    }
+  }
   &.modal-component {
     .modal-dialog {
+      max-width: 576px;
+      margin: 0 auto;
       .modal-content {
-        max-width: 327px;
         margin: 0 auto;
         box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
+        border-radius: 1.5rem 1.5rem 0 0;
         .modal-body {
           ul {
             margin-bottom: 0;
@@ -70,15 +85,21 @@ export default {
     }
     .modal-footer {
       border-top: none;
+      background-color: $gray-100;
+      box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
       button {
         margin: 0;
+        height: 3rem;
       }
     }
   }
 }
-.modal-backdrop {
-  &.show {
-    opacity: .4;
+body {
+  .modal-backdrop {
+    height: 100%;
+    &.show {
+      opacity: .4;
+    }
   }
 }
 </style>
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 52cf89169..5944c8c42 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -182,5 +182,6 @@ $alert-border-scale:            -100%;
 $alert-color-scale:             40%;
 
 //Modal animation
-$modal-fade-transform:              translate(0, 0);
+// This affects all [Bootstrap] modals
+$modal-fade-transform:              translate(0, 100%);
 $modal-backdrop-opacity:            0;

From aef6308ac7606ba3a6112f393306a8e64eabfa47 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 14 Oct 2022 14:28:39 -0400
Subject: [PATCH 2/3] WIP Update modal to drawer.

---
 src/common-components/modal/modal.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index f0da7f9c9..23f98edfa 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -50,7 +50,7 @@ export default {
 .modal {
   top: auto;
   bottom: 0;
-  height: auto;
+  // height: auto;
   h5,
   strong,
   .subheader-text {
@@ -82,6 +82,10 @@ export default {
           }
         }
       }
+      &.modal-dialog-centered {
+        align-items: flex-end;
+        min-height: 100%;
+      }
     }
     .modal-footer {
       border-top: none;

From 22163c8ae4760aae17a584496e6b32998d997b08 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 17 Oct 2022 08:59:32 -0400
Subject: [PATCH 3/3] Code cleanup.

---
 src/common-components/modal/modal.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 23f98edfa..04f99f0df 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -50,7 +50,6 @@ export default {
 .modal {
   top: auto;
   bottom: 0;
-  // height: auto;
   h5,
   strong,
   .subheader-text {