feat(webapp): add a 1.25px avatar variant for the team page member rows

Add AvatarCircleIconExtraThin (1.25px stroke) and switch the avatar placeholder's thin boolean to a strokeWidth prop (1.25 | 1.5 | 2). The team page member rows use the 1.25px variant at a slightly smaller size; the account profile picture keeps 1.5px; every other avatar stays at 2px.

Author: samejr

apps/webapp/app/assets/icons/AvatarCircleIcon.tsx

@@ -28,3 +28,8 @@ export function AvatarCircleIcon({ className }: { className?: string }) {
 export function AvatarCircleIconThin({ className }: { className?: string }) {
   return <AvatarCircle className={className} strokeWidth={1.5} />;
 }
+
+/** Thinnest 1.25px-stroke variant of {@link AvatarCircleIcon}. */
+export function AvatarCircleIconExtraThin({ className }: { className?: string }) {
+  return <AvatarCircle className={className} strokeWidth={1.25} />;
+}

apps/webapp/app/components/UserProfilePhoto.tsx

@@ -1,32 +1,48 @@
-import { AvatarCircleIcon, AvatarCircleIconThin } from "~/assets/icons/AvatarCircleIcon";
+import {
+  AvatarCircleIcon,
+  AvatarCircleIconExtraThin,
+  AvatarCircleIconThin,
+} from "~/assets/icons/AvatarCircleIcon";
 import { useOptionalUser } from "~/hooks/useUser";
 import { cn } from "~/utils/cn";
 
+/** Stroke width (px) of the placeholder avatar icon shown when there is no photo. */
+type AvatarStrokeWidth = 1.25 | 1.5 | 2;
+
+const PLACEHOLDER_BY_STROKE_WIDTH = {
+  1.25: AvatarCircleIconExtraThin,
+  1.5: AvatarCircleIconThin,
+  2: AvatarCircleIcon,
+} as const;
+
 export function UserProfilePhoto({
   className,
-  thin = false,
+  strokeWidth = 2,
 }: {
   className?: string;
-  /** Use the thinner 1.5px-stroke placeholder icon (defaults to the 2px variant). */
-  thin?: boolean;
+  strokeWidth?: AvatarStrokeWidth;
 }) {
   const user = useOptionalUser();
   return (
-    <UserAvatar avatarUrl={user?.avatarUrl} name={user?.name} className={className} thin={thin} />
+    <UserAvatar
+      avatarUrl={user?.avatarUrl}
+      name={user?.name}
+      className={className}
+      strokeWidth={strokeWidth}
+    />
   );
 }
 
 export function UserAvatar({
   avatarUrl,
   name,
   className,
-  thin = false,
+  strokeWidth = 2,
 }: {
   avatarUrl?: string | null;
   name?: string | null;
   className?: string;
-  /** Use the thinner 1.5px-stroke placeholder icon (defaults to the 2px variant). */
-  thin?: boolean;
+  strokeWidth?: AvatarStrokeWidth;
 }) {
   if (avatarUrl) {
     return (
@@ -41,6 +57,6 @@ export function UserAvatar({
     );
   }
 
-  const PlaceholderIcon = thin ? AvatarCircleIconThin : AvatarCircleIcon;
+  const PlaceholderIcon = PLACEHOLDER_BY_STROKE_WIDTH[strokeWidth];
   return <PlaceholderIcon className={cn("aspect-square text-text-dimmed", className)} />;
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx

@@ -496,8 +496,8 @@ export default function Page() {
                       <UserAvatar
                         avatarUrl={member.user.avatarUrl}
                         name={member.user.name}
-                        className="size-10"
-                        thin
+                        className="size-9"
+                        strokeWidth={1.25}
                       />
                       <div className="flex flex-col gap-0.5">
                         <Header3>

apps/webapp/app/routes/account._index/route.tsx

@@ -150,7 +150,7 @@ export default function Page() {
                   <Label>Profile picture</Label>
                 </InputGroup>
                 <div className="flex flex-none items-center">
-                  <UserProfilePhoto className="size-8" thin />
+                  <UserProfilePhoto className="size-8" strokeWidth={1.5} />
                 </div>
               </div>
             </div>