fix(root_frame): move panel tabs to top menu

public/static/css/white.css

@@ -10,7 +10,6 @@
 
 .theme-default #top-bar {
   background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
   backdrop-filter: blur(9.5px);
   color: #16a085;
   padding: 1rem 2rem 1rem 2rem;
@@ -26,6 +25,19 @@
   min-width: 7rem;
 }
 
+.theme-default #top-menu {
+  background: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
+  backdrop-filter: blur(9.5px);
+  color: #16a085;
+  padding: 1rem 2rem 1rem 2rem;
+  -webkit-backdrop-filter: blur(9.5px);
+}
+
+.theme-default #top-menu button {
+  background: transparent;
+}
+
 .theme-default #panes {
   position: fixed;
   left: 0;

src/client/web/src/components/root_frame.tsx

@@ -83,6 +83,34 @@ export class RootFrame extends React.Component<Props, State, {}> {
             update={this.props.update}
           />
 
+          <div id="top-menu">
+            <Tabs
+              targetControl={controlName}
+              tabIcons={Map<string, IconProps>({
+                filesPanel: {
+                  name: "RiFolder2Fill",
+                  size: "1.6rem",
+                  color: "cyan0",
+                },
+                uploadingsPanel: {
+                  name: "RiUploadCloudFill",
+                  size: "1.6rem",
+                  color: "blue0",
+                },
+                sharingsPanel: {
+                  name: "RiShareBoxLine",
+                  size: "1.6rem",
+                  color: "purple0",
+                },
+              })}
+              login={this.props.login}
+              admin={this.props.admin}
+              ui={this.props.ui}
+              msg={this.props.msg}
+              update={this.props.update}
+            />
+          </div>
+
           <div className={`container-center ${showBrowser}`}>
             {/* <Browser
               browser={this.props.browser}
@@ -92,36 +120,6 @@ export class RootFrame extends React.Component<Props, State, {}> {
               update={this.props.update}
             /> */}
 
-            <div className="container">
-              <div className="padding-m">
-                <Tabs
-                  targetControl={controlName}
-                  tabIcons={Map<string, IconProps>({
-                    filesPanel: {
-                      name: "RiFolder2Fill",
-                      size: "1.6rem",
-                      color: "cyan0",
-                    },
-                    uploadingsPanel: {
-                      name: "RiUploadCloudFill",
-                      size: "1.6rem",
-                      color: "blue0",
-                    },
-                    sharingsPanel: {
-                      name: "RiShareBoxLine",
-                      size: "1.6rem",
-                      color: "purple0",
-                    },
-                  })}
-                  login={this.props.login}
-                  admin={this.props.admin}
-                  ui={this.props.ui}
-                  msg={this.props.msg}
-                  update={this.props.update}
-                />
-              </div>
-            </div>
-
             <span className={filesPanelClass}>
               <FilesPanel
                 filesInfo={this.props.filesInfo}