- Generalize button styles

- Update login input styles according to new Zeplin screens
- Update map style
- Add marker assets

10 files changed, 174 insertions, 78 deletions

diff --git a/app/assets/css/buttons.css b/app/assets/css/buttons.css
new file mode 100644
index 0000000000..79dc46019e
--- /dev/null
+++ b/app/assets/css/buttons.css
@@ -0,0 +1,100 @@
+.button {
+  display: block;
+  width: 100%;
+  padding: 7px 12px 9px;
+  border-radius: 4px;
+  border: 0;
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  text-align: center;
+  line-height: 26px;
+}
+
+.button--blur {
+  backdrop-filter: blur(4px);
+}
+
+.button--primary {
+  background-color: rgba(41,71,115,1);
+  color: rgba(255,255,255,0.8);
+}
+
+.button--primary:hover {
+  background: rgba(41,71,115,0.9);
+  color: rgba(255,255,255,1);
+}
+
+.button--primary:active {
+  background: rgba(41,71,115,1);
+}
+
+.button--secondary {
+  background-color: rgba(41,71,115,0.4);
+  color: rgba(255,255,255,0.6);
+}
+
+.button--secondary:hover {
+  background: rgba(41,71,115,0.5);
+  color: rgba(255,255,255,0.8);
+}
+
+.button--secondary:active {
+  background: rgba(41,71,115,0.4);
+}
+
+.button--negative {
+  background-color: rgba(208,2,27,1);
+  color: rgba(255,255,255,0.8);
+}
+
+.button--negative:hover {
+  background-color: rgba(208,2,27,0.95);
+  color: rgba(255,255,255,1);
+}
+
+.button--negative:active {
+  background: rgba(208,2,27,1);
+}
+
+.button--negative-light {
+  background-color: rgba(208,2,27,0.4);
+  color: rgba(255,255,255,0.6);
+}
+
+.button--negative-light:hover {
+  background: rgba(208,2,27,0.45);
+  color: rgba(255,255,255,0.8);
+}
+
+.button--negative-light:active {
+  background: rgba(208,2,27,0.4);
+}
+
+.button--positive {
+  background-color: rgba(63,173,77,1);
+  color: rgba(255,255,255,0.8);
+}
+
+.button--positive:hover {
+  background: rgba(63,173,77,0.9);
+  color: rgba(255,255,255,1);
+}
+
+.button--positive:active {
+  background: rgba(63,173,77,1);
+}
+
+.button--neutral {
+  background-color: rgba(255,255,255,0.2);
+  color: rgba(255,255,255,0.8);
+}
+
+.button--neutral:hover {
+  background: rgba(255,255,255,0.25);
+  color: rgba(255,255,255,1);
+}
+
+.button--neutral:active {
+  background: rgba(255,255,255,0.2);
+}
diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 2c103eb144..18a031d14b 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -2,6 +2,7 @@
 @import 'reset.css';
 @import 'fonts.css';
 @import 'global.css';
+@import 'buttons.css';
 
 /* app */
 @import '../../components/CustomScrollbars.css';
diff --git a/app/assets/images/location-marker-secure.svg b/app/assets/images/location-marker-secure.svg
new file mode 100755
index 0000000000..087fe5d0d4
--- /dev/null
+++ b/app/assets/images/location-marker-secure.svg
@@ -0,0 +1,19 @@
+<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>location-marker-secure</title>
+    <desc>Mullvad VPN app</desc>
+    <defs>
+        <circle id="shadow-path" cx="30" cy="30" r="10"></circle>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="4" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+            <circle id="outer-circle" fill-opacity="0.4" fill="#44AD4D" cx="30" cy="30" r="30"></circle>
+            <g id="inner-circle">
+                <use fill="black" fill-opacity="1" filter="url(#shadow)" xlink:href="#shadow-path"></use>
+                <use stroke="#FFFFFF" stroke-width="2" fill="#44AD4D" fill-rule="evenodd" xlink:href="#shadow-path"></use>
+            </g>
+</svg>
\ No newline at end of file
diff --git a/app/assets/images/location-marker-unsecure.svg b/app/assets/images/location-marker-unsecure.svg
new file mode 100755
index 0000000000..509b8022f2
--- /dev/null
+++ b/app/assets/images/location-marker-unsecure.svg
@@ -0,0 +1,19 @@
+<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>location-marker-unsecure</title>
+    <desc>Mullvad VPN app</desc>
+    <defs>
+        <circle id="shadow-path" cx="30" cy="30" r="10"></circle>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="4" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <circle id="outer-circle" fill-opacity="0.4" fill="#D0021B" cx="30" cy="30" r="30"></circle>
+    <g id="inner-circle">
+        <use fill="black" fill-opacity="1" filter="url(#shadow)" xlink:href="#shadow-path"></use>
+        <use stroke="#FFFFFF" stroke-width="2" fill="#D0021B" fill-rule="evenodd" xlink:href="#shadow-path"></use>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/app/components/Connect.css b/app/components/Connect.css
index 1dac602770..4c7bdd9027 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -86,20 +86,6 @@
   color: #FFFFFF;
 }
 
