From 13dcb7d6532a07bb86c54139c9e9d19eb892de4e Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 30 May 2021 18:29:57 +0800
Subject: Minor light theme style tweak

---
 src/components/Root.css               | 14 ++++++++------
 src/components/TrafficNow.module.css  | 21 ---------------------
 src/components/TrafficNow.module.scss | 23 +++++++++++++++++++++++
 src/components/TrafficNow.tsx         | 12 ++++++------
 4 files changed, 37 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/TrafficNow.module.css
 create mode 100644 src/components/TrafficNow.module.scss

(limited to 'src/components')

diff --git a/src/components/Root.css b/src/components/Root.css
index 52f1fb1..2c78a38 100644
--- a/src/components/Root.css
+++ b/src/components/Root.css
@@ -108,6 +108,7 @@ body,
 body.dark {
   --color-background: #202020;
   --color-background2: rgba(32, 32, 32, 0.3);
+  --color-bg-card: #2d2d2d;
   --color-text: #ddd;
   --color-text-secondary: #ccc;
   --color-text-highlight: #fff;
@@ -132,14 +133,15 @@ body.dark {
 }
 
 body.light {
-  --color-background: #fbfbfb;
-  --color-background2: rgba(251, 251, 251, 0.3);
+  --color-background: #eee;
+  --color-background2: rgba(240, 240, 240, 0.3);
+  --color-bg-card: #fafafa;
   --color-text: #222;
   --color-text-secondary: #646464;
   --color-text-highlight: #040404;
-  --color-bg-sidebar: #e7e7e7;
-  --color-sb-active-row-bg: #d0d0d0;
-  --color-input-bg: #ffffff;
+  --color-bg-sidebar: #f8f8f8;
+  --color-sb-active-row-bg: #d8d8d8;
+  --color-input-bg: #f0f0f0;
   --color-input-border: #c0c0c0;
   --color-toggle-bg: #ffffff;
   --color-toggle-selected: #d7d7d7;
@@ -147,7 +149,7 @@ body.light {
   --color-separator: #ccc;
   --color-btn-bg: #f4f4f4;
   --color-btn-fg: #101010;
-  --color-bg-proxy: #e7e7e7;
+  --color-bg-proxy: #fafafa;
   --color-row-odd: #f5f5f5;
   --bg-modal: #fbfbfb;
   --bg-near-transparent: rgba(0, 0, 0, 0.1);
diff --git a/src/components/TrafficNow.module.css b/src/components/TrafficNow.module.css
deleted file mode 100644
index 0bb2276..0000000
--- a/src/components/TrafficNow.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.TrafficNow {
-  color: var(--color-text);
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  :global {
-    .sec {
-      padding: 10px;
-      width: 180px;
-      div:nth-child(1) {
-        color: var(--color-text-secondary);
-        font-size: 0.7em;
-      }
-      div:nth-child(2) {
-        padding: 10px 0 0;
-        font-size: 1.8em;
-      }
-    }
-  }
-}
diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.scss
new file mode 100644
index 0000000..47aee12
--- /dev/null
+++ b/src/components/TrafficNow.module.scss
@@ -0,0 +1,23 @@
+.TrafficNow {
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .sec {
+    padding: 10px;
+    width: 180px;
+    margin: 3px;
+    background-color: var(--color-bg-card);
+    border-radius: 10px;
+    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
+    div:nth-child(1) {
+      color: var(--color-text-secondary);
+      font-size: 0.7em;
+    }
+    div:nth-child(2) {
+      padding: 10px 0 0;
+      font-size: 1.8em;
+    }
+  }
+}
diff --git a/src/components/TrafficNow.tsx b/src/components/TrafficNow.tsx
index fbcc4e9..b82594c 100644
--- a/src/components/TrafficNow.tsx
+++ b/src/components/TrafficNow.tsx
@@ -6,7 +6,7 @@ import { fetchData } from '../api/traffic';
 import prettyBytes from '../misc/pretty-bytes';
 import { getClashAPIConfig } from '../store/app';
 import { connect } from './StateProvider';
-import s0 from './TrafficNow.module.css';
+import s0 from './TrafficNow.module.scss';
 
 const { useState, useEffect, useCallback } = React;
 
@@ -21,23 +21,23 @@ function TrafficNow({ apiConfig }) {
   const { upTotal, dlTotal, connNumber } = useConnection(apiConfig);
   return (
     <div className={s0.TrafficNow}>
-      <div className="sec">
+      <div className={s0.sec}>
         <div>{t('Upload')}</div>
         <div>{upStr}</div>
       </div>
-      <div className="sec">
+      <div className={s0.sec}>
         <div>{t('Download')}</div>
         <div>{downStr}</div>
       </div>
-      <div className="sec">
+      <div className={s0.sec}>
         <div>{t('Upload Total')}</div>
         <div>{upTotal}</div>
       </div>
-      <div className="sec">
+      <div className={s0.sec}>
         <div>{t('Download Total')}</div>
         <div>{dlTotal}</div>
       </div>
-      <div className="sec">
+      <div className={s0.sec}>
         <div>{t('Active Connections')}</div>
         <div>{connNumber}</div>
       </div>
-- 
cgit v1.3.1