14 files changed, 39 insertions, 19 deletions
diff --git a/app/actions/connect.js b/app/actions/connect.js
index 729de9570f..dc794a01d7 100644
--- a/app/actions/connect.js
+++ b/app/actions/connect.js
@@ -1,8 +1,7 @@
 import { createAction } from 'redux-actions';
-import { ConnectionState } from '../constants';
 
 const connectionChange = createAction('CONNECTION_CHANGE');
-const connect = (backend, addr) => (dispatch, getState) => backend.connect(addr);
-const disconnect = (backend) => (dispatch, getState) => backend.disconnect();
+const connect = (backend, addr) => () => backend.connect(addr);
+const disconnect = (backend) => () => backend.disconnect();
 
 export default { connect, disconnect, connectionChange };
diff --git a/app/actions/user.js b/app/actions/user.js
index ef8e67fa37..c1519ba19b 100644
--- a/app/actions/user.js
+++ b/app/actions/user.js
@@ -1,6 +1,4 @@
 import { createAction } from 'redux-actions';
-import { replace } from 'react-router-redux';
-import { LoginState } from '../constants';
 
 const loginChange = createAction('USER_LOGIN_CHANGE');
 const login = (backend, account) => () => backend.login(account);
diff --git a/app/app.js b/app/app.js
index 0e3b2c37eb..01d4146690 100644
--- a/app/app.js
+++ b/app/app.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router, hashHistory } from 'react-router';
 import { syncHistoryWithStore, replace } from 'react-router-redux';
-import { webFrame } from 'electron';
+import { webFrame, ipcRenderer } from 'electron';
 import routes from './routes';
 import configureStore from './store';
 import userActions from './actions/user';
