Style: cleanup code

.github/workflows/node.yml

@@ -23,7 +23,7 @@ jobs:
         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
           ${{ runner.os }}-yarn-
-    - name: Install package
+    - name: Install package and build
       run: |
         yarn
         yarn build

package.json

@@ -26,48 +26,48 @@
     },
     "devDependencies": {
         "@types/lodash-es": "^4.17.4",
-        "@types/node": "^14.14.41",
+        "@types/node": "^15.0.2",
-        "@types/react": "^17.0.3",
+        "@types/react": "^17.0.5",
-        "@types/react-dom": "^17.0.3",
+        "@types/react-dom": "^17.0.4",
         "@types/react-router-dom": "^5.1.7",
-        "@types/react-table": "^7.0.29",
+        "@types/react-table": "^7.7.0",
         "@types/react-virtualized-auto-sizer": "^1.0.0",
-        "@types/react-window": "^1.8.2",
+        "@types/react-window": "^1.8.3",
-        "@typescript-eslint/eslint-plugin": "^4.22.0",
+        "@typescript-eslint/eslint-plugin": "^4.23.0",
-        "@typescript-eslint/parser": "^4.22.0",
+        "@typescript-eslint/parser": "^4.23.0",
-        "@vitejs/plugin-react-refresh": "^1.3.2",
+        "@vitejs/plugin-react-refresh": "^1.3.3",
         "babel-eslint": "^10.1.0",
-        "eslint": "^7.24.0",
+        "eslint": "^7.26.0",
         "eslint-config-react-app": "^6.0.0",
-        "eslint-plugin-flowtype": "^5.7.1",
+        "eslint-plugin-flowtype": "^5.7.2",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-jsx-a11y": "^6.4.1",
         "eslint-plugin-react": "^7.23.2",
         "eslint-plugin-react-hooks": "^4.2.0",
-        "sass": "^1.32.11",
+        "sass": "^1.32.12",
-        "tailwindcss": "^2.1.1",
+        "type-fest": "^1.1.1",
-        "type-fest": "^1.0.2",
         "typescript": "^4.2.4",
-        "vite": "^2.2.1",
+        "vite": "^2.3.0",
-        "vite-plugin-windicss": "^0.15.2",
+        "vite-plugin-windicss": "^0.15.10",
-        "vite-tsconfig-paths": "^3.3.8"
+        "vite-tsconfig-paths": "^3.3.10",
+        "windicss": "^2.5.14"
     },
     "dependencies": {
         "axios": "^0.21.1",
         "classnames": "^2.3.1",
         "dayjs": "^1.10.4",
         "eventemitter3": "^4.0.7",
-        "immer": "^9.0.1",
+        "immer": "^9.0.2",
         "lodash-es": "^4.17.21",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
-        "react-table": "^7.6.3",
+        "react-table": "^7.7.0",
-        "react-use": "^17.2.3",
+        "react-use": "^17.2.4",
         "react-virtualized-auto-sizer": "^1.0.5",
         "react-window": "^1.8.6",
         "recoil": "^0.2.0",
-        "swr": "^0.5.5",
+        "swr": "^0.5.6",
         "use-immer": "^0.5.1"
     }
 }

src/components/Header/index.tsx

@@ -12,7 +12,7 @@ export function Header (props: HeaderProps) {
     const { title, children, className, style } = props
 
     return <header className={classnames('header', className)} style={style}>
-        <h1>{title}</h1>
+        <h1 className="md:text-xl">{title}</h1>
-        <div className="operations">{children}</div>
+        <div className="flex flex-auto items-center justify-end">{children}</div>
     </header>
 }

src/components/Header/style.scss

@@ -16,16 +16,3 @@
         line-height: 32px;
     }
 }
-
-.operations {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-@media (max-width: 768px) {
-    .header > h1 {
-        font-size: 20px;
-    }
-}

src/components/Input/index.tsx

@@ -28,7 +28,7 @@ export function Input (props: InputProps) {
         onChange = noop,
         onBlur = noop
     } = props
-    const classname = classnames('input', `input-align-${align}`, { 'input-inside': inside }, className)
+    const classname = classnames('input', `text-${align}`, { 'focus:shadow-none': inside }, className)
 
     return (
         <input

src/components/Input/style.scss

@@ -19,21 +19,3 @@ $height: 30px;
         box-shadow: 0 2px 5px rgba($color: $color-primary, $alpha: 0.5);
     }
 }
