fix(panel_sharings): fix issues

public/static/css/white.css

@@ -339,28 +339,6 @@ input:focus {
   overflow-wrap: break-word;
 }
 
-.theme-default #sharing-list .info {
-  float: left;
-  width: 70%;
-  overflow-wrap: break-word;
-}
-
-.theme-default #sharing-list .op {
-  float: right;
-  width: 30%;
-  text-align: right;
-}
-
-.theme-default #sharing-list .desc {
-  background-color: #ecf0f1;
-  font-size: 1.2rem;
-  margin: 1rem 0;
-  color: #697384;
-  padding: 1rem;
-  border: dashed 1px #95a5a6;
-  overflow-wrap: break-word;
-}
-
 .theme-default .sharing-item {
   margin: 2rem 0 2rem 0;
 }

public/static/css/white_compact.css

@@ -126,3 +126,25 @@
   color: #7f8c8d;
   padding-left: 0.5rem;
 }
+
+.theme-default #sharing-list .col-l {
+  float: left;
+  width: 70%;
+  overflow-wrap: break-word;
+}
+
+.theme-default #sharing-list .col-r {
+  float: right;
+  width: 30%;
+  text-align: right;
+}
+
+.theme-default #sharing-list .desc {
+  background-color: #ecf0f1;
+  font-size: 1.2rem;
+  margin: 1rem 0;
+  color: #697384;
+  padding: 1rem;
+  border: dashed 1px #95a5a6;
+  overflow-wrap: break-word;
+}

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

@@ -491,7 +491,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       const icon = item.isDir ? (
         <RiFolder2Fill size="2rem" className="yellow0-font margin-r-m" />
       ) : (
-        <RiFile2Fill size="2rem" className="cyan1-font margin-r-m" />
+        <RiFile2Fill size="2rem" className="highlight-font margin-r-m" />
       );
 
       const modTimeDate = new Date(item.modTime);
@@ -643,7 +643,6 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     const endPoints = (
       <div className={showEndpoints}>
         <Container>
-          <h5 className="title-m"></h5>
           <Title
             title={this.props.msg.pkg.get("endpoints")}
             iconColor="black"
@@ -695,7 +694,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             <div>
               <button
                 onClick={this.mkDir}
-                className="inline-block cyan1-bg white-font margin-r-m"
+                className="inline-block highlight-bg white-font margin-r-m"
               >
                 {this.props.msg.pkg.get("browser.folder.add")}
               </button>
@@ -711,7 +710,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             <div>
               <button
                 onClick={this.onClickUpload}
-                className="cyan1-bg white-font"
+                className="highlight-bg white-font"
               >
                 {this.props.msg.pkg.get("browser.upload")}
               </button>

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

@@ -99,11 +99,11 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
 
         const row1 = (
           <div>
-            <div className="info">
+            <div className="col-l">
               <span className="title-m-wrap dark-font">{dirPath}</span>
             </div>
 
-            <div className="op">
+            <div className="col-r">
               <Flexbox
                 children={List([
                   <span className="margin-r-m">