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
This commit is contained in:
parent
fe863845bb
commit
56980eebd3
1 changed files with 24 additions and 5 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue