fix(topbar): unify styles

public/static/css/color.css

@@ -205,203 +205,3 @@
 .black1-bg {
     background-color: #2c3e50;
 }
-
-.padding-xs {
-    padding: 0.25rem;
-}
-
-.padding-s {
-    padding: 0.5rem;
-}
-
-.padding-m {
-    padding: 1rem;
-}
-
-.padding-l {
-    padding: 2rem;
-}
-
-.padding-xl {
-    padding: 4rem;
-}
-
-.padding-l-xs {
-    padding-left: 0.25rem;
-}
-
-.padding-l-s {
-    padding-left: 0.5rem;
-}
-
-.padding-l-m {
-    padding-left: 1rem;
-}
-
-.padding-l-l {
-    padding-left: 2rem;
-}
-
-.padding-l-xl {
-    padding-left: 4rem;
-}
-
-.padding-r-xs {
-    padding-right: 0.25rem;
-}
-
-.padding-r-s {
-    padding-right: 0.5rem;
-}
-
-.padding-r-m {
-    padding-right: 1rem;
-}
-
-.padding-r-l {
-    padding-right: 2rem;
-}
-
-.padding-r-xl {
-    padding-right: 4rem;
-}
-
-.padding-t-xs {
-    padding-top: 0.25rem;
-}
-
-.padding-t-s {
-    padding-top: 0.5rem;
-}
-
-.padding-t-m {
-    padding-top: 1rem;
-}
-
-.padding-t-l {
-    padding-top: 2rem;
-}
-
-.padding-t-xl {
-    padding-top: 4rem;
-}
-
-.padding-b-xs {
-    padding-bottom: 0.25rem;
-}
-
-.padding-b-s {
-    padding-bottom: 0.5rem;
-}
-
-.padding-b-m {
-    padding-bottom: 1rem;
-}
-
-.padding-b-l {
-    padding-bottom: 2rem;
-}
-
-.padding-b-xl {
-    padding-bottom: 4rem;
-}
-
-.margin-xs {
-    margin: 0.25rem;
-}
-
-.margin-s {
-    margin: 0.5rem;
-}
-
-.margin-m {
-    margin: 1rem;
-}
-
-.margin-l {
-    margin: 2rem;
-}
-
-.margin-xl {
-    margin: 4rem;
-}
-
-.margin-l-xs {
-    margin-left: 0.25rem;
-}
-
-.margin-l-s {
-    margin-left: 0.5rem;
-}
-
-.margin-l-m {
-    margin-left: 1rem;
-}
-
-.margin-l-l {
-    margin-left: 2rem;
-}
-
-.margin-l-xl {
-    margin-left: 4rem;
-}
-
-.margin-r-xs {
-    margin-right: 0.25rem;
-}
-
-.margin-r-s {
-    margin-right: 0.5rem;
-}
-
-.margin-r-m {
-    margin-right: 1rem;
-}
-
-.margin-r-l {
-    margin-right: 2rem;
-}
-
-.margin-r-xl {
-    margin-right: 4rem;
-}
-
-.margin-t-xs {
-    margin-top: 0.25rem;
-}
-
-.margin-t-s {
-    margin-top: 0.5rem;
-}
-
-.margin-t-m {
-    margin-top: 1rem;
-}
-
-.margin-t-l {
-    margin-top: 2rem;
-}
-
-.margin-t-xl {
-    margin-top: 4rem;
-}
-
-.margin-b-xs {
-    margin-bottom: 0.25rem;
-}
-
-.margin-b-s {
-    margin-bottom: 0.5rem;
-}
-
-.margin-b-m {
-    margin-bottom: 1rem;
-}
-
-.margin-b-l {
-    margin-bottom: 2rem;
-}
-
-.margin-b-xl {
-    margin-bottom: 4rem;
-}

public/static/css/style.css

@@ -422,21 +422,7 @@ tr button {
 .weight-normal {
   font-weight: normal;
 }
-.h1,
+
-.h2 {
-  font-size: 2rem;
-  font-weight: bold;
-}
-.h3,
-.h4 {
-  font-size: 1.8rem;
-  font-weight: bold;
-}
-.h5,
-.h6 {
-  font-size: 1.6rem;
-  font-weight: bold;
-}
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */

public/static/css/white.css

@@ -4,13 +4,24 @@
   background: url("/static/img/textured_paper.png") repeat fixed center;
 } 
 
