--- a/client/src/components/Navbar.js	Fri Jul 28 19:40:35 2017 +0200
+++ b/client/src/components/Navbar.js	Sun Jul 30 01:02:09 2017 +0200
@@ -8,6 +8,7 @@
 import * as authActions from '../actions/authActions';
 import { forceSync } from '../actions/networkActions';
 import { ActionEnum } from '../constants';
+import './Navbar.css';
 
 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
 
@@ -42,11 +43,22 @@
   )
 }
 
-const SyncButton = ({ onSyncClick, isSynchronizing }) => {
+const SyncButton = ({ onSyncClick, isSynchronizing, isSynchronized, id }) => {
+  const classnames = "material-icons"
+    + ((!isSynchronized)?" sync-button-not-synchronized":"")
+    + ((isSynchronizing)?" sync-button-synchronizing":"");
+  let title = "Synchronize";
+  let clickCb = onSyncClick;
+  if(isSynchronizing) {
+    title = "Synchronizing...";
+    clickCb = () => {};
+  } else if (!isSynchronized) {
+    title += ": not synchronized";
+  }
+
   return (
-    <NavItem onClick={onSyncClick}>
-      Sync
-      {isSynchronizing && <span className="material-icons">&#xE627;</span>}
+    <NavItem title={title} onClick={clickCb} id={id || null}>
+      <span className={classnames}>&#xE627;</span>
     </NavItem>
   )
 }
@@ -118,7 +130,7 @@
             <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
           </Nav>
           <Nav pullRight>
-            <SyncButton onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing}/>
+            <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
             <Online {...this.props} />
             <LoginNav {...this.props} onLogout={this.onClickLogout} />
           </Nav>