From eb4ccfbc9cb4a7cef1c5522b28d3e8ba1ac834e7 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 21:17:59 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20make=20the=20input=20wi?=
 =?UTF-8?q?dth=20full?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/shared/Input/Input.theme.ts | 4 +++-
 packages/frontend/src/components/shared/Input/Input.tsx      | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/shared/Input/Input.theme.ts b/packages/frontend/src/components/shared/Input/Input.theme.ts
index b1ecb705..0144d578 100644
--- a/packages/frontend/src/components/shared/Input/Input.theme.ts
+++ b/packages/frontend/src/components/shared/Input/Input.theme.ts
@@ -8,6 +8,8 @@ export const inputTheme = tv(
         'items-center',
         'rounded-lg',
         'relative',
+        'gap-2',
+        'w-full',
         'placeholder:text-elements-disabled',
         'disabled:cursor-not-allowed',
         'disabled:bg-controls-disabled',
@@ -27,7 +29,7 @@ export const inputTheme = tv(
         'disabled:shadow-none',
         'disabled:border-none',
       ],
-      icon: ['text-elements-mid-em'],
+      icon: ['text-elements-low-em'],
       iconContainer: [
         'absolute',
         'inset-y-0',
diff --git a/packages/frontend/src/components/shared/Input/Input.tsx b/packages/frontend/src/components/shared/Input/Input.tsx
index fb3fd7d6..dd88bd80 100644
--- a/packages/frontend/src/components/shared/Input/Input.tsx
+++ b/packages/frontend/src/components/shared/Input/Input.tsx
@@ -87,12 +87,12 @@ export const Input = ({
   );
 
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-2 w-full">
       {renderLabels}
       <div className={containerCls({ class: className })}>
         {leftIcon && renderLeftIcon}
         <input
-          className={cn(inputCls({ class: 'w-80' }), {
+          className={cn(inputCls(), {
             'pl-10': leftIcon,
           })}
           {...props}