refactor(flat-pages): update styles in room (#1766)

Author: hyrious

.eslintignore

@@ -4,3 +4,4 @@ dist/
 public/
 storybook-static/
 .eslintrc.js
+*.json

cspell.config.js

@@ -95,7 +95,8 @@ module.exports = {
         "pickone", // chance
         "viewports", // storybook
         "videojs", // @videojs/vhs-utils
-        "telebox", // @netless/widnow-manager
+        "tele", // @netless/widnow-manager
+        "telebox",
         "Buildin", // @netless/widnow-manager
         "zindex", // antd
         "geogebra", // @netless/app-geogebra

desktop/renderer-app/src/tasks/init-ui.tsx

@@ -11,10 +11,11 @@ import { StoreProvider } from "@netless/flat-pages/src/components/StoreProvider"
 import { FlatServicesContextProvider } from "@netless/flat-pages/src/components/FlatServicesContext";
 import { ipcStore } from "../stores/ipc-store";
 import { IPCContext } from "../components/IPCContext";
+import { windowsBtnContext } from "../components/WindowsBtnContext";
+import { runtime } from "../utils/runtime";
 
 /** configure right after import */
 import { configure } from "mobx";
-import { windowsBtnContext } from "../components/WindowsBtnContext";
 configure({
     isolateGlobalState: true,
 });
@@ -24,7 +25,7 @@ const App: React.FC = () => {
 
     return (
         <AntdProvider lang={language}>
-            <StoreProvider WindowsBtnContext={windowsBtnContext}>
+            <StoreProvider WindowsBtnContext={windowsBtnContext} runtime={runtime}>
                 <IPCContext.Provider value={ipcStore}>
                     <FlatServicesContextProvider>
                         <AppRoutes />

packages/flat-components/src/components/ChatPanel/style.less

@@ -15,7 +15,7 @@
     }
 
     .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-        color: var(--primary);
+        color: var(--primary-strong);
     }
 
     .ant-tabs-top > .ant-tabs-nav::before {
@@ -45,20 +45,11 @@
 
 .flat-color-scheme-dark {
     .chat-panel {
-        .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-            color: var(--grey-0);
-        }
         .ant-tabs-ink-bar {
-            background: var(--grey-0);
+            background: var(--primary-strong);
         }
         .ant-tabs-top > .ant-tabs-nav::before {
             border-bottom-color: var(--grey-8);
         }
-        .ant-tabs-tab:hover {
-            color: var(--grey-4);
-        }
-        .ant-tabs-tab-btn:focus {
-            color: var(--grey-0);
-        }
     }
 }

packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less

@@ -31,10 +31,10 @@
 
 .flat-color-scheme-dark {
     .topbar-right-btn {
-        background-color: var(--grey-10);
+        background-color: transparent;
 
         &:hover {
-            background-color: var(--grey-11);
+            background-color: var(--grey-7);
         }
 
         &:active {

packages/flat-components/src/components/ClassroomPage/TopBar/style.less

@@ -19,6 +19,7 @@
     padding: 0 8px;
     font-size: 16px;
     user-select: none;
+
     &.isMac {
         border-top: none;
     }
@@ -48,6 +49,7 @@
 .flat-color-scheme-dark {
     .topbar-box {
         border-color: var(--grey-8);
+        background: linear-gradient(270deg, #383B42 0%, #2B2F38 100%);
     }
 
     .topbar-divider,

packages/flat-pages/src/BigClassPage/BigClassPage.less

@@ -58,7 +58,7 @@
     .big-class-realtime-container,
     .big-class-realtime-box {
         color: var(--text);
-        background-color: var(--grey-10);
+        background-color: var(--grey-9);
     }
 
     .big-class-realtime-box .topbar-box {

packages/flat-pages/src/BigClassPage/index.tsx

@@ -35,6 +35,7 @@ import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
+import { ExtraPadding } from "../components/ExtraPadding";
 
 export type BigClassPageProps = {};
 
@@ -103,6 +104,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
         function renderTopBarLeft(): React.ReactNode {
             return (
                 <>
+                    <ExtraPadding />
                     <NetworkStatus networkQuality={classroomStore.networkQuality} />
                     {classroomStore.isCreator ? (
                         classroomStore.roomInfo?.beginTime && (

packages/flat-pages/src/OneToOnePage/index.tsx

@@ -35,6 +35,7 @@ import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
+import { ExtraPadding } from "../components/ExtraPadding";
 
 export type OneToOnePageProps = {};
 
@@ -97,6 +98,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
         function renderTopBarLeft(): React.ReactNode {
             return (
                 <>
+                    <ExtraPadding />
                     <NetworkStatus networkQuality={classroomStore.networkQuality} />
                     {classroomStore.isCreator ? (
                         classroomStore.roomInfo?.beginTime && (

packages/flat-pages/src/SmallClassPage/index.tsx

@@ -37,6 +37,7 @@ import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
+import { ExtraPadding } from "../components/ExtraPadding";
 
 export type SmallClassPageProps = {};
 
@@ -134,6 +135,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
         function renderTopBarLeft(): React.ReactNode {
             return (
                 <>
+                    <ExtraPadding />
                     <NetworkStatus networkQuality={classroomStore.networkQuality} />
                     {classroomStore.isCreator ? (
                         classroomStore.roomInfo?.beginTime && (

packages/flat-pages/src/components/ExtraPadding.less

@@ -0,0 +1,5 @@
+.extra-padding {
+    display: inline-block;
+    width: 64px;
+    height: 1px;
+}

packages/flat-pages/src/components/ExtraPadding.tsx

@@ -0,0 +1,9 @@
+import "./ExtraPadding.less";
+
+import React, { useContext } from "react";
+import { RuntimeContext } from "./StoreProvider";
+
+export const ExtraPadding: React.FC = React.memo(function ExtraPadding() {
+    const runtime = useContext(RuntimeContext);
+    return runtime?.isMac ? <div className="extra-padding" /> : null;
+});

packages/flat-pages/src/components/RuntimeContext.ts

@@ -0,0 +1,3 @@
+export interface IRuntimeContext {
+    isMac?: boolean;
+}

packages/flat-pages/src/components/StoreProvider.tsx

@@ -2,6 +2,7 @@ import React, { createContext, FC } from "react";
 import { preferencesStore, globalStore, roomStore } from "@netless/flat-stores";
 import { pageStore } from "../stores/page-store";
 import { WindowsBtnContextInterface } from "./WindowsBtnContext";
+import { IRuntimeContext } from "./RuntimeContext";
 
 export const GlobalStoreContext = createContext(globalStore);
 
@@ -15,18 +16,23 @@ export const WindowsSystemBtnContext = createContext<WindowsBtnContextInterface
     undefined,
 );
 
+export const RuntimeContext = createContext<IRuntimeContext | undefined>(undefined);
+
 interface StoreProviderProps {
     children: React.ReactNode;
     WindowsBtnContext?: WindowsBtnContextInterface;
+    runtime?: IRuntimeContext;
 }
 
-export const StoreProvider: FC<StoreProviderProps> = ({ children, WindowsBtnContext }) => (
+export const StoreProvider: FC<StoreProviderProps> = ({ children, WindowsBtnContext, runtime }) => (
     <GlobalStoreContext.Provider value={globalStore}>
         <PreferencesStoreContext.Provider value={preferencesStore}>
             <RoomStoreContext.Provider value={roomStore}>
                 <PageStoreContext.Provider value={pageStore}>
                     <WindowsSystemBtnContext.Provider value={WindowsBtnContext}>
-                        {children}
+                        <RuntimeContext.Provider value={runtime}>
+                            {children}
+                        </RuntimeContext.Provider>
                     </WindowsSystemBtnContext.Provider>
                 </PageStoreContext.Provider>
             </RoomStoreContext.Provider>

packages/flat-pages/src/components/Whiteboard.less

@@ -107,6 +107,15 @@
     opacity: 0;
 }
 
+.telebox-manager-container {
+    --tele-managerStageShadow: none;
+}
+
+.fastboard-root {
+    --fastboard-bg-color: #fff;
+    --fastboard-border-color: var(--grey-1);
+}
+
 .flat-color-scheme-dark {
     .whiteboard-container {
         background: #15181d;
@@ -120,4 +129,14 @@
     .whiteboard-scroll-page {
         background: #15181d;
     }
+
+    .fastboard-root {
+        --fastboard-bg-color: var(--grey-9);
+        --fastboard-border-color: var(--grey-8);
+    }
+}
+
+.telebox-color-scheme-dark.telebox-manager-container {
+    --tele-managerStageShadow: none;
+    --tele-managerContainerBackground: #222429;
 }

packages/flat-pages/src/utils/runtime.ts

@@ -14,7 +14,7 @@
     "white-web-sdk": ">=2.16"
   },
   "devDependencies": {
-    "@netless/fastboard": "1.0.0-canary.7",
+    "@netless/fastboard": "1.0.0-canary.8",
     "@netless/window-manager": "1.0.0-canary.69",
     "mobx": "^6.6.1",
     "prettier": "^2.7.1",

packages/flat-stores/package.json

@@ -113,6 +113,7 @@ export class AgoraRTCWebShareScreen extends IServiceShareScreen {
 
     public override async destroy(): Promise<void> {
         this._sideEffect.flushAll();
+        await this.disableShareScreen();
     }
 
     private _pTogglingShareScreen?: Promise<unknown>;

pnpm-lock.yaml

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
-    "@netless/fastboard": "1.0.0-canary.7",
+    "@netless/fastboard": "1.0.0-canary.8",
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-server-api": "workspace:*",
     "@netless/flat-service-provider-file-convert-netless": "workspace:*",