refactor(project): apply setting page and MainPageLayout component da…

…rk mode (#1379)
netless-io · Feb 22, 2022 · b1ed605 · b1ed605
1 parent 5627093
commit b1ed605
Show file tree

Hide file tree

Showing 17 changed files with 130 additions and 34 deletions.
diff --git a/cspell.config.js b/cspell.config.js
@@ -102,6 +102,7 @@ module.exports = {
 
         // less
         "isstring",
+        "borderless",
 
         // misc
         "npmrc",

diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less
@@ -3,7 +3,7 @@
     input,
     .ant-select,
     .ant-picker-input > input {
-        color: #444e60;
+        color: var(--text);
     }
 
     .ant-picker {
@@ -12,7 +12,7 @@
 
     .edit-room-form-label,
     .ant-form-item-label > label {
-        color: #7a7b7c;
+        color: var(--text-strong);
     }
 
     .ant-picker,
@@ -46,7 +46,7 @@
 .edit-room-title {
     font-size: 16px;
     font-weight: 500;
-    color: #444e60;
+    color: var(--text);
     line-height: 1;
     margin: 0;
 }
@@ -81,6 +81,7 @@
 
 .edit-room-body {
     overflow: visible;
+    background-color: #fff;
     .ant-row {
         margin-left: 0 !important;
         margin-right: 0 !important;
@@ -114,7 +115,7 @@
 }
 
 .edit-room-tips {
-    background-color: #f3f6f9;
+    background-color: var(--grey-0);
     border-radius: 8px;
     padding: 12px;
 }
@@ -162,3 +163,13 @@
     margin-top: 2px;
     margin-right: -11px;
 }
+
+.flat-color-scheme-dark {
+    .edit-room-body {
+        background-color: var(--grey-10);
+    }
+
+    .edit-room-tips {
+        background-color: var(--grey-9);
+    }
+}
diff --git a/packages/flat-components/src/components/LoadingPage/style.less b/packages/flat-components/src/components/LoadingPage/style.less
@@ -15,7 +15,7 @@
     width: 100%;
     height: 50px;
     pointer-events: none;
-    background-color: #fff;
+    background-color: var(--grey-0);
 
     &.is-transparent {
         background-color: transparent;
@@ -30,8 +30,8 @@
     justify-content: center;
     flex-direction: column;
     align-items: center;
-    color: #7a7b7c;
-    background-color: white;
+    color: var(--text-weak);
+    background-color: var(--grey-0);
 }
 
 .loading-page-image {
@@ -50,3 +50,17 @@
         opacity: 1;
     }
 }
+
+.flat-color-scheme-dark {
+    .loading-page-mask {
+        background-color: var(--grey-12);
+
+        &.is-transparent {
+            background-color: transparent;
+        }
+    }
+
+    .loading-page-content {
+        background-color: var(--grey-12);
+    }
+}
diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less b/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less
@@ -13,14 +13,9 @@
 
 .main-page-nav-horizontal-left {
     .ant-tabs-tab {
-        color: #7a7b7c;
         font-size: 16px;
     }
 
-    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-        color: #444e60;
-    }
-
     .ant-tabs-nav::before {
         border-bottom: none;
     }
@@ -58,3 +53,9 @@
     font-size: 14px;
     font-weight: 400;
 }
+
+.flat-color-scheme-dark {
+    .main-page-nav-horizontal-container {
+        background-color: var(--grey-10);
+    }
+}
diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageSubMenu/style.less b/packages/flat-components/src/components/MainPageLayout/MainPageSubMenu/style.less
@@ -20,16 +20,36 @@
     padding: 9px 0px 9px 16px;
     transition: background-color 0.4s;
     align-items: center;
-    color: #444e60;
+    color: var(--text);
 
     &:hover,
     &:active {
-        color: #444e60;
+        color: var(--text);
         background-color: rgba(243, 246, 249, 1);
     }
 
     &.is-active {
-        color: #444e60;
+        color: var(--text);
         background-color: rgba(51, 129, 255, 0.06);
     }
 }