-.connect__footer-button--connect {
-  background-color: #44AD4D;
-}
-
-.connect__footer-button--disconnect {
-  background-color: rgba(208,2,27,0.4);
-  backdrop-filter: blur(4px);
-}
-
-.connect__footer-button--switch {
-  background-color: rgba(255,255,255,0.2);
-  backdrop-filter: blur(4px);
-}
-
 .connect__status {
   padding: 0 24px;
   margin-top: auto;
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 17d99ac577..d6fa51f716 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -129,7 +129,7 @@ export default class Connect extends Component {
     const isConnected = this.props.connect.status === ConnectionState.connected;
     const isDisconnected = this.props.connect.status === ConnectionState.disconnected;
 
-    const accessToken = 'pk.eyJ1IjoicHJvbmViaXJkIiwiYSI6ImNpemk5cmk1MDAxd3IzM21paXgzNmI4M3oifQ.kbwLbnjVCvZHXS8RH7y-3w';
+    const accessToken = 'pk.eyJ1IjoibWpob21lciIsImEiOiJjaXd3NmdmNHEwMGtvMnlvMGl3b3R5aGcwIn0.SqIPBcCP6-b9yjxCD32CNg';
 
     return (
       <Layout>
@@ -137,7 +137,7 @@ export default class Connect extends Component {
         <Container>
           <div className="connect">
             <div className="connect__map">
-              <ReactMapboxGl style="mapbox://styles/mapbox/dark-v9"
+              <ReactMapboxGl style="mapbox://styles/mjhomer/cizjoenga006f2smnm9z52u8e"
                   center={ this._initialLocation }
                   accessToken={ accessToken }
                   containerStyle={{ height: '100%' }} 
@@ -195,7 +195,7 @@ export default class Connect extends Component {
                     </div>
 
                     <div className="connect__row">
-                      <button className="connect__footer-button connect__footer-button--connect" onClick={ ::this.onConnect }>Secure my connection</button>
+                      <button className="button button--positive" onClick={ ::this.onConnect }>Secure my connection</button>
                     </div>
                   </div>
                 </Then>
@@ -206,11 +206,11 @@ export default class Connect extends Component {
                 <Then>
                   <div className="connect__footer">
                     <div className="connect__row">
-                      <button className="connect__footer-button connect__footer-button--switch" onClick={ ::this.onSelectLocation }>Switch location</button>
+                      <button className="button button--neutral button--blur" onClick={ ::this.onSelectLocation }>Switch location</button>
                     </div>
 
                     <div className="connect__row">
-                      <button className="connect__footer-button connect__footer-button--disconnect" onClick={ ::this.onDisconnect }>Cancel</button>
+                      <button className="button button--negative-light button--blur" onClick={ ::this.onDisconnect }>Cancel</button>
                     </div>
                   </div>
                 </Then>
@@ -221,11 +221,11 @@ export default class Connect extends Component {
                 <Then>
                   <div className="connect__footer">
                     <div className="connect__row">
-                      <button className="connect__footer-button connect__footer-button--switch" onClick={ ::this.onSelectLocation }>Switch location</button>
+                      <button className="button button--neutral button--blur" onClick={ ::this.onSelectLocation }>Switch location</button>
                     </div>
 
                     <div className="connect__row">
-                      <button className="connect__footer-button connect__footer-button--disconnect" onClick={ ::this.onDisconnect }>Disconnect</button>
+                      <button className="button button--negative-light button--blur" onClick={ ::this.onDisconnect }>Disconnect</button>
                     </div>
                   </div>
                 </Then>
diff --git a/app/components/Login.css b/app/components/Login.css
index 7d65dc051c..3e61957e67 100644
--- a/app/components/Login.css
+++ b/app/components/Login.css
@@ -28,21 +28,6 @@
   margin-bottom: 8px;
 }
 
-.login-footer__button {
-  display: block;
-  width: 100%;
-  padding: 7px 12px 9px;
-  background-color: #294D73;
-  border-radius: 4px;
-  border: 0;
-  font-family: DINPro;
-  font-size: 20px;
-  font-weight: 900;
-  text-align: center;
-  line-height: 26px;
-  color: rgba(255,255,255,0.6);
-}
-
 .login-form {
   display: flex;
   flex-direction: column;
@@ -77,7 +62,10 @@
   margin-right: -4px;
   display: flex;
   flex-direction: row;
-  transform: 0.3s all;
+  overflow: hidden;
+  transition-duration: 0.3s;
+  transition-property: background-color, border-color;
+  transition-timing-function: ease-in-out;
 }
 .login-form__input-wrap--inactive {
   opacity: 0.6;
@@ -104,14 +92,18 @@
   color: #294D73;
   background-color: transparent;
   flex: 1 1 auto;
-  transition: 0.3s all;
+  transition: 0.3s color ease-in-out;
 }
 
 .login-form__input-field--inactive {
   background-color: rgba(255,255,255,0.6);
 }
 
-.login-form__input-field--error {
+.login-form__input-wrap--error { 
+  border-color: #D0021B;
+}
+
+.login-form__input-wrap--error .login-form__input-field { 
   color: #D0021B;
 }
 
@@ -127,7 +119,7 @@
 }
 
 .login-form__submit--active {
-  background-color: rgba(41,77,115,0.2);
+  background-color: rgba(40, 77, 115, 0.4);
   background-image: url(../assets/images/icon-arrow-active.svg);
 }
 
diff --git a/app/components/Login.js b/app/components/Login.js
index 074518b7d7..bc3d6e7892 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -76,33 +76,28 @@ export default class Login extends Component {
 
   inputWrapClass(user) {
     const classes = ['login-form__input-wrap'];
-
-    if(user.status === LoginState.connecting) {
+    switch(user.status) {
+    case LoginState.connecting:
       classes.push('login-form__input-wrap--inactive');
+      break;
+
+    case LoginState.failed:
+      classes.push('login-form__input-wrap--error');
+      break;
     }
 
     return classes.join(' ');
   }
 
-  inputClass(user) {
-    const map = {
-      [LoginState.failed]: 'login-form__input-field--error'
-    };
-    const classes = ['login-form__input-field'];
-    const extra = map[user.status];
-
-    return classes.concat(extra ? extra : []).join(' ');
-  }
-
   footerClass(user) {
-    const map = {
-      [LoginState.ok]: 'login-footer--invisible',
-      [LoginState.connecting]: 'login-footer--invisible'
-    };
     const classes = ['login-footer'];
-    const extra = map[user.status];
-
-    return classes.concat(extra ? extra : []).join(' ');
+    switch(user.status) {
+    case LoginState.ok:
+    case LoginState.connecting:
+      classes.push('login-footer--invisible');
+      break;
+    }
+    return classes.join(' ');
   }
 
   submitClass(user) {
@@ -129,7 +124,6 @@ export default class Login extends Component {
     const isLoggedIn = status === LoginState.ok;
 
     const inputWrapClass = this.inputWrapClass(this.props.user);
-    const inputClass = this.inputClass(this.props.user);
     const footerClass = this.footerClass(this.props.user);
     const submitClass = this.submitClass(this.props.user);
 
@@ -176,7 +170,7 @@ export default class Login extends Component {
               <div className={ 'login-form__fields' + (isLoggedIn ? ' login-form__fields--invisible' : '') }>
                 <div className="login-form__subtitle">{ subtitle }</div>
                 <div className={ inputWrapClass }>
-                  <input className={ inputClass } 
+                  <input className="login-form__input-field" 
                         type="text" 
                         placeholder="e.g 0000 0000 0000" 
                         onChange={ ::this.handleInputChange }
@@ -191,7 +185,7 @@ export default class Login extends Component {
             </div>
             <div className={footerClass}>
               <div className="login-footer__prompt">Don't have an account number?</div>
-              <button className="login-footer__button" onClick={ ::this.handleCreateAccount }>Create account</button>
+              <button className="button button--primary" onClick={ ::this.handleCreateAccount }>Create account</button>
             </div>
           </div>
         </Container>
diff --git a/app/components/Settings.css b/app/components/Settings.css
index c8e03e5e51..2515a47d2b 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -109,18 +109,3 @@
 .settings__footer {
   padding: 24px;
 }
-
-.settings__logout-button {
-  display: block;
-  width: 100%;
-  padding: 7px 12px 9px;
-  background-color: #D0021B;
-  border-radius: 4px;
-  border: 0;
-  font-family: DINPro;
-  font-size: 20px;
-  font-weight: 900;
-  text-align: center;
-  line-height: 26px;
-  color: #FFFFFF;
-}
\ No newline at end of file
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 06b17adea4..fd607388c7 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -66,7 +66,7 @@ export default class Settings extends Component {
                   </div>
                 </div>
                 <div className="settings__footer">
-                  <button className="settings__logout-button" onClick={ ::this.handleLogout }>Logout</button>
+                  <button className="button button--negative" onClick={ ::this.handleLogout }>Logout</button>
                 </div>
               </div>
             </div>