- Add settings page layout

- Add defaultDark style for navigation bar

6 files changed, 171 insertions, 4 deletions

diff --git a/app/assets/images/app-triangle-default-dark.svg b/app/assets/images/app-triangle-default-dark.svg
new file mode 100644
index 0000000000..2585895c05
--- /dev/null
+++ b/app/assets/images/app-triangle-default-dark.svg
@@ -0,0 +1,5 @@
+<svg width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>app-triangle-extended</title>
+    <desc>Mullvad VPN app</desc>
+    <path fill="#192E45" d="M0,12 L30,12 L30,13 L0,13 L0,12 Z M0,12 C7.24137931,12 12.9310345,1.0135008e-16 15,0 C17.0689655,0 23.7931034,12 30,12 L0,12 Z" id="app-triangle-extended"></path>
+</svg>
\ No newline at end of file
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index d250cfd968..d7478cfaf0 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -23,6 +23,14 @@
   padding: 12px 0 0 0;
 }
 
+.headerbar--style-defaultDark {
+  background-color: #192E45;
+}
+
+.headerbar--style-defaultDark:before {
+  background-image: url(../assets/images/app-triangle-default-dark.svg);
+}
+
 .headerbar--style-error {
   background-color: #D0021B;
 }
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index decf561f5d..0f599a7a39 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -5,7 +5,7 @@ import Enum from '../lib/enum';
 export default class HeaderBar extends Component {
 
   /** Bar style */
-  static Style = Enum('default', 'error', 'success');
+  static Style = Enum('default', 'defaultDark', 'error', 'success');
 
   static propTypes = {
     style: PropTypes.string,
diff --git a/app/components/Settings.css b/app/components/Settings.css
index 2468e972f5..30186446e4 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -1,14 +1,133 @@
 .settings {
+  background: #192E45;
+  height: 100%;
+}
+
+.settings__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.settings__header {
+  flex: 0 0 auto;
+  padding: 40px 24px 24px;
+  position: relative; /* anchor for close button */
+}
 
+.settings__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings__options {
+  flex: 1 1 auto;
+}
+
+.settings__footer {
+  flex: 0 0 auto;
 }
 
 .settings__close {
+  position: absolute;
   display: block;
   border: 0;
   padding: 0;
-  margin: 0 0 0 12px;
+  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 .settings__container convers the button */
+}
+
+.settings__title {
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: #FFFFFF;
+  margin: 0 0 8px 0;
+}
+
+.settings__account {
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(255,255,255,0.8);
+}
+
+.settings__account-label {
+  display: inline-block;
+}
+
+.settings__account-id {
+  display: inline-block;
+  font-weight: 800;
+  margin-left: 4px;
+}
+
+.settings__cell {
+  background-color: #294D73;
+  padding: 15px 16px 15px 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
+
+.settings__cell + .settings__cell {
+  margin-top: 1px;
+}
+
+.settings__cell-label {
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 26px;
+  color: #FFFFFF;
+  flex: 1 0 auto;
+}
+
+.settings__cell-icon {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  margin-right: 8px;
+}
+
+.settings__cell-value {
+
+}
+
+.settings__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);
+}
+
+.settings__footer {
+  margin: 24px;
+}
+
+.settings__logout-button {
+  display: block;
+  width: 100%;
+  padding: 7px 12px 9px;
+  background-color: #D0021B;
+  border-radius: 4px;
+  border: 0;
+  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/Settings.js b/app/components/Settings.js
index 6e077356c0..5b36d8a64c 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -14,10 +14,45 @@ export default class Settings extends Component {
   render() {
     return (
       <Layout>
-        <Header hidden={ true } />
+        <Header hidden={ true } style={ Header.Style.defaultDark } />
         <Container>
           <div className="settings">
             <button className="settings__close" onClick={ ::this.onClose } />
+            <div className="settings__container">
+              <div className="settings__header">
+                <h2 className="settings__title">Settings</h2>
+                <div className="settings__account">
+                  <div className="settings__account-label">Account ID</div>
+                  <div className="settings__account-id">{ this.props.user.account }</div>
+                </div>
+              </div>
+              <div className="settings__content">
+                <div className="settings__options">
+                  <div className="settings__cell">
+                    <div className="settings__cell-label">Auto-secure</div>
+                    <div className="settings__cell-value">
+                      <input type="checkbox" className="settings__switch" />
+                    </div>
+                  </div>
+                  <div className="settings__cell-footer">
+                    When this device connects to the internet it will automatically connect to a secure server
+                  </div>
+                  <div className="settings__cell">
+                    <div className="settings__cell-label">FAQs</div>
+                  </div>
+                  <div className="settings__cell">
+                    <div className="settings__cell-label">Guides</div>
+                  </div>
+                  <div className="settings__cell">
+                    <img className="settings__cell-icon" src="./assets/images/icon-email.svg" />
+                    <div className="settings__cell-label">Contact support</div>
+                  </div>
+                </div>
+                <div className="settings__footer">
+                  <button className="settings__logout-button">Logout</button>
+                </div>
+              </div>
+            </div>
           </div>
         </Container>
       </Layout>
diff --git a/app/main.js b/app/main.js
index 81e5d39e4c..4c2e123573 100644
--- a/app/main.js
+++ b/app/main.js
@@ -67,7 +67,7 @@ const getWindowPosition = () => {
 const createWindow = () => {
   window = new BrowserWindow({
     width: 320, 
-    height: 568,
+    height: 568 + 12, // 12 is the size of transparent area around arrow
     frame: false,
     resizable: false,
     maximizable: false,