fix(browser): unify styles

public/static/css/style.css

@@ -110,19 +110,6 @@ body button {
   border-radius: 0.6rem;
 } */
 
-#op-bar {
-  /* width: 96%; */
-  /* max-width: 960px; */
-
-  /* position: fixed;
-  top: 6rem;
-  right: auto;
-  bottom: auto;
-  left: auto; */
-  line-height: 3rem;
-  border-radius: 0.6rem;
-}
-
 #item-list {
   margin-top: 2rem;
 }
@@ -189,9 +176,9 @@ body button {
   display: block;
 }
 
-#item-list .item-op {
+/* #item-list .item-op {
   line-height: 4rem;
-}
+} */
 
 tr button {
   background-color: #95a5a6;
@@ -660,53 +647,11 @@ div.hr {
   font-weight: bold;
 }
 
-.title-m {
-  font-size: 1.4rem;
-  /* font-weight: bold; */
-  line-height: 2rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-.desc-m {
-  font-size: 1.2rem;
-  line-height: 2rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-.title-l {
-  font-size: 1.8rem;
-  font-weight: bold;
-  line-height: 2rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-.desc-l {
-  font-size: 1.2rem;
-  line-height: 2rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-.alert-red {
+/* .alert-red {
   border: dashed 1px #e74c3c;
   color: #e74c3c;
   border-radius: 0.5rem;
-}
+} */
 
 .detail {
   font-size: 1.2rem;

public/static/css/white.css

@@ -58,11 +58,112 @@
   padding: 2rem;
 }
 
-.theme-default .op-bar {
+.theme-default #breadcrumb {
+  padding: 1rem;
+  width: 100%;
+}
+
+.theme-default #breadcrumb .item {
+  color: #697384;
+  margin-right: 1rem;
+  /* padding: 1rem; */
+}
+
+.theme-default #breadcrumb .item {
+  color: #697384;
+  margin-right: 1rem;
+  /* padding: 1rem; */
+}
+
+#browser .container {
+  width: 100%;
+  color: #34495e;
+  background-color: white;
+  border-radius: 0.8rem;
+  margin-bottom: 2rem;
+}
+
+/* .theme-default #breadcrumb .item:last-child {
+  margin-right: 0;
+} */
+
+.theme-default .select-btn {
+  width: 8rem;
+  display: inline-block;
+  margin: 0 1rem 0 0;
+}
+
+.theme-default #op-bar {
+}
+
+.theme-default #browser-op {
+  padding: 1rem;
+}
+
+.theme-default #browser-op button {
+  margin: 0 1rem 0 0;
+}
+
+.theme-default #browser {
+  padding-bottom: 1rem;
+}
+
+.theme-default #icon-home {
+  color: black;
+  margin-right: 1rem;
+}
+
+.theme-default #browser .item-op {
+  line-height: 4rem;
+  padding: 1rem;
+}
+
+.theme-default #browser .error {
+  line-height: 4rem;
+  border: dashed 1px #e74c3c;
+  background-color: #e74c3c;
+  border-radius: 0.5rem;
+  color: white;
+  margin: 1rem;
+  padding: 0 1rem;
+}
+
+.theme-default .upload-item {
+  padding: 1rem;
+}
+
+.theme-default #share-list {
+  padding: 1rem;
+}
+
+.theme-default #tabs {
+  padding: 1rem;
+}
+
+.theme-default #upload-op {
+  padding: 1rem;
+}
+
+/* .theme-default .op-bar {
   background: rgba(255, 255, 255, 1);
   box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
   backdrop-filter: blur(9.5px);
   -webkit-backdrop-filter: blur(9.5px);
+} */
+
+.theme-default .red-btn {
+  background-color: #e74c3c;
+  color: #fff;
+}
+
+.theme-default .blue-btn {
+  background-color: #3498db;
+  color: #fff;
+}
+
+.theme-default .cyan-btn {
+  background-color: #1abc9c;
+  color: #fff;
 }
 
 .theme-default .container-center {
@@ -72,6 +173,11 @@
   z-index: 9;
 }
 
