From 2d27c41d385f16bebb79b039c6288e12a8f6008a Mon Sep 17 00:00:00 2001
From: Janpeter Visser <30029041+madhura68@users.noreply.github.com>
Date: Thu, 7 May 2026 14:27:11 +0200
Subject: [PATCH] fix(textarea): border-border + bg-input-background voor
 off-focus zichtbaarheid (#143)

Vervangt border-input door border-border en bg-transparent door
bg-input-background in de gedeelde Textarea-component en de lokale
textareaClass in task-dialog.tsx. Dark mode ongewijzigd via dark:bg-input/30.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/_components/tasks/task-dialog.tsx | 2 +-
 components/ui/textarea.tsx            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/_components/tasks/task-dialog.tsx b/app/_components/tasks/task-dialog.tsx
index b49c0ed..3431cda 100644
--- a/app/_components/tasks/task-dialog.tsx
+++ b/app/_components/tasks/task-dialog.tsx
@@ -75,7 +75,7 @@ function CharCount({ value, max }: { value: string; max: number }) {
 }
 
 const textareaClass = cn(
-  'flex w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm',
+  'flex w-full rounded-lg border border-border bg-input-background px-2.5 py-2 text-sm',
   'transition-colors outline-none placeholder:text-muted-foreground resize-none',
   'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
   'overflow-y-auto',
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 04d27f7..48a4e75 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-border bg-input-background px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}