fix(fe/login): refine login dialog

public/static/css/white.css

@@ -85,9 +85,56 @@
 }
 
 .theme-default #pane-login {
+  max-width: 48rem;
   padding: 2rem;
 }
 
+.theme-default #pane-login #title {
+  font-size: 2rem;
+  text-align: center;
+}
+
+.theme-default #pane-login .login-container {
+  margin: 2rem;
+}
+
+.theme-default #pane-login .input-wrap {
+  width: 100%;
+  background-color: #eaebf6;
+  margin: 2rem 0 0 0;
+  border-radius: 0.6rem;
+  line-height: 4rem;
+}
+
+.theme-default #pane-login #captcha-input {
+  width: calc(100% - 1rem);
+}
+
+.theme-default #pane-login #captcha {
+  width: calc(100% - 1rem);
+  background-color: #eaebf6;
+  border: solid 1px #eaebf6;
+  margin: 2rem 0 0 0;
+  border-radius: 0.6rem;
+  height: 3.8rem;
+}
+
+.theme-default #pane-login input {
+  width: 100%;
+  padding: 0;
+  border: none;
+  margin: 0 1rem;
+  background-color: transparent;
+}
+
+.theme-default #btn-login {
+  background-color: #1abc9c;
+  color: #fff;
+  width: 100%;
+  margin-top: 2rem;
+  height: 4rem;
+}
+
 .theme-default #breadcrumb {
   width: 100%;
 }
@@ -124,8 +171,8 @@
   color: #34495e;
   background-color: white;
   border-radius: 0.8rem;
-  margin-bottom: 2rem;
   box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
+  margin: auto auto 2rem auto;
 }
 
 .container-padding {
@@ -438,11 +485,6 @@
   color: #7f8c8d;
 }
 
-.theme-default #btn-login {
-  background-color: #1abc9c;
-  color: #fff;
-}
-
 .theme-default .pane-title {
   color: black;
   font-size: 1.6rem;
@@ -498,7 +540,7 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background: url("/static/img/textured_paper.png") repeat fixed center;
   overflow: scroll;
   z-index: 100;
 }
@@ -546,13 +588,6 @@
   /* margin: 0.5rem 0 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

@@ -110,55 +110,66 @@ export class AuthPane extends React.Component<Props, State, {}> {
         className="container"
         style={{ display: this.props.login.authed ? "none" : "block" }}
       >
-        <span className="float-input">
+        <div className="login-container">
-          <div className="label">
+          <a
-            {this.props.msg.pkg.get("login.username")}
+            href="https://github.com/ihexxa/quickshare"
+            target="_blank"
+            className="h5"
+            id="title"
+          >
+            Quickshare
+          </a>
+
+          <div className="hr"></div>
+
+          <div className="input-wrap">
+            <input
+              name="user"
+              type="text"
+              onChange={this.changeUser}
+              value={this.state.user}
+              placeholder={this.props.msg.pkg.get("login.username")}
+            />
           </div>
-          <input
-            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="input-wrap">
-          <div className="label">{this.props.msg.pkg.get("login.pwd")}</div>
+            <input
-          <input
+              name="pwd"
-            name="pwd"
+              type="password"
-            type="password"
+              onChange={this.changePwd}
-            onChange={this.changePwd}
+              value={this.state.pwd}
-            value={this.state.pwd}
+              placeholder={this.props.msg.pkg.get("login.pwd")}
-            placeholder={this.props.msg.pkg.get("login.pwd")}
+            />
-          />
+          </div>
-        </span>
 
-        <span className="float-input">
-          <div className="label">{this.props.msg.pkg.get("login.captcha")}</div>
           <Flexbox
             children={List([
-              <input
+              <div className="input-wrap">
-                name="captcha"
+                <input
-                type="text"
+                  id="captcha-input"
-                onChange={this.changeCaptcha}
+                  type="text"
-                value={this.state.captchaInput}
+                  onChange={this.changeCaptcha}
-                placeholder={this.props.msg.pkg.get("login.captcha")}
+                  value={this.state.captchaInput}
-              />,
+                  placeholder={this.props.msg.pkg.get("login.captcha")}
+                />
+              </div>,
               <img
+                id="captcha"
                 src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
                 className="captcha"
                 onClick={this.refreshCaptcha}
               />,
             ])}
+            childrenStyles={List([
+              { justifyContent: "flex-start" },
+              { justifyContent: "flex-end" },
+            ])}
           />
-        </span>
 
-        <span className="float-input">
           <button id="btn-login" onClick={this.login}>
             {this.props.msg.pkg.get("login.login")}
           </button>
-        </span>
+        </div>
       </div>
     );
   }