Update login button

2 files changed, 29 insertions, 9 deletions

diff --git a/app/components/Login.css b/app/components/Login.css
index 37e0adaac4..22578e02dc 100644
--- a/app/components/Login.css
+++ b/app/components/Login.css
@@ -66,10 +66,14 @@
   transition-duration: 0.3s;
   transition-property: background-color, border-color;
   transition-timing-function: ease-in-out;
+
+  /* this fixes border-radius clipping bug when button animates opacity */
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
 }
 
 .login-form__input-wrap--active {
-  border-color: rgb(26, 48, 77);
+  border-color: rgba(25,46,69,0.4);
 }
 
 .login-form__input-wrap--inactive {
@@ -88,6 +92,7 @@
   width: 100%;
   border-radius: 8px;
   border: 0;
+  overflow: hidden;
   padding: 10px 12px 12px 12px;
   font-family: DINPro;
   font-size: 20px;
@@ -104,7 +109,7 @@
 }
 
 .login-form__input-wrap--error { 
-  border-color: #D0021B;
+  border-color: rgba(208,2,27,0.4);
 }
 
 .login-form__input-wrap--error .login-form__input-field { 
@@ -116,15 +121,27 @@
   border: 0;
   width: 48px;
   background-color: transparent;
-  background-image: url(../assets/images/icon-arrow-inactive.svg);
-  background-position: center;
-  background-repeat: no-repeat;
-  transition: 0.3s all;
+  transition-duration: 0.3s;
+  transition-property: background-color, opacity;
+  transition-timing-function: ease-in-out;
+}
+
+.login-form__submit-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.login-form__submit-icon path {
+  fill: rgba(41,77,115,0.2);
+  transition: fill 0.3s ease-in-out;
 }
 
 .login-form__submit--active {
   background-color: #44ad4d;
-  background-image: url(../assets/images/icon-arrow-active.svg);
+}
+
+.login-form__submit--active .login-form__submit-icon path {
+  fill: #fff;
 }
 
 .login-form__submit--active:hover {
diff --git a/app/components/Login.js b/app/components/Login.js
index 3d1815cdbf..dbca676da4 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -4,6 +4,7 @@ import { Layout, Container, Header } from './Layout';
 import { LoginState } from '../enums';
 import AccountInput from './AccountInput';
 import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
+import LoginArrowSVG from '../assets/images/icon-arrow.svg';
 
 export default class Login extends Component {
   static propTypes = {
@@ -83,7 +84,7 @@ export default class Login extends Component {
     if(this.state.isActive) {
       classes.push('login-form__input-wrap--active');
     }
-    
+
     switch(user.status) {
     case LoginState.connecting:
       classes.push('login-form__input-wrap--inactive');
@@ -187,7 +188,9 @@ export default class Login extends Component {
                         disabled={ isConnecting }
                         autoFocus={ true } 
                         ref={ autoFocusRef } />
-                    <button className={ submitClass } onClick={ ::this.onLogin }></button>
+                    <button className={ submitClass } onClick={ ::this.onLogin }>
+                      <LoginArrowSVG className="login-form__submit-icon" />
+                    </button>
                 </div>
               </div>
             </div>