6 files changed, 38 insertions, 47 deletions
diff --git a/app/components/Connect.js b/app/components/Connect.js
index dc32594067..27aaedd4ee 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,14 +1,19 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { Layout, Container, Header } from './Layout';
 
 export default class Connect extends Component {
+
+  static propTypes = {
+    logout: PropTypes.func.isRequired
+  }
+
   render() {
     return (
       <Layout>
         <Header />
         <Container>
           <div className="connect">
-            
+            <button style={{ width: '100px', display: 'block', margin: '10px auto' }} onClick={ this.props.logout }>Log out</button>
           </div>
         </Container>
       </Layout>
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index 4d9d326eff..140e64df55 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -1,15 +1,40 @@
 .headerbar {
+  margin-top: 12px;
   padding: 12px;
+  background-color: #294D73;
+  border-radius: 8px 8px 0 0;
+  position: relative;
 }
 
-.header--style-error {
+.headerbar:before {
+  display: block;
+  content: '';
+  width: 30px;
+  height: 13px;
+  margin: -12px 0 0 -15px;
+  position: absolute;
+  left: 50%;
+  top: 0%;
+  background-image: url(../assets/images/app-triangle.svg);
+  background-repeat: no-repeat;
+}
+
+.headerbar--style-error {
   background-color: #D0021B;
 }
 
-.header--style-success {
+.headerbar--style-error:before {
+  background-image: url(../assets/images/app-triangle-error.svg);
+}
+
+.headerbar--style-success {
   background-color: #44AD4D;
 }
 
+.headerbar--style-success:before {
+  background-image: url(../assets/images/app-triangle-success.svg);
+}
+
 .headerbar__title {
   font-family: DINPro;
   font-size: 24px;
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index d13c5c3462..ce5d039f1f 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -15,7 +15,7 @@ export default class HeaderBar extends Component {
     let containerClass = ['headerbar'];
 
     if(HeaderBar.Style.isValid(style)) {
-      containerClass.push(`header--style-${style}`);
+      containerClass.push(`headerbar--style-${style}`);
     }
 
     return (
diff --git a/app/components/Layout.css b/app/components/Layout.css
index 8ef242d7f5..5d1aa92445 100644
--- a/app/components/Layout.css
+++ b/app/components/Layout.css
@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #294D73;
 }
 
 .layout__header {
@@ -11,4 +10,5 @@
 
 .layout__container {
   flex: 1 1 100%;
+  background: #294D73;
 }
 \ No newline at end of file
diff --git a/app/components/Layout.js b/app/components/Layout.js
index b0cc0a8420..50f52e7dca 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -10,7 +10,7 @@ export class Header extends Component {
       <div className="layout__header">
         <HeaderBar {...this.props} />
       </div>
-    )
+    );
   }
 }
 
@@ -24,7 +24,7 @@ export class Container extends Component {
       <div className="layout__container">
         {this.props.children}
       </div>
-    )
+    );
   }
 }
 
diff --git a/app/components/Tray.js b/app/components/Tray.js
deleted file mode 100644
index 00dc679981..0000000000
--- a/app/components/Tray.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { TrayMenu, TrayItem } from '../lib/components/TrayMenu';
-import { shell } from 'electron';
-
-import { LoginState } from '../constants';
-
-export default class Tray extends Component {
-
-  static propTypes = {
-    handle: PropTypes.object.isRequired,
-    backend: PropTypes.object.isRequired
-  }
-
-  logout() {
-    this.props.logout(this.props.backend);
-  }
-
-  openPrivacyPolicy() {
-    shell.openExternal('https://mullvad.net/#privacy');
-  }
-
-  openHomepage() {
-    shell.openExternal('https://mullvad.net');
-  }
-  
-  render() {
-    const loggedIn = this.props.user.status === LoginState.ok;
-
-    return (
-      <TrayMenu tray={ this.props.handle }>
-        <TrayItem label="Log out" click={ ::this.logout } visible={ loggedIn } />
-        <TrayItem type="separator" visible={ loggedIn } />
-        <TrayItem label="Privacy Policy" click={ ::this.openPrivacyPolicy } />
-        <TrayItem label="Visit homepage" click={ ::this.openHomepage } />
-      </TrayMenu>
-    );
-  }
-
-}
-\ No newline at end of file