From 50f5b9fa770f456c007b0be10a1465ee119d1e40 Mon Sep 17 00:00:00 2001
From: Eyuel Berga Woldemichael <30384633+eyuelberga@users.noreply.github.com>
Date: Wed, 25 May 2022 05:36:17 +0300
Subject: [PATCH] [Feature] Update Manage user Archive and Unarchive button
 style (#3089)

* Update archive/unarchive style

* update button styles
---
 frontend/src/ManageOrgUsers/ManageOrgUsers.jsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx b/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx
index 7e66af89fb..d60417a77c 100644
--- a/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx
+++ b/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx
@@ -290,7 +290,9 @@ class ManageOrgUsers extends React.Component {
                   <div
                     className="card-table fixedHeader table-responsive table-bordered"
                     ref={this.tableRef}
-                    style={{ maxHeight: this.tableRef.current && this.calculateOffset() }}
+                    style={{
+                      maxHeight: this.tableRef.current && this.calculateOffset(),
+                    }}
                   >
                     <table data-testid="usersTable" className="table table-vcenter" disabled={true}>
                       <thead>
@@ -383,7 +385,13 @@ class ManageOrgUsers extends React.Component {
                                 )}
                               </td>
                               <td>
-                                <a
+                                <button
+                                  type="button"
+                                  style={{ minWidth: '100px' }}
+                                  className={`btn btn-sm btn-${user.status === 'archived' ? 'success' : 'danger'} ${
+                                    unarchivingUser === user.id || archivingUser === user.id ? 'btn-loading' : ''
+                                  }`}
+                                  disabled={unarchivingUser === user.id || archivingUser === user.id}
                                   onClick={() => {
                                     user.status === 'archived'
                                       ? this.unarchiveOrgUser(user.id)
@@ -391,9 +399,7 @@ class ManageOrgUsers extends React.Component {
                                   }}
                                 >
                                   {user.status === 'archived' ? 'Unarchive' : 'Archive'}
-
-                                  {unarchivingUser === user.id || archivingUser === user.id ? '...' : ''}
-                                </a>
+                                </button>
                               </td>
                             </tr>
                           ))}