fix(fe/panel_sharings): normalize styles and clean up

public/static/css/default.css

@@ -449,6 +449,15 @@
   display: block;
 }
 
+.title-l-wrap {
+  font-size: 1.8rem;
+  font-weight: bold;
+  line-height: 3.2rem;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  display: block;
+}
+
 .desc-l {
   font-size: 1.2rem;
   line-height: 3.2rem;
@@ -597,4 +606,4 @@
 
 .work-break-all {
   word-break: break-all;
-}
+}

public/static/css/white.css

@@ -357,13 +357,13 @@ input:focus {
 }
 
 .theme-default #sharing-list .info {
-  display: inline-block;
+  float: left;
   width: 70%;
   overflow-wrap: break-word;
 }
 
 .theme-default #sharing-list .op {
-  display: inline-block;
+  float: right;
   width: 30%;
   text-align: right;
 }

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

@@ -1,19 +1,18 @@
 import * as React from "react";
 import { List, Map } from "immutable";
 
-import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
-import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
-
 import { BtnList } from "./control/btn_list";
 import { QRCodeIcon } from "./visual/qrcode";
 import { getErrMsg } from "../common/utils";
-import { alertMsg, confirmMsg } from "../common/env";
+import { alertMsg } from "../common/env";
 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";
 import { Rows } from "./layout/rows";
+import { NotFoundBanner } from "./visual/banner_notfound";
+import { Title } from "./visual/title";
 import { shareIDQuery } from "../client/files";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
 import { CronTable } from "../common/cron";
@@ -100,7 +99,9 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
 
         const row1 = (
           <div>
-            <div className="info">{dirPath}</div>
+            <div className="info">
+              <span className="title-m-wrap dark-font">{dirPath}</span>
+            </div>
 
             <div className="op">
               <Flexbox
@@ -113,6 +114,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                     onClick={() => {
                       this.deleteSharing(dirPath);
                     }}
+                    className="button-default"
                   >
                     {this.props.msg.pkg.get("op.cancel")}
                   </button>,
@@ -124,6 +126,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                 style={{ justifyContent: "flex-end" }}
               />
             </div>
+            <div className="fix"></div>
           </div>
         );
 
@@ -159,6 +162,14 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
   };
 
   render() {
+    const title = (
+      <Title
+        title={this.props.msg.pkg.get("browser.share.title")}
+        iconName="RiShareBoxLine"
+        iconColor="black"
+      />
+    );
+
     const orderByCallbacks = List([
       () => {
         this.orderBy(this.props.msg.pkg.get("item.path"));
@@ -173,64 +184,24 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
     );
 
     const sharingRows = this.makeRows(this.props.sharingsInfo.sharings);
-    const view = <Rows rows={sharingRows} />;
-    const noSharingView = (
-      <Container>
-        <Flexbox
-          children={List([
-            <RiCloudOffFill 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>
-    );
-
-    const list =
-      this.props.sharingsInfo.sharings.size === 0 ? (
-        noSharingView
-      ) : (
-        <Container>
-          <Flexbox
-            children={List([
-              <Flexbox
-                children={List([
-                  <RiShareBoxLine
-                    size="3rem"
-                    className="margin-r-m black-font"
-                  />,
-
-                  <span>
-                    <span className="title-m bold">
-                      {this.props.msg.pkg.get("browser.share.title")}
-                    </span>
-                    <span className="desc-m grey0-font">
-                      {this.props.msg.pkg.get("browser.share.desc")}
-                    </span>
-                  </span>,
-                ])}
-              />,
-
-              <span></span>,
-            ])}
-            className="margin-b-l"
-          />
-
+    const view =
+      this.props.sharingsInfo.sharings.size > 0 ? (
+        <div>
           {orderByButtons}
-          {view}
-        </Container>
+          <Rows rows={sharingRows} />
+        </div>
+      ) : (
+        <NotFoundBanner title={this.props.msg.pkg.get("share.404.title")} />
       );
 
-    return <div id="sharing-list">{list}</div>;
+    return (
+      <div id="sharing-list">
+        <Container>
+          {title}
+          <div className="hr"></div>
+          {view}
+        </Container>
+      </div>
+    );
   }
 }

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

@@ -2,9 +2,6 @@ import * as React from "react";
 import { List } from "immutable";
 import FileSize from "filesize";
 
-import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
-import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
-
 import { BtnList } from "./control/btn_list";
 import { alertMsg } from "../common/env";
 import { getErrMsg } from "../common/utils";
@@ -12,10 +9,10 @@ import { updater } from "./state_updater";
 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";
 import { Rows } from "./layout/rows";
-import { NotFoundBanner } from "./visual/notfound";
+import { NotFoundBanner } from "./visual/banner_notfound";
+import { Title } from "./visual/title";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
 import { HotkeyHandler } from "../common/hotkeys";
 
@@ -193,23 +190,10 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
 
   render() {
     const title = (
-      <Flexbox
-        children={List([
-          <Flexbox
-            children={List([
-              <RiUploadCloudFill
-                size="3.2rem"
-                className="margin-r-m black-font"
-              />,
-
-              <span className="title-m bold">
-                {this.props.msg.pkg.get("browser.upload.title")}
-              </span>,
-            ])}
-          />,
-
-          <span></span>,
-        ])}
+      <Title
+        title={this.props.msg.pkg.get("browser.upload.title")}
+        iconName="RiUploadCloudFill"
+        iconColor="black"
       />
     );
 

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { List } from "immutable";
+
+import { Flexbox } from "../layout/flexbox";
+import { getIconWithProps } from "./icons";
+import { colorClass } from "./colors";
+
+export interface Props {
+  iconName: string;
+  iconColor: string;
+  title: string;
+}
+
+export const Title = (props: Props) => {
+  return (
+    <Flexbox
+      children={List([
+        <Flexbox
+          children={List([
+            getIconWithProps(props.iconName, {
+              size: "3.2rem",
+              className: `margin-r-m ${colorClass(props.iconColor)}-font`,
+            }),
+            <span className="title-m bold">{props.title}</span>,
+          ])}
+        />,
+
+        <span></span>,
+      ])}
+    />
+  );
+};