feat : update modal style

.playground/pages/composant/modal/modal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import MalioButton from "../../../../app/components/malio/button/Button.vue";
 
 const modalBase = ref(false)
 const modalForm = ref(false)
@@ -12,11 +13,13 @@ const modalNoDismiss = ref(false)
     <div class="rounded-lg border p-6">
       <h2 class="mb-6 text-xl font-bold">Modal simple</h2>
       <MalioButton label="Ouvrir" @click="modalBase = true" />
-      <MalioModal v-model="modalBase">
+      <MalioModal v-model="modalBase" headerClass="py-7 px-[25px]" footerClass="flex justify-center pt-8">
         <template #header>
-          <h2 class="text-[24px] font-bold text-black">Détails</h2>
+          <h2 class="text-[24px] font-bold text-black">Marquer comme vu ?</h2>
+        </template>
+        <template #footer>
+          <MalioButton label="Valider"/>
         </template>
-        <p class="text-m-text">Contenu de la modal. Échap, clic backdrop et croix la ferment.</p>
       </MalioModal>
     </div>
 

app/components/malio/modal/Modal.vue

@@ -20,7 +20,7 @@
         <div
           ref="panelRef"
           :class="twMerge(
-            'relative z-50 flex max-h-[85vh] w-full max-w-md flex-col rounded-malio bg-white',
+            'relative z-50 flex max-h-[85vh] w-full max-w-md flex-col rounded-malio bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]',
             modalClass,
           )"
           role="dialog"
@@ -66,7 +66,7 @@
           </div>
           <div
             v-if="$slots.footer"
-            :class="twMerge('flex shrink-0 items-center gap-3 border-t border-m-border px-5 py-4', footerClass)"
+            :class="twMerge('flex shrink-0 items-center gap-3 px-5 py-4', footerClass)"
             data-test="footer"
           >
             <slot name="footer" />