refactor: reorganize code

3 files changed, 20 insertions, 8 deletions

diff --git a/src/components/shared/BaseModal.tsx b/src/components/shared/BaseModal.tsx
index 25edce9..72dcba4 100644
--- a/src/components/shared/BaseModal.tsx
+++ b/src/components/shared/BaseModal.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import Modal from 'react-modal';
 
 import modalStyle from '../Modal.module.scss';
+
 import s from './BaseModal.module.scss';
 
 const { useMemo } = React;
diff --git a/src/components/shared/TextFitler.module.scss b/src/components/shared/TextFitler.module.scss
index bd437b6..3977aad 100644
--- a/src/components/shared/TextFitler.module.scss
+++ b/src/components/shared/TextFitler.module.scss
@@ -1,19 +1,28 @@
 .input {
   -webkit-appearance: none;
+  appearance: none;
   background-color: var(--color-input-bg);
   background-image: none;
   border-radius: 8px;
-  border: 1px solid var(--color-input-border);
+  border: 1px solid transparent;
   box-sizing: border-box;
-  color: var(--color-text-secondary);
+  color: var(--color-text);
   display: inline-block;
-  font-size: inherit;
+  font-size: 0.95em;
   outline: none;
-  padding: 8px 15px;
-  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  padding: 0 16px;
+  transition: all 0.2s ease;
   width: 100%;
-  height: 36px;
+  height: 40px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+
+  &::placeholder {
+    color: var(--color-text-secondary);
+    opacity: 0.6;
+  }
+
   &:focus {
-    border: 1px solid var(--color-focus-blue);
+    border-color: var(--color-focus-blue);
+    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
   }
 }
diff --git a/src/components/shared/TextFitler.tsx b/src/components/shared/TextFitler.tsx
index 1a78ca2..db98976 100644
--- a/src/components/shared/TextFitler.tsx
+++ b/src/components/shared/TextFitler.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type { RecoilState } from 'recoil';
+
 
 import { useTextInut } from '~/hooks/useTextInput';
 
 import s from './TextFitler.module.scss';
 
+import type { RecoilState } from 'recoil';
+
 export function TextFilter(props: { textAtom: RecoilState<string>; placeholder?: string }) {
   const [onChange, text] = useTextInut(props.textAtom);
   return (