Adjust styles

3 files changed, 66 insertions, 31 deletions

diff --git a/app/assets/images/icon-tick.svg b/app/assets/images/icon-tick.svg
index 9ebf5f014a..65e354e2a3 100755
--- a/app/assets/images/icon-tick.svg
+++ b/app/assets/images/icon-tick.svg
@@ -1,7 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="28px" height="20px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>icon-tick</title>
     <desc>Mullvad VPN app</desc>
-    <defs></defs>
-            <path d="M3.41421356,8.58578644 C2.63316498,7.80473785 1.36683502,7.80473785 0.585786438,8.58578644 C-0.195262146,9.36683502 -0.195262146,10.633165 0.585786438,11.4142136 L8.58578644,19.4142136 C9.36683502,20.1952621 10.633165,20.1952621 11.4142136,19.4142136 L27.4142136,3.41421356 C28.1952621,2.63316498 28.1952621,1.36683502 27.4142136,0.585786438 C26.633165,-0.195262146 25.366835,-0.195262146 24.5857864,0.585786438 L10,15.1715729 L3.41421356,8.58578644 Z" fill="#ffffff"></path>
+    <defs>
+        <path d="M2.92646877,7.29791847 C2.25699855,6.63402718 1.17157288,6.63402718 0.502102661,7.29791847 C-0.167367554,7.96180977 -0.167367554,9.03819023 0.502102661,9.70208153 L7.35924552,16.5020815 C8.02871573,17.1659728 9.11414141,17.1659728 9.78361162,16.5020815 L23.4978973,2.90208153 C24.1673676,2.23819023 24.1673676,1.16180977 23.4978973,0.497918472 C22.8284271,-0.165972824 21.7430014,-0.165972824 21.0735312,0.497918472 L8.57142857,12.8958369 L2.92646877,7.29791847 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="path" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
+    </g>
 </svg>
\ No newline at end of file
diff --git a/app/components/Settings.css b/app/components/Settings.css
index e21c36ecc3..4189a0908e 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -44,26 +44,31 @@
   font-weight: 900;
   line-height: 40px;
   color: #FFFFFF;
-  margin: 0 0 8px 0;
 }
 
 .settings__account {
-  font-family: "Open Sans";
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 20px;
-  color: rgba(255,255,255,0.8);
   padding: 0 24px;
 }
 
 .settings__account-label {
   display: inline-block;
+  vertical-align: baseline;
+  font-family: "Open Sans";
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(255,255,255,0.8);
 }
 
 .settings__account-id {
   display: inline-block;
+  vertical-align: baseline;
+  font-family: "Open Sans";
+  font-size: 16px;
   font-weight: 800;
-  margin-left: 4px;
+  line-height: 20px;
+  color: rgba(255,255,255,0.8);
+  margin-left: 8px;
 }
 
 .settings__main {
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 7befc421a0..a196c7597b 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,8 +1,10 @@
 import React, { Component, PropTypes } from 'react';
+import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import Switch from './Switch';
 import CustomScrollbars from './CustomScrollbars';
 import { formatAccount } from '../lib/formatters';
+import { LoginState } from '../enums';
 
 export default class Settings extends Component {
 
@@ -30,6 +32,12 @@ export default class Settings extends Component {
   }
 
   render() {
+    const isLoggedIn = this.props.user.status === LoginState.ok;
+    let formattedAccountId;
+    if(isLoggedIn) {
+      formattedAccountId = formatAccount(this.props.user.account);
+    }
+
     return (
       <Layout>
         <Header hidden={ true } style={ Header.Style.defaultDark } />
@@ -43,15 +51,22 @@ export default class Settings extends Component {
               <CustomScrollbars autoHide={ true }>
                 <div className="settings__content">
                   <div className="settings__main">
-                    <div className="settings__cell">
-                      <div className="settings__cell-label">Auto-secure</div>
-                      <div className="settings__cell-value">
-                        <Switch onChange={ ::this.onAutoSecure } isOn={ this.props.settings.autoSecure } />
+
+                    { /* show account options when logged in */ }
+                    <If condition={ isLoggedIn }>
+                      <div>
+                        <div className="settings__cell">
+                          <div className="settings__cell-label">Auto-secure</div>
+                          <div className="settings__cell-value">
+                            <Switch onChange={ ::this.onAutoSecure } isOn={ this.props.settings.autoSecure } />
+                          </div>
+                        </div>
+                        <div className="settings__cell-footer">
+                          When this device connects to the internet it will automatically connect to a secure server
+                        </div>
                       </div>
-                    </div>
-                    <div className="settings__cell-footer">
-                      When this device connects to the internet it will automatically connect to a secure server
-                    </div>
+                    </If>
+
                     <div className="settings__cell settings__cell--active" onClick={ this.onExternalLink.bind(this, 'faq') }>
                       <div className="settings__cell-label">FAQs</div>
                     </div>
@@ -63,20 +78,28 @@ export default class Settings extends Component {
                       <div className="settings__cell-label">Contact support</div>
                     </div>
                   </div>
-                  <div className="settings__account">
-                    <div className="settings__account-row">
-                      <div className="settings__account-label">Account ID</div>
-                      <div className="settings__account-id">{ formatAccount(this.props.user.account) }</div>
-                    </div>
-                    <div className="settings__account-row">
-                      <div className="settings__account-label">Time remaining</div>
-                      <div className="settings__account-id">12 days</div>
+
+                  { /* show account details when logged in */ } 
+                  <If condition={ isLoggedIn }>
+                    <div>
+                      <div className="settings__account">
+                        <div className="settings__account-row">
+                          <div className="settings__account-label">Account ID</div>
+                          <div className="settings__account-id">{ formattedAccountId }</div>
+                        </div>
+                        <div className="settings__account-row">
+                          <div className="settings__account-label">Time remaining</div>
+                          <div className="settings__account-id">12 days</div>
+                        </div>
+                      </div>
+
+                      <div className="settings__footer">
+                        <button className="button button--neutral" onClick={ this.onExternalLink.bind(this, 'purchase') }>Buy more time</button>
+                        <button className="button button--negative" onClick={ ::this.onLogout }>Logout</button>
+                      </div>
                     </div>
-                  </div>
-                  <div className="settings__footer">
-                    <button className="button button--neutral" onClick={ this.onExternalLink.bind(this, 'purchase') }>Buy more time</button>
-                    <button className="button button--negative" onClick={ ::this.onLogout }>Logout</button>
-                  </div>
+                  </If>
+
                 </div>
               </CustomScrollbars>
             </div>