Add location picker

5 files changed, 189 insertions, 21 deletions

diff --git a/app/components/Connect.css b/app/components/Connect.css
index 486aeccdba..be846b5b76 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -3,7 +3,7 @@
   position: relative;
 }
 
-.map {
+.connect__map {
   position: absolute;
   top: 0;
   left: 0;
@@ -14,13 +14,13 @@
   background-position: 0 -72px;
 }
 
-.container {
+.connect__container {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-.connect-pane {
+.connect__footer {
   display: flex;
   flex-direction: column;
   margin-top: auto;
@@ -28,15 +28,11 @@
   z-index: 1;
 }
 
-.connect-pane__row {
-
-}
-
-.connect-pane__row + .connect-pane__row {
+.connect__row + .connect__row{
   margin-top: 16px;
 }
 
-.connect-pane__server {
+.connect__server {
   padding: 7px 12px 9px;
   background-color: rgba(255,255,255,0.2);
   border-radius: 4px;
@@ -45,7 +41,7 @@
   align-items: center;
 }
 
-.connect-pane__server-label {
+.connect__server-label {
   font-family: "Open Sans";
   font-size: 12px;
   font-weight: 800;
@@ -53,7 +49,7 @@
   color: rgba(255,255,255,0.8);
 }
 
-.connect-pane__server-country {
+.connect__server-country {
   margin-left: auto;
   font-family: DINPro;
   font-size: 20px;
@@ -62,7 +58,7 @@
   color: #FFFFFF;
 }
 
-.connect-pane__secure-button {
+.connect__secure-button {
   display: block;
   width:100%;
   border: 0;
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 81e5440ae7..efdf5a5512 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -7,25 +7,29 @@ export default class Connect extends Component {
     this.props.router.push('/settings');
   }
 
+  openLocationPicker() {
+    this.props.router.push('/select-location');
+  }
+
   render() {
     return (
       <Layout>
         <Header showSettings={ true } onSettings={ ::this.onSettings } />
         <Container>
           <div className="connect">
-            <div className="map"></div>
-            <div className="container">
-              <div className="connect-pane">
+            <div className="connect__map"></div>
+            <div className="connect__container">
+              <div className="connect__footer">
                 
-                <div className="connect-pane__row">
-                  <div className="connect-pane__server">
-                    <div className="connect-pane__server-label">CONNECT TO</div>
-                    <div className="connect-pane__server-country">USA</div>
+                <div className="connect__row">
+                  <div className="connect__server" onClick={ ::this.openLocationPicker }>
+                    <div className="connect__server-label">CONNECT TO</div>
+                    <div className="connect__server-country">USA</div>
                   </div>
                 </div>
 
-                <div className="connect-pane__row">
-                  <button className="connect-pane__secure-button">Secure my connection</button>
+                <div className="connect__row">
+                  <button className="connect__secure-button">Secure my connection</button>
                 </div>
 
               </div>
diff --git a/app/components/Layout.css b/app/components/Layout.css
index 5d1aa92445..14acf93769 100644
--- a/app/components/Layout.css
+++ b/app/components/Layout.css
@@ -11,4 +11,5 @@
 .layout__container {
   flex: 1 1 100%;
   background: #294D73;
+  overflow: hidden; /* needed for flex boxes with overflow: auto to work */
 }
\ No newline at end of file
diff --git a/app/components/SelectLocation.css b/app/components/SelectLocation.css
new file mode 100644
index 0000000000..6d6e85a0f3
--- /dev/null
+++ b/app/components/SelectLocation.css
@@ -0,0 +1,98 @@
+.select-location {
+  background: #192E45;
+  height: 100%;
+}
+
+.select-location__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.select-location__header {
+  flex: 0 0 auto;
+  padding: 40px 24px 24px;
+  position: relative; /* anchor for close button */
+}
+
+.select-location__close {
+  position: absolute;
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  top: 24px;
+  left: 12px;
+  background-color: transparent;
+  background-image: url(../assets/images/icon-close.svg);
+  opacity: 0.6;
+  z-index: 1; /* part of .select-location__container convers the button */
+}
+
+.select-location__title {
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: #FFFFFF;
+  margin: 0 0 8px 0;
+}
+
+.select-location__subtitle {
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(255,255,255,0.8);
+}
+
+.select-location__list {
+  overflow: auto;
+}
+
+.select-location__separator {
+  height: 16px;
+}
+
+.select-location__cell {
+  background-color: #294D73;
+  padding: 15px 16px 15px 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.select-location__cell + .select-location__cell {
+  margin-top: 1px;
+}
+
+.select-location__cell-label {
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 26px;
+  color: #FFFFFF;
+  flex: 1 0 auto;
+}
+
+.select-location__cell-icon {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  margin-right: 8px;
+}
+
+.select-location__cell-value {
+  flex: 0 0 auto;
+}
+
+.select-location__cell-footer {
+  padding: 8px 24px 24px;
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(255,255,255,0.8);
+}
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
new file mode 100644
index 0000000000..fc8ec7da25
--- /dev/null
+++ b/app/components/SelectLocation.js
@@ -0,0 +1,69 @@
+import React, { Component, PropTypes } from 'react';
+import { Layout, Container, Header } from './Layout';
+import { servers } from '../constants';
+
+export default class SelectLocation extends Component {
+
+  static propTypes = {
+    updateSettings: PropTypes.func.isRequired
+  }
+
+  onClose() {
+    this.props.router.push('/connect');
+  }
+
+  handleServer(name) {
+
+  }
+
+  handleFastest() {
+
+  }
+
+  handleNearest() {
+
+  }
+
+  render() {
+    return (
+      <Layout>
+        <Header hidden={ true } style={ Header.Style.defaultDark } />
+        <Container>
+          <div className="select-location">
+            <button className="select-location__close" onClick={ ::this.onClose } />
+            <div className="select-location__container">
+              <div className="select-location__header">
+                <h2 className="select-location__title">Select location</h2>
+                <div className="select-location__subtitle">
+                  While connected, your real location is masked with a private and secure location in the selected region
+                </div>
+              </div>
+              
+              <div className="select-location__list">
+                <div>
+                  <div className="select-location__cell" onClick={ ::this.handleFastest }>
+                    <img className="select-location__cell-icon" src="./assets/images/icon-fastest.svg" />
+                    <div className="select-location__cell-label">Fastest</div>
+                  </div>
+                  <div className="select-location__cell" onClick={ ::this.handleNearest }>
+                    <img className="select-location__cell-icon" src="./assets/images/icon-nearest.svg" />
+                    <div className="select-location__cell-label">Nearest</div>
+                  </div>
+                  <div className="select-location__separator"></div>
+                  
+                  {
+                    servers.map((name) => (
+                    <div className="select-location__cell" key={name}>
+                      <div className="select-location__cell-label">{ name }</div>
+                    </div>))
+                  }
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}