use COLORS, and get rid of bundled TextInput component; directly render separate components

Author: ccatherinetan

src/app/input-text/page.tsx

@@ -1,7 +1,13 @@
 'use client';
 
-import TextInput from '@/components/TextInput/TextInput';
+import React from 'react';
+import { InputTitleText, InputText } from '../../components/TextInput/styles'; 
 
-export default function InputText() {
-  return <TextInput />;
-}
+export default function InputTextTest() {
+  return (
+    <>
+      <InputTitleText>Label</InputTitleText>
+      <InputText $error={false} placeholder="Input Suggestion"/>
+    </>
+  )
+}

src/components/TextInput/TextInput.tsx

@@ -9,9 +9,9 @@ export const InputText = styled.input<{ $error: boolean }>`
   font-size: 1rem; // 16px
   font-family: ${inter.style};
   font-weight: 400;
-  line-height: 19.2px;
+  line-height: 19.2px; 
   word-wrap: break-word;
-  padding: 10px 20px 10px 20px;
+  padding: 0.625rem 1.25rem; // 10px 20px 10px 20px;
   border-radius: 5px;
   border: 1px solid
     ${({ $error }) => ($error ? COLORS.errorColor : COLORS.existingInputColor)};
@@ -23,7 +23,7 @@ export const InputText = styled.input<{ $error: boolean }>`
 
   &:focus {
     outline: none !important;
-    border: 1px solid
+    border: 2px solid
       ${({ $error }) => ($error ? COLORS.errorColor : COLORS.activeGreen)};
   }
   &::placeholder {
@@ -32,7 +32,7 @@ export const InputText = styled.input<{ $error: boolean }>`
   }
 `;
 export const InputTitleText = styled.label`
-  color: #555555;
+  color: ${COLORS.existingInputColor};
   font-size: 1.5rem; // 24px;
   font-family: ${inter.style};
   font-weight: 500;