fix(fe/styles): clean up incorrect styles

public/static/css/dark.css

@@ -164,7 +164,7 @@
 .theme-dark input {
   font-size: 1.2rem;
   color: #999;
-  background-color: rgb(64 64 64);
+  background-color: #404040;
   border: solid 1px #95a5a6;
 }
 
@@ -348,10 +348,10 @@
   color: #f1c40f;
 }
 .theme-dark .major-bg {
-  background-color: #242424;
+  background-color: #404040;
 }
 .theme-dark .normal-bg {
-  background-color: #697384;
+  background-color: #242424;
 }
 .theme-dark .focus-bg {
   background-color: #16a085;
@@ -374,5 +374,5 @@
 }
 .theme-dark .button-default {
   color: #999;
-  background-color: rgb(64 64 64);
+  background-color: #404040;
 }

public/static/css/white.css

@@ -258,7 +258,6 @@
   padding: 1rem;
   color: #697384;
   margin: 1rem 0 0 0;
-  background-color: #f6f6f6;
   white-space: nowrap;
   overflow: auto;
 }
@@ -347,25 +346,19 @@
   color: #f1c40f;
 }
 
-.theme-default .lightest-bg {
-  background-color: white;
-}
 .theme-default .major-bg {
   background-color: #f6f6f6;
 }
 .theme-default .normal-bg {
-  background-color: #ecf0f6;
+  background-color: white;
 }
 .theme-default .focus-bg {
   background-color: #16a085;
 }
 .theme-default .minor-bg {
-  background-color: #2c3e50;
+  background-color: #ecf0f6;
 }
-.theme-default button {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-.theme-default  ::placeholder {
+.theme-default ::placeholder {
   color: #95a5a6;
 }
 .theme-default a {
@@ -374,9 +367,6 @@
 .theme-default a:hover {
   color: cc#2ecc71;
 }
-.theme-default input {
-  background-color: rgba(0, 0, 0, 0.15);
-}
 .theme-default input:focus {
   opacity: 0.8;
   box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
@@ -384,4 +374,4 @@
 .theme-default .button-default {
   color: #697384;
   background-color: #ecf0f6;
-}
+}

src/client/web/src/components/control/tabs.tsx

@@ -43,7 +43,7 @@ export class Tabs extends React.Component<Props, State, {}> {
 
     const titleIcon =
       this.props.titleIcon != null
-        ? getIcon(this.props.titleIcon, "2rem", "major")
+        ? getIcon(this.props.titleIcon, "2rem", "normal")
         : null;
     const options = this.props.ui.control.options.get(this.props.targetControl);
     const tabs = options.map((option: string) => {
@@ -51,10 +51,10 @@ export class Tabs extends React.Component<Props, State, {}> {
         ? this.props.tabIcons.get(option)
         : defaultIconProps;
 
-      const iconColor = displaying === option ? iconProps.color : "major";
+      const iconColor = displaying === option ? iconProps.color : "normal";
       const icon = getIcon(iconProps.name, iconProps.size, iconColor);
       const fontColor =
-        displaying === option ? `${colorClass(iconColor)}-font` : "major-font";
+        displaying === option ? `${colorClass(iconColor)}-font` : "normal-font";
 
       return (
         <button

src/client/web/src/components/dialog_settings.tsx

@@ -12,7 +12,6 @@ import { Container } from "./layout/container";
 import { LoginProps } from "./pane_login";
 import { roleAdmin } from "../client";
 import { settingsTabsCtrl } from "../common/controls";
-import { Title } from "./visual/title";
 
 export interface Props {
   admin: AdminProps;

src/client/web/src/components/layers.tsx

@@ -101,7 +101,7 @@ export class Layers extends React.Component<Props, State, {}> {
                 children={List([
                   <Title
                     title={this.props.msg.pkg.get("pane.settings")}
-                    iconColor="black"
+                    iconColor="major"
                     iconName="RiListSettingsFill"
                   />,
                   <button

src/client/web/src/components/pane_admin.tsx

@@ -247,7 +247,7 @@ export class UserForm extends React.Component<
 
         <div></div>
 
-        <div className={`info ${foldedClass}`}>
+        <div className={`info major-bg ${foldedClass}`}>
           <div>
             <Flexbox
               children={List([

src/client/web/src/components/panel_files.tsx

@@ -552,7 +552,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         ? "margin-t-m padding-m"
         : "no-height";
       const desc = (
-        <div className={`${descStateClass} desc major-font minor-bg`}>
+        <div className={`${descStateClass} major-font major-bg`}>
           <div className="column">
             <div className="card">
               <span className="title-m minor-font">{pathTitle}</span>
@@ -584,7 +584,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                 ])}
                 childrenStyles={List([{}, { justifyContent: "flex-end" }])}
               />
-              <div className="info">{item.sha1}</div>
+              <div className="info minor-bg">{item.sha1}</div>
             </div>
           </div>
         </div>
@@ -645,7 +645,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         <Container>
           <Title
             title={this.props.msg.pkg.get("endpoints")}
-            iconColor="major"
+            iconColor="normal"
             iconName="RiGridFill"
           />
           <div className="hr"></div>

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

@@ -55,7 +55,7 @@ export class TopBar extends React.Component<Props, State, {}> {
         : "";
 
     return (
-      <div id="top-bar" className="focus-font major-bg">
+      <div id="top-bar" className="focus-font normal-bg">
         <Flexbox
           children={List([
             <a