Modal: add metaHeader slot, fix border styling

pkgs/clan-app/ui/src/components/Modal/Modal.module.css

@@ -4,14 +4,17 @@
 
   /* todo replace with a theme() color */
   box-shadow: 0.1875rem 0.1875rem 0 0 rgba(145, 172, 175, 0.32);
+  @apply border border-def-3 rounded-bl-md rounded-br-md;
 }
 
 .modal_header {
   @apply flex items-center justify-center;
   @apply w-full px-2 py-1.5;
   @apply bg-def-3;
-  @apply border border-def-2 rounded-tl-md rounded-tr-md;
+  @apply rounded-tl-md rounded-tr-md;
-  @apply border-b-def-3;
+  /* @apply border-b-def-3; */
+
+  border-bottom: solid 1px theme(colors.border.def.2);
 }
 
 .modal_title {
@@ -19,6 +22,9 @@
 }
 
 .modal_body {
-  @apply p-6 bg-def-1;
+  @apply rounded-md p-6 pt-4 bg-def-1;
-  @apply border border-def-2 rounded-bl-md rounded-br-md;
+}
+
+.header_divider {
+  @apply bg-def-3 h-[6px] border-def-2 border-t-[1px];
 }

pkgs/clan-app/ui/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { createSignal, JSX } from "solid-js";
+import { createSignal, JSX, Show } from "solid-js";
 import { Dialog as KDialog } from "@kobalte/core/dialog";
 import styles from "./Modal.module.css";
 import { Typography } from "../Typography/Typography";
@@ -16,7 +16,7 @@ export interface ModalProps {
   children: (ctx: ModalContext) => JSX.Element;
   mount?: Node;
   class?: string;
-  header?: () => JSX.Element;
+  metaHeader?: () => JSX.Element;
 }
 
 export const Modal = (props: ModalProps) => {
@@ -44,7 +44,14 @@ export const Modal = (props: ModalProps) => {
               <Icon icon="Close" size="0.75rem" />
             </KDialog.CloseButton>
           </div>
-          {props.header?.()}
+          <Show when={props.metaHeader?.()}>
+            {(metaHeader) => (
+              <>
+                {metaHeader()}
+                <div class={styles.header_divider} />
+              </>
+            )}
+          </Show>
           <div class={styles.modal_body}>
             {props.children({
               close: () => {