- Update button styles

- Add satellite icon to login and buy buttons

4 files changed, 55 insertions, 15 deletions

diff --git a/app/assets/css/buttons.css b/app/assets/css/buttons.css
index 79dc46019e..7c4f0203c1 100644
--- a/app/assets/css/buttons.css
+++ b/app/assets/css/buttons.css
@@ -1,5 +1,5 @@
 .button {
-  display: block;
+  display: flex;
   width: 100%;
   padding: 7px 12px 9px;
   border-radius: 4px;
@@ -7,8 +7,18 @@
   font-family: DINPro;
   font-size: 20px;
   font-weight: 900;
-  text-align: center;
   line-height: 26px;
+  justify-content: center;
+  align-items: center;
+}
+
+.button-label {
+  margin: 0 auto;
+}
+
+/* make negative margin to center label within button */
+.button-label + .button-icon--16 {
+  margin-left: -16px;
 }
 
 .button--blur {
@@ -20,13 +30,21 @@
   color: rgba(255,255,255,0.8);
 }
 
+.button--primary .button-icon path {
+  fill: rgba(255,255,255,0.8);
+}
+
 .button--primary:hover {
-  background: rgba(41,71,115,0.9);
+  background-color: rgba(41,71,115,0.9);
   color: rgba(255,255,255,1);
 }
 
+.button--primary:hover .button-icon path {
+  fill: rgba(255,255,255,1);
+}
+
 .button--primary:active {
-  background: rgba(41,71,115,1);
+  background-color: rgba(41,71,115,1);
 }
 
 .button--secondary {
@@ -35,12 +53,12 @@
 }
 
 .button--secondary:hover {
-  background: rgba(41,71,115,0.5);
+  background-color: rgba(41,71,115,0.5);
   color: rgba(255,255,255,0.8);
 }
 
 .button--secondary:active {
-  background: rgba(41,71,115,0.4);
+  background-color: rgba(41,71,115,0.4);
 }
 
 .button--negative {
@@ -54,7 +72,7 @@
 }
 
 .button--negative:active {
-  background: rgba(208,2,27,1);
+  background-color: rgba(208,2,27,1);
 }
 
 .button--negative-light {
@@ -63,12 +81,12 @@
 }
 
 .button--negative-light:hover {
-  background: rgba(208,2,27,0.45);
+  background-color: rgba(208,2,27,0.45);
   color: rgba(255,255,255,0.8);
 }
 
 .button--negative-light:active {
-  background: rgba(208,2,27,0.4);
+  background-color: rgba(208,2,27,0.4);
 }
 
 .button--positive {
@@ -76,13 +94,21 @@
   color: rgba(255,255,255,0.8);
 }
 
+.button--positive .button-icon path {
+  fill: rgba(255,255,255,0.8);
+}
+
 .button--positive:hover {
-  background: rgba(63,173,77,0.9);
+  background-color: rgba(63,173,77,0.9);
   color: rgba(255,255,255,1);
 }
 
+.button--positive:hover .button-icon path {
+  fill: rgba(255,255,255,1);
+}
+
 .button--positive:active {
-  background: rgba(63,173,77,1);
+  background-color: rgba(63,173,77,1);
 }
 
 .button--neutral {
@@ -91,10 +117,10 @@
 }
 
 .button--neutral:hover {
-  background: rgba(255,255,255,0.25);
+  background-color: rgba(255,255,255,0.25);
   color: rgba(255,255,255,1);
 }
 
 .button--neutral:active {
-  background: rgba(255,255,255,0.2);
+  background-color: rgba(255,255,255,0.2);
 }
diff --git a/app/assets/images/icon-extLink.svg b/app/assets/images/icon-extLink.svg
new file mode 100644
index 0000000000..2da2e2f932
--- /dev/null
+++ b/app/assets/images/icon-extLink.svg
@@ -0,0 +1,6 @@
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-extLink</title>
+    <desc>Mullvad VPN app</desc>
+    <defs></defs>
+    <path d="M12.5857864,2 L8.99077797,2 C8.45097518,2 8,1.55228475 8,1 C8,0.443864822 8.4463856,0 8.99703014,0 L15.0029699,0 C15.5469637,0 16,0.446385598 16,0.997030139 L16,7.00296986 C16,7.54696369 15.5522847,8 15,8 C14.4438648,8 14,7.55641359 14,7.00922203 L14,3.41421356 L6.70710678,10.7071068 C6.31658249,11.0976311 5.68341751,11.0976311 5.29289322,10.7071068 C4.90236893,10.3165825 4.90236893,9.68341751 5.29289322,9.29289322 L12.5857864,2 Z M8.46446609,4 L6.46446609,6 L2,6 L2,14 L10,14 L10,9.53553391 L12,7.53553391 L12,14.9975267 C12,15.5511774 11.544239,16 10.9975267,16 L1.00247329,16 C0.448822582,16 0,15.544239 0,14.9975267 L0,5.00247329 C0,4.44882258 0.455760956,4 1.00247329,4 L8.46446609,4 Z" id="path" fill="#FFFFFF" fill-rule="evenodd"></path>
+</svg>
\ No newline at end of file
diff --git a/app/components/Account.js b/app/components/Account.js
index 12f3c1b6a8..477b10e2d3 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -3,6 +3,7 @@ import React, { Component, PropTypes } from 'react';
 import { If, Then, Else } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { formatAccount } from '../lib/formatters';
+import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
 
 export default class Account extends Component {
 
@@ -66,7 +67,10 @@ export default class Account extends Component {
                   </div>
 
                   <div className="account__footer">
-                    <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }>Buy more time</button>
+                    <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }>
+                      <span className="button-label">Buy more time</span>
+                      <ExternalLinkSVG className="button-icon button-icon--16" />
+                    </button>
                     <button className="button button--negative" onClick={ ::this.onLogout }>Logout</button>
                   </div>
 
diff --git a/app/components/Login.js b/app/components/Login.js
index 3ede726a59..0d7a3e2535 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -3,6 +3,7 @@ import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { LoginState } from '../enums';
 import AccountInput from './AccountInput';
+import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
 
 export default class Login extends Component {
   static propTypes = {
@@ -174,7 +175,10 @@ export default class Login extends Component {
             </div>
             <div className={footerClass}>
               <div className="login-footer__prompt">Don't have an account number?</div>
-              <button className="button button--primary" onClick={ ::this.onCreateAccount }>Create account</button>
+              <button className="button button--primary" onClick={ ::this.onCreateAccount }>
+                <span className="button-label">Create account</span>
+                <ExternalLinkSVG className="button-icon button-icon--16" />
+              </button>
             </div>
           </div>
         </Container>