Stop use postcss-nested postcss-extend-rule

85 files changed, 70 insertions, 82 deletions

diff --git a/src/components/APIConfig.module.css b/src/components/APIConfig.module.scss
index afc2d53..afc2d53 100644
--- a/src/components/APIConfig.module.css
+++ b/src/components/APIConfig.module.scss
diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
index 54e6e58..9b2e7e9 100644
--- a/src/components/APIConfig.tsx
+++ b/src/components/APIConfig.tsx
@@ -4,7 +4,7 @@ import { BackendList } from 'src/components/BackendList';
 import { ClashAPIConfig } from 'src/types';
 
 import { addClashAPIConfig, getClashAPIConfig } from '../store/app';
-import s0 from './APIConfig.module.css';
+import s0 from './APIConfig.module.scss';
 import Button from './Button';
 import Field from './Field';
 import { connect } from './StateProvider';
diff --git a/src/components/APIDiscovery.module.css b/src/components/APIDiscovery.module.scss
index 6c1295a..6c1295a 100644
--- a/src/components/APIDiscovery.module.css
+++ b/src/components/APIDiscovery.module.scss
diff --git a/src/components/APIDiscovery.tsx b/src/components/APIDiscovery.tsx
index 97f3538..82ffbbf 100644
--- a/src/components/APIDiscovery.tsx
+++ b/src/components/APIDiscovery.tsx
@@ -5,7 +5,7 @@ import { getClashAPIConfig } from '../store/app';
 import { fetchConfigs } from '../store/configs';
 import { closeModal } from '../store/modals';
 import APIConfig from './APIConfig';
-import s0 from './APIDiscovery.module.css';
+import s0 from './APIDiscovery.module.scss';
 import Modal from './Modal';
 import { connect } from './StateProvider';
 
diff --git a/src/components/BackendList.module.css b/src/components/BackendList.module.scss
index 1de1972..1de1972 100644
--- a/src/components/BackendList.module.css
+++ b/src/components/BackendList.module.scss
diff --git a/src/components/BackendList.tsx b/src/components/BackendList.tsx
index 4bfb64c..8e0d906 100644
--- a/src/components/BackendList.tsx
+++ b/src/components/BackendList.tsx
@@ -8,7 +8,7 @@ import {
 } from 'src/store/app';
 import { ClashAPIConfig } from 'src/types';
 
-import s from './BackendList.module.css';
+import s from './BackendList.module.scss';
 import { connect, useStoreActions } from './StateProvider';
 
 type Config = ClashAPIConfig & { addedAt: number };
diff --git a/src/components/Button.module.css b/src/components/Button.module.scss
index 3046d0c..3046d0c 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button.module.scss
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 97bb141..1725d1b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import * as React from 'react';
 
-import s0 from './Button.module.css';
+import s0 from './Button.module.scss';
 import { LoadingDot } from './shared/Basic';
 
 const { forwardRef, useCallback } = React;
diff --git a/src/components/CollapsibleSectionHeader.module.css b/src/components/CollapsibleSectionHeader.module.scss
index b654f35..b654f35 100644
--- a/src/components/CollapsibleSectionHeader.module.css
+++ b/src/components/CollapsibleSectionHeader.module.scss
diff --git a/src/components/CollapsibleSectionHeader.tsx b/src/components/CollapsibleSectionHeader.tsx
index bc47ad7..2d5ecd1 100644
--- a/src/components/CollapsibleSectionHeader.tsx
+++ b/src/components/CollapsibleSectionHeader.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ChevronDown } from 'react-feather';
 
 import Button from './Button';
