From 258d6fca82ca5b31dbe7313007cf753d6a09fda8 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 17 Nov 2020 17:50:59 +0800
Subject: ...

---
 FrontEnd/src/app/views/admin/UserAdmin.tsx | 51 +++++++++++++++---------------
 1 file changed, 25 insertions(+), 26 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 3432cddf..c78490d8 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -29,30 +29,29 @@ interface UserCardProps {
 
 const UserItem: React.FC<UserCardProps> = ({ user, on }) => {
   return (
-    <ListGroup.Item className="container">
-      <Row className="align-items-center">
-        <Col>
-          <p className="mb-0 text-primary">{user.username}</p>
-          <small
-            className={user.permissions ? "text-danger" : "text-secondary"}
-          >
-            {user.permissions ? "administrator" : "user"}
-          </small>
-        </Col>
-        <Col className="col-auto">
-          <Dropdown>
-            <Dropdown.Toggle variant="warning" className="text-light">
-              Manage
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <Dropdown.Item onClick={on["modify"]}>Modify</Dropdown.Item>
-              <Dropdown.Item className="text-danger" onClick={on["delete"]}>
-                Delete
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        </Col>
-      </Row>
+    <ListGroup.Item>
+      <div>
+        <span className="text-primary">@{user.username + " "}</span>
+        <small className="ml-2 text-secondary">{user.nickname}</small>
+      </div>
+      <div>
+        {user.permissions.map((permission) => {
+          return (
+            <small key={permission} className="text-danger">
+              {permission + " "}
+            </small>
+          );
+        })}
+      </div>
+      <Dropdown className="text-right">
+        <Dropdown.Toggle variant="outline-primary">Manage</Dropdown.Toggle>
+        <Dropdown.Menu>
+          <Dropdown.Item onClick={on["modify"]}>Modify</Dropdown.Item>
+          <Dropdown.Item className="text-danger" onClick={on["delete"]}>
+            Delete
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
     </ListGroup.Item>
   );
 };
@@ -271,14 +270,14 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         <Row className="justify-content-end my-2">
           <Col xs="auto">
             <Button
-              variant="success"
+              variant="outline-success"
               onClick={() =>
                 setDialog({
                   type: "create",
                 })
               }
             >
-              Create User
+              Create
             </Button>
           </Col>
         </Row>
-- 
cgit v1.2.3