fix(fe): update icons

public/static/css/white.css

@@ -194,7 +194,7 @@
   font-size: 1.4rem;
   line-height: 2rem;
   display: block;
-  overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 .theme-default #item-rows .hr {

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

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { List, Map, Set } from "immutable";
+import { List } from "immutable";
+
+import { BiSortUp } from "@react-icons/all-files/bi/BiSortUp";
 
-import { RiArrowUpDownFill } from "@react-icons/all-files/ri/RiArrowUpDownFill";
 
 import { Flexbox } from "./flexbox";
 
@@ -103,7 +104,7 @@ export class Rows extends React.Component<Props, State, {}> {
         <div className="margin-b-l">
           <Flexbox
             children={List([
-              <RiArrowUpDownFill
+              <BiSortUp
                 size="3rem"
                 className="black-font margin-r-m"
               />,

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

@@ -12,7 +12,8 @@ import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill";
 import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
 import { BiTable } from "@react-icons/all-files/bi/BiTable";
 import { BiListUl } from "@react-icons/all-files/bi/BiListUl";
-import { RiRefreshLine } from "@react-icons/all-files/ri/RiRefreshLine";
+import { RiRestartFill } from "@react-icons/all-files/ri/RiRestartFill";
+import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
 
 import { ErrorLogger } from "../common/log_error";
 import { alertMsg, confirmMsg } from "../common/env";
@@ -468,10 +469,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             <Flexbox
               children={List([
                 <div className="label">{`SHA1: `}</div>,
-                <RiRefreshLine
+                <RiRestartFill
                   onClick={() => this.generateHash(itemPath)}
                   size={"2rem"}
-                  className="black-font"
+                  className="grey3-font"
                 />,
               ])}
               className="item-info"
@@ -490,7 +491,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           <span onClick={() => this.select(item.name)} className="float-l">
             {isSelected
               ? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
-              : getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
+              : getIcon("RiCheckboxBlankLine", "1.8rem", "black1")}
           </span>
         </div>
       ) : (
@@ -505,7 +506,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           <span onClick={() => this.select(item.name)} className="float-l">
             {isSelected
               ? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
-              : getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
+              : getIcon("RiCheckboxBlankLine", "1.8rem", "black1")}
           </span>
         </div>
       );
@@ -577,6 +578,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         : `${dirPath}/${item.name}`;
 
       const selectedIconColor = isSelected ? "cyan1-font" : "grey0-font";
+
       const descIconColor = this.state.showDetail.has(item.name)
         ? "cyan1-font"
         : "grey0-font";
@@ -600,14 +602,22 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         </a>
       );
 
+      const checkIcon = isSelected ? (
+        <RiCheckboxFill
+          size="1.8rem"
+          className={`${selectedIconColor} ${shareModeClass}`}
+          onClick={() => this.select(item.name)}
+        />
+      ) : (
+        <RiCheckboxBlankLine
+          size="1.8rem"
+          className={`${selectedIconColor} ${shareModeClass}`}
+          onClick={() => this.select(item.name)}
+        />
+      );
+
       const op = item.isDir ? (
-        <div className={`v-mid item-op ${showOp}`}>
-          <RiCheckboxFill
-            size="1.8rem"
-            className={`${selectedIconColor} ${shareModeClass}`}
-            onClick={() => this.select(item.name)}
-          />
-        </div>
+        <div className={`v-mid item-op ${showOp}`}>{checkIcon}</div>
       ) : (
         <div className={`v-mid item-op ${showOp}`}>
           <RiMore2Fill
@@ -616,11 +626,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             onClick={() => this.toggleDetail(item.name)}
           />
 
-          <RiCheckboxFill
-            size="1.8rem"
-            className={`${selectedIconColor} ${shareModeClass}`}
-            onClick={() => this.select(item.name)}
-          />
+          {checkIcon}
         </div>
       );
 
@@ -633,13 +639,20 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
       const compact = item.isDir ? (
         <span>
-          <span className="grey3-font">{`${pathTitle}: `}</span>
-          <span>{`${absDownloadURL} | `}</span>
           <span className="grey3-font">{`${modTimeTitle}: `}</span>
           <span>{item.modTime}</span>
         </span>
       ) : (
-        `${pathTitle}: ${absDownloadURL} | ${modTimeTitle}: ${item.modTime} | ${sizeTitle}: ${itemSize} | sha1: ${item.sha1}`
+        <span>
+          <span className="grey3-font">{`${pathTitle}: `}</span>
+          <span>{`${absDownloadURL} | `}</span>
+          <span className="grey3-font">{`${modTimeTitle}: `}</span>
+          <span>{`${item.modTime} | `}</span>
+          <span className="grey3-font">{`${sizeTitle}: `}</span>
+          <span>{`${itemSize} | `}</span>
+          <span className="grey3-font">{`SHA1: `}</span>
+          <span>{item.sha1}</span>
+        </span>
       );
       const details = (
         <div>
@@ -648,6 +661,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
               <span className="title-m black-font">{pathTitle}</span>
               <span>{absDownloadURL}</span>
             </div>
+          </div>
+
+          <div className="column">
             <div className="card">
               <span className="title-m black-font">{modTimeTitle}</span>
               <span>{item.modTime}</span>
@@ -658,24 +674,15 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             </div>
           </div>
 
-          <div className="column">
-            <div className="card">
-              <span className="title-m black-font">{pathTitle}</span>
-              <div className="qrcode-flat">
-                <QRCode value={absDownloadURL} size={128} />
-              </div>
-            </div>
-          </div>
-
           <div className="fix">
             <div className="card">
               <Flexbox
                 children={List([
                   <span className="title-m black-font">SHA1</span>,
-                  <RiRefreshLine
+                  <RiRestartFill
                     onClick={() => this.generateHash(itemPath)}
                     size={"2rem"}
-                    className={`black-font ${shareModeClass}`}
+                    className={`grey3-font ${shareModeClass}`}
                   />,
                 ])}
                 childrenStyles={List([{}, { justifyContent: "flex-end" }])}

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

@@ -3,8 +3,7 @@ import { List, Map } from "immutable";
 import QRCode from "react-qr-code";
 
 import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
-import { RiFolderSharedFill } from "@react-icons/all-files/ri/RiFolderSharedFill";
-import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
+import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
 
 import { QRCodeIcon } from "./visual/qrcode";
 import { getErrMsg } from "../common/utils";
@@ -137,7 +136,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
       <Container>
         <Flexbox
           children={List([
-            <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
+            <RiCloudOffFill size="4rem" className="margin-r-m red0-font" />,
             <span>
               <h3 className="title-l">
                 {this.props.msg.pkg.get("share.404.title")}

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

@@ -4,7 +4,7 @@ import FileSize from "filesize";
 
 import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
 import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine";
-import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
+import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
 
 import { alertMsg } from "../common/env";
 import { getErrMsg } from "../common/utils";
@@ -165,7 +165,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       <Container>
         <Flexbox
           children={List([
-            <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
+            <RiCloudOffFill size="4rem" className="margin-r-m red0-font" />,
             <span>
               <h3 className="title-l">
                 {this.props.msg.pkg.get("upload.404.title")}

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

@@ -18,6 +18,7 @@ import { RiArrowUpDownFill } from "@react-icons/all-files/ri/RiArrowUpDownFill";
 import { BiTable } from "@react-icons/all-files/bi/BiTable";
 import { BiListUl } from "@react-icons/all-files/bi/BiListUl";
 import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
+import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
 
 import { colorClass } from "./colors";
 
@@ -44,6 +45,7 @@ const icons = Map<string, IconType>({
   BiTable: BiTable,
   BiListUl: BiListUl,
   RiMore2Fill: RiMore2Fill,
+  RiCheckboxBlankLine: RiCheckboxBlankLine,
 });
 
 export function getIconWithProps(