tpa recal modal

src/digital-components/modal/modal.vue

@@ -26,6 +26,7 @@
                         :innerHTML="headerText">
                     </span>
                     <button
+                        v-if="displayCloseButton"
                         ref="closeButton"
                         type="button"
                         class="btn-close"
@@ -49,6 +50,13 @@
                             'form-test-invalid'
                         ]"
                         @clickEvent="validateAndEmit" />
+                    <textLink
+                        v-if="displayCloseLink"
+                        class="mt-4 mb-0"
+                        linkType="text"
+                        text="Close window"
+                        href="#"
+                        @click="closeModal" />
                 </div>
             </div>
         </div>
@@ -60,11 +68,13 @@ import ButtonMain from '@/ux-components/button-main/button-main.vue';
 import { Modal } from 'bootstrap';
 import { useForm } from 'vee-validate';
 import { modalPositions } from '@/constants/component-variants';
+import textLink from '@/ux-components/text-link/text-link.vue';
 
 export default {
     name: 'modal',
     components: {
-        ButtonMain
+        ButtonMain,
+        textLink
     },
     props: {
         modalId: String,
@@ -92,6 +102,14 @@ export default {
         displayFooterButton: {
             type: Boolean,
             default: true
+        },
+        displayCloseButton: {
+            type: Boolean,
+            default: true
+        },
+        displayCloseLink: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['footer-button-event', 'isModalOpened'],
@@ -197,6 +215,7 @@ export default {
         bottom: 0;
         z-index: 5;
         border-radius: 0;
+        justify-content: center;
 
         > .navigation-link {
             color: $black;

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue

@@ -5,7 +5,9 @@
             :modalId="ModalName"
             :footerButtonText="ModalCloseButtonText"
             :isButtonDisabled="isButtonDisabled"
-            @footerButtonEvent="footerButtonClick">
+            @footerButtonEvent="footerButtonClick"
+            :displayCloseButton="false"
+            :displayCloseLink="true">
             <div class="form-test-invalid">
                 <h5 class="text-center mb-4">
                 {{ ModalHeadline }}
@@ -33,7 +35,7 @@
                     v-if="showAcknowledgementCheckbox"
                         ref="tpaAcknowledgement"
                         v-model="acknowledged"
-                        class="mb-2"
+                        class="mb-2 mt-4"
                         :class="showAcknowledgementError && ' has-error'"
                         :validationRules="rules.optionRequired"
                         checkboxName="tpaAcknowledgement"
@@ -160,14 +162,39 @@ export default {
         color: #4d4e53;
     }
     .modal-footer {
-        padding-top: 20px;
+        padding-top: 22px;
         button {
             background-color: $green;
             color: $white;
+            font-weight: $font-weight-bold;
         }
     }
     .tpa-recal-question > div:first-of-type { 
         margin-bottom: 20px;
     }
+    .button-question {
+        fieldset {
+            box-shadow: 0px 2px 5px -5px rgba(0, 0, 0, 0.25);
+        }
+    }
+    .list-button-horizontal {
+        &.selected {
+            input {
+                background-color: $background-color-selected;
+            }
+        }
+    }
+    .form-check {
+        p {
+            font-size: 1rem;
+        }
+        .form-check-input:checked {
+            + label p {
+                font-size: 1rem;
+                color: #4d4e53;
+                font-weight: 500;
+            }
+        }
+    }
 }
 </style>