fix(root_frame): clean up styles

src/client/web/build/template/index.template.html

@@ -16,8 +16,8 @@
     <script src="/static/js/react-dom.production.min.js?v=16.8.6"></script>
     <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
     <link rel="stylesheet" href="/static/css/reset.css">
-    <link rel="stylesheet" href="/static/css/white.css">
     <link rel="stylesheet" href="/static/css/default.css">
+    <link rel="stylesheet" href="/static/css/white.css">
     <!-- <link
       rel="apple-touch-icon"
       sizes="57x57"

src/client/web/src/components/control/tabs.tsx

@@ -74,7 +74,7 @@ export class Tabs extends React.Component<Props, State, {}> {
                 )}
               </span>,
             ])}
-            childrenStyles={List([{ flex: "30%" }, { flex: "70%" }])}
+            childrenStyles={List([{}, {}, {}])}
           />
         </button>
       );

src/client/web/src/components/root_frame.tsx

@@ -11,7 +11,6 @@ import { LoginProps } from "./pane_login";
 import { Layers } from "./layers";
 import { AdminProps } from "./pane_admin";
 import { TopBar } from "./topbar";
-import { roleVisitor } from "../client";
 
 export const controlName = "panelTabs";
 export interface Props {
@@ -25,7 +24,7 @@ export interface Props {
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
-export interface State { }
+export interface State {}
 export class RootFrame extends React.Component<Props, State, {}> {
   constructor(p: Props) {
     super(p);
@@ -88,17 +87,17 @@ export class RootFrame extends React.Component<Props, State, {}> {
                 filesPanel: {
                   name: "RiFolder2Fill",
                   size: "1.6rem",
-                  color: "cyan1",
+                  color: "highlight",
                 },
                 uploadingsPanel: {
                   name: "RiUploadCloudFill",
                   size: "1.6rem",
-                  color: "cyan1",
+                  color: "highlight",
                 },
                 sharingsPanel: {
                   name: "RiShareBoxLine",
                   size: "1.6rem",
-                  color: "cyan1",
+                  color: "highlight",
                 },
               })}
               ui={this.props.ui}

src/client/web/src/components/state_updater.ts

@@ -27,7 +27,7 @@ import { UploadEntry, UploadState } from "../worker/interface";
 import { Up } from "../worker/upload_mgr";
 import { alertMsg } from "../common/env";
 import { controlName as panelTabs } from "./root_frame";
-import { errUpdater, errServer } from "../common/errors";
+import { errServer } from "../common/errors";
 import { ErrorLogger } from "../common/log_error";
 import {
   settingsTabsCtrl,

src/client/web/src/components/topbar.tsx

@@ -32,49 +32,30 @@ export class TopBar extends React.Component<Props, State, {}> {
       return;
     }
 
-    return updater()
-      .logout()
-      .then((status: string) => {
-        if (status === "") {
-          const params = new URLSearchParams(
-            document.location.search.substring(1)
-          );
-          return updater().initAll(params);
-        } else {
-          alertMsg(this.props.msg.pkg.get("login.logout.fail"));
-        }
-      })
-      .then(() => {
-        return this.refreshCaptcha();
-      })
-      .then(() => {
-        this.props.update(updater().updateFilesInfo);
-        this.props.update(updater().updateUploadingsInfo);
-        this.props.update(updater().updateSharingsInfo);
-        this.props.update(updater().updateLogin);
-        this.props.update(updater().updateAdmin);
-        this.props.update(updater().updateUI);
-        this.props.update(updater().updateMsg);
-      });
-  };
+    const status = await updater().logout();
+    if (status !== "") {
+      alertMsg(this.props.msg.pkg.get("login.logout.fail"));
+      return;
+    }
 
-  refreshCaptcha = async () => {
-    return updater()
-      .getCaptchaID()
-      .then(() => {
-        this.props.update(updater().updateLogin);
-      });
+    const params = new URLSearchParams(document.location.search.substring(1));
+    const initStatus = await updater().initAll(params);
+    if (initStatus !== "") {
+      alertMsg(this.props.msg.pkg.get("op.fail"));
+      return;
+    }
+    this.props.update(updater().updateAll);
   };
 
   render() {
-    const showLogin = this.props.login.authed ? "" : "hidden";
-    const showSettings =
+    const loginPanelClass = this.props.login.authed ? "" : "hidden";
+    const settingsPanelClass =
       this.props.ui.control.controls.get(settingsDialogCtrl) === ctrlHidden
         ? "hidden"
         : "";
 
     return (
-      <div id="top-bar">
+      <div id="top-bar" className="highlight-font light-bg">
         <Flexbox
           children={List([
             <a
@@ -96,17 +77,19 @@ export class TopBar extends React.Component<Props, State, {}> {
               children={List([
                 <button
                   onClick={this.openSettings}
-                  className={`margin-r-m ${showSettings}`}
+                  className={`margin-r-m ${settingsPanelClass}`}
                 >
                   {this.props.msg.pkg.get("settings")}
-                  {/* {getIcon("RiSettings4Line", "1.8rem", "cyan1")} */}
                 </button>,
 
-                <button onClick={this.logout} className={`${showLogin}`}>
+                <button onClick={this.logout} className={`${loginPanelClass}`}>
                   {this.props.msg.pkg.get("login.logout")}
                 </button>,
               ])}
-              childrenStyles={List([{}, {}, {}, {}])}
+              childrenStyles={List([
+                { flex: "0 0 auto" },
+                { flex: "0 0 auto" },
+              ])}
             />,
           ])}
           childrenStyles={List([

src/client/web/src/components/visual/colors.ts

@@ -3,6 +3,7 @@ import { Set } from "immutable";
 export const colors = Set<string>([
   "blue0",
   "blue1",
+  "blue2",
   "cyan0",
   "cyan1",
   "purple0",
@@ -13,6 +14,7 @@ export const colors = Set<string>([
   "yellow1",
   "yellow2",
   "yellow3",
+  "yellow3",
   "green0",
   "green1",
   "green2",
@@ -26,6 +28,11 @@ export const colors = Set<string>([
   "black",
   "black0",
   "black1",
+  "dark",
+  "light",
+  "normal",
+  "highlight",
+  "error",
 ]);
 
 export function colorClass(name: string): string {