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,17 +83,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
             update={this.props.update}
           />
 
-          <div className={`container-center ${showBrowser}`}>
-            {/* <Browser
-              browser={this.props.browser}
-              msg={this.props.msg}
-              login={this.props.login}
-              ui={this.props.ui}
-              update={this.props.update}
-            /> */}
-
-            <div className="container">
-              <div className="padding-m">
+          <div id="top-menu">
             <Tabs
               targetControl={controlName}
               tabIcons={Map<string, IconProps>({
@@ -120,7 +110,15 @@ export class RootFrame extends React.Component<Props, State, {}> {
               update={this.props.update}
             />
           </div>
-            </div>
+
+          <div className={`container-center ${showBrowser}`}>
+            {/* <Browser
+              browser={this.props.browser}
+              msg={this.props.msg}
+              login={this.props.login}
+              ui={this.props.ui}
+              update={this.props.update}
+            /> */}
 
             <span className={filesPanelClass}>
               <FilesPanel