Refactor user delete button in FacilityUsers and ManageUsers componen…

…ts (#7027)
ohcnetwork · Jan 12, 2024 · 27b524a · 27b524a
1 parent 33f913c
commit 27b524a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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>