fix: Fix #650.

5 files changed, 32 insertions, 13 deletions

diff --git a/FrontEnd/src/views/admin/Admin.tsx b/FrontEnd/src/views/admin/Admin.tsx
index 9393a61f..e750621c 100644
--- a/FrontEnd/src/views/admin/Admin.tsx
+++ b/FrontEnd/src/views/admin/Admin.tsx
@@ -29,7 +29,7 @@ const Admin: React.FC<AdminProps> = ({ user }) => {
             const name = match.params["name"];
             return (
               <div className="container">
-                <AdminNav />
+                <AdminNav className="mt-2" />
                 {(() => {
                   if (name === "users") {
                     return <UserAdmin user={user} />;
diff --git a/FrontEnd/src/views/admin/AdminNav.tsx b/FrontEnd/src/views/admin/AdminNav.tsx
index 8b4c5fda..821c9b0a 100644
--- a/FrontEnd/src/views/admin/AdminNav.tsx
+++ b/FrontEnd/src/views/admin/AdminNav.tsx
@@ -3,13 +3,14 @@ import { useRouteMatch } from "react-router";
 
 import Tabs from "../common/tab/Tabs";
 
-const AdminNav: React.FC = () => {
+const AdminNav: React.FC<{ className?: string }> = ({ className }) => {
   const match = useRouteMatch<{ name: string }>();
 
   const name = match.params.name;
 
   return (
     <Tabs
+      className={className}
       activeTabName={name}
       tabs={[
         {
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 4ceff8ab..f713b8b7 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -206,19 +206,19 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
   return (
     <div className="admin-user-item">
       <i
-        className="bi-pencil-square float-end icon-button cru-color-warning"
+        className="bi-pencil-square cru-float-right icon-button cru-color-primary-enhance"
         onClick={() => setEditMaskVisible(true)}
       />
-      <h4 className="cru-color-primary">{user.username}</h4>
-      <div className="cru-color-secondary">
+      <h5 className="cru-color-primary">{user.username}</h5>
+      <small className="d-block cru-color-secondary">
         {t("admin:user.nickname")}
         {user.nickname}
-      </div>
-      <div className="cru-color-secondary">
+      </small>
+      <small className="d-block cru-color-secondary">
         {t("admin:user.uniqueId")}
         {user.uniqueId}
-      </div>
-      <div className="cru-color-secondary">
+      </small>
+      <small className="d-block cru-color-secondary">
         {t("admin:user.permissions")}
         {user.permissions.map((permission) => {
           return (
@@ -227,7 +227,7 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
             </span>
           );
         })}
-      </div>
+      </small>
       <div
         className={classnames("edit-mask", !editMaskVisible && "d-none")}
         onClick={() => setEditMaskVisible(false)}
diff --git a/FrontEnd/src/views/admin/index.css b/FrontEnd/src/views/admin/index.css
index 00917600..17e24586 100644
--- a/FrontEnd/src/views/admin/index.css
+++ b/FrontEnd/src/views/admin/index.css
@@ -1,19 +1,33 @@
 .admin-user-item {

   position: relative;

+  border: var(--cru-primary-color) solid;

+  border-width: 1px 1px 0;

+  padding: 1em;

 }

+

+.admin-user-item:last-of-type {

+  border-bottom-width: 1px;

+}

+

 .admin-user-item .edit-mask {

   position: absolute;

   top: 0;

   left: 0;

   bottom: 0;

   right: 0;

-  background: #ffffffc5;

+  background: rgba(255, 255, 255, 0.9);

   position: absolute;

   display: flex;

-  justify-content: center;

+  justify-content: space-around;

   align-items: center;

-  flex-direction: column;

 }

+

+@media (max-width: 576px) {

+  .admin-user-item .edit-mask {

+    flex-direction: column;

+  }

+}

+

 .admin-user-item .edit-mask button {

   margin: 0.5em 2em;

 }

diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index b21ec896..05fdce04 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -198,6 +198,10 @@
   color: var(--cru-primary-color);

 }

 

+.cru-color-primary-enhance {

+  color: var(--cru-primary-enhance-color);

+}

+

 .cru-color-secondary {

   color: var(--cru-secondary-color);

 }