feat(webapp): use the custom avatar icon for the profile picture placeholder

- Replace the heroicons UserCircleIcon fallback in UserProfilePhoto/UserAvatar with the custom AvatarCircleIcon, matching the account menu Profile item
- Size the account button avatar to match the popover menu item icons (20px)

Author: samejr

apps/webapp/app/components/UserProfilePhoto.tsx

@@ -1,4 +1,4 @@
-import { UserCircleIcon } from "@heroicons/react/24/solid";
+import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
 import { useOptionalUser } from "~/hooks/useUser";
 import { cn } from "~/utils/cn";
 
@@ -26,6 +26,6 @@ export function UserAvatar({
       />
     </div>
   ) : (
-    <UserCircleIcon className={cn("aspect-square text-charcoal-400", className)} />
+    <AvatarCircleIcon className={cn("aspect-square text-charcoal-400", className)} />
   );
 }

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -1008,7 +1008,7 @@ function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImperso
       <SimpleTooltip
         button={
           <PopoverTrigger className="group flex size-8 items-center justify-center rounded transition-colors hover:bg-charcoal-750 focus-custom">
-            <UserProfilePhoto className="size-6" />
+            <UserProfilePhoto className="size-5" />
           </PopoverTrigger>
         }
         content="Account"