diff options
Diffstat (limited to 'panel/src/pages/Roles.jsx')
| -rw-r--r-- | panel/src/pages/Roles.jsx | 26 |
1 files changed, 17 insertions, 9 deletions
diff --git a/panel/src/pages/Roles.jsx b/panel/src/pages/Roles.jsx index 5b18ace..a30c953 100644 --- a/panel/src/pages/Roles.jsx +++ b/panel/src/pages/Roles.jsx @@ -3,6 +3,7 @@ import { db, auth } from '../firebase'; import { collection, getDocs } from 'firebase/firestore'; import { httpsCallable } from 'firebase/functions'; import Navbar from '../components/Navbar'; +import './Roles.css'; const Roles = () => { const [users, setUsers] = useState([]); @@ -30,21 +31,28 @@ const Roles = () => { }, []); if (loading) { - return <p>Loading...</p>; + return ( + <div className="loading-screen"> + <div className="loading-text">Loading</div> + <div className="loading-dots"> + <span>.</span><span>.</span><span>.</span> + </div> + </div> + ); } return ( <div> <Navbar /> - <div className="container mt-5"> - <h4>Manage Roles</h4> - <div className="list-group"> + <div className="roles-container"> + <h1>Manage Roles</h1> + <div className="roles-list"> {users.map((user, index) => ( - <div key={index} className="list-group-item d-flex justify-content-between align-items-center"> - <p className="mb-0">{user.email}</p> - <div> - <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary btn-sm mr-2">Make Admin</button> - <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary btn-sm">Make User</button> + <div key={index} className="role-item"> + <p className="user-email">{user.email}</p> + <div className="role-actions"> + <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn admin-btn">Make Admin</button> + <button onClick={() => handleRoleChange(user.email, 'user')} className="btn user-btn">Make User</button> </div> </div> ))} |