feat(modal): adjust padding of the modal header and footer

vAHiD55555 · Sep 23, 2023 · 53ee2f3 · 53ee2f3
1 parent 2ee48c8
commit 53ee2f3
Showing 1 changed file with 8 additions and 8 deletions.
diff --git 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>