fix: resolve <Avatar /> incorrect sizes (#22538)

This pull-request updates our icons to be inline with the Figma file.
They were slightly too small in the two variants of `--avatar-default`
and `--avatar-sm`. Now these are inline with what we have defined and
using the correct variants in the breadcrumbs.

site/src/components/FullPageLayout/Topbar.tsx

@@ -56,7 +56,7 @@ export const TopbarDivider: FC<
 };
 
 export const TopbarAvatar: FC<AvatarProps> = (props) => {
-	return <Avatar {...props} variant="icon" size="md" />;
+	return <Avatar {...props} variant="icon" size="sm" />;
 };
 
 type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement> & {

site/src/index.css

@@ -66,8 +66,8 @@
 		--primary: 221 83% 53%;
 		--primary-foreground: 0 0% 98%;
 		--avatar-lg: 2.5rem;
-		--avatar-default: 1.5rem;
-		--avatar-sm: 1.125rem;
+		--avatar-default: 2rem;
+		--avatar-sm: 1.5rem;
 	}
 	.dark {
 		--content-primary: 0 0% 100%;

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

@@ -265,7 +265,7 @@ const OwnerBreadcrumb: FC<OwnerBreadcrumbProps> = ({
 		<HelpTooltip>
 			<HelpTooltipTrigger asChild>
 				<span css={styles.breadcrumbSegment}>
-					<Avatar size="md" fallback={ownerName} src={ownerAvatarUrl} />
+					<Avatar size="sm" fallback={ownerName} src={ownerAvatarUrl} />
 					<span css={styles.breadcrumbText}>{ownerName}</span>
 				</span>
 			</HelpTooltipTrigger>
@@ -293,7 +293,7 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 			<HelpTooltipTrigger asChild>
 				<span css={styles.breadcrumbSegment}>
 					<Avatar
-						size="md"
+						size="sm"
 						variant="icon"
 						src={orgIconUrl}
 						fallback={orgName}