a tool for shared writing and social publishing
leaflet.pub
update modal to have close button
cozylittle.house
+6
-3
components/Modal.tsx
+6
-3
components/Modal.tsx
···
1
1
import * as Dialog from "@radix-ui/react-dialog";
2
2
import React from "react";
3
+
import { CloseTiny } from "./Icons/CloseTiny";
3
4
4
5
export const Modal = ({
5
6
className,
···
26
27
<Dialog.Content
27
28
className={`
28
29
z-20 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
29
-
overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3
30
+
overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3 flex flex-col
30
31
31
32
`}
32
33
>
34
+
<Dialog.Close className="bg-bg-page rounded-full -mb-3 mr-2 z-10 w-fit p-1 place-self-end border border-border-light text-tertiary">
35
+
<CloseTiny />
36
+
</Dialog.Close>
33
37
<div
34
38
className={`
35
39
opaque-container p-3
36
-
flex flex-col gap-1
40
+
flex flex-col gap-1 rounded-lg!
37
41
${className}`}
38
42
>
39
43
{title ? (
···
45
49
)}
46
50
<Dialog.Description>{children}</Dialog.Description>
47
51
</div>
48
-
<Dialog.Close />
49
52
</Dialog.Content>
50
53
</Dialog.Portal>
51
54
</Dialog.Root>