changed user menu design to reflect new designs

frontend/src/main-page/users/components/UserMenu.tsx

@@ -1,11 +1,9 @@
-import { Menu } from "@chakra-ui/react";
 import { UserStatus } from "../../../../../middle-layer/types/UserStatus";
-import { faUserPen, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faUserPen, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ActionConfirmation from "../../../components/ActionConfirmation";
 import { useState } from "react";
 import { User } from "../../../../../middle-layer/types/User";
-import Button from "../../../components/Button";
-import { FaEllipsis } from "react-icons/fa6";
 import { changeUserGroup, deleteUser } from "../UserActions";
 
 interface UserMenuProps {
@@ -26,9 +24,9 @@ const UserMenu = ({ user }: UserMenuProps) => {
           user.position === UserStatus.Admin ? "Employee" : "Admin"
         }`}
         subtitle="Are you sure you want to change to"
-        boldSubtitle={user.position === UserStatus.Admin ? "employee" : "admin"}
+        boldSubtitle={user.position === UserStatus.Admin ? "Employee" : "Admin"}
         warningMessage={`By changing to ${
-          user.position === UserStatus.Admin ? "employee" : "admin"
+          user.position === UserStatus.Admin ? "Employee" : "Admin"
         }, they will ${
           user.position === UserStatus.Admin
             ? "lose access to sensitive data."
@@ -44,43 +42,52 @@ const UserMenu = ({ user }: UserMenuProps) => {
         boldSubtitle={user.email}
         warningMessage="By deleting this user, they won't be available in the system anymore."
       />
-      <div className="">
-        <Menu.Root>
-          <Menu.Trigger>
-            <div className="p-2 border-0  cursor-pointerchakra">
-              <FaEllipsis />
-            </div>
-          </Menu.Trigger>
-          <Menu.Positioner>
-            <Menu.Content className="bg-white rounded-md shadow-lg border-grey-500 border-1">
-              <div className="text-left justify-start">
-                <Button
-                  text={
-                    "Change to " +
-                    (user.position === UserStatus.Admin
-                      ? "employee"
-                      : "admin") +
-                    "  "
-                  }
-                  logo={faUserPen}
-                  logoPosition="left"
-                  onClick={() => setIsChangeGroupModalOpen(true)}
-                  disabled={isChangeGroupModalOpen || isDeleteUserModalOpen}
-                  className="text-sm focus:outline-none block w-full hover:border-grey-800 active:bg-grey-800 text-grey-800"
-                />
-                <hr className="border-t-1 border-grey-400 my-1 mx-2"></hr>
-                <Button
-                  text={"Delete user  "}
-                  logo={faTrash}
-                  logoPosition="left"
-                  disabled={isChangeGroupModalOpen || isDeleteUserModalOpen}
-                  onClick={() => setIsDeleteUserModalOpen(true)}
-                  className="text-sm focus:outline-none block w-full hover:border-red active:bg-red text-red"
-                />
-              </div>
-            </Menu.Content>
-          </Menu.Positioner>
-        </Menu.Root>
+      <div className="flex items-center justify-end gap-2">
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => setIsChangeGroupModalOpen(true)}
+            disabled={isChangeGroupModalOpen || isDeleteUserModalOpen}
+            aria-label={
+              user.position === UserStatus.Admin
+                ? "Assign Employee"
+                : "Assign Admin"
+            }
+            className="group flex h-8 items-center gap-2 overflow-hidden rounded-sm border-0 bg-grey-100 px-2 outline-none shadow-none transition-all hover:border-0 hover:bg-grey-200 hover:shadow-none focus:border-0 focus:outline-none focus:shadow-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <FontAwesomeIcon
+              icon={faUserPen}
+              className={
+                user.position === UserStatus.Admin
+                  ? "text-yellow-dark"
+                  : "text-green-dark"
+              }
+            />
+            <span
+              className={`max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:max-w-[120px] group-hover:opacity-100 group-focus-visible:max-w-[120px] group-focus-visible:opacity-100 ${
+                user.position === UserStatus.Admin
+                  ? "text-yellow-dark"
+                  : "text-green-dark"
+              }`}
+            >
+              {user.position === UserStatus.Admin
+                ? "Assign Employee"
+                : "Assign Admin"}
+            </span>
+          </button>
+        </div>
+
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => setIsDeleteUserModalOpen(true)}
+            disabled={isChangeGroupModalOpen || isDeleteUserModalOpen}
+            aria-label="Delete user"
+            className="h-8 w-8 rounded-md border-0 bg-grey-100 text-red-dark outline-none shadow-none transition-colors hover:border-0 hover:bg-grey-200 hover:shadow-none focus:border-0 focus:outline-none focus:shadow-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <FontAwesomeIcon icon={faTrashCan} />
+          </button>
+        </div>
       </div>
     </div>
   );