components/notes-dialog.tsx

@@ -1,31 +1,12 @@
 "use client";
 
 import { useState } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogPortal } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Input } from "@/components/ui/input";
-import { Loader2, X } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { useSession } from "next-auth/react";
-import * as React from "react";
-
-// Custom DialogOverlay to override the default black background
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 interface NotesDialogProps {
   open: boolean;
@@ -91,74 +72,58 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogPortal>
+      <DialogContent className="sm:max-w-[500px]">
-        <DialogOverlay />
+        <DialogHeader>
-        <DialogContent className="sm:max-w-[500px] bg-white border-gray-200">
+          <DialogTitle>Quick Note</DialogTitle>
-          <DialogHeader>
+        </DialogHeader>
-            <DialogTitle className="text-gray-900">Quick Note</DialogTitle>
+        
-          </DialogHeader>
+        <div className="grid gap-4 py-4">
+          {error && (
+            <div className="bg-red-50 text-red-500 p-2 rounded-md text-sm">
+              {error}
+            </div>
+          )}
           
-          <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
-            {error && (
+            <Input
-              <div className="bg-red-50 text-red-500 p-2 rounded-md text-sm">
+              id="title"
-                {error}
+              placeholder="Note title"
-              </div>
+              className="col-span-4"
-            )}
+              value={title}
-            
+              onChange={(e) => setTitle(e.target.value)}
-            <div className="grid grid-cols-4 items-center gap-4">
+              disabled={isSaving}
-              <Input
+            />
-                id="title"
-                placeholder="Note title"
-                className="col-span-4 text-gray-900"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                disabled={isSaving}
-              />
-            </div>
-            
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Textarea
-                id="content"
-                placeholder="What's on your mind?"
-                className="col-span-4 text-gray-900"
-                rows={10}
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                disabled={isSaving}
-              />
-            </div>
           </div>
           
-          <DialogFooter>
+          <div className="grid grid-cols-4 items-center gap-4">
-            <Button 
+            <Textarea
-              variant="destructive" 
+              id="content"
-              onClick={() => onOpenChange(false)} 
+              placeholder="What's on your mind?"
+              className="col-span-4"
+              rows={10}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
               disabled={isSaving}
-              className="bg-red-600 hover:bg-red-700 text-white"
+            />
-            >
+          </div>
-              Cancel
+        </div>
-            </Button>
+        
-            <Button 
+        <DialogFooter>
-              onClick={handleSave} 
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
-              disabled={isSaving}
+            Cancel
-              className="bg-blue-600 hover:bg-blue-700 text-white"
+          </Button>
-            >
+          <Button onClick={handleSave} disabled={isSaving}>
-              {isSaving ? (
+            {isSaving ? (
-                <>
+              <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Saving...
+                Saving...
-                </>
+              </>
-              ) : (
+            ) : (
-                "Save Note"
+              "Save Note"
-              )}
+            )}
-            </Button>
+          </Button>
-          </DialogFooter>
+        </DialogFooter>
-          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      </DialogContent>
-            <X className="h-4 w-4 text-gray-500" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        </DialogContent>
-      </DialogPortal>
     </Dialog>
   );
 }