-.theme-default .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);
+  color: #16a085;
+  padding: 1rem 2rem 1rem 2rem;
   -webkit-backdrop-filter: blur(9.5px);
 }
 
+.theme-default #topbar-user-info {
+  color: #697384;
+  margin-right: 1rem;
+}
+
+.theme-default #top-bar button {
+  min-width: 7rem;
+}
+
 .theme-default .op-bar {
   background: rgba(255, 255, 255, 1);
   box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
@@ -27,4 +38,52 @@
 
 .theme-default #tail {
   color: #34495e;
-}
+}
+
+.theme-default .h1,
+.theme-default .h2 {
+  font-size: 2rem;
+  font-weight: bold;
+}
+.theme-default .h3,
+.theme-default .h4 {
+  font-size: 1.8rem;
+  font-weight: bold;
+}
+.theme-default .h5,
+.theme-default .h6 {
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+
+
+.theme-default .font-xs {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+}
+
+.theme-default .font-s {
+  font-size: 1.4rem;
+  line-height: 2.1rem;
+}
+
+.theme-default .font-m {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+.theme-default .font-l {
+  font-size: 1.8rem;
+  line-height: 2.7rem;
+}
+
+.theme-default .font-xl {
+  font-size: 2.0rem;
+  line-height: 3rem;
+}
+
+.theme-default button {
+  color: #697384;
+  font-size: 1.2rem;
+  background-color: #ecf0f6;
+}

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

@@ -21,6 +21,7 @@
     <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
       rel="apple-touch-icon"
       sizes="57x57"

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

@@ -21,6 +21,7 @@
     <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
       rel="apple-touch-icon"
       sizes="57x57"

src/client/web/src/components/topbar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { List, Set } from "immutable";
+import { List } from "immutable";
 import { alertMsg, confirmMsg } from "../common/env";
 
 import { ICoreState, MsgProps } from "./core_state";
@@ -89,13 +89,11 @@ export class TopBar extends React.Component<Props, State, {}> {
     const showAdmin = this.props.panes.paneNames.get("admin") ? "" : "hidden";
 
     return (
-      <div
+      <div id="top-bar">
-        id="top-bar"
-        className="top-bar cyan1-font padding-t-m padding-b-m padding-l-l padding-r-l"
-      >
         <Flexbox
           children={List([
             <a
+              id="topbar-title"
               href="https://github.com/ihexxa/quickshare"
               target="_blank"
               className="h5"
@@ -106,27 +104,21 @@ export class TopBar extends React.Component<Props, State, {}> {
             <Flexbox
               children={List([
                 <span className={`${showUserInfo}`}>
-                  <span className="grey3-font font-s margin-r-m">
+                  <span id="topbar-user-info">
                     {this.props.login.userName}
                   </span>
-                  {/* &nbsp;-&nbsp;
-                  <span className="grey0-font font-s margin-r-m">
-                    {this.props.login.userRole}
-                  </span> */}
                 </span>,
 
                 <button
                   onClick={this.showSettings}
-                  className={`grey3-bg grey4-font margin-r-m ${showSettings}`}
+                  className={`margin-r-m ${showSettings}`}
-                  style={{ minWidth: "7rem" }}
                 >
                   {this.props.msg.pkg.get("settings")}
                 </button>,
 
                 <button
                   onClick={this.showAdmin}
-                  className={`grey3-bg grey4-font margin-r-m ${showAdmin}`}
+                  className={`margin-r-m ${showAdmin}`}
-                  style={{ minWidth: "7rem" }}
                 >
                   {this.props.msg.pkg.get("admin")}
                 </button>,
@@ -134,7 +126,6 @@ export class TopBar extends React.Component<Props, State, {}> {
                 <button
                   onClick={this.logout}
                   className={`${showLogin}`}
-                  style={{ minWidth: "7rem" }}
                 >
                   {this.props.msg.pkg.get("login.logout")}
                 </button>,