Stop use postcss-nested postcss-extend-rule

14 files changed, 47 insertions, 7 deletions

diff --git a/src/components/shared/BaseModal.module.css b/src/components/shared/BaseModal.module.scss
index 1d206e1..1d206e1 100644
--- a/src/components/shared/BaseModal.module.css
+++ b/src/components/shared/BaseModal.module.scss
diff --git a/src/components/shared/BaseModal.tsx b/src/components/shared/BaseModal.tsx
index dcd0b57..25edce9 100644
--- a/src/components/shared/BaseModal.tsx
+++ b/src/components/shared/BaseModal.tsx
@@ -2,8 +2,8 @@ import cx from 'clsx';
 import * as React from 'react';
 import Modal from 'react-modal';
 
-import modalStyle from '../Modal.module.css';
-import s from './BaseModal.module.css';
+import modalStyle from '../Modal.module.scss';
+import s from './BaseModal.module.scss';
 
 const { useMemo } = React;
 
diff --git a/src/components/shared/Basic.module.css b/src/components/shared/Basic.module.scss
index 8e5a113..8e5a113 100644
--- a/src/components/shared/Basic.module.css
+++ b/src/components/shared/Basic.module.scss
diff --git a/src/components/shared/Basic.tsx b/src/components/shared/Basic.tsx
index dbd1bc7..c2ced0f 100644
--- a/src/components/shared/Basic.tsx
+++ b/src/components/shared/Basic.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s from './Basic.module.css';
+import s from './Basic.module.scss';
 
 export function SectionNameType({ name, type }) {
   return (
diff --git a/src/components/shared/Fab.module.css b/src/components/shared/Fab.module.scss
index 61aaecb..61aaecb 100644
--- a/src/components/shared/Fab.module.css
+++ b/src/components/shared/Fab.module.scss
diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx
index 68750ef..70c0c03 100644
--- a/src/components/shared/Fab.tsx
+++ b/src/components/shared/Fab.tsx
@@ -3,7 +3,7 @@ import './rtf.css';
 import * as React from 'react';
 import { Action, Fab } from 'react-tiny-fab/dist';
 
-import s from './Fab.module.css';
+import s from './Fab.module.scss';
 
 export function IsFetching({ children }: { children: React.ReactNode }) {
   return <span className={s.spining}>{children}</span>;
diff --git a/src/components/shared/RotateIcon.module.css b/src/components/shared/RotateIcon.module.scss
index 60748de..60748de 100644
--- a/src/components/shared/RotateIcon.module.css
+++ b/src/components/shared/RotateIcon.module.scss
diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx
index e2d4ad8..7e3ceae 100644
--- a/src/components/shared/RotateIcon.tsx
+++ b/src/components/shared/RotateIcon.tsx
@@ -2,7 +2,7 @@ import cx from 'clsx';
 import * as React from 'react';
 import { RotateCw } from 'react-feather';
 
-import s from './RotateIcon.module.css';
+import s from './RotateIcon.module.scss';
 
 export function RotateIcon({ isRotating }: { isRotating: boolean }) {
   const cls = cx(s.rotate, {
diff --git a/src/components/shared/Select.module.css b/src/components/shared/Select.module.scss
index 9e1a20c..9e1a20c 100644
--- a/src/components/shared/Select.module.css
+++ b/src/components/shared/Select.module.scss
diff --git a/src/components/shared/Select.tsx b/src/components/shared/Select.tsx
index 376fb3c..de409cb 100644
--- a/src/components/shared/Select.tsx
+++ b/src/components/shared/Select.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import s from './Select.module.css';
+import s from './Select.module.scss';
 
 type Props = {
   options: Array<string[]>;
diff --git a/src/components/shared/Styled.module.css b/src/components/shared/Styled.module.scss
index 88b84ad..88b84ad 100644
--- a/src/components/shared/Styled.module.css
+++ b/src/components/shared/Styled.module.scss
diff --git a/src/components/shared/Styled.tsx b/src/components/shared/Styled.tsx
index ac2d04a..86d87ca 100644
--- a/src/components/shared/Styled.tsx
+++ b/src/components/shared/Styled.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import s from './Styled.module.css';
+import s from './Styled.module.scss';
 
 export function FlexCenter({ children }: { children: React.ReactNode }) {
   return <div className={s.FlexCenter}>{children}</div>;
diff --git a/src/components/shared/TextFitler.module.scss b/src/components/shared/TextFitler.module.scss
new file mode 100644
index 0000000..7d7ba9b
--- /dev/null
+++ b/src/components/shared/TextFitler.module.scss
@@ -0,0 +1,19 @@
+.input {
+  -webkit-appearance: none;
+  background-color: var(--color-input-bg);
+  background-image: none;
+  border-radius: 20px;
+  border: 1px solid var(--color-input-border);
+  box-sizing: border-box;
+  color: #c1c1c1;
+  display: inline-block;
+  font-size: inherit;
+  outline: none;
+  padding: 8px 15px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+
+  &:focus {
+    border: 1px solid var(--color-focus-blue);
+  }
+}
diff --git a/src/components/shared/TextFitler.tsx b/src/components/shared/TextFitler.tsx
new file mode 100644
index 0000000..e4a4a88
--- /dev/null
+++ b/src/components/shared/TextFitler.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { RecoilState } from 'recoil';
+import { useTextInut } from 'src/hooks/useTextInput';
+
+import s from './TextFitler.module.scss';
+
+export function TextFilter(props: {
+  textAtom: RecoilState<string>;
+  placeholder?: string;
+}) {
+  const [onChange, text] = useTextInut(props.textAtom);
+  return (
+    <input
+      className={s.input}
+      type="text"
+      value={text}
+      onChange={onChange}
+      placeholder={props.placeholder}
+    />
+  );
+}