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

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

@@ -82,7 +82,7 @@ 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
                 login={this.props.login}
                 ui={this.props.ui}
@@ -90,7 +90,7 @@ export class Layers extends React.Component<Props, State, {}> {
                 msg={this.props.msg}
                 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,44 +129,40 @@ 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
-              id="captcha-input"
             type="text"
             onChange={this.changeCaptcha}
             value={this.state.captchaInput}
             placeholder={this.props.msg.pkg.get("login.captcha")}
           />
-          </div>,
+        </div>
 
         <img
           id="captcha"
           src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
-            className={`captcha ${this.state.captchaLoaded ? "" : "hidden"}`}
+          className={`captcha float-l ${
+            this.state.captchaLoaded ? "" : "hidden"
+          }`}
           onClick={this.refreshCaptcha}
           onLoad={() => this.setState({ captchaLoaded: true })}
-          />,
-        ])}
-        childrenStyles={List([
-          { justifyContent: "flex-start" },
-          { justifyContent: "flex-end" },
-        ])}
         />
+        <div className="fix"></div>
+      </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">
+          <div className="padding-t-l padding-b-l margin-l-l margin-r-l">
             <a
               href="https://github.com/ihexxa/quickshare"
               target="_blank"
-            className="h5"
+              className="h5 margin-t-m"
               id="title"
             >
               {this.props.ui.clientCfg.siteName}
@@ -174,7 +170,6 @@ export class AuthPane extends React.Component<Props, State, {}> {
 
             <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,15 +185,15 @@ export class AuthPane extends React.Component<Props, State, {}> {
               value={this.state.pwd}
               placeholder={this.props.msg.pkg.get("login.pwd")}
             />
-          </div>
 
             {row3}
 
-          <button id="btn-login" onClick={this.login}>
+            <button id="btn-login" onClick={this.login} className="margin-b-l">
               {this.props.msg.pkg.get("login.login")}
             </button>
           </div>
         </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 {