fix(fe): fix style issues

public/static/css/default.css

@@ -441,7 +441,7 @@
 .title-l {
   font-size: 1.8rem;
   font-weight: bold;
-  line-height: 2rem;
+  line-height: 2.5rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

public/static/css/white.css

@@ -1,11 +1,19 @@
 #root-frame {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 
 .theme-default #bg {
   background: url("/static/img/textured_paper.png") repeat fixed center;
-  width: 100%;
+  position: fixed;
-  height: 100%;
+  left: 0;
-  padding: 0 0 2rem 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: scroll;
 }
 
 .theme-default #top-bar {
@@ -100,6 +108,10 @@
   margin-bottom: 2rem;
 }
 
+.container-padding {
+  padding: 1.5rem;
+}
+
 /* .theme-default #breadcrumb .item:last-child {
   margin-right: 0;
 } */
@@ -147,11 +159,11 @@
 }
 
 .theme-default .upload-item {
-  padding: 1rem;
+  padding: 0 0 1rem 0;
 }
 
-.theme-default #share-list {
+.theme-default .share-item {
-  padding: 1rem;
+  padding: 0 0 1rem 0;
 }
 
 .theme-default #tabs {
@@ -227,10 +239,8 @@
   /* padding: 2rem; */
 }
 
-.theme-default #pane-settings #profile {
+.theme-default #pane-settings #profile .desc-m {
   color: #95a5a6;
-  font-size: 1.2rem;
-  line-height: 1.8rem;
 }
 
 .theme-default .user-form {
@@ -248,10 +258,18 @@
 }
 
 .theme-default .hr {
+  height: 1px;
   margin: 1rem 0;
   background-color: #ecf0f1;
 }
 
+.theme-default .card {
+  padding: 1rem;
+  /* background-color: #e8e8e8; */
+  text-align: center;
+  border-radius: 0.8rem;
+}
+
 .theme-default .key-value {
   margin-top: 0.5rem;
 }
@@ -290,7 +308,7 @@
   color: #34495e;
   background-color: #ecf0f6;
   border: solid 1px #95a5a6;
-  margin: 1rem 0;
+  margin: 0.5rem 0 1rem 0;
 }
 
 .captcha {

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,13 +54,10 @@ export class Layers extends React.Component<Props, State, {}> {
 
         <div id="settings-layer" className={`layer ${showSettings}`}>
           <div id="root-container">
-            <div className="container">
+            <Container>
-              <div className="padding-m">
               <Flexbox
                 children={List([
-                    <h4 id="title">
+                  <h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>,
-                      {this.props.msg.pkg.get("pane.settings")}
-                    </h4>,
                   <button
                     onClick={() => {
                       this.setControlOption("settingsDialog", "off");
@@ -70,8 +68,7 @@ export class Layers extends React.Component<Props, State, {}> {
                 ])}
                 childrenStyles={List([{}, { justifyContent: "flex-end" }])}
               />
-              </div>
+            </Container>
-            </div>
 
             <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,43 +140,43 @@ export class PaneSettings extends React.Component<Props, State, {}> {
 
   render() {
     return (
-      <div id="pane-settings" className="container">
+      <div id="pane-settings">
+        <Container>
           <div id="profile">
-          <h5 className="pane-title">
+            <h5 className="title">
               {this.props.msg.pkg.get("user.profile")}
             </h5>
 
-          <div className="key-value">
+            <div>
-            {`${this.props.msg.pkg.get("user.name")}: `}
+              <Card
-            <span className="value">{`${this.props.login.userName}`}</span>
+                name={`${this.props.msg.pkg.get("user.name")}`}
-          </div>
+                value={`${this.props.login.userName}`}
-          <div className="key-value">
+              />
-            {`${this.props.msg.pkg.get("user.role")}: `}
+              <Card
-            <span className="value">{`${this.props.login.userRole}`}</span>
+                name={`${this.props.msg.pkg.get("user.role")}`}
-          </div>
+                value={`${this.props.login.userRole}`}
-          <div className="key-value">
+              />
-            {`${this.props.msg.pkg.get("user.spaceLimit")}: `}
+              <Card
-            <span className="value">
+                name={`${this.props.msg.pkg.get("user.spaceLimit")}`}
-              {`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), {
+                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,
                 })}`}
-            </span>
+              />
-          </div>
+              <Card
-          <div className="key-value">
+                name={`${this.props.msg.pkg.get("user.downLimit")}`}
-            {`${this.props.msg.pkg.get("user.upLimit")}: `}
+                value={`${FileSize(this.props.login.quota.downloadSpeedLimit, {
-            <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>
 
@@ -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,8 +124,9 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
       }
     );
 
-    return this.props.sharingsInfo.sharings.size === 0 ? (
+    const list =
-      <div id="sharing-list" className="container">
+      this.props.sharingsInfo.sharings.size === 0 ? (
+        <Container>
           <Flexbox
             children={List([
               <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
@@ -141,14 +143,12 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
               { flex: "auto", justifyContent: "flex-end" },
               { flex: "auto" },
             ])}
-          className="padding-l"
           />
-      </div>
+        </Container>
       ) : (
-      <div className="container">
+        <Container>
           <Flexbox
             children={List([
-            <span className="padding-m">
               <Flexbox
                 children={List([
                   <RiShareBoxLine
@@ -165,15 +165,16 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                     </span>
                   </span>,
                 ])}
-              />
+              />,
-            </span>,
 
               <span></span>,
             ])}
           />
 
           {sharingList}
-      </div>
+        </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,7 +86,6 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
           <div key={uploading.filePath}>
             <Flexbox
               children={List([
-                <span className="padding-m">
                 <Flexbox
                   children={List([
                     <RiUploadCloudLine
@@ -102,8 +102,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
                       </div>
                     </div>,
                   ])}
-                  />
+                />,
-                </span>,
 
                 <div className="item-op">
                   <button
@@ -130,8 +129,9 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       }
     );
 
-    return this.props.uploadingsInfo.uploadings.size === 0 ? (
+    const list =
-      <div id="upload-list" className="container">
+      this.props.uploadingsInfo.uploadings.size === 0 ? (
+        <Container>
           <Flexbox
             children={List([
               <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
@@ -148,11 +148,10 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
               { flex: "auto", justifyContent: "flex-end" },
               { flex: "auto" },
             ])}
-          className="padding-l"
           />
-      </div>
+        </Container>
       ) : (
-      <div id="upload-list" className="container">
+        <Container>
           <Flexbox
             children={List([
               <span className="upload-item">
@@ -180,7 +179,9 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
           />
 
           {uploadingList}
-      </div>
+        </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": "设置",
 });