fix(fe): fix incorrect chinses font

public/static/css/dark.css

@@ -244,6 +244,10 @@
   margin: 3rem auto 8rem auto;
 }
 
+.theme-dark .tabs button {
+  padding: 0.5rem 1rem;
+}
+
 /* +composition */
 
 .theme-dark .container {

public/static/css/white.css

@@ -241,6 +241,10 @@
   margin: 3rem auto 8rem auto;
 }
 
+.theme-default .tabs button {
+  padding: 0.5rem 1rem;
+}
+
 /* +composition */
 
 .theme-default .container {

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

@@ -64,18 +64,13 @@ export class Tabs extends React.Component<Props, State, {}> {
           }}
           className="float-l margin-r-m minor-bg"
         >
-          <Flexbox
-            children={List([
-              <span>{titleIcon}</span>,
-              <span className="margin-r-s">{icon}</span>,
-              <span className={fontColor}>
-                {this.props.msg.pkg.get(
-                  `control.${this.props.targetControl}.${option}`
-                )}
-              </span>,
-            ])}
-            childrenStyles={List([{}, {}, {}])}
-          />
+          <div className="float-l icon-s margin-r-s">{icon}</div>
+          <div className={`float-l font-s ${fontColor}`}>
+            {this.props.msg.pkg.get(
+              `control.${this.props.targetControl}.${option}`
+            )}
+          </div>
+          <div className="fix"></div>
         </button>
       );
     });

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

@@ -97,24 +97,24 @@ export class Layers extends React.Component<Props, State, {}> {
         <div id="settings-layer" className={`layer ${showSettings}`}>
           <div id="root-container">
             <Container>
-              <Flexbox
-                children={List([
-                  <Title
-                    title={this.props.msg.pkg.get("pane.settings")}
-                    iconColor="major"
-                    iconName="RiListSettingsFill"
-                  />,
-                  <button
-                    className="button-default"
-                    onClick={() => {
-                      this.setControlOption(settingsDialogCtrl, ctrlOff);
-                    }}
-                  >
-                    {this.props.msg.pkg.get("panes.close")}
-                  </button>,
-                ])}
-                childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-              />
+              <div className="col-l">
+                <Title
+                  title={this.props.msg.pkg.get("pane.settings")}
+                  iconColor="major"
+                  iconName="RiListSettingsFill"
+                />
+              </div>
+              <div className="col-r">
+                <button
+                  className="button-default"
+                  onClick={() => {
+                    this.setControlOption(settingsDialogCtrl, ctrlOff);
+                  }}
+                >
+                  {this.props.msg.pkg.get("panes.close")}
+                </button>
+              </div>
+              <div className="fix"></div>
             </Container>
 
             <SettingsDialog

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

@@ -5,7 +5,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { FilesPanel, FilesProps } from "./panel_files";
 import { UploadingsPanel, UploadingsProps } from "./panel_uploadings";
 import { SharingsPanel, SharingsProps } from "./panel_sharings";
-import { IconProps } from "./visual/icons";
+import { IconProps, iconSize } from "./visual/icons";
 import { Tabs } from "./control/tabs";
 import { LoginProps } from "./pane_login";
 import { Layers } from "./layers";
@@ -76,7 +76,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
             update={this.props.update}
           />
 
-          <TopBar
+        <TopBar
             login={this.props.login}
             msg={this.props.msg}
             ui={this.props.ui}
@@ -89,17 +89,17 @@ export class RootFrame extends React.Component<Props, State, {}> {
               tabIcons={Map<string, IconProps>({
                 filesPanel: {
                   name: "RiFolder2Fill",
-                  size: "1.6rem",
+                  size: iconSize("s"),
                   color: "focus",
                 },
                 uploadingsPanel: {
                   name: "RiUploadCloudFill",
-                  size: "1.6rem",
+                  size: iconSize("s"),
                   color: "focus",
                 },
                 sharingsPanel: {
                   name: "RiShareBoxLine",
-                  size: "1.6rem",
+                  size: iconSize("s"),
                   color: "focus",
                 },
               })}

src/client/web/src/components/visual/title.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { List } from "immutable";
 
 import { Flexbox } from "../layout/flexbox";
-import { getIconWithProps } from "./icons";
+import { getIconWithProps, iconSize } from "./icons";
 import { colorClass } from "./colors";
 
 export interface Props {
@@ -15,15 +15,16 @@ export const Title = (props: Props) => {
   return (
     <Flexbox
       children={List([
-        <Flexbox
-          children={List([
-            getIconWithProps(props.iconName, {
-              size: "3.2rem",
+        <div>
+          <div className="float-l icon-l">
+            {getIconWithProps(props.iconName, {
+              size: iconSize("l"),
               className: `margin-r-m ${colorClass(props.iconColor)}-font`,
-            }),
-            <span className="title-m bold">{props.title}</span>,
-          ])}
-        />,
+            })}
+          </div>
+          <div className="title-m float-l bold">{props.title}</div>
+          <div className="fix"></div>
+        </div>,
 
         <span></span>,
       ])}