fix(dialog_login): clean up login dialog and fix style issues

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

@@ -82,15 +82,15 @@ export class Layers extends React.Component<Props, State, {}> {
         </div>
 
         <div id="login-layer" className={`layer ${loginPaneClass}`}>
-          <div id="root-container">
+            {/* <div id="root-container"> */}
-            <AuthPane
+              <AuthPane
-              login={this.props.login}
+                login={this.props.login}
-              ui={this.props.ui}
+                ui={this.props.ui}
-              update={this.props.update}
+                update={this.props.update}
-              msg={this.props.msg}
+                msg={this.props.msg}
-              enabled={!hideLogin}
+                enabled={!hideLogin}
-            />
+              />
-          </div>
+          {/* </div> */}
         </div>
 
         <div id="settings-layer" className={`layer ${showSettings}`}>

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

@@ -69,7 +69,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
     if (this.props.enabled) {
       this.hotkeyHandler.handle(ev);
     }
-  }
+  };
 
   changeUser = (ev: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ user: ev.target.value });
@@ -129,52 +129,47 @@ export class AuthPane extends React.Component<Props, State, {}> {
 
   render() {
     const row3 = this.props.ui.captchaEnabled ? (
-      <Flexbox
+      <div>
-        children={List([
+        <div id="captcha-input" className="float-l">
-          <div className="input-wrap">
+          <input
-            <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>
-            />
-          </div>,
 
-          <img
+        <img
-            id="captcha"
+          id="captcha"
-            src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
+          src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
-            className={`captcha ${this.state.captchaLoaded ? "" : "hidden"}`}
+          className={`captcha float-l ${
-            onClick={this.refreshCaptcha}
+            this.state.captchaLoaded ? "" : "hidden"
-            onLoad={() => this.setState({ captchaLoaded: true })}
+          }`}
-          />,
+          onClick={this.refreshCaptcha}
-        ])}
+          onLoad={() => this.setState({ captchaLoaded: true })}
-        childrenStyles={List([
+        />
-          { justifyContent: "flex-start" },
+        <div className="fix"></div>
-          { justifyContent: "flex-end" },
+      </div>
-        ])}
-      />
     ) : null;
 
     return (
       <div
         id="pane-login"
-        className="container"
+        style={{ display: this.props.login.authed ? "none" : "" }}
-        style={{ display: this.props.login.authed ? "none" : "block" }}
       >
         <div className="login-container">
-          <a
+          <div className="padding-t-l padding-b-l margin-l-l margin-r-l">
-            href="https://github.com/ihexxa/quickshare"
+            <a
-            target="_blank"
+              href="https://github.com/ihexxa/quickshare"
-            className="h5"
+              target="_blank"
-            id="title"
+              className="h5 margin-t-m"
-          >
+              id="title"
-            {this.props.ui.clientCfg.siteName}
+            >
-          </a>
+              {this.props.ui.clientCfg.siteName}
+            </a>
 
-          <div className="hr"></div>
+            <div className="hr"></div>
 
-          <div className="input-wrap">
             <input
               name="user"
               type="text"
@@ -182,9 +177,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
               value={this.state.user}
               placeholder={this.props.msg.pkg.get("login.username")}
             />
-          </div>
 
-          <div className="input-wrap">
             <input
               name="pwd"
               type="password"
@@ -192,13 +185,13 @@ export class AuthPane extends React.Component<Props, State, {}> {
               value={this.state.pwd}
               placeholder={this.props.msg.pkg.get("login.pwd")}
             />
+
+            {row3}
+
+            <button id="btn-login" onClick={this.login} className="margin-b-l">
+              {this.props.msg.pkg.get("login.login")}
+            </button>
           </div>
-
-          {row3}
-
-          <button id="btn-login" onClick={this.login}>
-            {this.props.msg.pkg.get("login.login")}
-          </button>
         </div>
       </div>
     );

static/public/css/dark.css

@@ -178,8 +178,8 @@
 }
 
 .theme-dark #pane-login {
-  max-width: 48rem;
+  width: 100%;
-  padding: 2rem;
+  margin: auto;
 }
 
 .theme-dark #pane-login #title {
@@ -188,26 +188,19 @@
 }
 
 .theme-dark #pane-login .login-container {
