20 files changed, 258 insertions, 15 deletions

diff --git a/app/app.js b/app/app.js
index eb71a8201b..69c74398cd 100644
--- a/app/app.js
+++ b/app/app.js
@@ -9,7 +9,7 @@ import routes from './routes';
 import configureStore from './store';
 import Tray from './containers/Tray';
 
-const iconPath = path.join(__dirname, 'assets/trayicon.png');
+const iconPath = path.join(__dirname, 'assets/images/trayicon.png');
 const tray = new remote.Tray(iconPath);
 
 const initialState = {};
diff --git a/app/assets/css/fonts.css b/app/assets/css/fonts.css
new file mode 100644
index 0000000000..22b97c7f2e
--- /dev/null
+++ b/app/assets/css/fonts.css
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: DINPro;
+  font-weight: bold;
+  src: url("../fonts/DINPro-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: DINPro;
+  font-weight: 900;
+  src: url("../fonts/DINPro-Black.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 800;
+  src: url("../fonts/OpenSans-ExtraBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 600;
+  src: url("../fonts/OpenSans-Semibold.ttf") format("truetype");
+}
diff --git a/app/assets/css/global.css b/app/assets/css/global.css
new file mode 100644
index 0000000000..5075e7f2a0
--- /dev/null
+++ b/app/assets/css/global.css
@@ -0,0 +1,6 @@
+* { box-sizing: border-box; }
+
+body {
+  background: #294D73;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+}
diff --git a/app/assets/css/reset.css b/app/assets/css/reset.css
new file mode 100644
index 0000000000..af944401f7
--- /dev/null
+++ b/app/assets/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/app/assets/css/style.css b/app/assets/css/style.css
new file mode 100644
index 0000000000..fa883fee98
--- /dev/null
+++ b/app/assets/css/style.css
@@ -0,0 +1,7 @@
+@import 'reset.css';
+@import 'fonts.css';
+@import 'global.css';
+@import '../../components/Login.css';
+@import '../../components/LoggedIn.css';
+@import '../../components/HeaderBar.css';
+@import '../../components/Layout.css';
diff --git a/app/assets/fonts/DINPro-Black.otf b/app/assets/fonts/DINPro-Black.otf
new file mode 100755
index 0000000000..2092a7bbdc
--- /dev/null
+++ b/app/assets/fonts/DINPro-Black.otf
diff --git a/app/assets/fonts/DINPro-Bold.otf b/app/assets/fonts/DINPro-Bold.otf
new file mode 100755
index 0000000000..7c83953648
--- /dev/null
+++ b/app/assets/fonts/DINPro-Bold.otf
diff --git a/app/assets/fonts/OpenSans-ExtraBold.ttf b/app/assets/fonts/OpenSans-ExtraBold.ttf
new file mode 100755
index 0000000000..21f6f84a07
--- /dev/null
+++ b/app/assets/fonts/OpenSans-ExtraBold.ttf
diff --git a/app/assets/fonts/OpenSans-Semibold.ttf b/app/assets/fonts/OpenSans-Semibold.ttf
new file mode 100755
index 0000000000..1a7679e394
--- /dev/null
+++ b/app/assets/fonts/OpenSans-Semibold.ttf
diff --git a/app/assets/trayicon.png b/app/assets/images/trayicon.png
index 3888745a8f..3888745a8f 100644
--- a/app/assets/trayicon.png
+++ b/app/assets/images/trayicon.png
diff --git a/app/assets/trayicon@2x.png b/app/assets/images/trayicon@2x.png
index 3b5f364903..3b5f364903 100644
--- a/app/assets/trayicon@2x.png
+++ b/app/assets/images/trayicon@2x.png
diff --git a/app/assets/style.css b/app/assets/style.css
deleted file mode 100644
index 5214062738..0000000000
--- a/app/assets/style.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../components/Login.css';
-@import '../components/LoggedIn.css';
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
new file mode 100644
index 0000000000..d845336436
--- /dev/null
+++ b/app/components/HeaderBar.css
@@ -0,0 +1,23 @@
+.headerbar {
+  padding: 12px;
+}
+
+.headerbar__title {
+  font-family: DINPro;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 30px;
+  color: rgba(255,255,255,0.6);
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 8px;
+}
+
+.headerbar__logo {
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  vertical-align: middle;
+  background: rgba(255,255,255,0.4);
+  border-radius: 8px;
+}
\ No newline at end of file
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
new file mode 100644
index 0000000000..ee0f66c54c
--- /dev/null
+++ b/app/components/HeaderBar.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+
+export default class HeaderBar extends Component {
+  render() {
+    return (
+      <div className="headerbar">
+        <img className="headerbar__logo" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 50 50'%2F%3E" />
+        <h2 className="headerbar__title">MULLVAD VPN</h2>
+      </div>
+    );
+  }
+}
diff --git a/app/components/Layout.css b/app/components/Layout.css
new file mode 100644
index 0000000000..4af486c6d8
--- /dev/null
+++ b/app/components/Layout.css
@@ -0,0 +1,12 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.layout__header {
+  flex: 0 0 auto;
+}
+
+.layout__container {
+  flex: 1 1 100%;
+}
\ No newline at end of file
diff --git a/app/components/Layout.js b/app/components/Layout.js
new file mode 100644
index 0000000000..7619f3df4f
--- /dev/null
+++ b/app/components/Layout.js
@@ -0,0 +1,20 @@
+import React, { PropTypes, Component } from 'react';
+import HeaderBar from './HeaderBar';
+
+export default class Layout extends Component {
+  static propTypes = {
+    children: PropTypes.element.isRequired
+  };
+  render() {
+    return (
+      <div className="layout">
+        <div className="layout__header">
+          <HeaderBar />
+        </div>
+        <div className="layout__container">
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/app/components/Login.css b/app/components/Login.css
index 362abac556..bbe8d98e82 100644
--- a/app/components/Login.css
+++ b/app/components/Login.css
@@ -1,3 +1,84 @@
-.login__container {
-  border: 1px solid green;
+.login {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-footer {
+  background-color: #192E45;
+  padding: 16px 24px 24px;
+  flex: 0 0 auto;
+}
+
+.login-footer__prompt {
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(255,255,255,0.8);
+  margin-bottom: 8px;
+}
+
+.login-footer__button {
+  display: block;
+  width: 100%;
+  padding: 7px 12px 9px;
+  background-color: #294D73;
+  border-radius: 4px;
+  border: 0;
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  text-align: center;
+  line-height: 26px;
+  color: rgba(255,255,255,0.6);
+}
+
+.login-form {
+  padding: 0 24px;
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin-bottom: 65px;
+}
+
+.login-form__alignbox {
+}
+
+.login-form__title {
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: #FFFFFF;
+  margin-bottom: 9px;
+}
+
+.login-form__subtitle {
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(255,255,255,0.8);
+  margin-bottom: 4px;
+}
+
+.login-form__input-wrap {
+  border: 4px solid rgba(0,0,0,0.1);
+  border-radius: 8px;
+}
+
+.login-form__input-field {
+  width: 100%;
+  border-radius: 8px;
+  border: 0;
+  padding: 8px 16px 10px;
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 40px;
+  letter-spacing: 1px;
+  color: rgba(41,77,115,0.2);
+  background-color: #FFFFFF;
 }
\ No newline at end of file
diff --git a/app/components/Login.js b/app/components/Login.js
index ec822a4f2b..dbaec2f43a 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import Layout from './Layout';
 
 export default class Login extends Component {
   static propTypes = {
@@ -16,11 +17,23 @@ export default class Login extends Component {
 
   render() {
     return (
-      <div className="login__container">
-        <h2>Login</h2>
-        <input ref="username" type="text" />
-        <button onClick={::this.handleLogin}>Log In</button>
-      </div>
+      <Layout>
+        <div className="login">
+          <div className="login-form">
+            <div className="login-form__alignbox">
+              <div className="login-form__title">Login</div>
+              <div className="login-form__subtitle">Enter your account number</div>
+              <div className="login-form__input-wrap">
+                <input className="login-form__input-field" type="text" placeholder="0000 0000 0000" />
+              </div>
+            </div>
+          </div>
+          <div className="login-footer">
+            <div className="login-footer__prompt">Don't have an account number?</div>
+            <button className="login-footer__button">Create account</button>
+          </div>
+        </div>
+      </Layout>
     );
   }
 }
diff --git a/app/index.html b/app/index.html
index 684fdc8517..4a444aff86 100644
--- a/app/index.html
+++ b/app/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>My App</title>
-    <link rel="stylesheet" href="./assets/style.css" />
+    <link rel="stylesheet" href="./assets/css/style.css" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/app/main.js b/app/main.js
index e923df1a8b..4976292db8 100644
--- a/app/main.js
+++ b/app/main.js
@@ -44,10 +44,10 @@ app.on('ready', async () => {
   }
 
   mainWindow = new BrowserWindow({ 
-    width: 1000, 
-    height: 800,
-    minWidth: 640,
-    minHeight: 480,
+    width: 320, 
+    height: 568,
+    minWidth: 320,
+    minHeight: 568,
     show: false 
   });