feat(fe/settings): add theme and language settings

src/client/web/src/components/pane_settings.tsx

@@ -269,6 +269,41 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             />
           </div>
 
+          <div className="hr white0-bg margin-t-m margin-b-m"></div>
+          <div>
+            <Flexbox
+              children={List([
+                <span className="title-m bold">
+                  {this.props.msg.pkg.get("settings.customLan")}
+                </span>,
+
+                <span>
+                  <button onClick={this.syncPreferences}>
+                    {this.props.msg.pkg.get("update")}
+                  </button>
+                </span>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+            <Flowgrid
+              grids={List([
+                <div className="padding-t-m padding-b-m padding-r-m">
+                  <div className="font-size-s grey1-font">
+                    {this.props.msg.pkg.get("settings.lanPackURL")}
+                  </div>
+                  <input
+                    type="text"
+                    onChange={this.changeLanPackURL}
+                    value={this.props.login.preferences.lanPackURL}
+                    className="black0-font"
+                    style={{ width: "20rem" }}
+                    placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
+                  />
+                </div>,
+              ])}
+            />
+          </div>
+
           <div className="hr white0-bg margin-t-m margin-b-m"></div>
           <div>
             <Flexbox
@@ -346,6 +381,42 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               ])}
             />
           </div>
+
+          <div className="hr white0-bg margin-t-m margin-b-m"></div>
+          <div>
+            <Flexbox
+              children={List([
+                <span className="title-m bold">
+                  {this.props.msg.pkg.get("prefer.theme")}
+                </span>,
+
+                <span>
+                  <button onClick={this.syncPreferences}>
+                    {this.props.msg.pkg.get("update")}
+                  </button>
+                </span>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+            <Flowgrid
+              grids={List([
+                <div className="padding-t-m padding-b-m padding-r-m">
+                  <div className="font-size-s grey1-font">
+                    {this.props.msg.pkg.get("prefer.theme.url")}
+                  </div>
+                  <input
+                    type="text"
+                    onChange={this.changeCSSURL}
+                    value={this.props.login.preferences.cssURL}
+                    className="black0-font"
+                    style={{ width: "20rem" }}
+                    placeholder={this.props.msg.pkg.get("prefer.theme.url")}
+                  />
+                </div>,
+              ])}
+            />
+          </div>
+
         </div>
       </div>
     );

src/client/web/src/i18n/en_US.ts

@@ -99,4 +99,8 @@ export const msgs: Map<string, string> = Map({
   "bg.pos.alert": "Position only supports: top, bottom, left, right, center",
   "bg.repeat.alert": "Repeat only supports: repeat-x, repeat-y, repeat, space, round, no-repeat",
   "bg.align.alert": "Align only supports: scroll, fixed, local",
+  "prefer.theme": "Theme",
+  "prefer.theme.url": "Theme URL",
+  "settings.customLan": "Customized Language Pack",
+  "settings.lanPackURL": "Language Pack URL",
 });

src/client/web/src/i18n/zh_CN.ts

@@ -99,4 +99,8 @@ export const msgs: Map<string, string> = Map({
   "bg.repeat.alert":
     "Repeat目前仅支持repeat-x, repeat-y, repeat, space, round, no-repeat",
   "bg.align.alert": "Align目前仅支持scroll, fixed, local",
+  "prefer.theme": "主题",
+  "prefer.theme.url": "主题链接",
+  "settings.customLan": "自定义语言包",
+  "settings.lanPackURL": "语言包链接",
 });