+.theme-default .float {
+  display: inline-block;
+  margin: auto 1rem auto auto;
+}
+
 .theme-default .float-input {
   display: inline-block;
   margin: auto 1rem 1rem auto;
@@ -135,6 +241,9 @@
 
 .theme-default #tail {
   color: #34495e;
+  font-size: 1.2rem;
+  text-align: center;
+  margin: 4rem auto;
 }
 
 .theme-default input {

src/client/web/build/template/index.template.dev.html

@@ -15,11 +15,7 @@
     <script src="/static/js/react.development.js?v=16.8.6"></script>
     <script src="/static/js/react-dom.development.js?v=16.8.6"></script>
     <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
-    <link rel="stylesheet" href="/static/css/animation.css">
-    <link rel="stylesheet" href="/static/css/color.css">
-    <link rel="stylesheet" href="/static/css/desktop.css">
     <link rel="stylesheet" href="/static/css/reset.css">
-    <link rel="stylesheet" href="/static/css/style.css">
     <link rel="stylesheet" href="/static/css/white.css">
     <link rel="stylesheet" href="/static/css/default.css">
     <!-- <link

src/client/web/build/template/index.template.html

@@ -15,11 +15,7 @@
     <script src="/static/js/react.production.min.js?v=16.8.6"></script>
     <script src="/static/js/react-dom.production.min.js?v=16.8.6"></script>
     <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
-    <link rel="stylesheet" href="/static/css/animation.css">
-    <link rel="stylesheet" href="/static/css/color.css">
-    <link rel="stylesheet" href="/static/css/desktop.css">
     <link rel="stylesheet" href="/static/css/reset.css">
-    <link rel="stylesheet" href="/static/css/style.css">
     <link rel="stylesheet" href="/static/css/white.css">
     <link rel="stylesheet" href="/static/css/default.css">
     <!-- <link

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

@@ -365,7 +365,7 @@ export class Browser extends React.Component<Props, State, {}> {
             onClick={() =>
               this.chdir(this.props.browser.dirPath.slice(0, key + 1))
             }
-            className="grey3-bg grey4-font margin-r-m"
+            className="item"
           >
             {pathPart}
           </button>
@@ -378,23 +378,21 @@ export class Browser extends React.Component<Props, State, {}> {
     } pointer`;
 
     const ops = (
-      <div>
-        <Flowgrid
-          grids={List([
-            <div className="padding-t-m padding-b-m padding-r-m">
+      <div id="upload-op">
+        <div className="float">
           <input
             type="text"
             onChange={this.onInputChange}
             value={this.state.inputValue}
-                className="black0-font margin-r-m"
             placeholder={this.props.msg.pkg.get("browser.folder.name")}
+            className="float"
           />
-              <button onClick={this.onMkDir} className="margin-r-m">
+          <button onClick={this.onMkDir} className="float">
             {this.props.msg.pkg.get("browser.folder.add")}
           </button>
-            </div>,
+        </div>
 
-            <div className="padding-t-m padding-b-m">
+        <div className="float">
           <button onClick={this.onClickUpload}>
             {this.props.msg.pkg.get("browser.upload")}
           </button>
@@ -404,12 +402,10 @@ export class Browser extends React.Component<Props, State, {}> {
             multiple={true}
             value={this.props.browser.uploadValue}
             ref={this.assignInput}
-                className="black0-font hidden"
-              />
-            </div>,
-          ])}
+            className="hidden"
           />
         </div>
+      </div>
     );
 
     const sortedItems = this.props.browser.items.sort(
@@ -573,13 +569,11 @@ export class Browser extends React.Component<Props, State, {}> {
 
     const itemListPane =
       this.props.browser.tab === "" || this.props.browser.tab === "item" ? (
-        <div>
-          <div id="op-bar" className={`op-bar ${showOp}`}>
-            <div className="margin-l-m margin-r-m margin-b-m">{ops}</div>
-          </div>
+        <div id="item-list">
+          <div className={`container ${showOp}`}>{ops}</div>
 
-          <div className="container" style={{ paddingBottom: "1rem" }}>
-            <div className={`${showOp}`}>
+          <div className="container">
+            <div id="browser-op" className={`${showOp}`}>
               <Flexbox
                 children={List([
                   <span>
@@ -591,7 +585,7 @@ export class Browser extends React.Component<Props, State, {}> {
                             this.props.browser.dirPath.join("/")
                           );
                         }}
-                        className="red0-bg white-font margin-r-m"
+                        className="red-btn"
                       >
                         {this.props.msg.pkg.get("browser.share.del")}
                       </button>
@@ -599,27 +593,25 @@ export class Browser extends React.Component<Props, State, {}> {
                       <button
                         type="button"
                         onClick={this.addSharing}
-                        className="cyan0-bg white-font margin-r-m"
+                        className="cyan-btn"
                       >
                         {this.props.msg.pkg.get("browser.share.add")}
                       </button>
                     )}
+                  </span>,
 
+                  <span>
                     {this.state.selectedItems.size > 0 ? (
                       <span>
                         <button
                           type="button"
                           onClick={() => this.delete()}
-                          className="red0-bg white-font margin-r-m"
+                          className="red-btn"
                         >
                           {this.props.msg.pkg.get("browser.delete")}
                         </button>
 
-                        <button
-                          type="button"
-                          onClick={() => this.moveHere()}
-                          className="margin-r-m"
-                        >
+                        <button type="button" onClick={() => this.moveHere()}>
                           {this.props.msg.pkg.get("browser.paste")}
                         </button>
                       </span>
@@ -627,35 +619,41 @@ export class Browser extends React.Component<Props, State, {}> {
                   </span>,
 
                   <span>
-                    <span className="desc-m grey0-font">{`${this.props.msg.pkg.get(
+                    <span
+                      id="space-used"
+                      className="desc-m grey0-font"
+                    >{`${this.props.msg.pkg.get(
                       "browser.used"
                     )} ${usedSpace} / ${spaceLimit}`}</span>
                   </span>,
                 ])}
-                className="padding-m"
-                childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+                childrenStyles={List([
+                  { flex: "0 0 auto" },
+                  { flex: "0 0 auto" },
+                  { justifyContent: "flex-end" },
+                ])}
               />
             </div>
 
             <Flexbox
               children={List([
-                <span className="padding-m">
+                <span id="breadcrumb">
                   <Flexbox
                     children={List([
-                      <RiHomeSmileFill
-                        size="3rem"
-                        className="margin-r-m black-font"
-                      />,
-
+                      <RiHomeSmileFill size="3rem" id="icon-home" />,
                       <Flexbox children={breadcrumb} />,
                     ])}
+                    childrenStyles={List([
+                      { flex: "0 0 auto" },
+                      { flex: "0 0 auto" },
+                    ])}
                   />
                 </span>,
 
-                <span className={`padding-m ${showOp}`}>
+                <span className={`${showOp}`}>
                   <button
                     onClick={() => this.selectAll()}
-                    style={{ width: "8rem", display: "inline-block" }}
+                    className="select-btn"
                   >
                     {this.props.msg.pkg.get("browser.selectAll")}
                   </button>
@@ -683,6 +681,7 @@ export class Browser extends React.Component<Props, State, {}> {
                     children={List([
                       <RiUploadCloudLine
                         size="3rem"
+                        id="icon-upload"
                         className="margin-r-m blue0-font"
                       />,
 
@@ -697,16 +696,16 @@ export class Browser extends React.Component<Props, State, {}> {
                   />
                 </span>,
 
-                <div className="item-op padding-m">
+                <div className="item-op">
                   <button
                     onClick={() => this.stopUploading(uploading.filePath)}
-                    className="grey3-bg grey4-font margin-r-m"
+                    className="float-input"
                   >
                     {this.props.msg.pkg.get("browser.stop")}
                   </button>
                   <button
                     onClick={() => this.deleteUpload(uploading.filePath)}
-                    className="grey3-bg grey4-font"
+                    className="float-input"
                   >
                     {this.props.msg.pkg.get("browser.delete")}
                   </button>
@@ -715,9 +714,7 @@ export class Browser extends React.Component<Props, State, {}> {
               childrenStyles={List([{}, { justifyContent: "flex-end" }])}
             />
             {uploading.err.trim() === "" ? null : (
-              <div className="alert-red margin-s">
-                <span className="padding-m">{uploading.err.trim()}</span>
-              </div>
+              <div className="error">{uploading.err.trim()}</div>
             )}
           </div>
         );
@@ -751,10 +748,10 @@ export class Browser extends React.Component<Props, State, {}> {
             />
           </div>
         ) : (
-          <div className="container padding-b-m">
+          <div className="container">
             <Flexbox
               children={List([
-                <span className="padding-m">
+                <span className="upload-item">
                   <Flexbox
                     children={List([
                       <RiUploadCloudFill
@@ -785,7 +782,7 @@ export class Browser extends React.Component<Props, State, {}> {
 
     const sharingList = this.props.browser.sharings.map((dirPath: string) => {
       return (
-        <div key={dirPath} className="padding-m">
+        <div id="share-list" key={dirPath}>
           <Flexbox
             children={List([
               <Flexbox
@@ -802,7 +799,7 @@ export class Browser extends React.Component<Props, State, {}> {
                 <input
                   type="text"
                   readOnly
-                  className="margin-r-m"
+                  className="float-input"
                   value={`${
                     document.location.href.split("?")[0]
                   }?dir=${encodeURIComponent(dirPath)}`}
@@ -811,7 +808,7 @@ export class Browser extends React.Component<Props, State, {}> {
                   onClick={() => {
                     this.deleteSharing(dirPath);
                   }}
-                  className="grey3-bg grey4-bg"
+                  className="float-input"
                 >
                   {this.props.msg.pkg.get("browser.share.del")}
                 </button>
@@ -885,14 +882,14 @@ export class Browser extends React.Component<Props, State, {}> {
     const showTabs = this.props.login.userRole === roleVisitor ? "hidden" : "";
     return (
       <div>
-        <div id="item-list">
+        <div id="browser">
           <div className={`container ${showTabs}`}>
-            <div className="padding-m">
+            <div id="tabs">
               <button
                 onClick={() => {
                   this.setTab("item");
                 }}
-                className="margin-r-m"
+                className="float"
               >
                 <Flexbox
                   children={List([
@@ -909,7 +906,7 @@ export class Browser extends React.Component<Props, State, {}> {
                 onClick={() => {
                   this.setTab("uploading");
                 }}
-                className="margin-r-m"
+                className="float"
               >
                 <Flexbox
                   children={List([
@@ -928,7 +925,7 @@ export class Browser extends React.Component<Props, State, {}> {
                 onClick={() => {
                   this.setTab("sharing");
                 }}
-                className="margin-r-m"
+                className="float"
               >
                 <Flexbox
                   children={List([
@@ -945,6 +942,7 @@ export class Browser extends React.Component<Props, State, {}> {
               </button>
             </div>
           </div>
+
           <div>{sharingListPane}</div>
           <div>{uploadingListPane}</div>
           {itemListPane}

src/client/web/src/components/pane_admin.tsx

@@ -452,7 +452,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
     });
 
     return (
-      <div className="font-size-m">
+      <div className="font-m">
         <div className="container">
           <BgCfg
             ui={this.props.ui}
@@ -714,25 +714,21 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
           childrenStyles={List([{}, { justifyContent: "flex-end" }])}
         />
 
-        <Flowgrid
-          grids={List([
-            <div className="padding-t-m padding-b-m padding-r-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("cfg.bg.url")}
-              </div>
+        <div>
+          <div className="float-input">
+            <div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>
             <input
               name="bg_url"
               type="text"
               onChange={this.changeBgUrl}
               value={this.props.ui.bg.url}
-                className="black0-font"
               style={{ width: "20rem" }}
               placeholder={this.props.msg.pkg.get("cfg.bg.url")}
             />
-            </div>,
+          </div>
 
-            <div className="padding-t-m padding-b-m padding-r-m">
-              <div className="font-size-s grey1-font">
+          <div className="float-input">
+            <div className="label">
               {this.props.msg.pkg.get("cfg.bg.repeat")}
             </div>
             <input
@@ -740,27 +736,23 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
               type="text"
               onChange={this.changeBgRepeat}
               value={this.props.ui.bg.repeat}
-                className="black0-font"
               placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
             />
-            </div>,
-
-            <div className="padding-t-m padding-b-m padding-r-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("cfg.bg.pos")}
           </div>
+
+          <div className="float-input">
+            <div className="label">{this.props.msg.pkg.get("cfg.bg.pos")}</div>
             <input
               name="bg_pos"
               type="text"
               onChange={this.changeBgPos}
               value={this.props.ui.bg.position}
-                className="black0-font"
               placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
             />
-            </div>,
+          </div>
 
-            <div className="padding-t-m padding-b-m padding-r-m">
-              <div className="font-size-s grey1-font">
+          <div className="float-input">
+            <div className="label">
               {this.props.msg.pkg.get("cfg.bg.align")}
             </div>
             <input
@@ -768,12 +760,10 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
               type="text"
               onChange={this.changeBgAlign}
               value={this.props.ui.bg.align}
-                className="black0-font"
               placeholder={this.props.msg.pkg.get("cfg.bg.align")}
             />
-            </div>,
-          ])}
-        />
+          </div>
+        </div>
       </div>
     );
   }

src/client/web/src/components/pane_settings.tsx

@@ -386,7 +386,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             <Flowgrid
               grids={List([
                 <div className="padding-t-m padding-b-m padding-r-m">
-                  <div className="font-size-s grey1-font">
+                  <div className="font-s grey1-font">
                     {this.props.msg.pkg.get("prefer.theme.url")}
                   </div>
                   <input