+
+.flat-color-scheme-dark {
+    .main-layout-sub-menu-container {
+        background-color: var(--grey-10);
+        border-right: solid 1px var(--grey-7);
+    }
+
+    .main-layout-sub-menu-item {
+        &:hover,
+        &:active {
+            color: var(--text);
+            background-color: var(--grey-8);
+        }
+
+        &.is-active {
+            color: var(--text);
+            background-color: rgba(141, 136, 136, 0.3);
+        }
+    }
+}
diff --git a/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less b/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less
@@ -5,7 +5,7 @@
 .main-horizontal-layout-content-background {
     height: calc(100vh - 50px);
     padding-top: 16px;
-    background-color: #f3f6f9;
+    background-color: var(--grey-0);
 }
 
 .main-horizontal-layout-content-container {
@@ -20,3 +20,9 @@
     flex: 1;
     height: 100%;
 }
+
+.flat-color-scheme-dark {
+    .main-horizontal-layout-content-background {
+        background-color: var(--grey-12);
+    }
+}
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.less b/packages/flat-components/src/components/PeriodicRoomPage/index.less
@@ -2,6 +2,7 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
+    background-color: #fff;
 }
 
 .periodic-room-panel-body {
@@ -25,13 +26,13 @@
 .periodic-room-panel-title {
     font-size: 16px;
     font-weight: 500;
-    color: #444e60;
+    color: var(--text);
     line-height: 1;
     margin: 0;
 }
 
 .periodic-room-panel-tips {
-    background-color: #f3f6f9;
+    background-color: var(--grey-0);
     border-radius: 8px;
     padding: 12px;
     margin-bottom: 24px;
@@ -42,13 +43,13 @@
 }
 
 .periodic-room-panel-tips-type {
-    color: #7a7b7c;
+    color: var(--text);
     margin-top: 8px;
     margin-bottom: 8px;
 }
 
 .periodic-room-panel-tips-inner {
-    color: #7a7b7c;
+    color: var(--text);
 }
 
 .periodic-room-panel-table-line {
@@ -59,15 +60,27 @@
 
 .periodic-room-panel-table-container {
     .ant-table-tbody > tr > td {
-        color: #7a7b7c;
+        color: var(--text);
         border-bottom: 1px solid transparent;
     }
 }
 
 .periodic-room-panel-month-value {
-    color: #444e60;
+    color: var(--text);
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
     margin-top: 16px;
 }
+
+.flat-color-scheme-dark {
+    .periodic-room-panel-tips {
+        background-color: var(--grey-9);
+    }
+    .periodic-room-panel-container {
+        background-color: var(--grey-10);
+    }
+    .periodic-room-panel-body {
+        background-color: var(--grey-10);
+    }
+}
diff --git a/packages/flat-components/src/containers/CloudStorageContainer/style.less b/packages/flat-components/src/containers/CloudStorageContainer/style.less
@@ -4,6 +4,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    background-color: var(--grey-0);
 }
 
 .cloud-storage-container-head {
@@ -119,4 +120,8 @@
     .cloud-storage-container-footer {
         border-top-color: var(--grey-8);
     }
+
+    .cloud-storage-container {
+        background-color: var(--grey-10);
+    }
 }
diff --git a/web/flat-web/src/components/EditRoomPage/index.tsx b/web/flat-web/src/components/EditRoomPage/index.tsx
@@ -31,7 +31,7 @@ export const EditRoomPage = observer<EditRoomPageProps>(function EditRoomPage(pr
 
     return (
         <div className="edit-room-page">
-            <div className="edit-room-page-body">
+            <div className="edit-room-page-body flat-theme-background-color">
                 <div className="edit-room-page-body-content">
                     <EditRoomBody {...props} />
                 </div>

diff --git a/web/flat-web/src/components/EditRoomPage/style.less b/web/flat-web/src/components/EditRoomPage/style.less
@@ -12,15 +12,14 @@
 .edit-room-page-header-title {
     font-size: 16px;
     font-weight: 500;
-    color: #444e60;
+    color: var(--text);
 }
 
 .edit-room-page-body {
     flex: 1;
     width: 960px;
     margin: 0 auto;
     border-radius: 8px 8px 0px 0px;
-    background-color: #fff;
 }
 
 .edit-room-page-body-content {

diff --git a/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less b/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less
@@ -22,5 +22,4 @@
     width: 960px;
     margin: 0 auto;
     border-radius: 8px 8px 0px 0px;
-    background-color: #fff;
 }
diff --git a/web/flat-web/src/pages/RoomDetailPage/index.tsx b/web/flat-web/src/pages/RoomDetailPage/index.tsx
@@ -127,7 +127,7 @@ export const RoomDetailPage = observer(function RoomDetailPage() {
 
     return (
         <div className="room-detail-page-container">
-            <div className="room-detail-page-panel-container">
+            <div className="room-detail-page-panel-container flat-theme-background-color">
                 <RoomDetailPanel
                     inviteBaseUrl={FLAT_WEB_BASE_URL}
                     isCreator={isCreator}

diff --git a/web/flat-web/src/pages/UserSettingPage/AboutPage/index.less b/web/flat-web/src/pages/UserSettingPage/AboutPage/index.less
@@ -14,13 +14,13 @@
     }
 
     .flat-name {
-        color: #444e60;
+        color: var(--text-strong);
         font-size: 16px;
         font-weight: 500;
     }
 
     .flat-version {
-        color: #7a7b7c;
+        color: var(--text);
         font-size: 14px;
         font-weight: 400;
         padding-bottom: 16px;

diff --git a/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.less b/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.less
@@ -19,7 +19,7 @@
     }
 }
 
-.general-setting-appearance-picker-container{
+.general-setting-appearance-picker-container {
     > span {
         display: block;
         padding-top: 8px;
@@ -34,3 +34,14 @@
 .general-setting-checkbox-title {
     padding-bottom: 3px;
 }
+
+.flat-color-scheme-dark {
+    .general-setting-container {
+        color: var(--text-stronger);
+    }
+
+    .radio-item-inner,
+    .checkbox-item-inner {
+        color: var(--text);
+    }
+}
diff --git a/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.tsx b/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.tsx
@@ -42,8 +42,12 @@ export const GeneralSettingPage = (): React.ReactElement => {
                         }
                         onChange={changeLanguage}
                     >
-                        <Radio value={SelectLanguage.Chinese}>{t("chinese")}</Radio>
-                        <Radio value={SelectLanguage.English}>English</Radio>
+                        <Radio value={SelectLanguage.Chinese}>
+                            <span className="radio-item-inner">{t("chinese")}</span>
+                        </Radio>
+                        <Radio value={SelectLanguage.English}>
+                            <span className="radio-item-inner">English</span>
+                        </Radio>
                     </Radio.Group>
                 </div>
                 <div className="general-setting-appearance-picker-container">
@@ -61,7 +65,7 @@ export const GeneralSettingPage = (): React.ReactElement => {
                             globalStore.toggleDeviceTest();
                         }}
                     >
-                        {t("turn-on-device-test")}
+                        <span className="checkbox-item-inner">{t("turn-on-device-test")}</span>
                     </Checkbox>
                 </div>
             </div>

diff --git a/web/flat-web/src/pages/UserSettingPage/UserSettingLayoutContainer.tsx b/web/flat-web/src/pages/UserSettingPage/UserSettingLayoutContainer.tsx
@@ -39,5 +39,7 @@ export const UserSettingLayoutContainer: React.FC = ({ children }): React.ReactE
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    return <div className="user-setting-layout-container">{children}</div>;
+    return (
+        <div className="user-setting-layout-container flat-theme-background-color">{children}</div>
+    );
 };