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
+          <div className="float-l icon-s margin-r-s">{icon}</div>
-            children={List([
+          <div className={`float-l font-s ${fontColor}`}>
-              <span>{titleIcon}</span>,
-              <span className="margin-r-s">{icon}</span>,
-              <span className={fontColor}>
             {this.props.msg.pkg.get(
               `control.${this.props.targetControl}.${option}`
             )}
-              </span>,
+          </div>
-            ])}
+          <div className="fix"></div>
-            childrenStyles={List([{}, {}, {}])}
-          />
         </button>
       );
     });

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

@@ -97,13 +97,14 @@ export class Layers extends React.Component<Props, State, {}> {
         <div id="settings-layer" className={`layer ${showSettings}`}>
           <div id="root-container">
             <Container>
-              <Flexbox
+              <div className="col-l">
-                children={List([
                 <Title
                   title={this.props.msg.pkg.get("pane.settings")}
                   iconColor="major"
                   iconName="RiListSettingsFill"
-                  />,
+                />
+              </div>
+              <div className="col-r">
                 <button
                   className="button-default"
                   onClick={() => {
@@ -111,10 +112,9 @@ export class Layers extends React.Component<Props, State, {}> {
                   }}
                 >
                   {this.props.msg.pkg.get("panes.close")}
-                  </button>,
+                </button>
-                ])}
+              </div>
-                childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+              <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";
@@ -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
+        <div>
-          children={List([
+          <div className="float-l icon-l">
-            getIconWithProps(props.iconName, {
+            {getIconWithProps(props.iconName, {
-              size: "3.2rem",
+              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>,
       ])}