fix(fe/panel_sharing): refine sharing panel styles

public/static/css/white.css

@@ -243,15 +243,24 @@
 
 .theme-default #upload-list .progress-green {
   background-color: #1abc9c;
-  height: 100%
+  height: 100%;
 }
 
 .theme-default .upload-item {
   padding: 1rem 0 1rem 0;
 }
 
-.theme-default .share-item {
-  padding: 0 0 1rem 0;
+.theme-default #sharing-list .desc {
+  background-color: #ecf0f1;
+  font-size: 1.2rem;
+  margin: 1rem 0;
+  color: #697384;
+  padding: 1rem;
+  border: dashed 1px #95a5a6;
+}
+
+.theme-default .sharing-item {
+  margin: 2rem 0 2rem 0;
 }
 
 .theme-default #tabs {

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

@@ -66,8 +66,12 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
 
     const sharingList = this.props.sharingsInfo.sharings.map(
       (dirPath: string) => {
+        const sharingURL = `${
+          document.location.href.split("?")[0]
+        }?dir=${encodeURIComponent(dirPath)}`;
+
         return (
-          <div id="share-list" key={dirPath}>
+          <div className="sharing-item" key={dirPath}>
             <Flexbox
               children={List([
                 <Flexbox
@@ -80,24 +84,13 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                   ])}
                 />,
 
-                <span
+                <button
                   onClick={() => {
                     this.deleteSharing(dirPath);
                   }}
-                  className="margin-r-m"
                 >
-                  {getIcon("RiDeleteBin2Fill", "1.8rem", "red0")}
-                </span>,
-
-                <span>
-                  <input
-                    type="text"
-                    readOnly
-                    value={`${
-                      document.location.href.split("?")[0]
-                    }?dir=${encodeURIComponent(dirPath)}`}
-                  />
-                </span>,
+                  {this.props.msg.pkg.get("browser.delete")}
+                </button>,
               ])}
               childrenStyles={List([
                 { alignItems: "center" },
@@ -105,6 +98,9 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                 { alignItems: "center", justifyContent: "flex-end" },
               ])}
             />
+
+            <div className="desc">{sharingURL}</div>
+            <div className="hr grey0-bg"></div>
           </div>
         );
       }