pages s3

components/notes-dialog.tsx

@@ -1,12 +1,31 @@
 "use client";
 
 import { useState } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogPortal } 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 } from "lucide-react";
+import { Loader2, X } 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;
@@ -72,58 +91,74 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>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>
-          )}
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogContent className="sm:max-w-[500px] bg-white border-gray-200">
+          <DialogHeader>
+            <DialogTitle className="text-gray-900">Quick Note</DialogTitle>
+          </DialogHeader>
           
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Input
-              id="title"
-              placeholder="Note title"
-              className="col-span-4"
-              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"
-              rows={10}
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              disabled={isSaving}
-            />
-          </div>
-        </div>
-        
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave} disabled={isSaving}>
-            {isSaving ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Saving...
-              </>
-            ) : (
-              "Save Note"
+          <div className="grid gap-4 py-4">
+            {error && (
+              <div className="bg-red-50 text-red-500 p-2 rounded-md text-sm">
+                {error}
+              </div>
             )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
+            
+            <div className="grid grid-cols-4 items-center gap-4">
+              <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>
+            <Button 
+              variant="destructive" 
+              onClick={() => onOpenChange(false)} 
+              disabled={isSaving}
+              className="bg-red-600 hover:bg-red-700 text-white"
+            >
+              Cancel
+            </Button>
+            <Button 
+              onClick={handleSave} 
+              disabled={isSaving}
+              className="bg-blue-600 hover:bg-blue-700 text-white"
+            >
+              {isSaving ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                "Save Note"
+              )}
+            </Button>
+          </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">
+            <X className="h-4 w-4 text-gray-500" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </DialogContent>
+      </DialogPortal>
     </Dialog>
   );
 }