- Add map placeholders

- Connection screen mockup

9 files changed, 99 insertions, 1 deletions

diff --git a/app/assets/images/map/connected-fastest@2x.png b/app/assets/images/map/connected-fastest@2x.png
new file mode 100755
index 0000000000..f46acb0c81
--- /dev/null
+++ b/app/assets/images/map/connected-fastest@2x.png
diff --git a/app/assets/images/map/connected@2x.png b/app/assets/images/map/connected@2x.png
new file mode 100755
index 0000000000..411038e9f1
--- /dev/null
+++ b/app/assets/images/map/connected@2x.png
diff --git a/app/assets/images/map/connecting-fastest@2x.png b/app/assets/images/map/connecting-fastest@2x.png
new file mode 100755
index 0000000000..033931041c
--- /dev/null
+++ b/app/assets/images/map/connecting-fastest@2x.png
diff --git a/app/assets/images/map/connecting@2x.png b/app/assets/images/map/connecting@2x.png
new file mode 100755
index 0000000000..6be1b35b63
--- /dev/null
+++ b/app/assets/images/map/connecting@2x.png
diff --git a/app/assets/images/map/not-connected@2x.png b/app/assets/images/map/not-connected@2x.png
new file mode 100755
index 0000000000..8a3c51bbb1
--- /dev/null
+++ b/app/assets/images/map/not-connected@2x.png
diff --git a/app/components/Connect.css b/app/components/Connect.css
index a4160296e4..486aeccdba 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -1,5 +1,78 @@
 .connect {
   height: 100%;
+  position: relative;
+}
+
+.map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url(../assets/images/map/connecting@2x.png);
+  background-size: cover;
+  background-position: 0 -72px;
+}
+
+.container {
   display: flex;
   flex-direction: column;
+  height: 100%;
+}
+
+.connect-pane {
+  display: flex;
+  flex-direction: column;
+  margin-top: auto;
+  padding: 24px;
+  z-index: 1;
+}
+
+.connect-pane__row {
+
+}
+
+.connect-pane__row + .connect-pane__row {
+  margin-top: 16px;
+}
+
+.connect-pane__server {
+  padding: 7px 12px 9px;
+  background-color: rgba(255,255,255,0.2);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.connect-pane__server-label {
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 17px;
+  color: rgba(255,255,255,0.8);
+}
+
+.connect-pane__server-country {
+  margin-left: auto;
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 26px;
+  color: #FFFFFF;
+}
+
+.connect-pane__secure-button {
+  display: block;
+  width:100%;
+  border: 0;
+  padding: 7px 12px 9px;
+  background-color: #44AD4D;
+  border-radius: 4px;
+  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/Connect.js b/app/components/Connect.js
index fb86b7509b..81e5440ae7 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -13,7 +13,23 @@ export default class Connect extends Component {
         <Header showSettings={ true } onSettings={ ::this.onSettings } />
         <Container>
           <div className="connect">
-          
+            <div className="map"></div>
+            <div className="container">
+              <div className="connect-pane">
+                
+                <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>
+                </div>
+
+                <div className="connect-pane__row">
+                  <button className="connect-pane__secure-button">Secure my connection</button>
+                </div>
+
+              </div>
+            </div>
           </div>
         </Container>
       </Layout>
diff --git a/app/main.js b/app/main.js
index 4c2e123573..029ef7a703 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,10 +1,12 @@
 import path from 'path';
 import { app, crashReporter, BrowserWindow, ipcMain, Tray, Menu } from 'electron';
+import NSEventMonitor from 'nseventmonitor';
 
 const isDevelopment = (process.env.NODE_ENV === 'development');
 
 let window = null;
 let tray = null;
+let macEventMonitor = new NSEventMonitor();
 
 // hide dock icon
 app.dock.hide();
@@ -91,10 +93,16 @@ const createWindow = () => {
 
   window.on('show', () => {
     tray.setHighlightMode('always');
+
+    macEventMonitor.start(() => {
+      window.hide();
+    });
   });
 
   window.on('hide', () => {
     tray.setHighlightMode('never');
+
+    macEventMonitor.stop();
   });
 
 };
diff --git a/package.json b/package.json
index f8a6bebb39..b42114d0b4 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "repository": "https://github.com/jschr/electron-react-redux-boilerplate",
   "license": "MIT",
   "dependencies": {
+    "nseventmonitor": "https://github.com/pronebird/NSEventMonitor.git",
     "babel-runtime": "^6.22.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",