Switched to tailwind/vite

1 files changed, 7 insertions, 9 deletions

diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index c89d9ea..8f2ce7a 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 
-import "@css/Dialog.css";
-
 interface ConfirmDialogProps {
   title: string;
   subtitle: string;
@@ -16,17 +14,17 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   onCancel,
 }) => {
   return (
-    <div className="dimmer">
-      <div className="dialog">
-        <div className="dialog-element dialog-header">
+    <div className="fixed w-[200%] h-full bg-black bg-opacity-50 z-[4]">
+      <div className="fixed z-[4] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-surface rounded-3xl overflow-hidden min-w-[350px] border border-border animate-[dialog_in_0.2s_cubic-bezier(0.075,0.82,0.165,1.1)] text-foreground font-[--font-barlow-semicondensed-regular]">
+        <div className="p-2 text-2xl bg-mantle">
           <span>{title}</span>
         </div>
-        <div className="dialog-element dialog-description">
+        <div className="p-2">
           <span>{subtitle}</span>
         </div>
-        <div className="dialog-element dialog-btns-container">
-          <button onClick={onCancel}>Cancel</button>
-          <button onClick={onConfirm}>Confirm</button>
+        <div className="p-2 flex justify-end border-t-2 border-border bg-mantle">
+          <button className="mr-2 px-4 py-2 bg-muted text-foreground rounded hover:bg-overlay1 transition-colors" onClick={onCancel}>Cancel</button>
+          <button className="px-4 py-2 bg-primary text-background rounded hover:bg-mauve transition-colors" onClick={onConfirm}>Confirm</button>
         </div>
       </div>
     </div>