From 56f26a9d07b409c5c4aaf33125bed64ab61da788 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 26 May 2026 09:32:05 +0200
Subject: [PATCH] feat : update modal style

---
 .playground/pages/composant/modal/modal.vue | 9 ++++++---
 app/components/malio/modal/Modal.vue        | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/.playground/pages/composant/modal/modal.vue b/.playground/pages/composant/modal/modal.vue
index 3d9b944..4e23c5d 100644
--- a/.playground/pages/composant/modal/modal.vue
+++ b/.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>
 
diff --git a/app/components/malio/modal/Modal.vue b/app/components/malio/modal/Modal.vue
index 13b09cb..2800e9a 100644
--- a/app/components/malio/modal/Modal.vue
+++ b/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" />