@@ -30,6 +30,22 @@ const rootElement = document.querySelector(document.currentScript.getAttribute('
 // disable smart pinch.
 webFrame.setVisualZoomLevelLimits(1, 1);
 
+// Tray icon
+const updateTrayIcon = () => {
+  const s = store.getState().connect.status;
+  let iconName;
+
+  if(s === ConnectionState.connected) {
+    iconName = 'connected';
+  } else {
+    iconName = 'default';
+  }
+  
+  ipcRenderer.send('changeTrayIcon', iconName);
+};
+
+updateTrayIcon();
+
 // Create backend
 const backend = new Backend();
 
@@ -37,7 +53,7 @@ const backend = new Backend();
 
 backend.on(Backend.EventType.updatedIp, (clientIp) => {
   store.dispatch(connectActions.connectionChange({ clientIp }));
-})
+});
 
 backend.on(Backend.EventType.connecting, (serverAddress) => {
   store.dispatch(connectActions.connectionChange({ 
@@ -50,6 +66,8 @@ backend.on(Backend.EventType.connecting, (serverAddress) => {
 backend.on(Backend.EventType.connect, (serverAddress, error) => {
   const status = error ? ConnectionState.disconnected : ConnectionState.connected;
   store.dispatch(connectActions.connectionChange({ error, status }));
+
+  updateTrayIcon();
 });
 
 backend.on(Backend.EventType.disconnect, () => {
@@ -58,6 +76,8 @@ backend.on(Backend.EventType.disconnect, () => {
     serverAddress: null, 
     error: null
   }));
+  
+  updateTrayIcon();
 });
 
 backend.on(Backend.EventType.logging, (account) => {
diff --git a/app/assets/images/tray-icon-connected.png b/app/assets/images/tray-icon-connected.png
new file mode 100644
index 0000000000..8b0cc6d193
--- /dev/null
+++ b/app/assets/images/tray-icon-connected.png
diff --git a/app/assets/images/tray-icon-connected@2x.png b/app/assets/images/tray-icon-connected@2x.png
new file mode 100644
index 0000000000..6c66e8534d
--- /dev/null
+++ b/app/assets/images/tray-icon-connected@2x.png
diff --git a/app/assets/images/tray-icon-default.png b/app/assets/images/tray-icon-default.png
new file mode 100644
index 0000000000..94c6fc9b0f
--- /dev/null
+++ b/app/assets/images/tray-icon-default.png
diff --git a/app/assets/images/tray-icon-default@2x.png b/app/assets/images/tray-icon-default@2x.png
new file mode 100644
index 0000000000..dfc1f770a0
--- /dev/null
+++ b/app/assets/images/tray-icon-default@2x.png
diff --git a/app/assets/images/trayIconTemplate.png b/app/assets/images/trayIconTemplate.png
deleted file mode 100644
index 3888745a8f..0000000000
--- a/app/assets/images/trayIconTemplate.png
+++ /dev/null
diff --git a/app/assets/images/trayIconTemplate@2x.png b/app/assets/images/trayIconTemplate@2x.png
deleted file mode 100644
index 3b5f364903..0000000000
--- a/app/assets/images/trayIconTemplate@2x.png
+++ /dev/null
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 4ab942407b..7f3b98c2ff 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -94,7 +94,7 @@ export default class Connect extends Component {
                 </If>
                 
                 <div className={ this.networkSecurityClass() }>{ this.networkSecurityMessage() }</div>
-                <div className="connect__status-location">{ "City" }<br/>{ serverName }</div>
+                <div className="connect__status-location">{ 'City' }<br/>{ serverName }</div>
                 <div className="connect__status-ipaddress">{ this.props.connect.clientIp }</div>
               </div>
 
diff --git a/app/components/CustomScrollbars.js b/app/components/CustomScrollbars.js
index 45a22b5d88..2828f14f39 100644
--- a/app/components/CustomScrollbars.js
+++ b/app/components/CustomScrollbars.js
@@ -10,7 +10,7 @@ export default class CustomScrollbars extends Component {
     return (
       <Scrollbars
         { ...this.props }
-        renderThumbVertical={ props => <div className="custom-scrollbars__thumb-vertical"/> }>
+        renderThumbVertical={ () => <div className="custom-scrollbars__thumb-vertical"/> }>
         { this.props.children }
       </Scrollbars>
     );
diff --git a/app/containers/SelectLocationPage.js b/app/containers/SelectLocationPage.js
index c9bef71f6f..114ec5ffd5 100644
--- a/app/containers/SelectLocationPage.js
+++ b/app/containers/SelectLocationPage.js
@@ -3,12 +3,7 @@ import { bindActionCreators } from 'redux';
 import SelectLocation from '../components/SelectLocation';
 import settingsActions from '../actions/settings';
 
-const mapStateToProps = (state) => {
-  return state;
-};
-
-const mapDispatchToProps = (dispatch, props) => {
-  return bindActionCreators(settingsActions, dispatch);
-};
+const mapStateToProps = (state) => state;
+const mapDispatchToProps = (dispatch) => bindActionCreators(settingsActions, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(SelectLocation);
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 73be82df75..3366324b5a 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -86,7 +86,7 @@ export default class Backend extends EventEmitter {
         this._timer = null;
       }
       this._cancellationHandler = null;
-    }
+    };
   }
 
   disconnect() {
diff --git a/app/main.js b/app/main.js
index 1843fcf115..c6a2de0b11 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,5 +1,5 @@
 import path from 'path';
-import { app, crashReporter, BrowserWindow, ipcMain, Tray, Menu } from 'electron';
+import { app, crashReporter, BrowserWindow, ipcMain, Tray, Menu, nativeImage } from 'electron';
 import NSEventMonitor from 'nseventmonitor';
 
 const isDevelopment = (process.env.NODE_ENV === 'development');
@@ -8,6 +8,14 @@ let window = null;
 let tray = null;
 let macEventMonitor = new NSEventMonitor();
 
+ipcMain.on('changeTrayIcon', (event, name) => {
+  const iconPath = path.join(__dirname, './assets/images/tray-icon-' + name + '.png');
+  const image = nativeImage.createFromPath(iconPath);
+  if(image) {
+    tray.setImage(image);
+  }
+});
+
 // hide dock icon
 app.dock.hide();
 
@@ -130,7 +138,7 @@ ipcMain.on('show-window', () => {
 });
 
 const createTray = () => {
-  tray = new Tray(path.join(__dirname, 'assets/images/trayIconTemplate.png'));
+  tray = new Tray(path.join(__dirname, 'assets/images/tray-icon-default.png'));
   tray.on('right-click', toggleWindow);
   tray.on('double-click', toggleWindow);
   tray.on('click', toggleWindow);