From a664db07003ee2e91cfbba5bd14e35b0d449eda5 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 9 Feb 2026 13:27:19 -0500
Subject: [PATCH] update modal to have close button

---
 components/Modal.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index a2002207..fa9def2e 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -1,5 +1,6 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import React from "react";
+import { CloseTiny } from "./Icons/CloseTiny";
 
 export const Modal = ({
   className,
@@ -26,14 +27,17 @@ export const Modal = ({
         <Dialog.Content
           className={`
           z-20 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
-          overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3
+          overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3 flex flex-col
 
           `}
         >
+          <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">
+            <CloseTiny />
+          </Dialog.Close>
           <div
             className={`
             opaque-container p-3
-            flex flex-col gap-1
+            flex flex-col gap-1 rounded-lg!
             ${className}`}
           >
             {title ? (
@@ -45,7 +49,6 @@ export const Modal = ({
             )}
             <Dialog.Description>{children}</Dialog.Description>
           </div>
-          <Dialog.Close />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
-- 
2.51.2