From 00c29d39d0908ce32efdb8eca86afcc1a2c4a80e Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Mon, 8 Aug 2022 12:10:13 +0300
Subject: [PATCH] first stylings

---
 src/components/TextInput.tsx      | 22 +++++++++++++++++++---
 src/stories/TextInput.stories.tsx |  3 +--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index a75a357..db08bca 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -1,21 +1,37 @@
 import classNames from "classnames";
 import { omit } from "lodash";
 import React from "react";
+import "../index.css";
 
 type Props = {
     placeholder?: string | undefined,
-    color?: string |undefined, 
     className?: string | undefined,
 } & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
 
 export const TextInput = ({
     placeholder = undefined,
-    color = "white",
     className,
     ...props
 } :Props) => {
     return(
-        <input type="text" placeholder={placeholder} color={color} className={classNames({className})} />
+        <input 
+            type="text" 
+            placeholder={placeholder} 
+            className={classNames(
+                'w-100',
+                'border',
+                'border-2',
+                'border-solid',
+                'border-gray-200',
+                'text-gray-900',
+                'rounded',
+                'outline-none',
+                'hover:border-gray-300',
+                'focus:border-gray-500',                
+                {
+                className
+            })} 
+        />
     );
     
 }
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 68795bb..449a39a 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -12,6 +12,5 @@ const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args
 export const TextInputStory = Template.bind({});
 
 TextInputStory.args ={
-    placeholder: "uaaaaaa",
-    color: 'blue'
+    placeholder: "Search",
 }
\ No newline at end of file