Merge pull request 'ui/modal: use css modules' (#4535) from ui-progress into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4535

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

@@ -1,24 +0,0 @@
-div.modal-content {
-  @apply min-w-[320px] max-w-[512px];
-  @apply rounded-md;
-
-  /* todo replace with a theme() color */
-  box-shadow: 0.1875rem 0.1875rem 0 0 rgba(145, 172, 175, 0.32);
-
-  & > div.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 border-b-def-3;
-
-    & > .modal-title {
-      @apply mx-auto;
-    }
-  }
-
-  & > div.body {
-    @apply p-6 bg-def-1;
-    @apply border border-def-2 rounded-bl-md rounded-br-md;
-  }
-}

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

@@ -0,0 +1,24 @@
+.modal_content {
+  @apply min-w-[320px] max-w-[512px];
+  @apply rounded-md;
+
+  /* todo replace with a theme() color */
+  box-shadow: 0.1875rem 0.1875rem 0 0 rgba(145, 172, 175, 0.32);
+}
+
+.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 border-b-def-3;
+}
+
+.modal_title {
+  @apply mx-auto;
+}
+
+.modal_body {
+  @apply p-6 bg-def-1;
+  @apply border border-def-2 rounded-bl-md rounded-br-md;
+}

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

@@ -1,6 +1,6 @@
 import { createSignal, JSX } from "solid-js";
 import { Dialog as KDialog } from "@kobalte/core/dialog";
-import "./Modal.css";
+import styles from "./Modal.module.css";
 import { Typography } from "../Typography/Typography";
 import Icon from "../Icon/Icon";
 import cx from "classnames";
@@ -24,10 +24,10 @@ export const Modal = (props: ModalProps) => {
   return (
     <KDialog id={props.id} open={open()} modal={true}>
       <KDialog.Portal mount={props.mount}>
-        <KDialog.Content class={cx("modal-content", props.class)}>
+        <KDialog.Content class={cx(styles.modal_content, props.class)}>
-          <div class="header">
+          <div class={styles.modal_header}>
             <Typography
-              class="modal-title"
+              class={styles.modal_title}
               hierarchy="label"
               family="mono"
               size="xs"
@@ -43,7 +43,7 @@ export const Modal = (props: ModalProps) => {
               <Icon icon="Close" size="0.75rem" />
             </KDialog.CloseButton>
           </div>
-          <div class="body">
+          <div class={styles.modal_body}>
             {props.children({
               close: () => {
                 setOpen(false);