From e18f23b9112a362be40f7c2daa6335c6fef0c960 Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Fri, 18 Mar 2022 21:26:31 +0800
Subject: [PATCH] fix(fe/settings): clean up styles

---
 .../web/src/components/control/tabs.tsx       |  4 +-
 src/client/web/src/components/layers.tsx      |  6 +-
 src/client/web/src/components/pane_admin.tsx  | 56 +++++++++++++------
 .../web/src/components/pane_settings.tsx      | 25 ++++++---
 src/client/web/src/components/topbar.tsx      |  7 ++-
 src/client/web/src/i18n/en_US.ts              |  1 +
 src/client/web/src/i18n/zh_CN.ts              |  1 +
 7 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/src/client/web/src/components/control/tabs.tsx b/src/client/web/src/components/control/tabs.tsx
index e7dda0b..59e169e 100644
--- a/src/client/web/src/components/control/tabs.tsx
+++ b/src/client/web/src/components/control/tabs.tsx
@@ -54,7 +54,7 @@ export class Tabs extends React.Component<Props, State, {}> {
       const iconColor = displaying === option ? iconProps.color : "black0";
       const icon = getIcon(iconProps.name, iconProps.size, iconColor);
       const fontColor =
-        displaying === option ? `${colorClass(iconColor)}-font` : "";
+        displaying === option ? `${colorClass(iconColor)}-font` : "black0-font";
 
       return (
         <button
@@ -62,7 +62,7 @@ export class Tabs extends React.Component<Props, State, {}> {
           onClick={() => {
             this.setTab(this.props.targetControl, option);
           }}
-          className="float-l margin-r-m"
+          className="float-l margin-r-m normal-bg"
         >
           <Flexbox
             children={List([
diff --git a/src/client/web/src/components/layers.tsx b/src/client/web/src/components/layers.tsx
index e62a141..b8989dd 100644
--- a/src/client/web/src/components/layers.tsx
+++ b/src/client/web/src/components/layers.tsx
@@ -30,7 +30,7 @@ export interface Props {
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
-export interface State { }
+export interface State {}
 export class Layers extends React.Component<Props, State, {}> {
   private hotkeyHandler: HotkeyHandler;
   constructor(p: Props) {
@@ -60,7 +60,8 @@ export class Layers extends React.Component<Props, State, {}> {
   };
 
   render() {
-    const hideLogin = this.props.login.authed ||
+    const hideLogin =
+      this.props.login.authed ||
       (this.props.ui.control.controls.get(sharingCtrl) === ctrlOn &&
         this.props.filesInfo.isSharing);
     const loginPaneClass = hideLogin ? "hidden" : "";
@@ -99,6 +100,7 @@ export class Layers extends React.Component<Props, State, {}> {
                 children={List([
                   <h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>,
                   <button
+                    className="button-default"
                     onClick={() => {
                       this.setControlOption(settingsDialogCtrl, ctrlOff);
                     }}
diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx
index 1ed938e..3174b49 100644
--- a/src/client/web/src/components/pane_admin.tsx
+++ b/src/client/web/src/components/pane_admin.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { List, Map, Set } from "immutable";
 import FileSize from "filesize";
 
-import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
+import { RiMenuUnfoldFill } from "@react-icons/all-files/ri/RiMenuUnfoldFill";
 
 import { alertMsg, confirmMsg } from "../common/env";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
@@ -11,6 +11,7 @@ import { updater } from "./state_updater";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
+// import { getItemPath } from "./panel_files";
 
 export interface AdminProps {
   users: Map<string, User>;
@@ -30,6 +31,7 @@ export interface UserFormProps {
   name: string;
   role: string;
   quota: Quota;
+  usedSpace: string;
   roles: Set<string>;
   msg: MsgProps;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
@@ -43,6 +45,7 @@ export interface UserFormState {
   role: string;
   quota: Quota;
   folded: boolean;
+  usedSpace: string;
 }
 
 export class UserForm extends React.Component<
@@ -64,6 +67,7 @@ export class UserForm extends React.Component<
         downloadSpeedLimit: p.quota.downloadSpeedLimit,
       },
       folded: true,
+      usedSpace: p.usedSpace,
     };
   }
 
@@ -118,7 +122,7 @@ export class UserForm extends React.Component<
     if (status !== "") {
       alertMsg(this.props.msg.pkg.get("resetUsedSpace"));
     }
-  }
+  };
 
   setPwd = async () => {
     if (this.state.newPwd1 !== this.state.newPwd2) {
@@ -203,7 +207,7 @@ export class UserForm extends React.Component<
     const foldIconColor = this.state.folded ? "black-font" : "cyan1-font";
     const resetUsedSpace = () => {
       this.resetUsedSpace(this.props.id);
-    }
+    };
 
     return (
       <div className="user-form">
@@ -221,13 +225,13 @@ export class UserForm extends React.Component<
             </div>,
 
             <span>
-              <RiMore2Fill
+              <RiMenuUnfoldFill
                 size="1.2rem"
                 className={`margin-r-m ${foldIconColor}`}
                 onClick={this.toggle}
               />
 
-              <button onClick={this.delUser}>
+              <button className="button-default" onClick={this.delUser}>
                 {this.props.msg.pkg.get("delete")}
               </button>
             </span>,
@@ -243,6 +247,25 @@ export class UserForm extends React.Component<
         <div className={foldedClass}>
           <div className="hr"></div>
 
+          <div>
+            <Flexbox
+              children={List([
+                <span>
+                  {`${this.props.msg.pkg.get("usedSpace")}: ${FileSize(
+                    parseInt(this.state.usedSpace, 10),
+                    { round: 0 }
+                  )}`}
+                </span>,
+                <button className="button-default" onClick={resetUsedSpace}>
+                  {this.props.msg.pkg.get("resetUsedSpace")}
+                </button>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+          </div>
+
+          <div className="hr"></div>
+
           <Flexbox
             className="margin-t-m"
             children={List([
@@ -310,13 +333,9 @@ export class UserForm extends React.Component<
               </div>,
 
               <div>
-                <button onClick={this.setUser}>
+                <button className="button-default" onClick={this.setUser}>
                   {this.props.msg.pkg.get("update")}
                 </button>
-                <br />
-                <button onClick={resetUsedSpace}>
-                  {this.props.msg.pkg.get("resetUsedSpace")}
-                </button>
               </div>,
             ])}
             childrenStyles={List([
@@ -362,7 +381,7 @@ export class UserForm extends React.Component<
                 </div>
               </div>,
 
-              <button onClick={this.setPwd}>
+              <button className="button-default" onClick={this.setPwd}>
                 {this.props.msg.pkg.get("update")}
               </button>,
             ])}
@@ -520,6 +539,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
             name={user.name}
             role={user.role}
             quota={user.quota}
+            usedSpace={user.usedSpace}
             roles={this.props.admin.roles}
             msg={this.props.msg}
             update={this.props.update}
@@ -538,6 +558,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
                 onClick={() => {
                   this.delRole(role);
                 }}
+                className="button-default"
               >
                 {this.props.msg.pkg.get("delete")}
               </button>,
@@ -564,7 +585,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
               <h5 className="pane-title">
                 {this.props.msg.pkg.get("user.add")}
               </h5>,
-              <button onClick={this.addUser}>
+              <button onClick={this.addUser} className="button-default">
                 {this.props.msg.pkg.get("add")}
               </button>,
             ])}
@@ -654,7 +675,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
                   value={this.state.newRole}
                   placeholder={this.props.msg.pkg.get("role.name")}
                 />,
-                <button onClick={this.addRole}>
+                <button className="button-default" onClick={this.addRole}>
                   {this.props.msg.pkg.get("add")}
                 </button>,
               ])}
@@ -688,7 +709,7 @@ interface BgProps {
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
-interface BgState { }
+interface BgState {}
 export class BgCfg extends React.Component<BgProps, BgState, {}> {
   changeSiteName = (ev: React.ChangeEvent<HTMLInputElement>) => {
     updater().setClientCfg({ ...this.props.ui, siteName: ev.target.value });
@@ -821,10 +842,13 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
             <h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
 
             <span>
-              <button onClick={this.resetClientCfg} className="margin-r-m">
+              <button
+                onClick={this.resetClientCfg}
+                className="margin-r-m button-default"
+              >
                 {this.props.msg.pkg.get("reset")}
               </button>
-              <button onClick={this.setClientCfg}>
+              <button className="button-default" onClick={this.setClientCfg}>
                 {this.props.msg.pkg.get("update")}
               </button>
             </span>,
diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index ed1de13..3cebfca 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -199,10 +199,16 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               </h5>,
 
               <span>
-                <button className="margin-r-m" onClick={this.reportErrors}>
+                <button
+                  className="button-default margin-r-m"
+                  onClick={this.reportErrors}
+                >
                   {this.props.msg.pkg.get("op.submit")}
                 </button>
-                <button onClick={this.truncateErrors}>
+                <button
+                  className="button-default"
+                  onClick={this.truncateErrors}
+                >
                   {this.props.msg.pkg.get("op.truncate")}
                 </button>
               </span>,
@@ -267,7 +273,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               <h5 className="pane-title">
                 {this.props.msg.pkg.get("settings.pwd.update")}
               </h5>,
-              <button onClick={this.setPwd}>
+              <button className="button-default" onClick={this.setPwd}>
                 {this.props.msg.pkg.get("update")}
               </button>,
             ])}
@@ -333,7 +339,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               onClick={() => {
                 this.setLan("en_US");
               }}
-              className="float-input"
+              className="button-default float-input"
             >
               {this.props.msg.pkg.get("enUS")}
             </button>
@@ -341,7 +347,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               onClick={() => {
                 this.setLan("zh_CN");
               }}
-              className="float-input"
+              className="button-default float-input"
             >
               {this.props.msg.pkg.get("zhCN")}
             </button>
@@ -356,7 +362,10 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               </h5>,
 
               <span>
-                <button onClick={this.syncPreferences}>
+                <button
+                  className="button-default"
+                  onClick={this.syncPreferences}
+                >
                   {this.props.msg.pkg.get("update")}
                 </button>
               </span>,
@@ -388,7 +397,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 {this.props.msg.pkg.get("cfg.bg")}
               </h5>,
 
-              <button onClick={this.syncPreferences}>
+              <button className="button-default" onClick={this.syncPreferences}>
                 {this.props.msg.pkg.get("update")}
               </button>,
             ])}
@@ -463,7 +472,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 </span>,
 
                 <span>
-                  <button onClick={this.syncPreferences}>
+                  <button className="button-default" onClick={this.syncPreferences}>
                     {this.props.msg.pkg.get("update")}
                   </button>
                 </span>,
diff --git a/src/client/web/src/components/topbar.tsx b/src/client/web/src/components/topbar.tsx
index 5f56e86..1a1bcbb 100644
--- a/src/client/web/src/components/topbar.tsx
+++ b/src/client/web/src/components/topbar.tsx
@@ -77,12 +77,15 @@ export class TopBar extends React.Component<Props, State, {}> {
               children={List([
                 <button
                   onClick={this.openSettings}
-                  className={`margin-r-m ${settingsPanelClass}`}
+                  className={`button-default margin-r-m ${settingsPanelClass}`}
                 >
                   {this.props.msg.pkg.get("settings")}
                 </button>,
 
-                <button onClick={this.logout} className={`${loginPanelClass}`}>
+                <button
+                  onClick={this.logout}
+                  className={`button-default ${loginPanelClass}`}
+                >
                   {this.props.msg.pkg.get("login.logout")}
                 </button>,
               ])}
diff --git a/src/client/web/src/i18n/en_US.ts b/src/client/web/src/i18n/en_US.ts
index f7c1d09..62c10d3 100644
--- a/src/client/web/src/i18n/en_US.ts
+++ b/src/client/web/src/i18n/en_US.ts
@@ -138,6 +138,7 @@ export const msgs: Map<string, string> = Map({
   "endpoints.home": "Home",
   "state.stopped": "Stopped",
   "state.error": "Error",
+  "usedSpace": "Used Space",
   "resetUsedSpace": "Reset Used Space",
   "confirm.resetUsedSpace": "The operation may take some time, do you confirm?"
 });
diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts
index 9f6d167..faf24f7 100644
--- a/src/client/web/src/i18n/zh_CN.ts
+++ b/src/client/web/src/i18n/zh_CN.ts
@@ -135,6 +135,7 @@ export const msgs: Map<string, string> = Map({
   "endpoints.home": "家",
   "state.stopped": "已停止",
   "state.error": "错误",
+  "usedSpace": "已用空间",
   "resetUsedSpace": "重置已用空间",
   "confirm.resetUsedSpace": "此操作可能会需要一些时间, 确认吗?"
 });