From 1fbd838988bc4133e3d8a07b3266e838f15aea58 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 5 Jul 2022 09:50:30 +0200
Subject: [PATCH] change(ui) - assist list show active status

---
 .../shared/SessionItem/SessionItem.tsx        |  2 +-
 frontend/app/components/ui/Avatar/Avatar.js   | 28 +++++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index ae7c7b56a..9a329f4c6 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -109,7 +109,7 @@ function SessionItem(props: RouteComponentProps & Props) {
         <div className="flex items-start">
           <div className={ cn('flex items-center w-full')}>
             <div className="flex items-center pr-2" style={{ width: "30%"}}>
-              <div><Avatar seed={ userNumericHash } isAssist={isAssist} /></div>
+              <div><Avatar isActive={active} seed={ userNumericHash } isAssist={isAssist} /></div>
               <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center">
                 <div
                   className={cn('text-lg', {'color-teal cursor-pointer': !disableUser && hasUserId, [stl.userName]: !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}
diff --git a/frontend/app/components/ui/Avatar/Avatar.js b/frontend/app/components/ui/Avatar/Avatar.js
index a70ae8917..be4efdbb9 100644
--- a/frontend/app/components/ui/Avatar/Avatar.js
+++ b/frontend/app/components/ui/Avatar/Avatar.js
@@ -2,19 +2,23 @@ import React from 'react';
 import cn from 'classnames';
 import { avatarIconName } from 'App/iconNames';
 import stl from './avatar.module.css';
-import { Icon } from 'UI';
+import { Icon, Popup } from 'UI';
 
-const Avatar = ({ isAssist = false, className, width = "38px", height = "38px",  iconSize = 26, seed }) => {
-  var iconName = avatarIconName(seed);
-  return (
-    <div
-        className={ cn(stl.wrapper, "p-2 border flex items-center justify-center rounded-full relative")}
-        style={{ width, height }}
-    >
-        <Icon name={iconName} size={iconSize} color="tealx"/>
-        {isAssist && <div className="w-2 h-2 bg-green rounded-full absolute right-0 bottom-0" style={{ marginRight: '3px', marginBottom: '3px'}} /> }
-    </div>
-  );
+const Avatar = ({ isActive = false, isAssist = false, className, width = '38px', height = '38px', iconSize = 26, seed }) => {
+    var iconName = avatarIconName(seed);
+    return (
+        <Popup content={isActive ? 'Active user' : 'User might be inactive'} disabled={!isAssist}>
+            <div className={cn(stl.wrapper, 'p-2 border flex items-center justify-center rounded-full relative')} style={{ width, height }}>
+                <Icon name={iconName} size={iconSize} color="tealx" />
+                {isAssist && (
+                    <div
+                        className={cn('w-2 h-2 rounded-full absolute right-0 bottom-0', { 'bg-green': isActive, 'bg-orange': !isActive })}
+                        style={{ marginRight: '3px', marginBottom: '3px' }}
+                    />
+                )}
+            </div>
+        </Popup>
+    );
 };
 
 export default Avatar;