From 56980eebd3018f5c033047c0d830f52b3979f594 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 28 Jul 2026 17:23:10 -0400
Subject: [PATCH] fix: add dark mode utility classes to NodeEditDialog inputs
 and buttons

- Add dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100 to all Inputs/Textareas
- Add dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white to Save button
- Add dark:border-zinc-700 dark:text-zinc-300 to Cancel, Add buttons
- Add dark:bg-red-900/60 dark:hover:bg-red-800/80 to destructive icon buttons
- Ensures dialog renders correctly inside Payload admin portal context
---
 .../admin/narrative-flow/NodeEditDialog.tsx   | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/admin/narrative-flow/NodeEditDialog.tsx b/src/components/admin/narrative-flow/NodeEditDialog.tsx
index b1712a2..6e5b393 100644
--- a/src/components/admin/narrative-flow/NodeEditDialog.tsx
+++ b/src/components/admin/narrative-flow/NodeEditDialog.tsx
@@ -68,6 +68,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 value={(nodeData.title as string) ?? ""}
                 onChange={(e) => updateField("title", e.target.value)}
                 placeholder="Beat title"
+                className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
               />
             </div>
             <div className="space-y-2">
@@ -78,6 +79,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 onChange={(e) => updateField("text", e.target.value)}
                 placeholder="Describe the story beat..."
                 rows={4}
+                className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
               />
             </div>
           </div>
@@ -94,6 +96,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 value={(nodeData.question as string) ?? ""}
                 onChange={(e) => updateField("question", e.target.value)}
                 placeholder="What decision does the player face?"
+                className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
               />
             </div>
             <div className="space-y-2">
@@ -110,6 +113,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       updateField("options", updated);
                     }}
                     placeholder="Option label"
+                    className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
                   />
                   <Button
                     variant="destructive"
@@ -118,7 +122,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       const updated = options.filter((o) => o.id !== opt.id);
                       updateField("options", updated);
                     }}
-                    className="size-8 shrink-0"
+                    className="size-8 shrink-0 dark:bg-red-900/60 dark:hover:bg-red-800/80"
                   >
                     <XIcon className="size-3" />
                   </Button>
@@ -134,6 +138,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                   ];
                   updateField("options", updated);
                 }}
+                className="dark:border-zinc-700 dark:text-zinc-300"
               >
                 <PlusIcon className="size-3 mr-1" />
                 Add option
@@ -154,6 +159,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 value={(nodeData.title as string) ?? ""}
                 onChange={(e) => updateField("title", e.target.value)}
                 placeholder="Outcome title"
+                className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
               />
             </div>
             <div className="space-y-2">
@@ -164,6 +170,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 onChange={(e) => updateField("text", e.target.value)}
                 placeholder="Describe the outcome..."
                 rows={3}
+                className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
               />
             </div>
             <div className="space-y-2">
@@ -179,6 +186,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       updateField("effects", updated);
                     }}
                     placeholder="Type (e.g. add_flag)"
+                    className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
                   />
                   <Input
                     value={eff.value}
@@ -189,6 +197,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       updateField("effects", updated);
                     }}
                     placeholder="Value"
+                    className="dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100"
                   />
                   <Button
                     variant="destructive"
@@ -197,7 +206,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       const updated = effects.filter((_, j) => j !== i);
                       updateField("effects", updated);
                     }}
-                    className="size-8 shrink-0"
+                    className="size-8 shrink-0 dark:bg-red-900/60 dark:hover:bg-red-800/80"
                   >
                     <XIcon className="size-3" />
                   </Button>
@@ -210,6 +219,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                   const updated = [...effects, { type: "", value: "" }];
                   updateField("effects", updated);
                 }}
+                className="dark:border-zinc-700 dark:text-zinc-300"
               >
                 <PlusIcon className="size-3 mr-1" />
                 Add effect
@@ -235,16 +245,25 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg">
+      <DialogContent className="max-w-lg dark:bg-zinc-900 dark:text-zinc-100 dark:border-zinc-700 bg-white text-zinc-900">
         <DialogHeader>
           <DialogTitle>Edit {typeLabel}</DialogTitle>
         </DialogHeader>
         {renderFields()}
         <DialogFooter className="gap-2">
-          <Button variant="outline" onClick={handleCancel}>
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            className="dark:border-zinc-700 dark:text-zinc-300"
+          >
             Cancel
           </Button>
-          <Button onClick={handleSave}>Save</Button>
+          <Button
+            onClick={handleSave}
+            className="dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white"
+          >
+            Save
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>