From df801a9397cc86fc09c7a393ec94f0be0be26ea9 Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Mon, 20 Dec 2021 19:40:30 +0800
Subject: [PATCH] fix(fe): small fixes

---
 public/static/css/white.css                   |  2 +-
 .../__test__/panel_sharings.test.tsx          |  2 +-
 src/client/web/src/components/panel_files.tsx | 58 +++++++++++--------
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/public/static/css/white.css b/public/static/css/white.css
index 5654577..9fd933a 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -34,7 +34,7 @@
 }
 
 .theme-default #top-menu {
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.5);
   box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
   backdrop-filter: blur(9.5px);
   color: #16a085;
diff --git a/src/client/web/src/components/__test__/panel_sharings.test.tsx b/src/client/web/src/components/__test__/panel_sharings.test.tsx
index f012eb8..b147a5c 100644
--- a/src/client/web/src/components/__test__/panel_sharings.test.tsx
+++ b/src/client/web/src/components/__test__/panel_sharings.test.tsx
@@ -10,7 +10,7 @@ import { MockUsersClient, resps as usersResps } from "../../client/users_mock";
 import { MockFilesClient, resps as filesResps } from "../../client/files_mock";
 import { MockSettingsClient } from "../../client/settings_mock";
 
-xdescribe("SharingsPanel", () => {
+describe("SharingsPanel", () => {
   const initSharingsPanel = (): any => {
     const mockWorkerClass = mock(MockWorker);
     const mockWorker = instance(mockWorkerClass);
diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx
index 59aba28..dedb594 100644
--- a/src/client/web/src/components/panel_files.tsx
+++ b/src/client/web/src/components/panel_files.tsx
@@ -416,32 +416,40 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
     const ops = (
       <div id="upload-op">
-        <div className="float">
-          <input
-            type="text"
-            onChange={this.onNewFolderNameChange}
-            value={this.state.newFolderName}
-            placeholder={this.props.msg.pkg.get("browser.folder.name")}
-            className="float"
-          />
-          <button onClick={this.onMkDir} className="float">
-            {this.props.msg.pkg.get("browser.folder.add")}
-          </button>
-        </div>
+        <Flexbox
+          children={List([
+            <div>
+              <button onClick={this.onMkDir} className="float cyan-btn">
+                {this.props.msg.pkg.get("browser.folder.add")}
+              </button>
+              <input
+                type="text"
+                onChange={this.onNewFolderNameChange}
+                value={this.state.newFolderName}
+                placeholder={this.props.msg.pkg.get("browser.folder.name")}
+                className="float"
+              />
+            </div>,
 
-        <div className="float">
-          <button onClick={this.onClickUpload}>
-            {this.props.msg.pkg.get("browser.upload")}
-          </button>
-          <input
-            type="file"
-            onChange={this.addUploads}
-            multiple={true}
-            value={this.state.uploadFiles}
-            ref={this.assignInput}
-            className="hidden"
-          />
-        </div>
+            <div>
+              <button onClick={this.onClickUpload} className="cyan-btn">
+                {this.props.msg.pkg.get("browser.upload")}
+              </button>
+              <input
+                type="file"
+                onChange={this.addUploads}
+                multiple={true}
+                value={this.state.uploadFiles}
+                ref={this.assignInput}
+                className="hidden"
+              />
+            </div>,
+          ])}
+          childrenStyles={List([
+            { flex: "0 0 70%" },
+            { flex: "0 0 30%", justifyContent: "flex-end" },
+          ])}
+        />
       </div>
     );