diff options
| author | Andrej Mihajlov <and@codeispoetry.ru> | 2017-02-17 18:13:09 +0000 |
|---|---|---|
| committer | Andrej Mihajlov <and@codeispoetry.ru> | 2017-02-17 18:13:09 +0000 |
| commit | a19608c59d1639c6dac4bd7a2f3a06a8ee4d67a3 (patch) | |
| tree | 6dde5ac10d549b5c6159f0c505a46d9dd24f012c | |
| parent | 832b96fe45a7ebaf1a38c882e618d0397b836e14 (diff) | |
| download | mullvadvpn-a19608c59d1639c6dac4bd7a2f3a06a8ee4d67a3.tar.xz mullvadvpn-a19608c59d1639c6dac4bd7a2f3a06a8ee4d67a3.zip | |
Optimize login layout
| -rw-r--r-- | app/components/Login.css | 6 | ||||
| -rw-r--r-- | app/components/Login.js | 80 |
2 files changed, 40 insertions, 46 deletions
diff --git a/app/components/Login.css b/app/components/Login.css index 9417dc5537..7d65dc051c 100644 --- a/app/components/Login.css +++ b/app/components/Login.css @@ -44,12 +44,10 @@ } .login-form { - padding: 0 24px; - flex: 1 1 100%; display: flex; flex-direction: column; - justify-content: flex-end; - margin-bottom: 65px; + padding: 0 24px; + margin: auto 0 65px; } .login-form__title { diff --git a/app/components/Login.js b/app/components/Login.js index c2ff818bc9..6ec95562ea 100644 --- a/app/components/Login.js +++ b/app/components/Login.js @@ -145,52 +145,48 @@ export default class Login extends Component { <Container> <div className="login"> <div className="login-form"> - <div> - - { /* show spinner when connecting */ } - <If condition={ isConnecting }> - <Then> - <div className="login-form__status-icon"> - <img src="./assets/images/icon-spinner.svg" alt="" /> - </div> - </Then> - </If> - - { /* show error icon when failed */ } - <If condition={ isFailed }> - <Then> - <div className="login-form__status-icon"> - <img src="./assets/images/icon-fail.svg" alt="" /> - </div> - </Then> - </If> + { /* show spinner when connecting */ } + <If condition={ isConnecting }> + <Then> + <div className="login-form__status-icon"> + <img src="./assets/images/icon-spinner.svg" alt="" /> + </div> + </Then> + </If> - { /* show tick when logged in */ } - <If condition={ isLoggedIn }> - <Then> - <div className="login-form__status-icon"> - <img src="./assets/images/icon-success.svg" alt="" /> - </div> - </Then> - </If> + { /* show error icon when failed */ } + <If condition={ isFailed }> + <Then> + <div className="login-form__status-icon"> + <img src="./assets/images/icon-fail.svg" alt="" /> + </div> + </Then> + </If> - <div className="login-form__title">{ title }</div> - <div className={ 'login-form__fields' + (isLoggedIn ? ' login-form__fields--invisible' : '') }> - <div className="login-form__subtitle">{ subtitle }</div> - <div className={ inputWrapClass }> - <input className={ inputClass } - type="text" - placeholder="e.g 0000 0000 0000" - onChange={ ::this.handleInputChange } - onKeyUp={ ::this.handleInputKeyUp } - value={ displayAccount } - disabled={ isConnecting } - autoFocus={ true } - ref={ autoFocusRef } /> - <button className={ submitClass } onClick={ ::this.handleLogin }></button> + { /* show tick when logged in */ } + <If condition={ isLoggedIn }> + <Then> + <div className="login-form__status-icon"> + <img src="./assets/images/icon-success.svg" alt="" /> </div> - </div> + </Then> + </If> + <div className="login-form__title">{ title }</div> + <div className={ 'login-form__fields' + (isLoggedIn ? ' login-form__fields--invisible' : '') }> + <div className="login-form__subtitle">{ subtitle }</div> + <div className={ inputWrapClass }> + <input className={ inputClass } + type="text" + placeholder="e.g 0000 0000 0000" + onChange={ ::this.handleInputChange } + onKeyUp={ ::this.handleInputKeyUp } + value={ displayAccount } + disabled={ isConnecting } + autoFocus={ true } + ref={ autoFocusRef } /> + <button className={ submitClass } onClick={ ::this.handleLogin }></button> + </div> </div> </div> <div className={footerClass}> |