-  margin: 2rem;
+  background-color: white;
-}
+  margin: 4rem 1rem auto 1rem;
-
-.theme-dark #pane-login .input-wrap {
-  width: 100%;
-  background-color: #eaebf6;
-  margin: 2rem 0 0 0;
   border-radius: 0.6rem;
-  line-height: 4rem;
 }
 
 .theme-dark #pane-login #captcha-input {
-  width: calc(100% - 1rem);
+  width: calc(50% - 1rem);
 }
 
 .theme-dark #pane-login #captcha {
-  width: calc(100% - 1rem);
+  width: calc(50% - 1rem);
   background-color: #eaebf6;
-  border: solid 1px #eaebf6;
+  margin: 0 0 0 2rem;
-  margin: 2rem 0 0 0;
   border-radius: 0.6rem;
   height: 3.8rem;
 }
@@ -216,11 +209,12 @@
 .theme-dark #pane-login input:hover,
 .theme-dark #pane-login input:focus,
 .theme-dark #pane-login input:active {
-  width: 100%;
+  width: calc(100% - 1.6rem);
-  padding: 0;
+  background-color: #eaebf6;
+  border-radius: 0.6rem;
+  padding: 0.6rem 0.8rem;
+  margin: auto auto 2rem auto;
   border: none;
-  margin: 0 1rem;
-  background-color: transparent;
   outline: none;
   box-shadow: none;
 }
@@ -229,7 +223,6 @@
   background-color: #1abc9c;
   color: #fff;
   width: 100%;
-  margin-top: 2rem;
   height: 4rem;
 }
 
@@ -242,7 +235,7 @@
   max-width: 100rem;
   width: 96%;
   text-align: left;
-  margin: 3rem auto 8rem auto;
+  margin: 3rem auto auto auto;
 }
 
 .theme-dark .tabs button {

static/public/css/white.css

@@ -177,7 +177,8 @@
 
 .theme-default #pane-login {
   max-width: 48rem;
-  padding: 2rem;
+  width: 100%;
+  margin: auto;
 }
 
 .theme-default #pane-login #title {
@@ -186,26 +187,19 @@
 }
 
 .theme-default #pane-login .login-container {
-  margin: 2rem;
+  background-color: white;
-}
+  margin: 4rem 1rem auto 1rem;
-
-.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);
+  width: calc(50% - 1rem);
 }
 
 .theme-default #pane-login #captcha {
-  width: calc(100% - 1rem);
+  width: calc(50% - 1rem);
   background-color: #eaebf6;
-  border: solid 1px #eaebf6;
+  margin: 0 0 0 2rem;
-  margin: 2rem 0 0 0;
   border-radius: 0.6rem;
   height: 3.8rem;
 }
@@ -214,20 +208,22 @@
 .theme-default #pane-login input:hover,
 .theme-default #pane-login input:focus,
 .theme-default #pane-login input:active {
-  width: 100%;
+  width: calc(100% - 1.6rem);
-  padding: 0;
+  background-color: #eaebf6;
+  border-radius: 0.6rem;
+  padding: 0.6rem 0.8rem;
+  margin: auto auto 2rem auto;
   border: none;
-  margin: 0 1rem;
-  background-color: transparent;
   outline: none;
   box-shadow: none;
+  height: 2.6rem;
 }
 
+
 .theme-default #btn-login {
   background-color: #1abc9c;
   color: #fff;
   width: 100%;
-  margin-top: 2rem;
   height: 4rem;
 }
 
@@ -240,7 +236,7 @@
   max-width: 100rem;
   width: 96%;
   text-align: left;
-  margin: 3rem auto 8rem auto;
+  margin: 3rem auto auto auto;
 }
 
 .theme-default .tabs button {