Chore: dashboard style

MetaCubeX · May 20, 2022 · 7285db2 · 7285db2
1 parent d0a2b15
commit 7285db2
Show file tree

Hide file tree

Showing 17 changed files with 40 additions and 32 deletions.
diff --git a/src/components/Card/style.scss b/src/components/Card/style.scss
@@ -1,6 +1,6 @@
 .card {
     padding: 15px;
     box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.18);
-    background-color: $color-white;
+    background-color: rgb(97 156 194 / 20%);
     border-radius: 4px;
 }
diff --git a/src/components/Input/style.scss b/src/components/Input/style.scss
@@ -6,7 +6,7 @@ $height: 30px;
     width: 100%;
     padding: 0 10px;
     font-size: 14px;
-    color: $color-primary-darken;
+    color: #15222a;
     border-radius: 3px;
     border: 1px solid $color-primary-lightly;
     transition: all 0.3s;

diff --git a/src/components/Tags/style.scss b/src/components/Tags/style.scss
@@ -14,13 +14,14 @@ $height: 22px;
         align-items: center;
         justify-content: center;
         border: 1px solid $background;
-        color: $color-primary-darken;
+        color: #b7c5d6;
         min-width: 90px;
         height: $height;
         border-radius: math.div($height, 10);
         padding: 0 6px;
         margin: 3px 4px;
         font-size: 10px;
