updates to cancel claim modal

src/digital-components/modal/modal.vue

@@ -22,7 +22,7 @@
                 <div class="modal-header">
                     <span
                         v-if="headerText"
-                        class="modal-title d-flex justify-content-center pb-0 w-100"
+                        class="modal-title d-flex pb-0 w-100"
                         :innerHTML="headerText">
                     </span>
                     <button
@@ -38,6 +38,7 @@
                 </div>
                 <div class="modal-footer">
                     <buttonMain
+                        v-if="displayFooterButton"
                         id="modalbtn"
                         ref="modalButtonMain"
                         class="w-100"
@@ -87,6 +88,10 @@ export default {
         allowInvalidSubmit: {
             type: Boolean,
             default: false
+        },
+        displayFooterButton: {
+            type: Boolean,
+            default: true
         }
     },
     emits: ['footer-button-event', 'isModalOpened'],
@@ -179,10 +184,11 @@ export default {
         }
 
         .modal-title {
-            font-weight: 500;
+            font-weight: 400;
             font-size: 1.25rem;
             line-height: 2rem;
             color: $black;
+            padding-left: 1.5rem;
         }
     }
     .modal-footer {
@@ -216,6 +222,7 @@ export default {
             .modal-content {
                 margin: 1.5rem auto 0 auto;
                 .modal-body {
+                    color: #4d4e53;
                     padding: 0 1.5rem 0 1.5rem;
                     .col {
                         max-width: 100%;
@@ -253,9 +260,6 @@ export default {
                     border-radius: 5px;
                     overflow: auto;
                 }
-                .modal-header {
-                    justify-content: center;
-                }
             }
         }
         .modal-footer {

src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue

@@ -6,18 +6,25 @@
             <modal
                 ref="cancelClaimModal"
                 :headerText="modalHeaderText"
-                :footerButtonText="modalFooterText"
-                buttonVariant="link"
                 @isModalOpened="setModalStatus"
-                @footerButtonEvent="cancelClaimConfirmation">
+                :displayFooterButton="false">
                 <div v-html="modalBodyText"></div>
                 <buttonMain
                     id="btnContinueReferral"
                     variant="success"
                     :buttonText="modalBodyText2"
-                    class="mt-4 w-100"
+                    class="mt-5 w-100"
                     @clickEvent="returnToClaim">
                 </buttonMain>
+                <div class="text-center mt-5">
+                    <textLink
+                        class="cancel-link"
+                        linkType="text"
+                        text="No, I want to cancel"
+                        href="#"
+                        @clickEvent="cancelClaimConfirmation">
+                    </textLink>
+                </div>
             </modal>
         </div>
     </transition>
@@ -26,12 +33,14 @@
 <script>
 import modal from '@/digital-components/modal/modal.vue';
 import ButtonMain from '@/ux-components/button-main/button-main.vue';
+import textLink from '@/ux-components/text-link/text-link.vue';
 
 export default {
     name: 'cancel-claim-modal',
     components: {
         ButtonMain,
-        modal
+        modal,
+        textLink
     },
     emits: ['cancel-claim-confirmation', 'return-to-claim'],
     data() {
@@ -74,5 +83,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal) {
+    .modal-title {
+        margin-top: 1rem;
+    }
+    .cancel-link {
+        text-decoration: underline;
+    }
 
+    .modal-footer {
+        padding-bottom: 1rem;
+    }
+}
 </style>