- Add missing Then statements

- Restore scroll position when coming back to Select Location screen
- Add icon for fastest/nearest server

5 files changed, 71 insertions, 24 deletions

diff --git a/app/components/Connect.css b/app/components/Connect.css
index 37a49bd98a..857e938e71 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -51,9 +51,16 @@
   flex: 0 0 auto;
 }
 
-.connect__server-country {
+.connect__server-value {
   flex: 1 1 auto;
   margin-left: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.connect__server-name {
   font-family: DINPro;
   font-size: 20px;
   font-weight: 900;
@@ -62,6 +69,10 @@
   text-align: right;
 }
 
+.connect__server-icon + .connect__server-name {
+  margin-left: 8px;
+}
+
 .connect__secure-button {
   display: block;
   width:100%;
diff --git a/app/components/Connect.js b/app/components/Connect.js
index ec89dd897d..578460f76b 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { servers } from '../constants';
 
@@ -12,16 +13,17 @@ export default class Connect extends Component {
     this.props.router.push('/select-location');
   }
 
+  serverName(key) {
+    switch(key) {
+      case 'fastest': return 'Fastest';
+      case 'nearest': return 'Nearest';
+      default: return (servers[key] || {}).name
+    }
+  }
+
   render() {
-    let serverName;
     const preferredServer = this.props.settings.preferredServer;
-
-    // special types of servers (Fastest, Nearest) 
-    if(preferredServer === 'Fastest' || preferredServer === 'Nearest') {
-      serverName = preferredServer;
-    } else {
-      serverName = (servers[preferredServer] || {}).name;
-    }
+    const serverName = this.serverName(preferredServer);
     
     return (
       <Layout>
@@ -34,8 +36,24 @@ export default class Connect extends Component {
                 
                 <div className="connect__row">
                   <div className="connect__server" onClick={ ::this.openLocationPicker }>
-                    <div className="connect__server-label">Connect to</div>
-                    <div className="connect__server-country">{ serverName }</div>
+                    <div className="connect__server-label">Connect to</div>                    
+                    <div className="connect__server-value">
+
+                      <If condition={ preferredServer === 'fastest' }>
+                        <Then>
+                          <img className="connect__server-icon" src="./assets/images/icon-fastest.svg" />
+                        </Then>
+                      </If>
+                        
+                      <If condition={ preferredServer === 'nearest' }>
+                        <Then>
+                          <img className="connect__server-icon" src="./assets/images/icon-nearest.svg" />
+                        </Then>
+                      </If>
+
+                      <div className="connect__server-name">{ serverName }</div>
+
+                    </div>
                   </div>
                 </div>
 
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index 1b12f55613..899dc02cd6 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { If } from 'react-if';
+import { If, Then } from 'react-if';
 import Enum from '../lib/enum';
 
 export default class HeaderBar extends Component {
@@ -29,13 +29,17 @@ export default class HeaderBar extends Component {
     return (
       <div className={ containerClass.join(' ') }>
         <If condition={ !this.props.hidden }>
-          <div className="headerbar__container">
-            <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
-            <h2 className="headerbar__title">MULLVAD VPN</h2>
-            <If condition={ !!this.props.showSettings }>
-                <button className="headerbar__settings" onClick={ this.props.onSettings } />
-            </If>
-          </div>
+          <Then>
+            <div className="headerbar__container">
+              <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
+              <h2 className="headerbar__title">MULLVAD VPN</h2>
+              <If condition={ !!this.props.showSettings }>
+                <Then>
+                  <button className="headerbar__settings" onClick={ this.props.onSettings } />
+                </Then>
+              </If>
+            </div>
+          </Then>
         </If>
       </div>
     );
diff --git a/app/components/Login.js b/app/components/Login.js
index 6ec95562ea..0dc74100c6 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -1,6 +1,6 @@
 import { shell } from 'electron';
 import React, { Component, PropTypes } from 'react';
-import { If, Then, Else } from 'react-if';
+import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { links, LoginState } from '../constants';
 import { formatAccount } from '../lib/formatters';
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 41ef55fd33..66acd2af19 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -20,12 +20,12 @@ export default class SelectLocation extends Component {
   }
 
   handleFastest() {
-    this.props.updateSettings({ preferredServer: 'Fastest' });
+    this.props.updateSettings({ preferredServer: 'fastest' });
     this.props.router.push('/connect');
   }
 
   handleNearest() {
-    this.props.updateSettings({ preferredServer: 'Nearest' });
+    this.props.updateSettings({ preferredServer: 'nearest' });
     this.props.router.push('/connect');
   }
 
@@ -35,7 +35,7 @@ export default class SelectLocation extends Component {
 
   drawCell(key, name, icon, onClick) {
     const classes = ['select-location__cell'];
-    const selected = this.isSelected(name);
+    const selected = this.isSelected(key);
 
     if(selected) {
       classes.push('select-location__cell--selected');
@@ -44,7 +44,7 @@ export default class SelectLocation extends Component {
     const cellClass = classes.join(' ');
 
     return (
-      <div key={ key } className={ cellClass } onClick={ onClick }>
+      <div key={ key } className={ cellClass } onClick={ onClick } ref={ (e) => this.onCellRef(key, e) }>
 
         <If condition={ !!icon }>
           <Then>
@@ -63,6 +63,20 @@ export default class SelectLocation extends Component {
       </div>
     );
   }
+  
+  onCellRef(key, element) {
+    // save reference to selected cell 
+    if(this.isSelected(key)) {
+      this._selectedCell = element;
+    }
+  }
+  
+  componentDidMount() {
+    // restore scroll to selected cell
+    if(this._selectedCell) {
+      this._selectedCell.scrollIntoViewIfNeeded(true);
+    }
+  }
 
   render() {
     return (