fix(pane_login): unify styles

public/static/css/style.css

@@ -4,12 +4,12 @@ body button {
   background-color: #ecf0f6;
 }
 
-body input {
+/* body input {
   font-size: 1.2rem;
   color: #697384;
   background-color: #ecf0f6;
   border: solid 1px #95a5a6;
-}
+} */
 
 #bg {
   position: fixed;
@@ -649,12 +649,12 @@ div.hr {
   font-size: 1.4rem;
 }
 
-.captcha {
+/* .captcha {
   width: 14rem;
   height: 3rem;
   border: solid 1px #95a5a6;
   border-radius: 0.5rem;
-}
+} */
 
 .user {
   font-weight: bold;

public/static/css/white.css

@@ -57,6 +57,10 @@
   text-transform: capitalize;
 }
 
+.theme-default #pane-login {
+  padding: 2rem;
+}
+
 .theme-default .op-bar {
   background: rgba(255, 255, 255, 1);
   box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
@@ -71,10 +75,45 @@
   z-index: 9;
 }
 
+.theme-default .float-input {
+  display: inline-block;
+  margin: auto 1rem 1rem auto;
+}
+
+.theme-default .float-input:last-child {
+  margin: auto 1rem auto auto;
+}
+
+.theme-default .float-input .label {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: #7f8c8d;
+}
+
+.theme-default #btn-login {
+  background-color: #1abc9c;
+  color: #fff;
+}
+
 .theme-default #tail {
   color: #34495e;
 }
 
+.theme-default input {
+  font-size: 1.2rem;
+  color: #34495e;
+  background-color: #ecf0f6;
+  border: solid 1px #95a5a6;
+  margin: 1rem 0;
+}
+
+.captcha {
+  width: 14rem;
+  height: 3rem;
+  border: solid 1px #95a5a6;
+  border-radius: 0.5rem;
+}
+
 .theme-default .h1,
 .theme-default .h2 {
   font-size: 2rem;

src/client/web/src/components/pane_login.tsx

@@ -70,7 +70,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
           return updater().initAll(params);
         } else {
           this.setState({ user: "", pwd: "", captchaInput: "" });
-          alertMsg("Failed to login.");
+          alertMsg(this.props.msg.pkg.get("op.fail"));
           return updater().getCaptchaID();
         }
       })
@@ -94,74 +94,64 @@ export class AuthPane extends React.Component<Props, State, {}> {
 
   render() {
     return (
-      <span>
+      <div
-        <div
+        id="pane-login"
-          className="container"
+        className="container"
-          style={{ display: this.props.login.authed ? "none" : "block" }}
+        style={{ display: this.props.login.authed ? "none" : "block" }}
-        >
+      >
-          <div className="padding-l">
+        <span className="float-input">
-            <span className="inline-block margin-r-m margin-b-m">
+          <div className="label">
-              <div className="font-size-s grey1-font">
+            {this.props.msg.pkg.get("login.username")}
-                {this.props.msg.pkg.get("login.username")}
-              </div>
-              <input
-                name="user"
-                type="text"
-                onChange={this.changeUser}
-                value={this.state.user}
-                className="black0-font margin-t-m margin-b-m margin-r-m"
-                placeholder={this.props.msg.pkg.get("login.username")}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("login.pwd")}
-              </div>
-              <input
-                name="pwd"
-                type="password"
-                onChange={this.changePwd}
-                value={this.state.pwd}
-                className="black0-font margin-t-m margin-b-m"
-                placeholder={this.props.msg.pkg.get("login.pwd")}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("login.captcha")}
-              </div>
-              <Flexbox
-                children={List([
-                  <input
-                    name="captcha"
-                    type="text"
-                    onChange={this.changeCaptcha}
-                    value={this.state.captchaInput}
-                    className="black0-font margin-t-m margin-b-m margin-r-m"
-                    placeholder={this.props.msg.pkg.get("login.captcha")}
-                  />,
-                  <img
-                    src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
-                    className="captcha"
-                    onClick={this.refreshCaptcha}
-                  />,
-                ])}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m margin-b-m">
-              <button
-                onClick={this.login}
-                className="green0-bg white-font margin-t-m margin-b-m"
-              >
-                {this.props.msg.pkg.get("login.login")}
-              </button>
-            </span>
           </div>
-        </div>
+          <input
-      </span>
+            name="user"
+            type="text"
+            onChange={this.changeUser}
+            value={this.state.user}
+            placeholder={this.props.msg.pkg.get("login.username")}
+          />
+        </span>
+
+        <span className="float-input">
+          <div className="label">{this.props.msg.pkg.get("login.pwd")}</div>
+          <input
+            name="pwd"
+            type="password"
+            onChange={this.changePwd}
+            value={this.state.pwd}
+            placeholder={this.props.msg.pkg.get("login.pwd")}
+          />
+        </span>
+
+        <span className="float-input">
+          <div className="label">{this.props.msg.pkg.get("login.captcha")}</div>
+          <Flexbox
+            children={List([
+              <input
+                name="captcha"
+                type="text"
+                onChange={this.changeCaptcha}
+                value={this.state.captchaInput}
+                placeholder={this.props.msg.pkg.get("login.captcha")}
+              />,
+              <img
+                src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
+                className="captcha"
+                onClick={this.refreshCaptcha}
+              />,
+            ])}
+          />
+        </span>
+
+        <span className="float-input">
+          <button
+            id="btn-login"
+            onClick={this.login}
+          >
+            {this.props.msg.pkg.get("login.login")}
+          </button>
+        </span>
+      </div>
     );
   }
 }

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

@@ -97,10 +97,12 @@ export const msgs: Map<string, string> = Map({
   reset: "Reset",
   "bg.url.alert": "Image URL is too short or too long",
   "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.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",
+  "op.fail": "Operation Failed",
 });

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

@@ -103,4 +103,5 @@ export const msgs: Map<string, string> = Map({
   "prefer.theme.url": "主题链接",
   "settings.customLan": "自定义语言包",
   "settings.lanPackURL": "语言包链接",
+  "op.fail": "操作失败",
 });