yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4535
This commit is contained in:
hsjobeki
2025-07-30 11:55:35 +00:00
parent bb92ffb898 7f1a7da5c7
commit 567e8b57cd
3 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pkgs/clan-app/ui/src/components/Modal/Modal.css
View File

@@ -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;
}
}

24
pkgs/clan-app/ui/src/components/Modal/Modal.module.css Normal file
View File

@@ -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;
}

10
pkgs/clan-app/ui/src/components/Modal/Modal.tsx
View File

@@ -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)}>
<div class="header">
<KDialog.Content class={cx(styles.modal_content, props.class)}>
<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);