From e490257420d604e4a3a618b4a629d7adf68c2fb9 Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Thu, 11 May 2023 13:33:26 +0800
Subject: [PATCH] refactor(flat-pages): update preferences modal styles (#1933)

* refactor(flat-pages): update preferences modal styles

- move general settings label to first row's center
- update theme picker styles

* reset index on close preferences modal

* update network status popover styles

* fix: update avatars styles on edge case
---
 .../ClassroomPage/NetworkStatus/style.less    |  2 +
 .../VideoAvatarAbsent/style.less              |  1 +
 .../src/BigClassPage/BigClassPage.less        |  3 +-
 .../src/OneToOnePage/OneToOnePage.less        |  3 +-
 .../GeneralSettings/AppearanceSettings.tsx    | 67 ++++++++++++++++++
 .../GeneralSettings/AvatarsSettings.tsx       |  2 +-
 .../GeneralSettings/BackgroundSettings.tsx    |  8 ++-
 .../GeneralSettings/index.tsx                 | 19 +-----
 .../components/PreferencesButton/index.tsx    |  6 +-
 .../components/PreferencesButton/style.less   | 68 +++++++++++++++++--
 10 files changed, 153 insertions(+), 26 deletions(-)
 create mode 100644 packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AppearanceSettings.tsx

diff --git a/packages/flat-components/src/components/ClassroomPage/NetworkStatus/style.less b/packages/flat-components/src/components/ClassroomPage/NetworkStatus/style.less
index 3a9f5bfc2b3..fb441bb37f5 100644
--- a/packages/flat-components/src/components/ClassroomPage/NetworkStatus/style.less
+++ b/packages/flat-components/src/components/ClassroomPage/NetworkStatus/style.less
@@ -19,6 +19,8 @@
     position: absolute;
     left: 0;
     top: calc(100% + 7px);
+    display: flex;
+    flex-direction: column;
     border-radius: 4px;
     z-index: 9999;
     font-size: 12px;
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less
index b80fea0dc65..52b3ed83fd6 100644
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less
@@ -63,6 +63,7 @@
 }
 
 .video-avatar-absent-desc {
+    padding-left: 4px;
     white-space: nowrap;
 }
 
diff --git a/packages/flat-pages/src/BigClassPage/BigClassPage.less b/packages/flat-pages/src/BigClassPage/BigClassPage.less
index 70e11a45c52..f31f05fa6cb 100644
--- a/packages/flat-pages/src/BigClassPage/BigClassPage.less
+++ b/packages/flat-pages/src/BigClassPage/BigClassPage.less
@@ -51,7 +51,8 @@
     flex-direction: column;
     gap: .5px;
 
