From 6396921d760dadc6c7cede3c99f46e8a90d89b3c Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 16 Aug 2022 17:57:02 +0200
Subject: [PATCH] change(ui) - users list no data icon and message

---
 .../Users/components/AddUserButton/AddUserButton.tsx       | 7 ++++---
 .../Client/Users/components/UserList/UserList.tsx          | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx b/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
index 6907a7b12..df2777e83 100644
--- a/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
+++ b/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popup, IconButton } from 'UI';
+import { Popup, IconButton, Button } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
@@ -14,7 +14,8 @@ function AddUserButton({ isAdmin = false, onClick }: any ) {
         <Popup
             content={ `${ !isAdmin ? PERMISSION_WARNING : (!cannAddUser ? LIMIT_WARNING : 'Add team member') }` }
         >
-            <IconButton
+            <Button disabled={ !cannAddUser || !isAdmin } variant="primary" onClick={ onClick }>Add</Button>
+            {/* <IconButton
                 id="add-button"
                 disabled={ !cannAddUser || !isAdmin }
                 circle
@@ -22,7 +23,7 @@ function AddUserButton({ isAdmin = false, onClick }: any ) {
                 outline
                 onClick={ onClick }
                 className="ml-4"
-            />
+            /> */}
         </Popup>
     );
 }
diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index 5f805b386..54acae74a 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
@@ -44,13 +44,14 @@ function UserList(props: Props) {
     return useObserver(() => (
         <Loader loading={loading}>
             <NoContent
-                show={!loading && length === 0}
                 title={
                     <div className="flex flex-col items-center justify-center">
-                        <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
-                        <div className="mt-6 text-2xl">No data available.</div>
+                    <AnimatedSVG name={ICONS.NO_AUDIT_TRAIL} size={80} />
+                    <div className="text-center text-gray-600 my-4">No matching results.</div>
                     </div>
                 }
+                size="small"
+                show={!loading && length === 0}
             >
                 <div className="mt-3 rounded bg-white">
                     <div className="grid grid-cols-12 p-3 border-b font-medium">