Update login button

4 files changed, 29 insertions, 16 deletions

diff --git a/app/assets/images/icon-arrow-inactive.svg b/app/assets/images/icon-arrow-inactive.svg
deleted file mode 100755
index 69c7339bc0..0000000000
--- a/app/assets/images/icon-arrow-inactive.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="16px" viewBox="0 0 24 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon-arrow</title>
-    <desc>Mullvad VPN app</desc>
-    <defs></defs>
-        <path fill="rgba(41,77,115,0.2)" d="M18.7015867,9 L14.4331381,12.762659 C13.851665,13.2752305 13.8579999,14.1003943 14.4392669,14.612784 C15.0245863,15.1287461 15.9602099,15.1275926 16.5380921,14.6181865 L23.5668627,8.42228969 C23.8565791,8.16690324 24.000373,7.83391619 23.999837,7.50067932 L24,7.4966702 C23.999589,7.16348359 23.8547954,6.83138119 23.5668627,6.57756713 L16.5380921,0.381670278 C15.956619,-0.130901228 15.0205338,-0.125317014 14.4392669,0.387072772 C13.8539474,0.903034846 13.8552559,1.72779176 14.4331381,2.23719784 L18.7017491,6 L1.50909424,6 C0.66354084,6 0,6.67157288 0,7.5 C0,8.33420277 0.675644504,9 1.50909424,9 L18.7015867,9 Z" id="icon-arrow"></path>
-</svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-arrow-active.svg b/app/assets/images/icon-arrow.svg
index 96f1356fbe..96f1356fbe 100755
--- a/app/assets/images/icon-arrow-active.svg
+++ b/app/assets/images/icon-arrow.svg
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>