From 784d4f1ecaed741cbeb086c96d51152bb2806ce6 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 8 Aug 2022 11:43:09 +0200
Subject: [PATCH] change(ui) - preferences - userlist

---
 .../Users/components/UserList/UserList.tsx    | 10 +++-
 .../components/UserListItem/UserListItem.tsx  | 52 +++++--------------
 2 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index 4cf90a8b7..5f805b386 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
@@ -65,8 +65,14 @@ function UserList(props: Props) {
                             <UserListItem
                                 user={user}
                                 editHandler={() => editHandler(user)}
-                                generateInvite={() => userStore.generateInviteCode(user.userId)}
-                                copyInviteCode={() => userStore.copyInviteCode(user.userId)}
+                                generateInvite={(e: any) => {
+                                    e.stopPropagation();
+                                    userStore.generateInviteCode(user.userId);
+                                }}
+                                copyInviteCode={(e) => {
+                                    e.stopPropagation();
+                                    userStore.copyInviteCode(user.userId);
+                                }}
                                 isEnterprise={isEnterprise}
                                 isOnboarding={isOnboarding}
                             />
diff --git a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
index d7b7d0d55..c8a42f07d 100644
--- a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
+++ b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
@@ -1,6 +1,6 @@
 //@ts-nocheck
 import React from 'react';
-import { Icon, Popup } from 'UI';
+import { Button, Popup } from 'UI';
 import { checkForRecent } from 'App/date';
 import cn from 'classnames';
 
@@ -10,8 +10,8 @@ const AdminPrivilegeLabel = ({ user }) => {
             {user.isAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Admin</span>}
             {user.isSuperAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Owner</span>}
         </>
-    )
-}
+    );
+};
 interface Props {
     isOnboarding?: boolean;
     user: any;
@@ -21,27 +21,16 @@ interface Props {
     isEnterprise?: boolean;
 }
 function UserListItem(props: Props) {
-    const {
-        user,
-        editHandler = () => {},
-        generateInvite = () => {},
-        copyInviteCode = () => {},
-        isEnterprise = false,
-        isOnboarding = false
-    } = props;
+    const { user, editHandler = () => {}, generateInvite = () => {}, copyInviteCode = () => {}, isEnterprise = false, isOnboarding = false } = props;
     return (
-        <div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group">
+        <div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group cursor-pointer" onClick={editHandler}>
             <div className="col-span-5">
                 <span className="mr-2">{user.name}</span>
                 {isEnterprise && <AdminPrivilegeLabel user={user} />}
             </div>
             <div className="col-span-3">
                 {!isEnterprise && <AdminPrivilegeLabel user={user} />}
-                {isEnterprise && (
-                    <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">
-                        {user.roleName}
-                    </span>
-                )}
+                {isEnterprise && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">{user.roleName}</span>}
             </div>
             {!isOnboarding && (
                 <div className="col-span-2">
@@ -49,41 +38,26 @@ function UserListItem(props: Props) {
                 </div>
             )}
 
-            <div className={cn("justify-self-end invisible group-hover:visible", { 'col-span-2' : !isOnboarding, 'col-span-4' : isOnboarding})}>
+            <div className={cn('justify-self-end invisible group-hover:visible', { 'col-span-2': !isOnboarding, 'col-span-4': isOnboarding })}>
                 <div className="grid grid-cols-2 gap-3 items-center justify-end">
                     <div>
                         {!user.isJoined && user.invitationLink && !user.isExpiredInvite && (
-                            <Popup
-                                delay={500}
-                                content="Copy Invite Code"
-                                hideOnClick={true}
-                            >
-                                <button className='' onClick={copyInviteCode}>
-                                    <Icon name="link-45deg" size="16" color="teal"/>
-                                </button>
+                            <Popup delay={500} content="Copy Invite Code" hideOnClick={true}>
+                                <Button variant="text-primary" icon="link-45deg" className="" onClick={copyInviteCode} />
                             </Popup>
                         )}
 
                         {!user.isJoined && user.isExpiredInvite && (
-                            <Popup
-                                delay={500}
-                                arrow
-                                content="Generate Invite"
-                                hideOnClick={true}
-                            >
-                                <button className='' onClick={generateInvite}>
-                                    <Icon name="link-45deg" size="16" color="red"/>
-                                </button>
+                            <Popup delay={500} arrow content="Generate Invite" hideOnClick={true}>
+                                <Button icon="link-45deg" variant="text-primary" className="" onClick={generateInvite} />
                             </Popup>
                         )}
                     </div>
-                    <button className='' onClick={editHandler}>
-                        <Icon name="pencil" color="teal" size="16" />
-                    </button>
+                    <Button variant="text-primary" icon="pencil" />
                 </div>
             </div>
         </div>
     );
 }
 
-export default UserListItem;
\ No newline at end of file
+export default UserListItem;