fix(browser): refine styles

public/static/css/style.css

@@ -1,5 +1,14 @@
 body button {
   font-size: 1.2rem;
+  color: #697384;
+  background-color: #ecf0f6;
+}
+
+body input {
+  font-size: 1.2rem;
+  color: #697384;
+  background-color: #ecf0f6;
+  border: solid 1px #95a5a6;
 }
 
 #bg {
@@ -128,7 +137,7 @@ body button {
   width: 100%;
   color: #34495e;
   font-size: 1.4rem;
-  line-height: 5rem;
+  /* line-height: 5rem; */
   background-color: white;
   border-radius: 0.8rem;
   margin-bottom: 2rem;

src/client/web/src/components/browser.tsx

@@ -5,6 +5,10 @@ import FileSize from "filesize";
 import { RiFolder2Fill } from "@react-icons/all-files/ri/RiFolder2Fill";
 import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill";
 import { RiFile2Fill } from "@react-icons/all-files/ri/RiFile2Fill";
+import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
+import { RiShareForwardBoxFill } from "@react-icons/all-files/ri/RiShareForwardBoxFill";
+import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
+import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine";
 
 import { alertMsg, comfirmMsg } from "../common/env";
 import { updater } from "./state_updater";
@@ -413,7 +417,10 @@ export class Browser extends React.Component<Props, State, {}> {
             <span className="padding-m">
               <Flexbox
                 children={List([
-                  <RiFolder2Fill size="3rem" className="yellow0-font margin-r-m" />,
+                  <RiFolder2Fill
+                    size="3rem"
+                    className="yellow0-font margin-r-m"
+                  />,
 
                   <span className="">
                     <span className={nameCellClass}>
@@ -437,7 +444,9 @@ export class Browser extends React.Component<Props, State, {}> {
             <span className="padding-m">
               <button
                 onClick={() => this.select(item.name)}
-                className={`${isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"}`}
+                className={`${
+                  isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"
+                }`}
                 style={{ width: "8rem", display: "inline-block" }}
               >
                 {isSelected
@@ -481,7 +490,9 @@ export class Browser extends React.Component<Props, State, {}> {
               <button
                 type="button"
                 onClick={() => this.select(item.name)}
-                className={`${isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"}`}
+                className={`${
+                  isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"
+                }`}
                 style={{ width: "8rem", display: "inline-block" }}
               >
                 {isSelected
@@ -501,63 +512,82 @@ export class Browser extends React.Component<Props, State, {}> {
         const fileName = pathParts[pathParts.length - 1];
 
         return (
-          <div key={fileName} className="flex-list-container">
+          <Flexbox
-            <span className="flex-list-item-l">
+            children={List([
-              <span className="vbar blue2-bg"></span>
+              <span className="padding-m">
-              <div className={nameCellClass}>
+                <Flexbox
-                <span className="bold">{fileName}</span>
+                  children={List([
-                <div className="grey1-font">
+                    <RiUploadCloudLine
-                  {FileSize(uploading.uploaded, { round: 0 })}
+                      size="3rem"
-                  &nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })}
+                      className="margin-r-m blue0-font"
-                </div>
+                    />,
-              </div>
+
-            </span>
+                    <div className={`${nameCellClass}`}>
-            <span className="flex-list-item-r padding-r-m">
+                      <span className="title-m">{fileName}</span>
-              <div className="item-op">
+                      <div className="desc-m grey0-font">
+                        {FileSize(uploading.uploaded, { round: 0 })}
+                        &nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })}
+                      </div>
+                    </div>,
+                  ])}
+                />
+              </span>,
+
+              <div className="item-op padding-m">
                 <button
                   onClick={() => this.stopUploading(uploading.realFilePath)}
-                  className="grey1-bg white-font margin-r-m"
+                  className="grey3-bg grey4-font margin-r-m"
                 >
                   {this.props.msg.pkg.get("browser.stop")}
                 </button>
                 <button
                   onClick={() => this.deleteUpload(uploading.realFilePath)}
-                  className="grey1-bg white-font"
+                  className="grey3-bg grey4-font"
                 >
                   {this.props.msg.pkg.get("browser.delete")}
                 </button>
-              </div>
+              </div>,
-            </span>
+            ])}
-          </div>
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
         );
       }
     );
 
     const sharingList = this.props.browser.sharings.map((dirPath: string) => {
       return (
-        <div key={dirPath} className="flex-list-container">
+        <div className="padding-m">
-          <span className="flex-list-item-l">
+          <Flexbox
-            <span className="dot yellow3-bg"></span>
+            key={dirPath}
-            <span className="bold">{dirPath}</span>
+            children={List([
-          </span>
+              <Flexbox
-          <span className="flex-list-item-r padding-r-m">
+                children={List([
-            <input
+                  <RiShareForwardBoxFill size="3rem" className="purple0-font margin-r-m" />,
-              type="text"
+                  <span>{dirPath}</span>,
-              readOnly
+                ])}
-              className="margin-r-m"
+              />,
-              value={`${
+
-                document.location.href.split("?")[0]
+              <span>
-              }?dir=${encodeURIComponent(dirPath)}`}
+                <input
-            />
+                  type="text"
-            <button
+                  readOnly
-              onClick={() => {
+                  className="margin-r-m"
-                this.deleteSharing(dirPath);
+                  value={`${
-              }}
+                    document.location.href.split("?")[0]
-              className="grey1-bg white-font"
+                  }?dir=${encodeURIComponent(dirPath)}`}
-            >
+                />
-              {this.props.msg.pkg.get("browser.share.del")}
+                <button
-            </button>
+                  onClick={() => {
-          </span>
+                    this.deleteSharing(dirPath);
+                  }}
+                  className="grey3-bg grey4-bg"
+                >
+                  {this.props.msg.pkg.get("browser.share.del")}
+                </button>
+              </span>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
         </div>
       );
     });
@@ -588,11 +618,24 @@ export class Browser extends React.Component<Props, State, {}> {
             <div className="container">
               <Flexbox
                 children={List([
-                  <span>
+                  <span className="padding-m">
-                    <span className="dot black-bg"></span>
+                    <Flexbox
-                    <span className="bold">
+                      children={List([
-                      {this.props.msg.pkg.get("browser.upload.title")}
+                        <RiUploadCloudFill
-                    </span>
+                          size="3rem"
+                          className="margin-r-m black-font"
+                        />,
+
+                        <span>
+                          <span className="title-l">
+                            {this.props.msg.pkg.get("browser.upload.title")}
+                          </span>
+                          <span className="desc-l grey0-font">
+                            All files in uploading
+                          </span>
+                        </span>,
+                      ])}
+                    />
                   </span>,
 
                   <span></span>,
@@ -607,11 +650,24 @@ export class Browser extends React.Component<Props, State, {}> {
             <div className="container">
               <Flexbox
                 children={List([
-                  <span>
+                  <span className="padding-m">
-                    <span className="dot black-bg"></span>
+                    <Flexbox
-                    <span className="bold">
+                      children={List([
-                      {this.props.msg.pkg.get("browser.share.title")}
+                        <RiShareBoxLine
-                    </span>
+                          size="3rem"
+                          className="margin-r-m black-font"
+                        />,
+
+                        <span>
+                          <span className="title-l">
+                            {this.props.msg.pkg.get("browser.share.title")}
+                          </span>
+                          <span className="desc-l grey0-font">
+                            Sharing Folders
+                          </span>
+                        </span>,
+                      ])}
+                    />
                   </span>,
 
                   <span></span>,
@@ -629,7 +685,7 @@ export class Browser extends React.Component<Props, State, {}> {
                   <Flexbox
                     children={List([
                       <RiFileList2Fill
-                        size="4rem"
+                        size="3rem"
                         className="margin-r-m black-font"
                       />,