-import s from './CollapsibleSectionHeader.module.css';
+import s from './CollapsibleSectionHeader.module.scss';
 import { SectionNameType } from './shared/Basic';
 
 type Props = {
diff --git a/src/components/ConnectionTable.module.css b/src/components/ConnectionTable.module.scss
index 80a8432..80a8432 100644
--- a/src/components/ConnectionTable.module.css
+++ b/src/components/ConnectionTable.module.scss
diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
index cc9695a..2323e2e 100644
--- a/src/components/ConnectionTable.tsx
+++ b/src/components/ConnectionTable.tsx
@@ -5,7 +5,7 @@ import { ChevronDown } from 'react-feather';
 import { useSortBy, useTable } from 'react-table';
 
 import prettyBytes from '../misc/pretty-bytes';
-import s from './ConnectionTable.module.css';
+import s from './ConnectionTable.module.scss';
 
 const sortDescFirst = true;
 
diff --git a/src/components/Connections.module.css b/src/components/Connections.module.scss
index 7afaa8a..7afaa8a 100644
--- a/src/components/Connections.module.css
+++ b/src/components/Connections.module.scss
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index 1b63cf8..c9dffc5 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -10,7 +10,7 @@ import { State } from 'src/store/types';
 import * as connAPI from '../api/connections';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
-import s from './Connections.module.css';
+import s from './Connections.module.scss';
 import ConnectionTable from './ConnectionTable';
 import ContentHeader from './ContentHeader';
 import ModalCloseAllConnections from './ModalCloseAllConnections';
diff --git a/src/components/ContentHeader.module.css b/src/components/ContentHeader.module.scss
index 0768fbb..0768fbb 100644
--- a/src/components/ContentHeader.module.css
+++ b/src/components/ContentHeader.module.scss
diff --git a/src/components/ContentHeader.tsx b/src/components/ContentHeader.tsx
index f786240..473cd4c 100644
--- a/src/components/ContentHeader.tsx
+++ b/src/components/ContentHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './ContentHeader.module.css';
+import s0 from './ContentHeader.module.scss';
 
 type Props = {
   title: string;
diff --git a/src/components/ErrorBoundaryFallback.module.css b/src/components/ErrorBoundaryFallback.module.scss
index 6133568..6133568 100644
--- a/src/components/ErrorBoundaryFallback.module.css
+++ b/src/components/ErrorBoundaryFallback.module.scss
diff --git a/src/components/ErrorBoundaryFallback.tsx b/src/components/ErrorBoundaryFallback.tsx
index bbaf2d7..7ab7d06 100644
--- a/src/components/ErrorBoundaryFallback.tsx
+++ b/src/components/ErrorBoundaryFallback.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './ErrorBoundaryFallback.module.css';
+import s0 from './ErrorBoundaryFallback.module.scss';
 import SvgGithub from './SvgGithub';
 import SvgYacd from './SvgYacd';
 const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues';
diff --git a/src/components/Field.module.css b/src/components/Field.module.scss
index 9a5f1e4..9a5f1e4 100644
--- a/src/components/Field.module.css
+++ b/src/components/Field.module.scss
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
index c0b3ae5..4134d3e 100644
--- a/src/components/Field.tsx
+++ b/src/components/Field.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import React from 'react';
 
-import s from './Field.module.css';
+import s from './Field.module.scss';
 
 const { useCallback } = React;
 
diff --git a/src/components/Home.module.css b/src/components/Home.module.scss
index f15c80f..f15c80f 100644
--- a/src/components/Home.module.css
+++ b/src/components/Home.module.scss
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index a6df373..d7ddbab 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -2,7 +2,7 @@ import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ContentHeader from './ContentHeader';
-import s0 from './Home.module.css';
+import s0 from './Home.module.scss';
 import Loading from './Loading';
 import TrafficChart from './TrafficChart';
 import TrafficNow from './TrafficNow';
diff --git a/src/components/Input.module.css b/src/components/Input.module.scss
index 4ca42fa..4ca42fa 100644
--- a/src/components/Input.module.css
+++ b/src/components/Input.module.scss
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 6cfc50e..c132a3b 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './Input.module.css';
+import s0 from './Input.module.scss';
 
 const { useState, useRef, useEffect, useCallback } = React;
 
diff --git a/src/components/Loading.module.css b/src/components/Loading.module.scss
index a59b7dd..a59b7dd 100644
--- a/src/components/Loading.module.css
+++ b/src/components/Loading.module.scss
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 208c4af..12ced75 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s from './Loading.module.css';
+import s from './Loading.module.scss';
 
 type Props = {
   height?: string;
diff --git a/src/components/Loading2.module.css b/src/components/Loading2.module.scss
index 067281e..067281e 100644
--- a/src/components/Loading2.module.css
+++ b/src/components/Loading2.module.scss
diff --git a/src/components/Loading2.tsx b/src/components/Loading2.tsx
index edb2656..b847eb4 100644
--- a/src/components/Loading2.tsx
+++ b/src/components/Loading2.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './Loading2.module.css';
+import s0 from './Loading2.module.scss';
 import SvgYacd from './SvgYacd';
 
 function Loading() {
diff --git a/src/components/Logs.module.css b/src/components/Logs.module.scss
index 508e9c6..508e9c6 100644
--- a/src/components/Logs.module.css
+++ b/src/components/Logs.module.scss
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 2b002d3..019edd5 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -17,7 +17,7 @@ import { getLogLevel } from 'src/store/configs';
 import { appendLog, getLogsForDisplay } from 'src/store/logs';
 import { Log, State } from 'src/store/types';
 
-import s from './Logs.module.css';
+import s from './Logs.module.scss';
 
 const { useCallback, memo, useEffect } = React;
 
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.scss
index 6192a1f..6192a1f 100644
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.scss
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index cb5fea3..fda3263 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -2,7 +2,7 @@ import cx from 'clsx';
 import React from 'react';
 import Modal from 'react-modal';
 
-import s0 from './Modal.module.css';
+import s0 from './Modal.module.scss';
 
 type Props = {
   isOpen: boolean;
diff --git a/src/components/ModalCloseAllConnections.module.css b/src/components/ModalCloseAllConnections.module.scss
index 9bb7c6a..9bb7c6a 100644
--- a/src/components/ModalCloseAllConnections.module.css
+++ b/src/components/ModalCloseAllConnections.module.scss
diff --git a/src/components/ModalCloseAllConnections.tsx b/src/components/ModalCloseAllConnections.tsx
index ce567b8..a2c4303 100644
--- a/src/components/ModalCloseAllConnections.tsx
+++ b/src/components/ModalCloseAllConnections.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import Modal from 'react-modal';
 
 import Button from './Button';
-import modalStyle from './Modal.module.css';
-import s from './ModalCloseAllConnections.module.css';
+import modalStyle from './Modal.module.scss';
+import s from './ModalCloseAllConnections.module.scss';
 
 const { useRef, useCallback, useMemo } = React;
 
diff --git a/src/components/Root.module.css b/src/components/Root.module.scss
index 6538b75..6538b75 100644
--- a/src/components/Root.module.css
+++ b/src/components/Root.module.scss
diff --git a/src/components/Root.css b/src/components/Root.scss
index 83d4171..83d4171 100644
--- a/src/components/Root.css
+++ b/src/components/Root.scss
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 7046156..f94d2a2 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -1,4 +1,4 @@
-import './Root.css';
+import './Root.scss';
 import '@fontsource/roboto-mono/latin-400.css';
 import '@fontsource/open-sans/latin-400.css';
 import '@fontsource/open-sans/latin-700.css';
@@ -19,7 +19,7 @@ import APIDiscovery from './APIDiscovery';
 import ErrorBoundary from './ErrorBoundary';
 import Home from './Home';
 import Loading2 from './Loading2';
-import s0 from './Root.module.css';
+import s0 from './Root.module.scss';
 import SideBar from './SideBar';
 import StateProvider from './StateProvider';
 import StyleGuide from './StyleGuide';
diff --git a/src/components/Rule.module.css b/src/components/Rule.module.scss
index 14da5d9..14da5d9 100644
--- a/src/components/Rule.module.css
+++ b/src/components/Rule.module.scss
diff --git a/src/components/Rule.tsx b/src/components/Rule.tsx
index 0960660..b8ff70f 100644
--- a/src/components/Rule.tsx
+++ b/src/components/Rule.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './Rule.module.css';
+import s0 from './Rule.module.scss';
 
 const colorMap = {
   _default: '#59caf9',
diff --git a/src/components/Rules.module.css b/src/components/Rules.module.scss
index 6459e17..6459e17 100644
--- a/src/components/Rules.module.css
+++ b/src/components/Rules.module.scss
diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx
index 83f72b8..9019fab 100644
--- a/src/components/Rules.tsx
+++ b/src/components/Rules.tsx
@@ -4,7 +4,8 @@ import { areEqual, VariableSizeList } from 'react-window';
 import { RuleProviderItem } from 'src/components/rules/RuleProviderItem';
 import { useRuleAndProvider } from 'src/components/rules/rules.hooks';
 import { RulesPageFab } from 'src/components/rules/RulesPageFab';
-import { TextFilter } from 'src/components/rules/TextFilter';
+import { TextFilter } from 'src/components/shared/TextFitler';
+import { ruleFilterText } from 'src/store/rules';
 import { State } from 'src/store/types';
 import { ClashAPIConfig } from 'src/types';
 
@@ -12,7 +13,7 @@ import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
 import ContentHeader from './ContentHeader';
 import Rule from './Rule';
-import s from './Rules.module.css';
+import s from './Rules.module.scss';
 import { connect } from './StateProvider';
 
 const { memo } = React;
@@ -85,7 +86,7 @@ function Rules({ apiConfig }: RulesProps) {
     <div>
       <div className={s.header}>
         <ContentHeader title={t('Rules')} />
-        <TextFilter />
+        <TextFilter placeholder="Filter" textAtom={ruleFilterText} />
       </div>
       {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject<any>' is not assig... Remove this comment to see the full error message */}
       <div ref={refRulesContainer} style={{ paddingBottom }}>
diff --git a/src/components/Search.module.css b/src/components/Search.module.scss
index 657c741..657c741 100644
--- a/src/components/Search.module.css
+++ b/src/components/Search.module.scss
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 2d8c754..6edc4a5 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -2,7 +2,7 @@ import debounce from 'lodash-es/debounce';
 import React, { useCallback, useMemo, useState } from 'react';
 import { Search as SearchIcon } from 'react-feather';
 
-import s0 from './Search.module.css';
+import s0 from './Search.module.scss';
 
 function RuleSearch({ dispatch, searchText, updateSearchText }) {
   const [text, setText] = useState(searchText);
diff --git a/src/components/Selection.module.css b/src/components/Selection.module.scss
index ba47089..ba47089 100644
--- a/src/components/Selection.module.css
+++ b/src/components/Selection.module.scss
diff --git a/src/components/Selection.tsx b/src/components/Selection.tsx
index f0b6080..1b1f50e 100644
--- a/src/components/Selection.tsx
+++ b/src/components/Selection.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import React from 'react';
 
-import s from './Selection.module.css';
+import s from './Selection.module.scss';
 
 type SelectionProps = {
   OptionComponent?: (...args: any[]) => any;
diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.scss
index 744d29d..744d29d 100644
--- a/src/components/SideBar.module.css
+++ b/src/components/SideBar.module.scss
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 973f003..8a6429a 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -15,7 +15,7 @@ import { Link, useLocation } from 'react-router-dom';
 
 import { framerMotionResouce } from '../misc/motion';
 import { getTheme, switchTheme } from '../store/app';
-import s from './SideBar.module.css';
+import s from './SideBar.module.scss';
 import { connect } from './StateProvider';
 
 const { useCallback } = React;
diff --git a/src/components/SvgYacd.module.css b/src/components/SvgYacd.module.scss
index f668137..f668137 100644
--- a/src/components/SvgYacd.module.css
+++ b/src/components/SvgYacd.module.scss
diff --git a/src/components/SvgYacd.tsx b/src/components/SvgYacd.tsx
index 2aa5cc1..90ad7e2 100644
--- a/src/components/SvgYacd.tsx
+++ b/src/components/SvgYacd.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import React from 'react';
 
-import s from './SvgYacd.module.css';
+import s from './SvgYacd.module.scss';
 
 type Props = {
   width?: number;
diff --git a/src/components/ToggleSwitch.module.css b/src/components/ToggleSwitch.module.scss
index 4b1388c..4b1388c 100644
--- a/src/components/ToggleSwitch.module.css
+++ b/src/components/ToggleSwitch.module.scss
diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
index a7d8947..0c84059 100644
--- a/src/components/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
-import s0 from './ToggleSwitch.module.css';
+import s0 from './ToggleSwitch.module.scss';
 
 type Props = {
   options?: any[];
diff --git a/src/components/about/About.module.css b/src/components/about/About.module.scss
index 632b3ee..632b3ee 100644
--- a/src/components/about/About.module.css
+++ b/src/components/about/About.module.scss
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
index 4a60141..6ed01ad 100644
--- a/src/components/about/About.tsx
+++ b/src/components/about/About.tsx
@@ -7,7 +7,7 @@ import { connect } from 'src/components/StateProvider';
 import { getClashAPIConfig } from 'src/store/app';
 import { ClashAPIConfig } from 'src/types';
 
-import s from './About.module.css';
+import s from './About.module.scss';
 
 type Props = { apiConfig: ClashAPIConfig };
 
diff --git a/src/components/proxies/Proxies.module.css b/src/components/proxies/Proxies.module.scss
index c0aed39..c0aed39 100644
--- a/src/components/proxies/Proxies.module.css
+++ b/src/components/proxies/Proxies.module.scss
diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
index e162a17..c1606dd 100644
--- a/src/components/proxies/Proxies.tsx
+++ b/src/components/proxies/Proxies.tsx
@@ -8,11 +8,12 @@ import { ProxyGroup } from 'src/components/proxies/ProxyGroup';
 import { ProxyPageFab } from 'src/components/proxies/ProxyPageFab';
 import { ProxyProviderList } from 'src/components/proxies/ProxyProviderList';
 import Settings from 'src/components/proxies/Settings';
-import { TextFilter } from 'src/components/proxies/TextFilter';
 import BaseModal from 'src/components/shared/BaseModal';
+import { TextFilter } from 'src/components/shared/TextFitler';
 import { connect, useStoreActions } from 'src/components/StateProvider';
 import Equalizer from 'src/components/svg/Equalizer';
 import { getClashAPIConfig } from 'src/store/app';
+import { proxyFilterText } from 'src/store/proxies';
 import {
   fetchProxies,
   getDelay,
@@ -22,7 +23,7 @@ import {
 } from 'src/store/proxies';
 import type { State } from 'src/store/types';
 
-import s0 from './Proxies.module.css';
+import s0 from './Proxies.module.scss';
 
 const { useState, useEffect, useCallback, useRef } = React;
 
@@ -84,7 +85,7 @@ function Proxies({
         <ContentHeader title={t('Proxies')} />
         <div className={s0.topBarRight}>
           <div className={s0.textFilterContainer}>
-            <TextFilter />
+            <TextFilter textAtom={proxyFilterText} />
           </div>
           <Tooltip label={t('settings')}>
             <Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
diff --git a/src/components/proxies/Proxy.module.css b/src/components/proxies/Proxy.module.scss
index b25948b..b25948b 100644
--- a/src/components/proxies/Proxy.module.css
+++ b/src/components/proxies/Proxy.module.scss
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 027b7fc..424d320 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -4,7 +4,7 @@ import { keyCodes } from 'src/misc/keycode';
 
 import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies';
 import { connect } from '../StateProvider';
-import s0 from './Proxy.module.css';
+import s0 from './Proxy.module.scss';
 import { ProxyLatency } from './ProxyLatency';
 
 const { useMemo } = React;
diff --git a/src/components/proxies/ProxyGroup.module.css b/src/components/proxies/ProxyGroup.module.scss
index 5409ea8..5409ea8 100644
--- a/src/components/proxies/ProxyGroup.module.css
+++ b/src/components/proxies/ProxyGroup.module.scss
diff --git a/src/components/proxies/ProxyGroup.tsx b/src/components/proxies/ProxyGroup.tsx
index e3b290a..32705c1 100644
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/src/components/proxies/ProxyGroup.tsx
@@ -11,7 +11,7 @@ import Button from '../Button';
 import CollapsibleSectionHeader from '../CollapsibleSectionHeader';
 import { connect, useStoreActions } from '../StateProvider';
 import { useFilteredAndSorted } from './hooks';
-import s0 from './ProxyGroup.module.css';
+import s0 from './ProxyGroup.module.scss';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';
 
 const { createElement, useCallback, useMemo, useState } = React;
diff --git a/src/components/proxies/ProxyLatency.module.css b/src/components/proxies/ProxyLatency.module.scss
index 0671982..0671982 100644
--- a/src/components/proxies/ProxyLatency.module.css
+++ b/src/components/proxies/ProxyLatency.module.scss
diff --git a/src/components/proxies/ProxyLatency.tsx b/src/components/proxies/ProxyLatency.tsx
index 34e0aa6..48e55af 100644
--- a/src/components/proxies/ProxyLatency.tsx
+++ b/src/components/proxies/ProxyLatency.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import s0 from './ProxyLatency.module.css';
+import s0 from './ProxyLatency.module.scss';
 
 type ProxyLatencyProps = {
   number: number;
diff --git a/src/components/proxies/ProxyList.module.css b/src/components/proxies/ProxyList.module.scss
index 1814929..1814929 100644
--- a/src/components/proxies/ProxyList.module.css
+++ b/src/components/proxies/ProxyList.module.scss
diff --git a/src/components/proxies/ProxyList.tsx b/src/components/proxies/ProxyList.tsx
index 08cfe05..a86bb88 100644
--- a/src/components/proxies/ProxyList.tsx
+++ b/src/components/proxies/ProxyList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Proxy, ProxySmall } from './Proxy';
-import s from './ProxyList.module.css';
+import s from './ProxyList.module.scss';
 
 type ProxyListProps = {
   all: string[];
diff --git a/src/components/proxies/ProxyProvider.module.css b/src/components/proxies/ProxyProvider.module.scss
index 534305b..534305b 100644
--- a/src/components/proxies/ProxyProvider.module.css
+++ b/src/components/proxies/ProxyProvider.module.scss
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index d7220b0..055a572 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -18,7 +18,7 @@ import { DelayMapping } from 'src/store/types';
 
 import { useFilteredAndSorted } from './hooks';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';
-import s from './ProxyProvider.module.css';
+import s from './ProxyProvider.module.scss';
 
 const { useState, useCallback } = React;
 
diff --git a/src/components/proxies/Settings.module.css b/src/components/proxies/Settings.module.scss
index 364d07d..364d07d 100644
--- a/src/components/proxies/Settings.module.css
+++ b/src/components/proxies/Settings.module.scss
diff --git a/src/components/proxies/Settings.tsx b/src/components/proxies/Settings.tsx
index 703fb0d..5e1ff98 100644
--- a/src/components/proxies/Settings.tsx
+++ b/src/components/proxies/Settings.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../store/app';
 import { connect, useStoreActions } from '../StateProvider';
 import Switch from '../SwitchThemed';
-import s from './Settings.module.css';
+import s from './Settings.module.scss';
 
 const options = [
   ['Natural', 'order_natural'],
diff --git a/src/components/proxies/TextFilter.tsx b/src/components/proxies/TextFilter.tsx
deleted file mode 100644
index 75f1d51..0000000
--- a/src/components/proxies/TextFilter.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { useTextInut } from 'src/hooks/useTextInput';
-
-import { proxyFilterText } from '../../store/proxies';
-import shared from '../shared.module.css';
-
-export function TextFilter() {
-  const [onChange, text] = useTextInut(proxyFilterText);
-  return (
-    <input
-      className={shared.input}
-      type="text"
-      value={text}
-      onChange={onChange}
-    />
-  );
-}
diff --git a/src/components/rules/RuleProviderItem.module.css b/src/components/rules/RuleProviderItem.module.scss
index 532ec8a..532ec8a 100644
--- a/src/components/rules/RuleProviderItem.module.css
+++ b/src/components/rules/RuleProviderItem.module.scss
diff --git a/src/components/rules/RuleProviderItem.tsx b/src/components/rules/RuleProviderItem.tsx
index c92cd05..fe4610e 100644
--- a/src/components/rules/RuleProviderItem.tsx
+++ b/src/components/rules/RuleProviderItem.tsx
@@ -5,7 +5,7 @@ import { useUpdateRuleProviderItem } from 'src/components/rules/rules.hooks';
 import { SectionNameType } from 'src/components/shared/Basic';
 import { RotateIcon } from 'src/components/shared/RotateIcon';
 
-import s from './RuleProviderItem.module.css';
+import s from './RuleProviderItem.module.scss';
 
 export function RuleProviderItem({
   idx,
diff --git a/src/components/rules/TextFilter.tsx b/src/components/rules/TextFilter.tsx
deleted file mode 100644
index a3cc29e..0000000
--- a/src/components/rules/TextFilter.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { useTextInut } from 'src/hooks/useTextInput';
-import { ruleFilterText } from 'src/store/rules';
-
-import shared from '../shared.module.css';
-
-export function TextFilter() {
-  const [onChange, text] = useTextInut(ruleFilterText);
-  return (
-    <input
-      className={shared.input}
-      type="text"
-      value={text}
-      onChange={onChange}
-      placeholder="Filter"
-    />
-  );
-}
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.module.css b/src/components/shared/TextFitler.module.scss
index 7d7ba9b..7d7ba9b 100644
--- a/src/components/shared.module.css
+++ b/src/components/shared/TextFitler.module.scss
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}
+    />
+  );
+}