From bab4553c85f25c59a9500025a349503e6de2ea66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Mur=C3=A9?= <batolettre@gmail.com>
Date: Sun, 11 Mar 2018 16:27:59 +0100
Subject: [PATCH] AvatarWithConnectivity: add a tooltip with more information

---
 app/components/common/AvatarWithConnectivity.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/components/common/AvatarWithConnectivity.js b/app/components/common/AvatarWithConnectivity.js
index 67ce871..f9070bf 100644
--- a/app/components/common/AvatarWithConnectivity.js
+++ b/app/components/common/AvatarWithConnectivity.js
@@ -1,10 +1,12 @@
 // @flow
 import React, { Component } from 'react'
 import { withStyles } from 'material-ui/styles'
+import classNames from 'classnames'
+import Tooltip from 'material-ui/Tooltip'
 import Profile, { ConnectivityStatus } from 'models/Profile'
 import type { ConnectivityStatusType } from 'models/Profile'
 import Avatar from 'components/common/Avatar'
-import classNames from 'classnames'
+import Moment from 'react-moment'
 
 class AvatarWithConnectivity extends Component {
 
@@ -27,10 +29,14 @@ class AvatarWithConnectivity extends Component {
       [classes.bad]:     status === ConnectivityStatus.BAD,
     })
 
+    const tooltip = <span>Profile published <Moment fromNow>{profile.lastPublished}</Moment></span>
+
     return (
-      <div className={classes.wrapper + ' ' + statusClass}>
-        <Avatar person={profile} className={avatarClass} />
-      </div>
+      <Tooltip id='connectivity' title={tooltip}>
+        <div className={classes.wrapper + ' ' + statusClass}>
+          <Avatar person={profile} className={avatarClass} />
+        </div>
+      </Tooltip>
     )
   }
 }