modal updates WIP

src/digital-components/modal/modal.vue

@@ -13,14 +13,13 @@
         }">
         <div class="modal-dialog"
             :class="{
-                'modal-dialog-edge': modalPosition === modalPositions.edge,
                 'modal-dialog-centered': modalPosition === modalPositions.center
             }">
             <div
                 class="modal-content"
                 role="dialog"
                 aria-modal="true">
-                <div class="modal-header mb-2 mt-2">
+                <div class="modal-header">
                     <span
                         v-if="headerText"
                         class="modal-title d-flex justify-content-center pb-0 w-100"
@@ -34,14 +33,13 @@
                         @mousedown="closeModal"
                         @keypress.space="closeModal"></button>
                 </div>
-                <div class="modal-body ps-5 pe-5 pb-5 pt-1">
+                <div class="modal-body">
                     <slot></slot>
                 </div>
-                <div class="modal-footer px-5 py-4">
+                <div class="modal-footer px-5 py-5">
                     <buttonMain
                         id="modalbtn"
                         ref="modalButtonMain"
-                        :variant="buttonVariant"
                         class="w-100"
                         :buttonText="footerButtonText"
                         pushToGA
@@ -84,7 +82,7 @@ export default {
         },
         modalPosition: {
             type: String,
-            default: modalPositions.edge
+            default: modalPositions.center
         },
         allowInvalidSubmit: {
             type: Boolean,
@@ -190,7 +188,6 @@ export default {
         bottom: 0;
         z-index: 5;
         border-radius: 0;
-        background-color: $gray-100;
 
         > .navigation-link {
             color: $black;
@@ -205,7 +202,7 @@ export default {
     &.modal-component {
         .modal-dialog {
             display: flex;
-            max-width: 47.9375rem;
+            max-width: 37.5rem;
             .modal-content {
                 margin: 1.5rem auto 0 auto;
                 .modal-body {
@@ -233,32 +230,11 @@ export default {
                     }
                 }
             }
-            &.modal-dialog-edge {
-                min-height: 100%;
-                margin: 0 auto;
-                align-items: flex-end;
-                @include media-breakpoint-up(md) {
-                    align-items: inherit;
-                    width: 23.5rem;
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    transform: translate(100%);
-                }
-                .modal-content {
-                    box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
-                    border-radius: 1.5rem 1.5rem 0 0;
-                    @include media-breakpoint-up(md) {
-                        box-shadow: none;
-                        border-radius: 0;
-                        margin: 0 auto;
-                    }
-                }
-            }
             &.modal-dialog-centered {
                 .modal-content {
                     box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
-                    border-radius: 1.5rem;
+                    border: 1px solid;
+                    border-radius: 5px;
                     overflow: auto;
                 }
                 .modal-header {
@@ -278,6 +254,14 @@ export default {
 
             button {
                 margin: 0;
+                background-color: $white;
+                color: $blue;
+                border-color: $blue;
+                font-weight: 400;
+                &:hover {
+                    background-color: #167cac;
+                    color: $white;
+                }
             }
         }
     }

src/iss-components/content-group-modal/content-group-modal.vue

@@ -6,7 +6,7 @@
         @footerButtonEvent="footerButtonClick">
         <img
             :src="ModalImage"
-            class="mw-100 d-flex mx-auto mb-4"
+            class="mw-100 d-flex mb-4"
             alt="" />
         <h5
             class="mb-4"