Use PhosphorIcons instead of FontAwesome

Start implementation of setup process

frontend/components/ProfileMenu.tsx

@@ -1,17 +1,9 @@
 import {useState} from "react";
 import {Button, Menu, MenuHandler, MenuItem, MenuList} from "@material-tailwind/react";
-import {
-    faChevronDown,
-    faChevronUp,
-    faCog,
-    faQuestionCircle,
-    faSignOut,
-    faUser
-} from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {useAuth} from "Frontend/util/auth";
 import {Avatar} from "@hilla/react-components/Avatar";
 import {useNavigate} from "react-router-dom";
+import {CaretDown, CaretUp, GearFine, IconContext, Question, SignOut, User} from "@phosphor-icons/react";
 
 export default function ProfileMenu() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -21,23 +13,23 @@ export default function ProfileMenu() {
     const profileMenuItems = [
         {
             label: "My Profile",
-            icon: faUser,
+            icon: <User/>,
             onClick: () => alert("Profile")
         },
         {
             label: "Administration",
-            icon: faCog,
+            icon: <GearFine/>,
             onClick: () => alert("Administration"),
             showIf: state.user?.authorities?.some(a => a?.includes("ADMIN"))
         },
         {
             label: "Help",
-            icon: faQuestionCircle,
+            icon: <Question/>,
             onClick: () => window.open("https://github.com/gameyfin/gameyfin/tree/v2", "_blank")
         },
         {
             label: "Sign Out",
-            icon: faSignOut,
+            icon: <SignOut/>,
             onClick: () => logout(),
             color: "red-500"
         },
@@ -54,10 +46,9 @@ export default function ProfileMenu() {
                         name={state.user?.name}
                         abbr={state.user?.name?.substring(0, 2)}
                     />
-                    <FontAwesomeIcon
-                        icon={isMenuOpen ? faChevronUp : faChevronDown}
-                        className="h-2 w-2"
-                    />
+                    <IconContext.Provider value={{size: 12}}>
+                        {isMenuOpen ? <CaretUp/> : <CaretDown/>}
+                    </IconContext.Provider>
                 </Button>
             </MenuHandler>
             <MenuList className="p-1">
@@ -71,7 +62,7 @@ export default function ProfileMenu() {
                                     color ? `hover:${color}/10 focus:${color}/10 active:${color}/10` : ""
                                 }`}
                             >
-                                <FontAwesomeIcon icon={icon} color={color ? color : ""} className="h-4 w-4"/>
+                                {icon}
                                 <p color={color ? color : ""}>{label}</p>
                             </MenuItem> : null
                     );