fix(root_frame): clean up styles

public/static/css/default.css

@@ -423,7 +423,7 @@
 }
 
 .grey3-bg {
-  color: #697384;
+  background-color: #697384;
 }
 
 .black-bg {

public/static/css/reset.css

@@ -44,30 +44,18 @@ img {
   user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 a {
-  color: #16a085;
   opacity: 100%;
   text-decoration: none;
-  transition: color 1s 1 linear;
-}
-a:hover {
-  color: #2ecc71;
-}
-a:active {
+  transition: color 300ms;
 }
 a::selection {
   background: transparent;
 }
 
-button {
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-button:active {
-  /* animation: fade 0.1s 1 linear; */
-}
-button:hover {
-  /* animation: fade 0.1s 1 linear; */
+span,
+div,
+svg {
+  transition: color 300ms, background-color 300ms;
 }
 
 img {
@@ -88,31 +76,30 @@ input {
   padding: 0.8rem 1rem;
   width: 10rem;
 
-  background-color: rgba(0, 0, 0, 0.15);
   border-radius: 0.5rem;
+
+  transition: opacity 300ms, box-shadow 300ms;
 }
 
 input:focus {
   opacity: 0.8;
-  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
-}
-
-::placeholder {
-  color: #95a5a6;
 }
 
 button {
   cursor: pointer;
   border: none;
   border-radius: 0.5rem;
+  outline: none;
   padding: 0.8rem 1rem;
 
-  background-color: rgba(0, 0, 0, 0.3);
-
   font-weight: bold;
   border-radius: 0.5rem;
-}
 
-button:hover {
-  opacity: 0.9;
+  transition: opacity 300ms;
+}
+button:hover {
+  opacity: 0.8;
+}
+button:active {
+  opacity: 1;
 }

public/static/css/white.css

@@ -1,3 +1,52 @@
+.dark-font {
+  color: #34495e;
+}
+.light-font {
+  color: #95a5a6;
+}
+.normal-font {
+  color: #697384;
+}
+.highlight-font {
+  color: #16a085;
+}
+.error-font {
+  color: #f1c40f;
+}
+
+.light-bg {
+  background-color: white;
+}
+.normal-bg {
+  background-color: #ecf0f6;
+}
+.highlight-bg {
+  color: #16a085;
+}
+.dark-bg {
+  background-color: #2c3e50;
+}
+button {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+::placeholder {
+  color: #95a5a6;
+}
+a {
+  color: #16a085;
+}
+a:hover {
+  color: cc#2ecc71;
+}
+input {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+input:focus {
+  opacity: 0.8;
+  box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
+}
+
+
 #root-frame {
   position: fixed;
   left: 0;
@@ -17,22 +66,11 @@
 }
 
 .theme-default #top-bar {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(9.5px);
-  color: #16a085;
   padding: 1rem 2rem 1rem 2rem;
-  -webkit-backdrop-filter: blur(9.5px);
   position: relative;
   z-index: 2;
-}
-
-.theme-default #topbar-user-info {
-  color: #697384;
-  margin-right: 1rem;
-}
-
-.theme-default #top-bar button {
-  min-width: 7rem;
+  backdrop-filter: blur(9.5px);
+  -webkit-backdrop-filter: blur(9.5px);
 }
 
 .theme-default #top-menu {

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 {