+        background-color: rgb(97 156 194 / 20%);
     }
 
     li.error {

diff --git a/src/containers/Connections/index.tsx b/src/containers/Connections/index.tsx
@@ -311,7 +311,7 @@ export default function Connections () {
                 </div>
             </Card>
             <Modal title={t('closeAll.title')} show={visible} onClose={hide} onOk={handleCloseConnections}>{t('closeAll.content')}</Modal>
-            <Drawer containerRef={cardRef} bodyClassName="flex flex-col" visible={drawerState.visible} width={450}>
+            <Drawer containerRef={cardRef} bodyClassName="flex flex-col bg-[#15222a] text-[#b7c5d6]" visible={drawerState.visible} width={450}>
                 <div className="flex h-8 justify-between items-center">
                     <span className="font-bold pl-3">{t('info.title')}</span>
                     <Icon type="close" size={16} className="cursor-pointer" onClick={() => setDrawerState('visible', false)} />

diff --git a/src/containers/Connections/style.scss b/src/containers/Connections/style.scss
@@ -11,8 +11,8 @@
         display: inline-block;
         position: relative;
         text-align: center;
-        color: $color-gray-darken;
-        background: $color-gray-light;
+        color: $color-primary-darken;
+        background: rgb(97 156 194 / 20%);
         height: $height;
         line-height: $height;
         font-weight: 500;
@@ -95,7 +95,7 @@
             position: sticky;
             left: 0;
             z-index: 998;
-            background-color: $color-white;
+            background-color: rgb(97 156 194 / 0%);
             &.shadow {
                 box-shadow: inset -9px 0 8px -14px $color-black;
             }

diff --git a/src/containers/Logs/index.tsx b/src/containers/Logs/index.tsx
@@ -71,7 +71,7 @@ export default function Logs () {
                     {
                         logs.map(
                             (log, index) => (
-                                <li className="leading-5 inline-block text-[11px]" key={index}>
+                                <li className="leading-5 inline-block" key={index}>
                                     <span className="mr-2 text-orange-400">[{ dayjs(log.time).format('YYYY-MM-DD HH:mm:ss') }]</span>
                                     <span className={logMap.get(log.type)}>[{ log.type.toUpperCase() }]</span>
                                     <span> { log.payload }</span>

diff --git a/src/containers/Logs/style.scss b/src/containers/Logs/style.scss
@@ -6,9 +6,9 @@
     list-style: none;
     padding: 10px;
     border-radius: 2px;
-    background-color: $color-gray-light;
-    font-size: 12px;
-    color: #73808f;
+    background-color: #243a49;
+    font-size: 11px;
+    color: #b7c5d6a6;
     overflow-y: auto;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
 }
diff --git a/src/containers/Proxies/components/Group/style.scss b/src/containers/Proxies/components/Group/style.scss
@@ -2,7 +2,7 @@
     display: flex;
     align-items: flex-start;
     font-size: 14px;
-    color: $color-black-light;
+    color: #b7c5d6;
 }
 
 @media (max-width: 768px) {

diff --git a/src/containers/Rules/index.tsx b/src/containers/Rules/index.tsx
@@ -39,12 +39,12 @@ export default function Rules () {
 
     function renderRuleItem ({ index, style }: { index: number, style: React.CSSProperties }) {
         const rule = rules[index]
-        const ruleSize = rule.size || -1
+        const rulesize = rule.size || rule.Size
         return (
             <li className="rule-item" style={style}>
                 <div className="flex py-1">
                     <div className="text-center w-40 rule-type">{ rule.type }</div>
-                    <div className="flex-1 text-center payload"> { ruleSize !== -1 ? `${rule.payload} :: ${rule.size}` : rule.payload }</div>
+                    <div className="flex-1 text-center payload"> { rulesize !== -1 ? `${rule.payload} :: ${rulesize}` : rule.payload }</div>
                     <div className="text-center w-40 rule-proxy">{ rule.proxy }</div>
                 </div>
             </li>
@@ -55,15 +55,15 @@ export default function Rules () {
         <div className="page">
             <RuleProviders />
             <Header className="not-first:mt-7.5" title={t('title')} />
-            <Card className="flex flex-col flex-1 mt-2.5 p-0 md:mt-4 focus:outline-none">
+            <Card className="flex flex-col flex-1 mt-2.5 p-0 md:mt-4 focus:outline-none text-sm">
                 <AutoSizer className="min-h-120">
                     {
                         ({ height, width }) => (
                             <List
                                 height={height}
                                 width={width}
                                 itemCount={rules.length}
-                                itemSize={50}
+                                itemSize={40}
                             >
                                 { renderRuleItem }
                             </List>

diff --git a/src/containers/Rules/style.scss b/src/containers/Rules/style.scss
@@ -15,12 +15,12 @@
 
         > i {
             font-weight: bold;
-            color: $color-gray-dark;
+            color: $color-primary-darken;
         }
     }
 
     .rule-type {
-        font-size: 14px;
+        font-size: 12px;
         color: $color-primary-darken;
 
         > i {
@@ -30,13 +30,13 @@
     }
 
     .payload {
-        font-size: 14px;
+        font-size: 12px;
         color: $color-primary-darken;
         cursor: pointer;
     }
 
     .rule-proxy {
-        font-size: 14px;
+        font-size: 12px;
         color: $color-primary-darken;
     }
 
@@ -45,7 +45,7 @@
         transition: all 300ms ease;
 
         span {
-            font-size: 14px;
+            font-size: 12px;
             color: $color-red;
             cursor: pointer;
         }

diff --git a/src/containers/Settings/style.scss b/src/containers/Settings/style.scss
@@ -4,7 +4,7 @@
 
     .label {
         font-size: 14px;
-        color: #3b5f76;
+        color: $color-primary-darken;
     }
 
     .external-controller {
@@ -16,7 +16,7 @@
         line-height: 17px;
 
         &.modify-btn {
-            color: $color-primary;
+            color: $color-primary-darken;
             cursor: pointer;
         }
     }

diff --git a/src/containers/Sidebar/index.tsx b/src/containers/Sidebar/index.tsx
@@ -17,7 +17,7 @@ interface SidebarProps {
 export default function Sidebar (props: SidebarProps) {
     const { routes } = props
     const { translation } = useI18n()
-    const { version, premium } = useVersion()
+    const { version, premium, meta } = useVersion()
     const { data } = useClashXData()
     const { t } = translation('SideBar')
     const location = useLocation()
@@ -42,6 +42,7 @@ export default function Sidebar (props: SidebarProps) {
                 <span className="sidebar-version-label">Clash{ data?.isClashX && 'X' } { t('Version') }</span>
                 <span className="sidebar-version-text">{ version }</span>
                 { premium && <span className="sidebar-version-label">Premium</span> }
+                { meta && <span className="sidebar-version-label">Meta</span> }
             </div>
         </div>
     )

diff --git a/src/lib/request.ts b/src/lib/request.ts
@@ -19,6 +19,7 @@ export interface Rule {
     payload: string
     proxy: string
     size: number
+    Size: number
 }
 
 export interface Proxies {
@@ -156,7 +157,7 @@ export class Client {
     }
 
     async getVersion () {
-        return await this.axiosClient.get<{ version: string, premium?: boolean }>('version')
+        return await this.axiosClient.get<{ version: string, premium?: boolean, meta?: boolean }>('version')
     }
 
     async getProxyDelay (name: string) {

diff --git a/src/models/Rule.ts b/src/models/Rule.ts
@@ -19,4 +19,6 @@ export interface Rule {
     proxy?: string // proxy or proxy group name
 
     size?: number
+
+    Size?: number
 }
diff --git a/src/stores/jotai.ts b/src/stores/jotai.ts
@@ -46,6 +46,7 @@ export function useI18n () {
 export const version = atom({
     version: '',
     premium: false,
+    meta: false,
 })
 
 export function useVersion () {
@@ -59,20 +60,20 @@ export function useVersion () {
 
         set(
             result.isErr()
-                ? { version: '', premium: false }
-                : { version: result.value.data.version, premium: !!result.value.data.premium },
+                ? { version: '', premium: false, meta: false }
+                : { version: result.value.data.version, premium: !!result.value.data.premium, meta: !!result.value.data.meta },
         )
     })
 
     return data
 }
 
 export function useRuleProviders () {
-    const [{ premium }] = useAtom(version)
+    const [{ premium, meta }] = useAtom(version)
     const client = useClient()
 
-    const { data, mutate } = useSWR(['/providers/rule', client, premium], async () => {
-        if (!premium) {
+    const { data, mutate } = useSWR(['/providers/rule', client, premium, meta], async () => {
+        if (!premium || !meta) {
             return []
         }
 

diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -10,7 +10,9 @@ html {
 *::after {
     margin: 0;
     padding: 0;
-    box-sizing: inherit;
+    border-style: hidden !important;
+    //box-sizing: inherit;
+
 }
 
 body {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -8,7 +8,7 @@ $background: #15222a;
 // primary colors
 $color-primary: #3b5f76;
 $color-primary-dark: #619cc2;
-$color-primary-darken: #54759a;
+$color-primary-darken: #b7c5d6;
 $color-primary-light: #7fcae4;
 $color-primary-lightly: #e4eaef;