Add basic structure and login screen

6 files changed, 168 insertions, 7 deletions

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>
     );
   }
 }