fix(fe): fix style issues

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

@@ -51,7 +51,10 @@ export class Tabs extends React.Component<Props, State, {}> {
         ? this.props.tabIcons.get(option)
         : defaultIconProps;
 
-      const icon = getIcon(iconProps.name, iconProps.size, iconProps.color);
+      const iconColor = displaying === option ? iconProps.color : "black0";
+      const icon = getIcon(iconProps.name, iconProps.size, iconColor);
+      const fontColor =
+        displaying === option ? `${colorClass(iconColor)}-font` : "";
 
       return (
         <button
@@ -64,7 +67,7 @@ export class Tabs extends React.Component<Props, State, {}> {
           <Flexbox
             children={List([
               <span className="margin-r-s">{icon}</span>,
-              <span>
+              <span className={fontColor}>
                 {this.props.msg.pkg.get(
                   `control.${this.props.targetControl}.${option}`
                 )}

src/client/web/src/components/core_state.ts

@@ -116,7 +116,7 @@ export function initState(): ICoreState {
           [panelTabs]: "filesPanel",
           [loginDialogCtrl]: "on",
           [settingsDialogCtrl]: "off",
-          [settingsTabsCtrl]: "settingsPane",
+          [settingsTabsCtrl]: "preferencePane",
         }),
         options: Map<string, Set<string>>({
           [panelTabs]: Set<string>([
@@ -126,7 +126,7 @@ export function initState(): ICoreState {
           ]),
           [loginDialogCtrl]: Set<string>(["on", "off"]),
           [settingsDialogCtrl]: Set<string>(["on", "off"]),
-          [settingsTabsCtrl]: Set<string>(["settingsPane", "managementPane"]),
+          [settingsTabsCtrl]: Set<string>(["preferencePane", "managementPane"]),
         }),
       },
     },

src/client/web/src/components/dialog_settings.tsx

@@ -2,17 +2,14 @@ import * as React from "react";
 import { Map } from "immutable";
 
 import { ICoreState, MsgProps, UIProps } from "./core_state";
-import { FilesPanel, FilesProps } from "./panel_files";
-import { UploadingsPanel, UploadingsProps } from "./panel_uploadings";
-import { SharingsPanel, SharingsProps } from "./panel_sharings";
 import { IconProps } from "./visual/icons";
 
 import { PaneSettings } from "./pane_settings";
 import { AdminPane, AdminProps } from "./pane_admin";
 
 import { Tabs } from "./control/tabs";
+import { Container } from "./layout/container";
 import { LoginProps } from "./pane_login";
-import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
 import { roleAdmin } from "../client";
 
 export const settingsTabsCtrl = "settingsTabs";
@@ -33,7 +30,7 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
 
   render() {
     const displaying = this.props.ui.control.controls.get(settingsTabsCtrl);
-    const showSettings = displaying === "settingsPane" ? "" : "hidden";
+    const showSettings = displaying === "preferencePane" ? "" : "hidden";
     const showManagement =
       this.props.login.userRole === roleAdmin && displaying === "managementPane"
         ? ""
@@ -41,11 +38,11 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
 
     return (
       <div id="settings-dialog">
-        <div className="container">
+        <Container>
           <Tabs
             targetControl={settingsTabsCtrl}
             tabIcons={Map<string, IconProps>({
-              settingsPane: {
+              preferencePane: {
                 name: "RiSettings3Fill",
                 size: "1.6rem",
                 color: "cyan0",
@@ -62,7 +59,7 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
             msg={this.props.msg}
             update={this.props.update}
           />
-        </div>
+        </Container>
 
         <div className={`${showSettings}`}>
           <PaneSettings

src/client/web/src/components/layers.tsx

@@ -9,6 +9,7 @@ import { SettingsDialog } from "./dialog_settings";
 
 import { AuthPane, LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
+import { Container } from "./layout/container";
 
 export const loginDialogCtrl = "loginDialog";
 export const settingsDialogCtrl = "settingsDialog";
@@ -53,25 +54,21 @@ export class Layers extends React.Component<Props, State, {}> {
 
         <div id="settings-layer" className={`layer ${showSettings}`}>
           <div id="root-container">
-            <div className="container">
-              <div className="padding-m">
-                <Flexbox
-                  children={List([
-                    <h4 id="title">
-                      {this.props.msg.pkg.get("pane.settings")}
-                    </h4>,
-                    <button
-                      onClick={() => {
-                        this.setControlOption("settingsDialog", "off");
-                      }}
-                    >
-                      {this.props.msg.pkg.get("panes.close")}
-                    </button>,
-                  ])}
-                  childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-                />
-              </div>
-            </div>
+            <Container>
+              <Flexbox
+                children={List([
+                  <h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>,
+                  <button
+                    onClick={() => {
+                      this.setControlOption("settingsDialog", "off");
+                    }}
+                  >
+                    {this.props.msg.pkg.get("panes.close")}
+                  </button>,
+                ])}
+                childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+              />
+            </Container>
 
             <SettingsDialog
               admin={this.props.admin}

src/client/web/src/components/layout/card.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export interface Props {
+  name: string;
+  value: string;
+}
+
+export const Card = (props: Props) => {
+  return (
+    <div className="card float-l">
+      <div className="title-l black0-font">{props.value}</div>
+      <div className="desc-m">{props.name}</div>
+    </div>
+  );
+};

src/client/web/src/components/layout/container.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface Props {
+  children: React.ReactNode | undefined;
+}
+
+export const Container = (props: Props) => {
+  return (
+    <div className="container">
+      <div className="container-padding">{props.children}</div>
+    </div>
+  );
+};

src/client/web/src/components/pane_admin.tsx

@@ -7,6 +7,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { User, Quota } from "../client";
 import { updater } from "./state_updater";
 import { Flexbox } from "./layout/flexbox";
+import { Container } from "./layout/container";
 
 export interface AdminProps {
   users: Map<string, User>;
@@ -452,15 +453,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
 
     return (
       <div className="font-m">
-        <div className="container">
+        <Container>
           <BgCfg
             ui={this.props.ui}
             msg={this.props.msg}
             update={this.props.update}
           />
-        </div>
+        </Container>
 
-        <div className="container">
+        <Container>
           <Flexbox
             children={List([
               <h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>,
@@ -514,9 +515,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
               placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
             />
           </span>
-        </div>
+        </Container>
 
-        <div className="container">
+        <Container>
           <Flexbox
             children={List([
               <h5 className="title">
@@ -526,9 +527,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
             ])}
           />
           {userList}
-        </div>
+        </Container>
 
-        <div className="container">
+        <Container>
           <div>
             <Flexbox
               children={List([
@@ -564,7 +565,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
             ])}
           />
           {roleList}
-        </div>
+        </Container>
       </div>
     );
   }
@@ -697,9 +698,9 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
       <div>
         <Flexbox
           children={List([
-            <span className="title-m bold">
+            <h5 className="title">
               {this.props.msg.pkg.get("cfg.bg")}
-            </span>,
+            </h5>,
 
             <span>
               <button onClick={this.resetClientCfg} className="margin-r-m">

src/client/web/src/components/pane_settings.tsx

@@ -7,6 +7,8 @@ import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
 import { updater } from "./state_updater";
 import { alertMsg } from "../common/env";
+import { Container } from "./layout/container";
+import { Card } from "./layout/card";
 export interface Props {
   login: LoginProps;
   msg: MsgProps;
@@ -138,236 +140,236 @@ export class PaneSettings extends React.Component<Props, State, {}> {
 
   render() {
     return (
-      <div id="pane-settings" className="container">
-        <div id="profile">
-          <h5 className="pane-title">
-            {this.props.msg.pkg.get("user.profile")}
-          </h5>
+      <div id="pane-settings">
+        <Container>
+          <div id="profile">
+            <h5 className="title">
+              {this.props.msg.pkg.get("user.profile")}
+            </h5>
 
-          <div className="key-value">
-            {`${this.props.msg.pkg.get("user.name")}: `}
-            <span className="value">{`${this.props.login.userName}`}</span>
-          </div>
-          <div className="key-value">
-            {`${this.props.msg.pkg.get("user.role")}: `}
-            <span className="value">{`${this.props.login.userRole}`}</span>
-          </div>
-          <div className="key-value">
-            {`${this.props.msg.pkg.get("user.spaceLimit")}: `}
-            <span className="value">
-              {`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), {
-                round: 0,
-              })}`}
-            </span>
-          </div>
-          <div className="key-value">
-            {`${this.props.msg.pkg.get("user.upLimit")}: `}
-            <span className="value">
-              {`${FileSize(this.props.login.quota.uploadSpeedLimit, {
-                round: 0,
-              })}`}
-            </span>
-          </div>
-          <div className="key-value">
-            {`${this.props.msg.pkg.get("user.downLimit")}: `}
-            <span className="value">
-              {`${FileSize(this.props.login.quota.downloadSpeedLimit, {
-                round: 0,
-              })}`}
-            </span>
-          </div>
-        </div>
-
-        <div className="hr"></div>
-
-        <div>
-          <Flexbox
-            children={List([
-              <h5 className="pane-title">
-                {this.props.msg.pkg.get("settings.pwd.update")}
-              </h5>,
-              <button onClick={this.setPwd}>
-                {this.props.msg.pkg.get("update")}
-              </button>,
-            ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-          />
-
-          <span className="float-input">
-            <div className="label">
-              {this.props.msg.pkg.get("settings.pwd.old")}
+            <div>
+              <Card
+                name={`${this.props.msg.pkg.get("user.name")}`}
+                value={`${this.props.login.userName}`}
+              />
+              <Card
+                name={`${this.props.msg.pkg.get("user.role")}`}
+                value={`${this.props.login.userRole}`}
+              />
+              <Card
+                name={`${this.props.msg.pkg.get("user.spaceLimit")}`}
+                value={`${FileSize(
+                  parseInt(this.props.login.quota.spaceLimit, 10),
+                  {
+                    round: 0,
+                  }
+                )}`}
+              />
+              <Card
+                name={`${this.props.msg.pkg.get("user.upLimit")}`}
+                value={`${FileSize(this.props.login.quota.uploadSpeedLimit, {
+                  round: 0,
+                })}`}
+              />
+              <Card
+                name={`${this.props.msg.pkg.get("user.downLimit")}`}
+                value={`${FileSize(this.props.login.quota.downloadSpeedLimit, {
+                  round: 0,
+                })}`}
+              />
             </div>
-            <input
-              name="old_pwd"
-              type="password"
-              onChange={this.changeOldPwd}
-              value={this.state.oldPwd}
-              placeholder={this.props.msg.pkg.get("settings.pwd.old")}
-            />
-          </span>
-
-          <span className="float-input">
-            <div className="label">
-              {this.props.msg.pkg.get("settings.pwd.new1")}
-            </div>
-            <input
-              name="new_pwd1"
-              type="password"
-              onChange={this.changeNewPwd1}
-              value={this.state.newPwd1}
-              placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
-            />
-          </span>
-
-          <span className="float-input">
-            <div className="label">
-              {this.props.msg.pkg.get("settings.pwd.new2")}
-            </div>
-            <input
-              name="new_pwd2"
-              type="password"
-              onChange={this.changeNewPwd2}
-              value={this.state.newPwd2}
-              placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
-            />
-          </span>
-        </div>
-
-        <div className="hr"></div>
-
-        <div>
-          <Flexbox
-            children={List([
-              <h5 className="title">
-                {this.props.msg.pkg.get("settings.chooseLan")}
-              </h5>,
-
-              <span>
-                <button
-                  onClick={() => {
-                    this.setLan("en_US");
-                  }}
-                  className="float-input"
-                >
-                  {this.props.msg.pkg.get("enUS")}
-                </button>
-                <button
-                  onClick={() => {
-                    this.setLan("zh_CN");
-                  }}
-                  className="float-input"
-                >
-                  {this.props.msg.pkg.get("zhCN")}
-                </button>
-              </span>,
-            ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-          />
-        </div>
-
-        <div className="hr"></div>
-
-        <div>
-          <Flexbox
-            children={List([
-              <h5 className="title">
-                {this.props.msg.pkg.get("settings.customLan")}
-              </h5>,
-
-              <span>
-                <button onClick={this.syncPreferences}>
-                  {this.props.msg.pkg.get("update")}
-                </button>
-              </span>,
-            ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-          />
-
-          <div className="float-input">
-            <div className="label">
-              {this.props.msg.pkg.get("settings.lanPackURL")}
-            </div>
-            <input
-              type="text"
-              onChange={this.changeLanPackURL}
-              value={this.props.login.preferences.lanPackURL}
-              className="black0-font"
-              style={{ width: "20rem" }}
-              placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
-            />
           </div>
-        </div>
 
-        <div className="hr"></div>
-
-        <div>
-          <Flexbox
-            children={List([
-              <h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
-
-              <button onClick={this.syncPreferences}>
-                {this.props.msg.pkg.get("update")}
-              </button>,
-            ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-          />
+          <div className="hr"></div>
 
           <div>
-            <div className="float-input">
+            <Flexbox
+              children={List([
+                <h5 className="pane-title">
+                  {this.props.msg.pkg.get("settings.pwd.update")}
+                </h5>,
+                <button onClick={this.setPwd}>
+                  {this.props.msg.pkg.get("update")}
+                </button>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+
+            <span className="float-input">
               <div className="label">
-                {this.props.msg.pkg.get("cfg.bg.url")}
+                {this.props.msg.pkg.get("settings.pwd.old")}
               </div>
               <input
-                name="bg_url"
-                type="text"
-                onChange={this.changeBgUrl}
-                value={this.props.login.preferences.bg.url}
-                placeholder={this.props.msg.pkg.get("cfg.bg.url")}
+                name="old_pwd"
+                type="password"
+                onChange={this.changeOldPwd}
+                value={this.state.oldPwd}
+                placeholder={this.props.msg.pkg.get("settings.pwd.old")}
               />
-            </div>
+            </span>
+
+            <span className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("settings.pwd.new1")}
+              </div>
+              <input
+                name="new_pwd1"
+                type="password"
+                onChange={this.changeNewPwd1}
+                value={this.state.newPwd1}
+                placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
+              />
+            </span>
+
+            <span className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("settings.pwd.new2")}
+              </div>
+              <input
+                name="new_pwd2"
+                type="password"
+                onChange={this.changeNewPwd2}
+                value={this.state.newPwd2}
+                placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
+              />
+            </span>
+          </div>
+
+          <div className="hr"></div>
+
+          <div>
+            <Flexbox
+              children={List([
+                <h5 className="title">
+                  {this.props.msg.pkg.get("settings.chooseLan")}
+                </h5>,
+
+                <span>
+                  <button
+                    onClick={() => {
+                      this.setLan("en_US");
+                    }}
+                    className="float-input"
+                  >
+                    {this.props.msg.pkg.get("enUS")}
+                  </button>
+                  <button
+                    onClick={() => {
+                      this.setLan("zh_CN");
+                    }}
+                    className="float-input"
+                  >
+                    {this.props.msg.pkg.get("zhCN")}
+                  </button>
+                </span>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+          </div>
+
+          <div className="hr"></div>
+
+          <div>
+            <Flexbox
+              children={List([
+                <h5 className="title">
+                  {this.props.msg.pkg.get("settings.customLan")}
+                </h5>,
+
+                <span>
+                  <button onClick={this.syncPreferences}>
+                    {this.props.msg.pkg.get("update")}
+                  </button>
+                </span>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
 
             <div className="float-input">
               <div className="label">
-                {this.props.msg.pkg.get("cfg.bg.repeat")}
+                {this.props.msg.pkg.get("settings.lanPackURL")}
               </div>
               <input
-                name="bg_repeat"
                 type="text"
-                onChange={this.changeBgRepeat}
-                value={this.props.login.preferences.bg.repeat}
-                placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
-              />
-            </div>
-
-            <div className="float-input">
-              <div className="label">
-                {this.props.msg.pkg.get("cfg.bg.pos")}
-              </div>
-              <input
-                name="bg_pos"
-                type="text"
-                onChange={this.changeBgPos}
-                value={this.props.login.preferences.bg.position}
-                placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
-              />
-            </div>
-
-            <div className="float-input">
-              <div className="label">
-                {this.props.msg.pkg.get("cfg.bg.align")}
-              </div>
-              <input
-                name="bg_align"
-                type="text"
-                onChange={this.changeBgAlign}
-                value={this.props.login.preferences.bg.align}
-                placeholder={this.props.msg.pkg.get("cfg.bg.align")}
+                onChange={this.changeLanPackURL}
+                value={this.props.login.preferences.lanPackURL}
+                className="black0-font"
+                style={{ width: "20rem" }}
+                placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
               />
             </div>
           </div>
-        </div>
 
-        {/* <div className="hr"></div>
+          <div className="hr"></div>
+
+          <div>
+            <Flexbox
+              children={List([
+                <h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
+
+                <button onClick={this.syncPreferences}>
+                  {this.props.msg.pkg.get("update")}
+                </button>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+
+            <div>
+              <div className="float-input">
+                <div className="label">
+                  {this.props.msg.pkg.get("cfg.bg.url")}
+                </div>
+                <input
+                  name="bg_url"
+                  type="text"
+                  onChange={this.changeBgUrl}
+                  value={this.props.login.preferences.bg.url}
+                  placeholder={this.props.msg.pkg.get("cfg.bg.url")}
+                />
+              </div>
+
+              <div className="float-input">
+                <div className="label">
+                  {this.props.msg.pkg.get("cfg.bg.repeat")}
+                </div>
+                <input
+                  name="bg_repeat"
+                  type="text"
+                  onChange={this.changeBgRepeat}
+                  value={this.props.login.preferences.bg.repeat}
+                  placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
+                />
+              </div>
+
+              <div className="float-input">
+                <div className="label">
+                  {this.props.msg.pkg.get("cfg.bg.pos")}
+                </div>
+                <input
+                  name="bg_pos"
+                  type="text"
+                  onChange={this.changeBgPos}
+                  value={this.props.login.preferences.bg.position}
+                  placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
+                />
+              </div>
+
+              <div className="float-input">
+                <div className="label">
+                  {this.props.msg.pkg.get("cfg.bg.align")}
+                </div>
+                <input
+                  name="bg_align"
+                  type="text"
+                  onChange={this.changeBgAlign}
+                  value={this.props.login.preferences.bg.align}
+                  placeholder={this.props.msg.pkg.get("cfg.bg.align")}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* <div className="hr"></div>
           <div>
             <Flexbox
               children={List([
@@ -401,6 +403,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               ])}
             />
           </div> */}
+        </Container>
       </div>
     );
   }

src/client/web/src/components/panel_sharings.tsx

@@ -10,6 +10,7 @@ import { updater } from "./state_updater";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
+import { Container } from "./layout/container";
 
 export interface SharingsProps {
   sharings: List<string>;
@@ -123,32 +124,31 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
       }
     );
 
-    return this.props.sharingsInfo.sharings.size === 0 ? (
-      <div id="sharing-list" className="container">
-        <Flexbox
-          children={List([
-            <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
-            <span>
-              <h3 className="title-l">
-                {this.props.msg.pkg.get("share.404.title")}
-              </h3>
-              <span className="desc-l grey0-font">
-                {this.props.msg.pkg.get("share.404.desc")}
-              </span>
-            </span>,
-          ])}
-          childrenStyles={List([
-            { flex: "auto", justifyContent: "flex-end" },
-            { flex: "auto" },
-          ])}
-          className="padding-l"
-        />
-      </div>
-    ) : (
-      <div className="container">
-        <Flexbox
-          children={List([
-            <span className="padding-m">
+    const list =
+      this.props.sharingsInfo.sharings.size === 0 ? (
+        <Container>
+          <Flexbox
+            children={List([
+              <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
+              <span>
+                <h3 className="title-l">
+                  {this.props.msg.pkg.get("share.404.title")}
+                </h3>
+                <span className="desc-l grey0-font">
+                  {this.props.msg.pkg.get("share.404.desc")}
+                </span>
+              </span>,
+            ])}
+            childrenStyles={List([
+              { flex: "auto", justifyContent: "flex-end" },
+              { flex: "auto" },
+            ])}
+          />
+        </Container>
+      ) : (
+        <Container>
+          <Flexbox
+            children={List([
               <Flexbox
                 children={List([
                   <RiShareBoxLine
@@ -165,15 +165,16 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                     </span>
                   </span>,
                 ])}
-              />
-            </span>,
+              />,
 
-            <span></span>,
-          ])}
-        />
+              <span></span>,
+            ])}
+          />
 
-        {sharingList}
-      </div>
-    );
+          {sharingList}
+        </Container>
+      );
+
+    return <div id="sharing-list">{list}</div>;
   }
 }

src/client/web/src/components/panel_uploadings.tsx

@@ -12,6 +12,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { UploadEntry, UploadState } from "../worker/interface";
 import { Flexbox } from "./layout/flexbox";
+import { Container } from "./layout/container";
 
 export interface UploadingsProps {
   uploadings: List<UploadEntry>;
@@ -85,25 +86,23 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
           <div key={uploading.filePath}>
             <Flexbox
               children={List([
-                <span className="padding-m">
-                  <Flexbox
-                    children={List([
-                      <RiUploadCloudLine
-                        size="3rem"
-                        id="icon-upload"
-                        className="margin-r-m blue0-font"
-                      />,
+                <Flexbox
+                  children={List([
+                    <RiUploadCloudLine
+                      size="3rem"
+                      id="icon-upload"
+                      className="margin-r-m blue0-font"
+                    />,
 
-                      <div className={`${nameWidthClass}`}>
-                        <span className="title-m">{fileName}</span>
-                        <div className="desc-m grey0-font">
-                          {FileSize(uploading.uploaded, { round: 0 })}
-                          &nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })}
-                        </div>
-                      </div>,
-                    ])}
-                  />
-                </span>,
+                    <div className={`${nameWidthClass}`}>
+                      <span className="title-m">{fileName}</span>
+                      <div className="desc-m grey0-font">
+                        {FileSize(uploading.uploaded, { round: 0 })}
+                        &nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })}
+                      </div>
+                    </div>,
+                  ])}
+                />,
 
                 <div className="item-op">
                   <button
@@ -130,57 +129,59 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       }
     );
 
-    return this.props.uploadingsInfo.uploadings.size === 0 ? (
-      <div id="upload-list" className="container">
-        <Flexbox
-          children={List([
-            <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
-            <span>
-              <h3 className="title-l">
-                {this.props.msg.pkg.get("upload.404.title")}
-              </h3>
-              <span className="desc-l grey0-font">
-                {this.props.msg.pkg.get("upload.404.desc")}
-              </span>
-            </span>,
-          ])}
-          childrenStyles={List([
-            { flex: "auto", justifyContent: "flex-end" },
-            { flex: "auto" },
-          ])}
-          className="padding-l"
-        />
-      </div>
-    ) : (
-      <div id="upload-list" className="container">
-        <Flexbox
-          children={List([
-            <span className="upload-item">
-              <Flexbox
-                children={List([
-                  <RiUploadCloudFill
-                    size="3rem"
-                    className="margin-r-m black-font"
-                  />,
+    const list =
+      this.props.uploadingsInfo.uploadings.size === 0 ? (
+        <Container>
+          <Flexbox
+            children={List([
+              <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
+              <span>
+                <h3 className="title-l">
+                  {this.props.msg.pkg.get("upload.404.title")}
+                </h3>
+                <span className="desc-l grey0-font">
+                  {this.props.msg.pkg.get("upload.404.desc")}
+                </span>
+              </span>,
+            ])}
+            childrenStyles={List([
+              { flex: "auto", justifyContent: "flex-end" },
+              { flex: "auto" },
+            ])}
+          />
+        </Container>
+      ) : (
+        <Container>
+          <Flexbox
+            children={List([
+              <span className="upload-item">
+                <Flexbox
+                  children={List([
+                    <RiUploadCloudFill
+                      size="3rem"
+                      className="margin-r-m black-font"
+                    />,
 
-                  <span>
-                    <span className="title-m bold">
-                      {this.props.msg.pkg.get("browser.upload.title")}
-                    </span>
-                    <span className="desc-m grey0-font">
-                      {this.props.msg.pkg.get("browser.upload.desc")}
-                    </span>
-                  </span>,
-                ])}
-              />
-            </span>,
+                    <span>
+                      <span className="title-m bold">
+                        {this.props.msg.pkg.get("browser.upload.title")}
+                      </span>
+                      <span className="desc-m grey0-font">
+                        {this.props.msg.pkg.get("browser.upload.desc")}
+                      </span>
+                    </span>,
+                  ])}
+                />
+              </span>,
 
-            <span></span>,
-          ])}
-        />
+              <span></span>,
+            ])}
+          />
 
-        {uploadingList}
-      </div>
-    );
+          {uploadingList}
+        </Container>
+      );
+
+    return <div id="upload-list">{list}</div>;
   }
 }

src/client/web/src/i18n/en_US.ts

@@ -109,4 +109,6 @@ export const msgs: Map<string, string> = Map({
   "control.panelTabs.filesPanel": "Files",
   "control.panelTabs.uploadingsPanel": "Uploadings",
   "control.panelTabs.sharingsPanel": "Sharings",
+  "control.settingsTabs.managementPane": "Management",
+  "control.settingsTabs.preferencePane": "Preference",
 });

src/client/web/src/i18n/zh_CN.ts

@@ -108,4 +108,6 @@ export const msgs: Map<string, string> = Map({
   "control.panelTabs.filesPanel": "文件",
   "control.panelTabs.uploadingsPanel": "上传",
   "control.panelTabs.sharingsPanel": "共享",
+  "control.settingsTabs.managementPane": "管理",
+  "control.settingsTabs.preferencePane": "设置",
 });