From bd328657d8771d67cb329ac2fd2ff1395518a592 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 16 Jul 2026 22:08:50 -0700
Subject: [PATCH] make textarea styles consistent with other inputs

---
 .../components/textarea/textarea.module.css   | 21 +++++++++++++------
 src/shared/components/textarea/textarea.tsx   | 17 ++++++++++++++-
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/textarea/textarea.module.css b/src/shared/components/textarea/textarea.module.css
index fe18b85d4..a232a41ef 100644
--- a/src/shared/components/textarea/textarea.module.css
+++ b/src/shared/components/textarea/textarea.module.css
@@ -1,15 +1,20 @@
 .root {
     transition: width 0.3s ease-in-out;
-
-    &[data-disabled='true'] {
-        opacity: 0.6;
-    }
 }
 
 .input {
-    color: var(--theme-colors-surface-foreground);
-    background: var(--theme-colors-surface);
+    width: 100%;
     border: 1px solid transparent;
+
+    &[data-variant='default'] {
+        color: var(--theme-colors-surface-foreground);
+        background: var(--theme-colors-surface);
+    }
+
+    &[data-variant='filled'] {
+        color: var(--theme-colors-foreground);
+        background: var(--theme-colors-background);
+    }
 }
 
 .input:focus,
@@ -20,3 +25,7 @@
 .label {
     margin-bottom: var(--theme-spacing-sm);
 }
+
+.required {
+    color: var(--theme-colors-state-error);
+}
diff --git a/src/shared/components/textarea/textarea.tsx b/src/shared/components/textarea/textarea.tsx
index 92d453a14..a35beec00 100644
--- a/src/shared/components/textarea/textarea.tsx
+++ b/src/shared/components/textarea/textarea.tsx
@@ -9,7 +9,19 @@ export interface TextareaProps extends MantineTextareaProps {
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-    ({ children, classNames, maxWidth, style, width, ...props }: TextareaProps, ref) => {
+    (
+        {
+            children,
+            classNames,
+            maxWidth,
+            size = 'sm',
+            style,
+            variant = 'default',
+            width,
+            ...props
+        }: TextareaProps,
+        ref,
+    ) => {
         return (
             <MantineTextarea
                 classNames={{
@@ -21,7 +33,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                     ...classNames,
                 }}
                 ref={ref}
+                size={size}
+                spellCheck={false}
                 style={{ maxWidth, width, ...style }}
+                variant={variant}
                 {...props}
             >
                 {children}