- Transition header when connecting

- Pass server to Backend.connect()
- Add missing connecting event

3 files changed, 20 insertions, 7 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 0898f28a44..21c308d660 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
-import { servers } from '../constants';
+import { servers, ConnectionState } from '../constants';
 
 export default class Connect extends Component {
   
@@ -20,7 +20,8 @@ export default class Connect extends Component {
   }
 
   onConnect() {
-    this.props.onConnect();
+    const server = this.props.settings.preferredServer;
+    this.props.onConnect(server);
   }
 
   onDisconnect() {
@@ -29,19 +30,27 @@ export default class Connect extends Component {
 
   serverName(key) {
     switch(key) {
-      case 'fastest': return 'Fastest';
-      case 'nearest': return 'Nearest';
-      default: return (servers[key] || {}).name
+    case 'fastest': return 'Fastest';
+    case 'nearest': return 'Nearest';
+    default: return (servers[key] || {}).name;
+    }
+  }
+
+  headerStyle() {
+    const S = Header.Style;
+    switch(this.props.connect.status) {
+    case ConnectionState.disconnected: return S.error;
+    case ConnectionState.connected: return S.success;
+    default: return S.default;
     }
   }
 
   render() {
     const preferredServer = this.props.settings.preferredServer;
     const serverName = this.serverName(preferredServer);
-    
     return (
       <Layout>
-        <Header showSettings={ true } onSettings={ ::this.onSettings } />
+        <Header style={ this.headerStyle() } showSettings={ true } onSettings={ ::this.onSettings } />
         <Container>
           <div className="connect">
             <div className="connect__map"></div>
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index 5e6f4386af..b8dfe2543c 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -4,6 +4,7 @@
   -webkit-mask: 
     url(../assets/images/app-triangle.svg) 50% 0% no-repeat, 
     url(../assets/images/app-header-backdrop.svg) no-repeat;
+  transition: 0.5s background-color ease-in-out;
 }
 
 .headerbar--hidden { 
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 8e08ab237c..a97f19a6fb 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -55,6 +55,9 @@ export default class Backend extends EventEmitter {
 
   connect(addr) {
     this._serverAddress = addr;
+
+    // emit: connecting
+    this.emit(EventType.connecting, addr);
     
     // @TODO: Add connect call
     setTimeout(() => {