Update login button

3 files changed, 30 insertions, 3 deletions

diff --git a/app/assets/images/icon-arrow-active.svg b/app/assets/images/icon-arrow-active.svg
index 9e5674866f..96f1356fbe 100755
--- a/app/assets/images/icon-arrow-active.svg
+++ b/app/assets/images/icon-arrow-active.svg
@@ -3,5 +3,5 @@
     <title>icon-arrow</title>
     <desc>Mullvad VPN app</desc>
     <defs></defs>
-        <path fill="#294D73" 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>
+        <path fill="#FFFFFF" 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/components/Login.css b/app/components/Login.css
index f3759d7dbc..37e0adaac4 100644
--- a/app/components/Login.css
+++ b/app/components/Login.css
@@ -67,6 +67,11 @@
   transition-property: background-color, border-color;
   transition-timing-function: ease-in-out;
 }
+
+.login-form__input-wrap--active {
+  border-color: rgb(26, 48, 77);
+}
+
 .login-form__input-wrap--inactive {
   opacity: 0.6;
 }
@@ -118,10 +123,14 @@
 }
 
 .login-form__submit--active {
-  background-color: rgba(40, 77, 115, 0.4);
+  background-color: #44ad4d;
   background-image: url(../assets/images/icon-arrow-active.svg);
 }
 
+.login-form__submit--active:hover {
+  background-color: rgba(68, 173, 76, 0.9);
+}
+
 .login-form__submit--invisible {
   visibility: hidden;
   opacity: 0;
diff --git a/app/components/Login.js b/app/components/Login.js
index 0d7a3e2535..3d1815cdbf 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -17,7 +17,10 @@ export default class Login extends Component {
   
   constructor(props) {
     super(props);
-    this.state = { notifyOnFirstChangeAfterFailure: false };
+    this.state = { 
+      notifyOnFirstChangeAfterFailure: false,
+      isActive: false
+    };
   }
   
   componentWillReceiveProps(nextProps) {
@@ -40,6 +43,14 @@ export default class Login extends Component {
     this.props.onExternalLink('createAccount');
   }
 
+  onFocus() {
+    this.setState({ isActive: true });
+  }
+
+  onBlur() {
+    this.setState({ isActive: false });
+  }
+
   onInputChange(val) {
     // notify delegate on first change after login failure
     if(this.state.notifyOnFirstChangeAfterFailure) {
@@ -68,6 +79,11 @@ export default class Login extends Component {
 
   inputWrapClass(user) {
     const classes = ['login-form__input-wrap'];
+
+    if(this.state.isActive) {
+      classes.push('login-form__input-wrap--active');
+    }
+    
     switch(user.status) {
     case LoginState.connecting:
       classes.push('login-form__input-wrap--inactive');
@@ -163,6 +179,8 @@ export default class Login extends Component {
                   <AccountInput className="login-form__input-field" 
                         type="text" 
                         placeholder="e.g 0000 0000 0000" 
+                        onFocus={ ::this.onFocus }
+                        onBlur={ ::this.onBlur }
                         onChange={ ::this.onInputChange }
                         onEnter={ ::this.onLogin }
                         value={ account }