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,9 +91,9 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[500px] bg-white border-gray-200">
         <DialogHeader>
-          <DialogTitle>Quick Note</DialogTitle>
+          <DialogTitle className="text-gray-900">Quick Note</DialogTitle>
         </DialogHeader>
         
         <div className="grid gap-4 py-4">
@@ -88,7 +107,7 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
             <Input
               id="title"
               placeholder="Note title"
-              className="col-span-4"
+              className="col-span-4 text-gray-900"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               disabled={isSaving}
@@ -99,7 +118,7 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
             <Textarea
               id="content"
               placeholder="What's on your mind?"
-              className="col-span-4"
+              className="col-span-4 text-gray-900"
               rows={10}
               value={content}
               onChange={(e) => setContent(e.target.value)}
@@ -109,10 +128,19 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
         </div>
         
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+          <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}>
+          <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" />