-    .video-avatar {
+    .video-avatar,
+    .video-avatar-absent {
         width: 288px;
         height: 216px;
     }
diff --git a/packages/flat-pages/src/OneToOnePage/OneToOnePage.less b/packages/flat-pages/src/OneToOnePage/OneToOnePage.less
index 50aacfd31de..f436877c793 100644
--- a/packages/flat-pages/src/OneToOnePage/OneToOnePage.less
+++ b/packages/flat-pages/src/OneToOnePage/OneToOnePage.less
@@ -54,7 +54,8 @@
     flex-direction: column;
     gap: .5px;
 
-    .video-avatar {
+    .video-avatar,
+    .video-avatar-absent {
         width: 288px;
         height: 216px;
     }
diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AppearanceSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AppearanceSettings.tsx
new file mode 100644
index 00000000000..8a337fbed2d
--- /dev/null
+++ b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AppearanceSettings.tsx
@@ -0,0 +1,67 @@
+import type { PreferencesButtonProps } from "../index";
+
+import React, { useCallback, useContext } from "react";
+import { observer } from "mobx-react-lite";
+import { Radio } from "antd";
+
+import { useTranslate } from "@netless/flat-i18n";
+import { PreferencesStoreContext } from "../../StoreProvider";
+
+export interface AppearanceSettingsProps extends PreferencesButtonProps {}
+
+export const AppearanceSettings = observer<AppearanceSettingsProps>(function AppearanceSettings() {
+    const t = useTranslate();
+    const preferences = useContext(PreferencesStoreContext);
+
+    const changeAppearance = useCallback(
+        (ev: any) => preferences.updatePrefersColorScheme(ev.target.value),
+        [preferences],
+    );
+
+    return (
+        <>
+            <label className="preferences-modal-section-grid-label first-row" htmlFor="theme">
+                {t("theme")}
+            </label>
+            <Radio.Group
+                className="preferences-modal-section-grid-content"
+                id="theme"
+                name="theme"
+                value={preferences.prefersColorScheme}
+                onChange={changeAppearance}
+            >
+                <Radio className="preferences-modal-section-radio" value="light">
+                    <span className="preferences-modal-section-theme light">
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                    </span>
+                    <span>{t("app-appearance-light")}</span>
+                </Radio>
+                <Radio className="preferences-modal-section-radio" value="dark">
+                    <span className="preferences-modal-section-theme dark">
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                    </span>
+                    <span>{t("app-appearance-dark")}</span>
+                </Radio>
+                <Radio className="preferences-modal-section-radio" value="auto">
+                    <span className="preferences-modal-section-theme auto">
+                        <span className="preferences-modal-section-theme light">
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                        </span>
+                        <span className="preferences-modal-section-theme dark">
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                        </span>
+                    </span>
+                    <span>{t("app-appearance-auto")}</span>
+                </Radio>
+            </Radio.Group>
+        </>
+    );
+});
diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AvatarsSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AvatarsSettings.tsx
index 2836cdd1da8..5ac0803802f 100644
--- a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AvatarsSettings.tsx
+++ b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AvatarsSettings.tsx
@@ -17,7 +17,7 @@ export const AvatarsSettings = observer<AvatarsSettingsProps>(function AvatarsSe
 
     return (
         <>
-            <label className="preferences-modal-section-grid-label" htmlFor="avatars">
+            <label className="preferences-modal-section-grid-label first-row" htmlFor="avatars">
                 {t("general-settings-avatars")}
             </label>
             <Radio.Group
diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/BackgroundSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/BackgroundSettings.tsx
index 78252e54110..6981a908ea2 100644
--- a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/BackgroundSettings.tsx
+++ b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/BackgroundSettings.tsx
@@ -27,7 +27,7 @@ export const BackgroundSettings = observer<BackgroundSettingsProps>(function Bac
 
     return (
         <>
-            <label className="preferences-modal-section-grid-label" htmlFor="background">
+            <label className="preferences-modal-section-grid-label first-row" htmlFor="background">
                 {t("general-settings-background")}
             </label>
             <Radio.Group
@@ -38,7 +38,11 @@ export const BackgroundSettings = observer<BackgroundSettingsProps>(function Bac
                 onChange={changeBackground}
             >
                 {backgrounds.map(background => (
-                    <Radio className="preferences-modal-section-radio" value={background}>
+                    <Radio
+                        key={background}
+                        className="preferences-modal-section-radio"
+                        value={background}
+                    >
                         <span className={"preferences-modal-section-background " + background}>
                             <img
                                 alt={t("online-interaction-to-synchronize-ideas")}
diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/index.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/index.tsx
index a53e46ec896..0596b9a3545 100644
--- a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/index.tsx
+++ b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/index.tsx
@@ -1,15 +1,14 @@
 import type { PreferencesButtonProps } from "../index";
 
-import React, { useCallback, useContext } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 
 import { useTranslate } from "@netless/flat-i18n";
 import { RoomType } from "@netless/flat-server-api";
-import { AppearancePicker } from "flat-components";
-import { PreferencesStoreContext } from "../../StoreProvider";
 import { AvatarsSettings } from "./AvatarsSettings";
 import { BackgroundSettings } from "./BackgroundSettings";
 import { LanguageSettings } from "./LanguageSettings";
+import { AppearanceSettings } from "./AppearanceSettings";
 
 export interface GeneralSettingsProps extends PreferencesButtonProps {}
 
@@ -18,12 +17,6 @@ export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSe
 }) {
     const t = useTranslate();
 
-    const preferences = useContext(PreferencesStoreContext);
-    const changeAppearance = useCallback(
-        (ev: any) => preferences.updatePrefersColorScheme(ev.target.value),
-        [preferences],
-    );
-
     const isSmallClass = classroom.roomType === RoomType.SmallClass;
 
     return (
@@ -33,13 +26,7 @@ export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSe
                 <LanguageSettings classroom={classroom} />
                 {isSmallClass && <AvatarsSettings classroom={classroom} />}
                 <BackgroundSettings classroom={classroom} />
-                <label className="preferences-modal-section-grid-label" htmlFor="theme">
-                    {t("theme")}
-                </label>
-                <AppearancePicker
-                    changeAppearance={changeAppearance}
-                    value={preferences.prefersColorScheme}
-                />
+                <AppearanceSettings classroom={classroom} />
             </div>
         </div>
     );
diff --git a/packages/flat-pages/src/components/PreferencesButton/index.tsx b/packages/flat-pages/src/components/PreferencesButton/index.tsx
index e2a3283b03b..6800c6f5e5e 100644
--- a/packages/flat-pages/src/components/PreferencesButton/index.tsx
+++ b/packages/flat-pages/src/components/PreferencesButton/index.tsx
@@ -32,9 +32,13 @@ export const PreferencesButton = observer<PreferencesButtonProps>(function Prefe
     const t = useTranslate();
     const [open, setOpen] = useState(false);
     const onToggle = useCallback(() => setOpen(open => !open), []);
-    const onCancel = useCallback(() => setOpen(false), []);
 
     const [index, setIndex] = useState(0);
+    const onCancel = useCallback(() => {
+        setOpen(false);
+        setIndex(0);
+    }, []);
+
     const updateIndex = useCallback((ev: React.MouseEvent) => {
         const el = ev.target as HTMLElement | null;
         const index = el?.dataset?.index;
diff --git a/packages/flat-pages/src/components/PreferencesButton/style.less b/packages/flat-pages/src/components/PreferencesButton/style.less
index 9f5a3638847..c0dc681b77e 100644
--- a/packages/flat-pages/src/components/PreferencesButton/style.less
+++ b/packages/flat-pages/src/components/PreferencesButton/style.less
@@ -152,6 +152,11 @@
 
 .preferences-modal-section-grid-label {
     white-space: pre-wrap;
+
+    &.first-row {
+        align-self: flex-start;
+        transform: translateY(calc(60px - 50%));
+    }
 }
 
 .preferences-modal-section-control {
@@ -244,6 +249,65 @@
     mix-blend-mode: difference;
 }
 
+.preferences-modal-section-theme {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+
+    &.light {
+        background: #fff;
+
+        .preferences-modal-section-theme-front {
+            background-color: var(--blue-2);
+        }
+    }
+
+    &.dark {
+        background: var(--grey-9);
+
+        .preferences-modal-section-theme-front {
+            background-color: var(--grey-7);
+        }
+    }
+}
+
+.preferences-modal-section-theme-front {
+    display: inline-block;
+    width: 80px;
+    height: 8px;
+
+    &:first-child {
+        width: 120px;
+    }
+}
+
+.preferences-modal-section-theme.auto {
+    padding: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 0;
+
+    >.preferences-modal-section-theme {
+        position: static;
+        flex: 1;
+
+        >.preferences-modal-section-theme-front {
+            width: 20px;
+
+            &:first-child {
+                width: 40px;
+            }
+        }
+    }
+}
+
 .preferences-modal-section-button {
     position: relative;
     display: flex;
@@ -354,10 +418,6 @@
         &.ant-radio-wrapper-checked::after {
             background-color: var(--grey-9);
         }
-
-        .ant-radio+span>img {
-            filter: brightness(0.8);
-        }
     }
 
     .preferences-modal-hotkey-setting-content {