From 988dab24d1d789bce3c6c256c81726aa551f96e0 Mon Sep 17 00:00:00 2001
From: Tania Gutierrez <riobuenodevelops@gmail.com>
Date: Wed, 13 Mar 2024 21:50:01 -0400
Subject: [PATCH] fix: Styled input and field components acording to design

---
 app/components/forms.tsx    | 3 ++-
 app/components/ui/input.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/forms.tsx b/app/components/forms.tsx
index c79eeec..faaa14d 100644
--- a/app/components/forms.tsx
+++ b/app/components/forms.tsx
@@ -23,9 +23,10 @@ export const Field = ({
   const errorId = errors?.length ? `${id}-error` : undefined
   return (
     <div className={className}>
-      <Label {...labelProps} htmlFor={id} />
+      <Label {...labelProps} htmlFor={id} className="font-semibold text-sm" />
       <Input
         {...inputProps}
+        className="mt-4"
         id={id}
         aria-invalid={errorId ? true : undefined}
         aria-describedby={errorId}
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index 1eae76b..8ea96d2 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -36,7 +36,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         />
         {type === "password" ? <button
           type="button"
-          className="absolute right-4 top-5 text-input"
+          className="absolute right-4 top-5 text-ring"
           onClick={toggleShowPassword}
           onKeyDown={toggleShowPassword}
         >