fix(fe): clean up and fix small issues

public/static/css/white.css

@@ -84,7 +84,7 @@
 }
 
 .theme-default #breadcrumb {
-  padding: 1rem;
+  padding: 1rem 0;
   width: 100%;
 }
 
@@ -119,14 +119,13 @@
 .theme-default .select-btn {
   width: 8rem;
   display: inline-block;
-  margin: 0 1rem 0 0;
 }
 
 .theme-default #op-bar {
 }
 
 .theme-default #browser-op {
-  padding: 1rem;
+  margin-bottom: 1rem;
 }
 
 .theme-default #browser-op button {
@@ -144,10 +143,16 @@
 
 .theme-default #browser .item-op {
   line-height: 4rem;
-  padding: 1rem;
+  padding: 1rem 0;
   text-align: right;
 }
 
+.theme-default #browser .item-info {
+  padding: 1rem;
+  font-size: 1.2rem;
+  border: dashed 1px #7f8c8d;
+}
+
 .theme-default #browser .error {
   line-height: 4rem;
   border: dashed 1px #e74c3c;
@@ -171,7 +176,7 @@
 }
 
 .theme-default #upload-op {
-  padding: 1rem;
+  padding: 0;
 }
 
 .theme-default .red-btn {
@@ -365,10 +370,10 @@
   background-color: #ecf0f6;
 }
 
-#item-list .item-name-vertical {
+.item-name-vertical {
   width: 14rem;
 }
 
-#item-list .item-name-horizontal {
+.item-name-horizontal {
   width: 48rem;
 }

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

@@ -143,9 +143,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
       <div id="pane-settings">
         <Container>
           <div id="profile">
-            <h5 className="title">
+            <h5 className="title">{this.props.msg.pkg.get("user.profile")}</h5>
-              {this.props.msg.pkg.get("user.profile")}
-            </h5>
 
             <div>
               <Card
@@ -243,28 +241,27 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 <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>
+              <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>
+            </div>
           </div>
 
           <div className="hr"></div>

src/client/web/src/components/panel_files.tsx

@@ -13,8 +13,10 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { MetadataResp, roleVisitor, roleAdmin } from "../client";
 import { Flexbox } from "./layout/flexbox";
+import { Container } from "./layout/container";
 import { Up } from "../worker/upload_mgr";
 import { UploadEntry, UploadState } from "../worker/interface";
