From c65d0c9731e8df715604ca5b35fc09690fc5ab89 Mon Sep 17 00:00:00 2001
From: Mai Vang <100221733+vmaineng@users.noreply.github.com>
Date: Mon, 22 Jul 2024 08:26:18 -0700
Subject: [PATCH] Fix - updated text color and outline for Input (#444)

Fixed #230 :

1) updated text color per Figma file
2) updated border color per Figma file
3) created unit test to test text color

<img width="458" alt="image"
src="https://github.com/user-attachments/assets/bcf975c4-7332-44df-9dd4-8a4a6ed28ffa">


<img width="993" alt="image"
src="https://github.com/user-attachments/assets/c68934f4-f525-4f19-9984-25cb459e8efe">
---
 app/globals.css                 | 2 +-
 components/Input/Input.test.tsx | 7 +++++++
 components/Input/Input.tsx      | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 66b78c93..1c097a5f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -60,7 +60,7 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
+    --border: 240 3.7% 15.9%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
diff --git a/components/Input/Input.test.tsx b/components/Input/Input.test.tsx
index ff3b7604..a5255ad1 100644
--- a/components/Input/Input.test.tsx
+++ b/components/Input/Input.test.tsx
@@ -9,4 +9,11 @@ describe('Input', () => {
     );
     expect(getByPlaceholderText('Placeholder text')).toBeInTheDocument();
   });
+  it('renders the correct font color', () => {
+    const { getByRole } = render(<Input />);
+    const input = getByRole('textbox');
+    expect(input).toHaveStyle({
+      color: 'text-zinc-50',
+    });
+  });
 });
diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
index 33e705ae..d0be1808 100644
--- a/components/Input/Input.tsx
+++ b/components/Input/Input.tsx
@@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         {...props}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input border-zinc-300 bg-background px-3 py-2 text-base text-zinc-900 ring-offset-background placeholder:border-zinc-400 placeholder:font-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-base text-zinc-50 ring-offset-background placeholder:border-zinc-400 placeholder:font-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}