From c6b0a8b176e74bf52bfa758ea2753138c6d8e1b3 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Fri, 12 Jan 2024 23:13:03 +0530
Subject: [PATCH] Refactor user delete button in FacilityUsers and ManageUsers
 components

---
 src/Components/Facility/FacilityUsers.tsx | 14 ++++++++------
 src/Components/Users/ManageUsers.tsx      | 16 ++++++++--------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/Components/Facility/FacilityUsers.tsx b/src/Components/Facility/FacilityUsers.tsx
index ca2e1d0e363..f18b9578192 100644
--- a/src/Components/Facility/FacilityUsers.tsx
+++ b/src/Components/Facility/FacilityUsers.tsx
@@ -296,7 +296,10 @@ export default function FacilityUsers(props: any) {
                     </span>
                   </div>
                 </div>
-                <div className="mt-2 text-2xl font-bold capitalize">
+                <div
+                  id="name"
+                  className="mt-2 flex gap-3 text-2xl font-bold capitalize"
+                >
                   {`${user.first_name} ${user.last_name}`}
 
                   {user.last_login && isUserOnline(user) ? (
@@ -306,13 +309,12 @@ export default function FacilityUsers(props: any) {
                     ></i>
                   ) : null}
                   {showUserDelete(authUser, user) && (
-                    <button
-                      type="button"
-                      className="focus:ring-blue m-3 w-20 self-end rounded-md border border-red-500 bg-white px-3 py-2 text-center text-sm font-medium leading-4 text-red-700 transition duration-150 ease-in-out hover:text-red-500 hover:shadow focus:border-red-300 focus:outline-none active:bg-gray-50 active:text-red-800"
+                    <div
+                      className="w-8 cursor-pointer rounded-lg bg-red-50 text-xl text-red-600 hover:bg-red-50 hover:text-red-700"
                       onClick={() => handleDelete(user)}
                     >
-                      Delete
-                    </button>
+                      <CareIcon icon="l-trash" className="ml-[5px]" />
+                    </div>
                   )}
                 </div>
 
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 750603ccf6f..300f9846a89 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -218,7 +218,10 @@ export default function ManageUsers() {
                     )}
                   </div>
                 </div>
-                <div id="name" className="mt-2 text-2xl font-bold capitalize">
+                <div
+                  id="name"
+                  className="mt-2 flex gap-3 text-2xl font-bold capitalize"
+                >
                   {`${user.first_name} ${user.last_name}`}
 
                   {user.last_login && cur_online ? (
@@ -228,15 +231,12 @@ export default function ManageUsers() {
                     ></i>
                   ) : null}
                   {showUserDelete(authUser, user) && (
-                    <ButtonV2
-                      variant="danger"
-                      ghost
-                      border
-                      className="float-right"
+                    <div
+                      className="w-8 cursor-pointer rounded-lg bg-red-50 text-xl text-red-600 hover:bg-red-50 hover:text-red-700"
                       onClick={() => handleDelete(user)}
                     >
-                      Delete
-                    </ButtonV2>
+                      <CareIcon icon="l-trash" className="ml-[5px]" />
+                    </div>
                   )}
                 </div>