Pixel Whois & Header Improvements

packages/client/src/components/Header/User.tsx

@@ -1,23 +1,23 @@
+import { Card, User as UserElement } from "@nextui-org/react";
 import { useAppContext } from "../../contexts/AppContext";
 
 export const User = () => {
   const { user } = useAppContext();
 
   return user ? (
-    <div className="user-card">
-      <div className="user-card--overview">
-        <div className="user-name">{user.user.username}</div>
-        <div className="user-instance">{user.service.instance.hostname}</div>
-      </div>
-      {user.user.picture_url && (
-        <img
-          src={user.user.picture_url}
-          alt="User Avatar"
-          className="user-avatar"
-        />
-      )}
-    </div>
+    <Card>
+      <UserElement
+        name={user.user.username}
+        description={user.service.instance.hostname}
+        avatarProps={{
+          showFallback: true,
+          name: undefined,
+          src: user.user.picture_url
+        }}
+        className="p-2"
+      />
+    </Card>
   ) : (
     <></>
   );
-};
+};

packages/client/src/components/Profile/UserCard.tsx

@@ -1,6 +1,6 @@
 import { faMessage, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Link, Spinner } from "@nextui-org/react";
+import { Avatar, Button, Link, Spinner, User } from "@nextui-org/react";
 import { ClientConfig } from "@sc07-canvas/lib/src/net";
 import { MouseEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
@@ -74,17 +74,17 @@ export const UserCard = ({ user }: { user: IUser }) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <div className="flex flex-row gap-2">
-        <img
-          src={user?.picture_url}
-          alt={`${user?.sub}'s profile`}
-          className="w-12 h-12"
+      <div className="flex flex-row space-between p-2">
+        <User 
+          name={user?.display_name || 'Unknown'}
+          description={user?.sub || 'Unknown'}
+          avatarProps={{
+            showFallback: true,
+            name: undefined,
+            src: user?.picture_url
+          }}
         />
-        <div className="flex flex-col gap-0.25 grow">
-          <span>{user?.display_name}</span>
-          <span className="text-sm">{user?.sub}</span>
-        </div>
-        <div>
+        <div className="ml-auto">
           {config && (
             <Button
               isIconOnly