From 53ee2f31b397b3abd6a208a88492be2f6eaaeebe Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sat, 23 Sep 2023 20:43:57 +0800
Subject: [PATCH] feat(modal): adjust padding of the modal header and footer

---
 src/components/Modal.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 6ebde08..b71986e 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -10,8 +10,8 @@ type Props = {
   action?: JSX.Element
 }
 
-const actionClass =
-  'sticky bottom-0 z-50 flex items-center justify-end bg-base-100 bg-opacity-80 p-6 backdrop-blur'
+const actionClassName =
+  'sticky bottom-0 z-50 flex items-center justify-end bg-base-100 bg-opacity-80 p-4 backdrop-blur'
 
 export const Modal: ParentComponent<Props> = (props) => {
   let dialogRef: HTMLDialogElement | undefined
@@ -22,24 +22,24 @@ export const Modal: ParentComponent<Props> = (props) => {
       class="modal modal-bottom sm:modal-middle"
     >
       <div class="modal-box p-0" onContextMenu={(e) => e.preventDefault()}>
-        <div class={twMerge(actionClass, 'top-0 justify-between')}>
+        <div class={twMerge(actionClassName, 'top-0 justify-between')}>
           <div class="flex items-center gap-4 text-xl font-bold">
             {props.icon}
+
             <span>{props.title}</span>
           </div>
+
           <Button
             class="btn-circle btn-sm"
-            onClick={() => {
-              dialogRef?.close()
-            }}
+            onClick={() => dialogRef?.close()}
             icon={<IconX size={20} />}
           />
         </div>
 
-        <div class="p-6 pt-3">{children(() => props.children)()}</div>
+        <div class="p-4">{children(() => props.children)()}</div>
 
         <Show when={props.action}>
-          <div class={actionClass}>
+          <div class={actionClassName}>
             <div class="flex justify-end gap-2">{props.action}</div>
           </div>
         </Show>