+import { getIcon } from "./visual/icons";
 
 export interface Item {
   name: string;
@@ -391,47 +393,38 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         <Flexbox
           key={item.name}
           children={List([
-            <span className="padding-m">
+            <Flexbox
-              <Flexbox
+              children={List([
-                children={List([
+                <RiFolder2Fill
-                  <RiFolder2Fill
+                  size="3rem"
-                    size="3rem"
+                  className="yellow0-font margin-r-m"
-                    className="yellow0-font margin-r-m"
+                />,
-                  />,
 
-                  <span className={`${nameWidthClass}`}>
+                <span className={`${nameWidthClass}`}>
-                    <span
+                  <span
-                      className="title-m"
+                    className="title-m"
-                      onClick={() => this.gotoChild(item.name)}
+                    onClick={() => this.gotoChild(item.name)}
-                    >
+                  >
-                      {item.name}
+                    {item.name}
+                  </span>
+                  <div className="desc-m grey0-font">
+                    <span>
+                      {item.modTime.slice(0, item.modTime.indexOf("T"))}
                     </span>
-                    <div className="desc-m grey0-font">
+                  </div>
-                      <span>
+                </span>,
-                        {item.modTime.slice(0, item.modTime.indexOf("T"))}
+              ])}
-                      </span>
+              childrenStyles={List([
-                    </div>
+                { flex: "0 0 auto" },
-                  </span>,
+                { flex: "0 0 auto" },
-                ])}
+              ])}
-                childrenStyles={List([
+            />,
-                  { flex: "0 0 auto" },
+            <span className={`item-op ${showOp}`}>
-                  { flex: "0 0 auto" },
+              <span onClick={() => this.select(item.name)} className="float-l">
-                ])}
-              />
-            </span>,
-
-            <span className={`item-op padding-m ${showOp}`}>
-              <button
-                onClick={() => this.select(item.name)}
-                className={`${
-                  isSelected ? "cyan0-bg white-font" : "grey2-bg grey3-font"
-                }`}
-                style={{ width: "8rem", display: "inline-block" }}
-              >
                 {isSelected
-                  ? this.props.msg.pkg.get("browser.deselect")
+                  ? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
-                  : this.props.msg.pkg.get("browser.select")}
+                  : getIcon("RiCheckboxBlankFill", "1.8rem", "grey1")}
-              </button>
+              </span>
             </span>,
           ])}
           childrenStyles={List([
@@ -446,10 +439,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             children={List([
               <Flexbox
                 children={List([
-                  <RiFile2Fill
+                  <RiFile2Fill size="3rem" className="cyan0-font margin-r-m" />,
-                    size="3rem"
-                    className="cyan0-font margin-l-m margin-r-m"
-                  />,
 
                   <span className={`${nameWidthClass}`}>
                     <a
@@ -474,27 +464,22 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                 ])}
               />,
 
-              <span className={`item-op padding-m ${showOp}`}>
+              <span className={`item-op ${showOp}`}>
-                <button
+                <span
                   onClick={() => this.toggleDetail(item.name)}
-                  style={{ width: "8rem" }}
+                  className="float-l"
-                  className="float-input"
                 >
-                  {this.props.msg.pkg.get("detail")}
+                  {getIcon("RiInformationFill", "1.8rem", "grey1")}
-                </button>
+                </span>
 
-                <button
+                <span
-                  type="button"
                   onClick={() => this.select(item.name)}
-                  className={`float-input ${
+                  className="float-l"
-                    isSelected ? "cyan0-bg white-font " : "grey2-bg grey3-font "
-                  }`}
-                  style={{ width: "8rem" }}
                 >
                   {isSelected
-                    ? this.props.msg.pkg.get("browser.deselect")
+                    ? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
-                    : this.props.msg.pkg.get("browser.select")}
+                    : getIcon("RiCheckboxBlankFill", "1.8rem", "grey1")}
-                </button>
+                </span>
               </span>,
             ])}
             childrenStyles={List([
@@ -511,8 +496,8 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             <Flexbox
               children={List([
                 <span>
-                  <b>SHA1:</b>
+                  <b>{`SHA1: `}</b>
-                  {` ${item.sha1}`}
+                  <input type="text" readOnly={true} value={`${item.sha1}`} />
                 </span>,
                 <button
                   onClick={() => this.generateHash(itemPath)}
@@ -522,7 +507,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                   {this.props.msg.pkg.get("refresh")}
                 </button>,
               ])}
-              className={`grey2-bg grey3-font detail margin-r-m`}
+              className={`item-info`}
               childrenStyles={List([{}, { justifyContent: "flex-end" }])}
             />
           </div>
@@ -542,9 +527,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
     const itemListPane = (
       <div id="item-list">
-        <div className={`container ${showOp}`}>{ops}</div>
+        <div className={showOp}>
+          <Container>{ops}</Container>
+        </div>
 
-        <div className="container">
+        <Container>
           <div id="browser-op" className={`${showOp}`}>
             <Flexbox
               children={List([
@@ -632,7 +619,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           />
 
           {itemList}
-        </div>
+        </Container>
       </div>
     );
 

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

@@ -11,6 +11,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
+import { getIcon } from "./visual/icons";
 
 export interface SharingsProps {
   sharings: List<string>;
@@ -94,30 +95,34 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                       size="3rem"
                       className="purple0-font margin-r-m"
                     />,
-                    <span>{dirPath}</span>,
+                    <span className={nameWidthClass}>{dirPath}</span>,
                   ])}
                 />,
 
+                <span
+                  onClick={() => {
+                    this.deleteSharing(dirPath);
+                  }}
+                  className="margin-r-m"
+                >
+                  {getIcon("RiDeleteBin2Fill", "1.8rem", "red0")}
+                </span>,
+
                 <span>
                   <input
                     type="text"
                     readOnly
-                    className="float-input"
                     value={`${
                       document.location.href.split("?")[0]
                     }?dir=${encodeURIComponent(dirPath)}`}
                   />
-                  <button
-                    onClick={() => {
-                      this.deleteSharing(dirPath);
-                    }}
-                    className="float-input"
-                  >
-                    {this.props.msg.pkg.get("browser.share.del")}
-                  </button>
                 </span>,
               ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+              childrenStyles={List([
+                { alignItems: "center" },
+                { alignItems: "center", justifyContent: "flex-end" },
+                { alignItems: "center", justifyContent: "flex-end" },
+              ])}
             />
           </div>
         );

src/client/web/src/components/visual/icons.tsx

@@ -7,6 +7,12 @@ import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
 import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
 import { RiSettings3Fill } from "@react-icons/all-files/ri/RiSettings3Fill";
 import { RiWindowFill } from "@react-icons/all-files/ri/RiWindowFill";
+import { RiCheckboxBlankFill } from "@react-icons/all-files/ri/RiCheckboxBlankFill";
+import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill";
+import { RiMenuFill } from "@react-icons/all-files/ri/RiMenuFill";
+import { RiInformationFill } from "@react-icons/all-files/ri/RiInformationFill";
+import { RiDeleteBin2Fill } from "@react-icons/all-files/ri/RiDeleteBin2Fill";
+
 
 import { colorClass } from "./colors";
 
@@ -22,6 +28,11 @@ const icons = Map<string, IconType>({
   RiUploadCloudFill: RiUploadCloudFill,
   RiSettings3Fill: RiSettings3Fill,
   RiWindowFill: RiWindowFill,
+  RiCheckboxBlankFill: RiCheckboxBlankFill,
+  RiCheckboxFill: RiCheckboxFill,
+  RiMenuFill: RiMenuFill,
+  RiInformationFill: RiInformationFill,
+  RiDeleteBin2Fill: RiDeleteBin2Fill,
 });
 
 export function getIconWithProps(