From c536730cf9a1eb65d7b1147df727eb134c753b0d Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Sat, 20 Nov 2021 16:01:15 +0800
Subject: [PATCH] fix(topbar): unify styles

---
 public/static/css/color.css                   | 200 ------------------
 public/static/css/style.css                   |  16 +-
 public/static/css/white.css                   |  63 +++++-
 .../build/template/index.template.dev.html    |   1 +
 .../web/build/template/index.template.html    |   1 +
 src/client/web/src/components/topbar.tsx      |  21 +-
 6 files changed, 70 insertions(+), 232 deletions(-)

diff --git a/public/static/css/color.css b/public/static/css/color.css
index bf595b1..43513a6 100644
--- a/public/static/css/color.css
+++ b/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;
-}
diff --git a/public/static/css/style.css b/public/static/css/style.css
index 6e4f740..3a0c5fe 100644
--- a/public/static/css/style.css
+++ b/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 */
diff --git a/public/static/css/white.css b/public/static/css/white.css
index 23a186c..2310d2d 100644
--- a/public/static/css/white.css
+++ b/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;
-}
\ No newline at end of file
+}
+
+.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;
+}
diff --git a/src/client/web/build/template/index.template.dev.html b/src/client/web/build/template/index.template.dev.html
index 83a39a4..3549cb1 100644
--- a/src/client/web/build/template/index.template.dev.html
+++ b/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"
diff --git a/src/client/web/build/template/index.template.html b/src/client/web/build/template/index.template.html
index db3e0a1..722be92 100644
--- a/src/client/web/build/template/index.template.html
+++ b/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"
diff --git a/src/client/web/src/components/topbar.tsx b/src/client/web/src/components/topbar.tsx
index 00c8c32..0333b5f 100644
--- a/src/client/web/src/components/topbar.tsx
+++ b/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
-        id="top-bar"
-        className="top-bar cyan1-font padding-t-m padding-b-m padding-l-l padding-r-l"
-      >
+      <div id="top-bar">
         <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}`}
-                  style={{ minWidth: "7rem" }}
+                  className={`margin-r-m ${showSettings}`}
                 >
                   {this.props.msg.pkg.get("settings")}
                 </button>,
 
                 <button
                   onClick={this.showAdmin}
-                  className={`grey3-bg grey4-font margin-r-m ${showAdmin}`}
-                  style={{ minWidth: "7rem" }}
+                  className={`margin-r-m ${showAdmin}`}
                 >
                   {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>,