fix(fe/styles): clean up incorrect styles

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