From db1e224c3b5398a3d60e54260f50297c4e0c8e09 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 24 Jan 2026 11:20:11 +0700
Subject: [PATCH] chore: adjust TextInput styling

---
 src/components/input/TextInput.tsx | 36 +++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 5936c85a..62582781 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -21,6 +21,9 @@ export interface TextInputProps {
     label?: string;
     inputWrapper?: string;
     input?: string;
+    inputPrefix?: string;
+    inputSuffix?: string;
+    inputPrefixSuffixWrapper?: string;
   };
   isError?: boolean;
   isValid?: boolean;
@@ -62,7 +65,7 @@ const TextInput = ({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-2 text-start',
+        'w-full flex flex-col gap-0 text-start rounded-lg',
         className?.wrapper
       )}
     >
@@ -70,7 +73,7 @@ const TextInput = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full text-sm font-normal leading-5',
+            'w-full py-2 text-xs font-semibold leading-5',
             {
               'text-error': isError,
             },
@@ -90,15 +93,23 @@ const TextInput = ({
       )}
 
       {inputPrefix || inputSuffix ? (
-        <div className='relative flex'>
+        <div
+          className={cn(
+            'relative flex text-sm',
+            className?.inputPrefixSuffixWrapper
+          )}
+        >
           {inputPrefix && (
             <div
               className={cn(
-                'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+                'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
                   'bg-gray-100 border-gray-300': !disabled,
                   'bg-gray-50 border-gray-200': disabled,
-                }
+                  'border-error': isError,
+                  'border-success!': isValid,
+                },
+                className?.inputPrefix
               )}
             >
               {inputPrefix}
@@ -107,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
+              'input h-12 px-3 py-2.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -154,11 +165,14 @@ const TextInput = ({
           {inputSuffix && (
             <div
               className={cn(
-                'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
+                'inline-flex items-center px-3 py-2.5 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
                   'bg-gray-100 border-gray-300': !disabled,
                   'bg-gray-50 border-gray-200': disabled,
-                }
+                  'border-error': isError,
+                  'border-success!': isValid,
+                },
+                className?.inputSuffix
               )}
             >
               {inputSuffix}
@@ -168,7 +182,7 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
+            'input h-12 px-3 py-2.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,
@@ -202,10 +216,10 @@ const TextInput = ({
       )}
 
       {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
       )}
       {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
     </div>
   );