-
-.input-align-left {
-    text-align: left;
-}
-
-.input-align-center {
-    text-align: center;
-}
-
-.input-align-right {
-    text-align: right;
-}
-
-.input-inside {
-    &:focus {
-        box-shadow: none;
-    }
-}

src/components/Switch/index.tsx

@@ -23,7 +23,7 @@ export function Switch (props: SwitchProps) {
 
     return (
         <div className={classname} onClick={handleClick}>
-            <Icon className="switch-icon" type="check" size={20} style={{ fontWeight: 'bold' }} />
+            <Icon className="switch-icon font-bold" type="check" size={20} />
         </div>
     )
 }

src/components/Tags/index.tsx

@@ -45,7 +45,7 @@ export function Tags (props: TagsProps) {
         })
 
     return (
-        <div className={classnames('tags-container', className)} style={{ height: rowHeight }}>
+        <div className={classnames('flex items-start overflow-y-hidden', className)} style={{ height: rowHeight }}>
             <ul ref={ulRef} className={classnames('tags', { expand })}>
                 { tags }
             </ul>

src/components/Tags/style.scss

@@ -1,11 +1,5 @@
 $height: 22px;
 
-.tags-container {
-    display: flex;
-    align-items: flex-start;
-    overflow-y: hidden;
-}
-
 .tags {
     display: flex;
     flex: 1;

src/containers/Connections/index.tsx

@@ -240,7 +240,7 @@ export default function Connections() {
             </Header>
             { devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> }
             <Card className="connections-card">
-                <div {...getTableProps()} className="connections" ref={tableRef}>
+                <div {...getTableProps()} className="flex flex-col w-full flex-1 overflow-auto" ref={tableRef}>
                     <div {...headerGroup.getHeaderGroupProps()} className="connections-header">
                         {
                             headerGroup.headers.map((column, idx) => {
@@ -271,7 +271,7 @@ export default function Connections() {
                         }
                     </div>
 
-                    <div {...getTableBodyProps()} className="connections-body">
+                    <div {...getTableBodyProps()} className="flex-1">
                         {
                             rows.map(row => {
                                 prepareRow(row)
@@ -281,7 +281,7 @@ export default function Connections() {
                                             row.cells.map(cell => {
                                                 const classname = classnames(
                                                     'connections-block',
-                                                    { center: shouldCenter.has(cell.column.id), completed: row.original.completed },
+                                                    { 'text-center': shouldCenter.has(cell.column.id), completed: row.original.completed },
                                                     { fixed: scrollX > 0 && cell.column.id === Columns.Host }
                                                 )
                                                 return (

src/containers/Connections/style.scss

@@ -6,19 +6,6 @@
     padding: 0;
     overflow: hidden;
 
-    .connections {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        flex-grow: 1;
-        flex-basis: 0;
-        overflow: auto;
-    }
-
-    .connections-body {
-        flex: 1 0 auto;
-    }
-
     .connections-th {
         $height: 30px;
 
@@ -84,10 +71,6 @@
         }
     }
 
-    .connetions-item {
-        height: 36px;
-    }
-
     .connections-block {
         display: flex;
         align-items: center;
@@ -99,10 +82,6 @@
         text-overflow: ellipsis;
         white-space: nowrap;
 
-        &.center {
-            text-align: center;
-        }
-
         &.completed {
             background-color: darken($color-gray-light, 3%);
             color: rgba($color-primary-darken, 50%);

src/containers/Logs/index.tsx

@@ -42,7 +42,7 @@ export default function Logs () {
     return (
         <div className="page">
             <Header title={ t('title') } />
-            <Card className="logs-card">
+            <Card className="flex flex-col flex-1 mt-3">
                 <ul className="logs-panel" ref={listRef}>
                     {
                         logs.map(

src/containers/Logs/style.scss

@@ -1,10 +1,3 @@
-.logs-card {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    margin-top: 10px;
-}
-
 .logs-panel {
     display: flex;
     flex-direction: column;

src/containers/Proxies/index.tsx

@@ -51,7 +51,7 @@ function ProxyGroups () {
                     </Checkbox>
                 </Header>
                 <Card className="proxies-group-card">
-                    <ul className="proxies-group-list">
+                    <ul className="list-none">
                         {
                             list.map(p => (
                                 <li className="proxies-group-item" key={p.name}>
@@ -76,10 +76,10 @@ function ProxyProviders () {
             providers.length !== 0 &&
             <div className="proxies-container">
                 <Header title={t('providerTitle')} />
-                <ul className="proxies-providers-list">
+                <ul className="list-none">
                     {
                         providers.map(p => (
-                            <li className="proxies-providers-item" key={p.name}>
+                            <li className="my-5" key={p.name}>
                                 <Provider provider={p} />
                             </li>
                         ))
@@ -119,8 +119,8 @@ function Proxies () {
             sortedProxies.length !== 0 &&
             <div className="proxies-container">
                 <Header title={t('title')}>
-                    <Icon className="proxies-action-icon" type={sortMap[sort]} onClick={handleSort} size={20} />
+                    <Icon className="ml-3" type={sortMap[sort]} onClick={handleSort} size={20} />
-                    <Icon className="proxies-action-icon" type="speed" size={20} />
+                    <Icon className="ml-3" type="speed" size={20} />
                     <span className="proxies-speed-test" onClick={handleNotitySpeedTest}>{t('speedTestText')}</span>
                 </Header>
                 <ul className="proxies-list">

src/containers/Proxies/style.scss

@@ -46,18 +46,10 @@
     }
 }
 
-.proxies-group-list {
-    list-style: none;
-}
-
 .proxies-group-card {
     margin: 20px 0;
 }
 
-.proxies-container .proxies-action-icon {
-    margin-left: 10px;
-}
-
 .proxies-speed-test {
     line-height: 32px;
     margin: 0 2px 0 6px;
@@ -66,14 +58,6 @@
     cursor: pointer;
 }
 
-.proxies-providers-item {
-    margin: 20px 0;
-}
-
-.proxies-providers-list {
-    list-style: none;
-}
-
 @media (max-width: 768px) {
     .proxies-group-card {
         margin: 12px 0;

src/containers/Rules/index.tsx

@@ -42,7 +42,7 @@ export default function Rules () {
         const rule = rules[index]
         return (
             <li className="rule-item" style={style}>
-                <div className="rule-item-row flex">
+                <div className="py-1 flex">
                     <div className="rule-type w-40 text-center">{ rule.type }</div>
                     <div className="payload flex-1 text-center">{ rule.payload }</div>
                     <div className="rule-proxy w-40 text-center">{ rule.proxy }</div>

src/containers/Rules/style.scss

@@ -8,10 +8,6 @@
     &:focus {
         outline: none;
     }
-
-    .rules {
-        flex: 1 0 auto;
-    }
 }
 
 .rule-item {
@@ -23,10 +19,6 @@
     user-select: none;
     border-bottom: 1px solid rgba($color: $color-primary-lightly, $alpha: 0.5);
 
-    .rule-item-row {
-        padding: 5px 0;
-    }
-
     .drag-handler {
         cursor: row-resize;
         margin: 0 10px;
@@ -81,27 +73,3 @@
         }
     }
 }
-
-.rule-proxy-option {
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    .label {
-        margin-right: 5px;
-        height: 20px;
-        line-height: 20px;
-        padding: 0 8px;
-        font-size: 10px;
-        border-radius: 10px;
-        color: $color-white;
-        background: $color-gray-dark;
-    }
-
-    .value {
-        line-height: 20px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}

src/containers/Settings/index.tsx

@@ -178,7 +178,7 @@ export default function Settings () {
                     <div className="w-1/2 px-8"></div>
                 </div>
             </Card>
-            <Card className="clash-version" style={{ display: 'none' }}>
+            <Card className="clash-version hidden">
                 <span className="check-icon">
                     <Icon type="check" size={20} />
                 </span>

tailwind.config.js

@@ -1 +0,0 @@
-module.exports = {}

windi.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'windicss/helpers'
+
+export default defineConfig({})