fix(root_frame): unify css names in root frame

public/static/css/style.css

@@ -63,12 +63,12 @@ body input {
   display: block;
 }
 
-.container-center {
+/* .container-center {
   margin: 2rem auto auto auto;
   width: 96%;
   max-width: 80rem;
   z-index: 9;
-}
+} */
 
 .layouter .vcell {
   text-align: left;

public/static/css/white.css

@@ -1,69 +1,30 @@
-.theme-white .bg {
+#root-frame {}
-  background-color: #ecf0f1;
-}
 
-.theme-white .text-color {
+.theme-default #bg {
-  color: #34495e;
-}
-
-.theme-white .bg-img {
   background: url("/static/img/textured_paper.png") repeat fixed center;
-  /* background: url("/static/img/huangpu.jpg") repeat fixed center; */
+} 
-}
 
-.theme-white .top-bar {
+.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);
   -webkit-backdrop-filter: blur(9.5px);
 }
 
-/* .theme-white div.hr {
+.theme-default .op-bar {
-  background-color: white;
-} */
-
-.theme-white .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-white .panel {
+.theme-default .container-center {
-  background-color: #ccc;
+  margin: 2rem auto auto auto;
+  width: 96%;
+  max-width: 80rem;
+  z-index: 9;
 }
 
-.theme-white .panel-head {
+.theme-default #tail {
-  /* background-color: white; */
-  border-bottom: solid 1px #ecf0f1;
-}
-
-.theme-white .panel-head-menu {
-  background-color: white;
   color: #34495e;
-  border-bottom: solid 1px #ecf0f1;
+}
-}
-
-.theme-white .panel-body {
-  /* background-color: #fafafa; */
-  color: #34495e;
-}
-
-.theme-white .nav-bar {
-  background-color: rgba(255, 255, 255, 0.9);
-  color: #7f8c8d;
-  fill: black;
-}
-
-.theme-white .news .title {
-  color: #34495e;
-}
-
-.theme-white .border {
-  background-color: #e0e0e0;
-}
-
-.theme-white .wide-btn {
-  color: white;
-  background-color: #16a085;
-}

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

@@ -38,14 +38,16 @@ export class RootFrame extends React.Component<Props, State, {}> {
       bgStyle = {};
     }
 
+    const fontSizeClass = "font-m";
+    const theme = "theme-default";
     const showBrowser =
       this.props.login.userRole === roleVisitor && !this.props.browser.isSharing
         ? "hidden"
         : "";
 
     return (
-      <div className="theme-white desktop">
+      <div id="root-frame" className={`${theme} ${fontSizeClass}`}>
-        <div id="bg" className="bg bg-img font-m" style={bgStyle}>
+        <div id="bg" style={bgStyle}>
           <Panes
             panes={this.props.panes}
             login={this.props.login}
@@ -72,7 +74,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
             />
           </div>
 
-          <div id="tail" className="container-center black0-font">
+          <div id="tail" className="container-center">
             <a href="https://github.com/ihexxa/quickshare">Quickshare</a> -
             quick and simple file sharing.
           </div>