Update User Management styling to align with design (#515)

### Summary & Motivation Update User Management page to align with the design specifications. - Move profile menu item to a new separate `profileMenuItem` component - Set height on menu items to match design, and set width for smooth open menu animation - Switch Profile menu from icon to Avatar image to match design - Format user action menu with consistent height and red text for delete item to match design - Only show delete icon when hovering over user row - Ensure rounded corners of search textbox align with other elements and match design - Add minimal padding between main content and side menu to prevent selected borders from being cropped - Disable sorting on Date, Last seen, and Role - Ensure the background on the user management page covers the full height of the screen - Ensure the header and pagination on the user management page remain visible while scrolling ### Checklist - [x] I have added a Label to the pull-request - [x] I have added tests, and done manual regression tests - [x] I have updated the documentation, if necessary
platformplatform · Jun 23, 2024 · 23d8da4 · 23d8da4
2 parents 8f383e6 + 1303c42
commit 23d8da4
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 64 deletions.
diff --git a/application/account-management/WebApp/pages/admin/users/-components/UserHeader.tsx b/application/account-management/WebApp/pages/admin/users/-components/UserHeader.tsx
@@ -1,15 +1,7 @@
-import {
-  ChevronRightIcon,
-  CircleUserIcon,
-  Languages,
-  LifeBuoyIcon,
-  LogOutIcon,
-  MoonIcon,
-  SettingsIcon,
-  UserIcon
-} from "lucide-react";
+import { ChevronRightIcon, Languages, LifeBuoyIcon, LogOutIcon, MoonIcon, SettingsIcon, UserIcon } from "lucide-react";
+import avatarUrl from "../../images/avatar.png";
 import { MenuTrigger } from "react-aria-components";
-import ProfileData from "./data";
+import ProfileMenuItem from "./profileMenuItem";
 import { Button } from "@repo/ui/components/Button";
 import { Menu, MenuItem, MenuSeparator } from "@repo/ui/components/Menu";
 import { Popover } from "@repo/ui/components/Popover";
@@ -33,25 +25,25 @@ export function UserHeader() {
         <LifeBuoyIcon size={20} />
         <Languages size={20} />
         <MenuTrigger>
-          <Button aria-label="Menu" variant="icon">
-            <CircleUserIcon size={30} />
+          <Button aria-label="Menu" variant="icon" className="w-12 h-12 rounded-full bg-transparent">
+            <img src={avatarUrl} alt="Profile menu" />
           </Button>
           <Popover>
             <Menu>
-              <MenuItem onAction={() => alert("open")}>
-                <ProfileData />
+              <MenuItem className="h-16 w-60" onAction={() => alert("open")}>
+                <ProfileMenuItem />
               </MenuItem>
               <MenuSeparator />
-              <MenuItem onAction={() => alert("open")}>
+              <MenuItem className="h-11 w-60" onAction={() => alert("open")}>
                 <UserIcon size={16} />
                 Edit profile
               </MenuItem>
-              <MenuItem onAction={() => alert("rename")}>
+              <MenuItem className="h-11 w-60" onAction={() => alert("rename")}>
                 <SettingsIcon size={16} />
                 Account settings
               </MenuItem>
               <MenuSeparator />
-              <MenuItem onAction={() => alert("rename")}>
+              <MenuItem className="h-12 w-60" onAction={() => alert("rename")}>
                 <LogOutIcon size={16} /> Sign out
               </MenuItem>
             </Menu>

diff --git a/application/account-management/WebApp/pages/admin/users/-components/UserInvite.tsx b/application/account-management/WebApp/pages/admin/users/-components/UserInvite.tsx
@@ -3,8 +3,8 @@ import { Button } from "@repo/ui/components/Button";
 
 export function UserInvite() {
   return (
-    <div className="flex h-24 items-center justify-between space-x-2">
-      <div className="text-gray-900 text-3xl font-semibold flex gap-2 flex-col mt-10">
+    <div className="flex h-24 items-center justify-between space-x-2 mt-4 mb-4">
+      <div className="text-gray-900 text-3xl font-semibold flex gap-2 flex-col mt-6">
         <h1 className="">Users</h1>
         <p className="text-gray-500 text-sm font-normal whitespace-nowrap overflow-hidden text-ellipsis">
           Manage your users and permissions here.

diff --git a/application/account-management/WebApp/pages/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/pages/admin/users/-components/UserQuerying.tsx
@@ -12,7 +12,7 @@ export function UserQuerying() {
           placeholder="Search"
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="border px-4 py-2 rounded pl-10 border-gray-300"
+          className="border px-4 py-2 rounded-lg pl-10 border-gray-300"
         />
         <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
       </div>

diff --git a/application/account-management/WebApp/pages/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/pages/admin/users/-components/UserTable.tsx
@@ -7,7 +7,7 @@ import { Cell, Column, Row, Table, TableHeader } from "@repo/ui/components/Table
 import Badge from "@repo/ui/components/Badge";
 import Pagination from "@repo/ui/components/Pagination";
 import { Popover } from "@repo/ui/components/Popover";
-import { Menu, MenuItem } from "@repo/ui/components/Menu";
+import { Menu, MenuItem, MenuSeparator } from "@repo/ui/components/Menu";
 import { Button } from "@repo/ui/components/Button";
 
 export function UserTable() {
@@ -34,7 +34,7 @@ export function UserTable() {
 
   return (
     <div>
-      <div className="mb-4 w-full min-w-64 overflow-x-auto">
+      <div className="overflow-auto">
         <Table selectionMode="multiple" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor}>
           <TableHeader>
             <Column minWidth={100} allowsSorting id="name" isRowHeader>
@@ -43,13 +43,13 @@ export function UserTable() {
             <Column minWidth={100} allowsSorting id="email">
               Email
             </Column>
-            <Column defaultWidth={130} allowsSorting id="date">
+            <Column defaultWidth={130} id="date">
               Added
             </Column>
-            <Column defaultWidth={130} allowsSorting id="lastSeen">
+            <Column defaultWidth={130} id="lastSeen">
               Last Seen
             </Column>
-            <Column defaultWidth={100} allowsSorting id="type">
+            <Column defaultWidth={100} id="role">
               Role
             </Column>
             <Column width={80}>Actions</Column>
@@ -95,7 +95,7 @@ export function UserTable() {
                 </Cell>
                 <Cell>
                   <div className="flex gap-2">
-                    <Button variant="icon">
+                    <Button variant="icon" className="group-hover:visible invisible">
                       <TrashIcon size={16} />
                     </Button>
                     <MenuTrigger>
@@ -104,13 +104,14 @@ export function UserTable() {
                       </Button>
                       <Popover>
                         <Menu>
-                          <MenuItem onAction={() => alert("open")}>
+                          <MenuItem onAction={() => alert("open")} className="h-12">
                             <UserIcon size={16} />
                             View Profile
                           </MenuItem>
-                          <MenuItem variant="destructive" onAction={() => alert("rename")}>
+                          <MenuSeparator />
+                          <MenuItem onAction={() => alert("rename")} className="h-12">
                             <TrashIcon size={16} />
-                            Delete
+                            <span className="text-red-600">Delete</span>
                           </MenuItem>
                         </Menu>
                       </Popover>
@@ -122,12 +123,14 @@ export function UserTable() {
           </TableBody>
         </Table>
       </div>
-      <Pagination
-        total={rows.length}
-        itemsPerPage={itemsPerPage}
-        currentPage={currentPage}
-        onPageChange={setCurrentPage}
-      />
+      <div className="sticky bottom-0 bg-gray-50 w-full py-2">
+        <Pagination
+          total={rows.length}
+          itemsPerPage={itemsPerPage}
+          currentPage={currentPage}
+          onPageChange={setCurrentPage}
+        />
+      </div>
     </div>
   );
 }
diff --git a/application/account-management/WebApp/pages/admin/users/-components/UserTabs.tsx b/application/account-management/WebApp/pages/admin/users/-components/UserTabs.tsx
@@ -3,7 +3,7 @@ import { Tab, TabList, Tabs } from "@repo/ui/components/Tabs";
 
 export function UserTabs() {
   return (
-    <Tabs className="border-b-2 border-gray-200 whitespace-nowrap">
+    <Tabs className="border-b-2 border-gray-200 whitespace-nowrap mt-2 mb-8">
       <TabList aria-label="User Categories" className="relative items-center">
         <Tab id="allUsers" className="pb-2 gap-2">
           All Users <Badge variant="secondary">50</Badge>

diff --git a/application/account-management/WebApp/pages/admin/users/-components/data.tsx b/application/account-management/WebApp/pages/admin/users/-components/data.tsx
@@ -176,23 +176,3 @@ export const rows: User[] = [
     profilePicture: avatarUrl
   }
 ];
-
-const ProfileData: React.FC = () => {
-  const name = "Mary Doe";
-  const title = "DevOps Engineer";
-  const profilePicture = avatarUrl;
-
-  return (
-    <div className="flex flex-row items-center gap-2">
-      <div>
-        <img src={profilePicture} alt={name} className="h-12 w-12" />
-      </div>
-      <div className="flex flex-col">
-        <h2>{name}</h2>
-        <p className=" text-slate-600 text-sm font-normal">{title}</p>
-      </div>
-    </div>
-  );
-};
-
-export default ProfileData;
diff --git a/application/account-management/WebApp/pages/admin/users/-components/profileMenuItem.tsx b/application/account-management/WebApp/pages/admin/users/-components/profileMenuItem.tsx
@@ -0,0 +1,20 @@
+import avatarUrl from "../../images/avatar.png";
+
+const ProfileMenuItem: React.FC = () => {
+  const name = "Mary Doe";
+  const title = "DevOps Engineer";
+
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <div>
+        <img src={avatarUrl} alt={name} className="mr-2 w-10 h-10 rounded-full bg-transparent" />
+      </div>
+      <div className="flex flex-col">
+        <h2>{name}</h2>
+        <p className=" text-slate-500 text-sm font-normal">{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileMenuItem;
diff --git a/application/account-management/WebApp/pages/admin/users/index.tsx b/application/account-management/WebApp/pages/admin/users/index.tsx
@@ -12,14 +12,18 @@ export const Route = createFileRoute("/admin/users/")({
 
 export default function UsersPage() {
   return (
-    <div className="flex gap-4 h-full bg-gray-50">
+    <div className="flex gap-4 h-screen bg-gray-50">
       <SideMenu />
-      <div className="flex-grow flex flex-col gap-4 pr-8 py-4 overflow-x-auto">
-        <UserHeader />
-        <UserInvite />
-        <UserTabs />
-        <UserQuerying />
-        <UserTable />
+      <div className="flex flex-grow flex-col gap-4 pl-1 pr-6 py-3 overflow-x-auto">
+        <div className="z-10">
+          <UserHeader />
+          <UserInvite />
+          <UserTabs />
+          <UserQuerying />
+        </div>
+        <div className="flex-grow z-0 overflow-auto min-h-48">
+          <UserTable />
+        </div>
       </div>
     </div>
   );