Adjust components for the new Avatar

coder · BrunoQuaresma · Dec 20, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
commit 9fdb4fd810b3d3861608fb62af0dc0559d140c70
@@ -34,17 +34,17 @@ const avatarVariants = cva(
 			{
 				size: "lg",
 				variant: "icon",
-				className: "p-[9px]",
+				className: "p-2",
 			},
 			{
 				size: "default",
 				variant: "icon",
-				className: "p-[3px]",
+				className: "p-1",
 			},
 			{
 				size: "sm",
 				variant: "icon",
-				className: "p-[2px]",
+				className: "p-[3px]",
 			},
 		],
 	},

@@ -75,7 +75,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 				)}
 			</div>
 
-			<Avatar>
+			<Avatar size="lg">
 				<AvatarImage src={imgUrl} alt={altText} />
 				<AvatarFallback>{avatarLetter(header)}</AvatarFallback>
 			</Avatar>

@@ -47,9 +47,8 @@ export const AvatarData: FC<AvatarDataProps> = ({
 
 	return (
 		<Stack
-			spacing={1.5}
+			spacing={1}
 			direction="row"
-			alignItems="center"
 			css={{
 				minHeight: 40, // Make it predictable for the skeleton
 				width: "100%",

@@ -95,7 +95,7 @@ export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 
 export const TopbarAvatar: FC<{ src: string }> = ({ src }) => {
 	return (
-		<Avatar variant="icon">
+		<Avatar variant="icon" size="sm">
 			<AvatarImage src={src} />
 		</Avatar>
 	);

@@ -27,7 +27,7 @@ export const SidebarHeader: FC<SidebarHeaderProps> = ({
 	linkTo,
 }) => {
 	return (
-		<Stack direction="row" alignItems="center" css={styles.info}>
+		<Stack direction="row" spacing={1} css={styles.info}>
 			{avatar}
 			<div
 				css={{

@@ -15,38 +15,18 @@ export interface BuildAvatarProps {
 
 export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
 	const theme = useTheme();
-	const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
-	const badgeType = useClassName(
-		(css, theme) => css({ backgroundColor: theme.roles[type].fill.solid }),
+	const { type } = getDisplayWorkspaceBuildStatus(theme, build);
+	const iconColor = useClassName(
+		(css, theme) => css({ color: theme.roles[type].fill.solid }),
 		[type],
 	);
 
 	return (
-		<Badge
-			role="status"
-			aria-label={status}
-			title={status}
-			overlap="circular"
-			anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-			badgeContent={<div></div>}
-			classes={{ badge: cx(classNames.badge, badgeType) }}
-		>
-			<Avatar size={size}>
-				<BuildIcon transition={build.transition} className="w-full h-full" />
-			</Avatar>
-		</Badge>
+		<Avatar size={size} variant="icon">
+			<BuildIcon
+				transition={build.transition}
+				className={`w-full h-full ${iconColor}`}
+			/>
+		</Avatar>
 	);
 };
-
-const classNames = {
-	badge: css({
-		borderRadius: "100%",
-		width: 8,
-		minWidth: 8,
-		height: 8,
-		display: "block",
-		padding: 0,
-		right: 0,
-		bottom: 0,
-	}),
-};
@@ -35,7 +35,6 @@ export const UserDropdown: FC<UserDropdownProps> = ({
 					<div css={styles.badgeContainer}>
 						<Badge overlap="circular">
 							<UserAvatar
-								size="sm"
 								username={user.username}
 								avatarURL={user.avatar_url}
 							/>

diff --git a/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx
@@ -1,12 +1,9 @@
-import Group from "@mui/icons-material/Group";
-import Badge from "@mui/material/Badge";
 import {
 	Avatar,
 	AvatarFallback,
 	AvatarImage,
 	avatarLetter,
 } from "components/Avatar/Avatar";
-import { type ClassName, useClassName } from "hooks/useClassName";
 import type { FC } from "react";
 
 export interface GroupAvatarProps {
@@ -15,38 +12,10 @@ export interface GroupAvatarProps {
 }
 
 export const GroupAvatar: FC<GroupAvatarProps> = ({ name, avatarURL }) => {
-	const badge = useClassName(classNames.badge, []);
-
 	return (
-		<Badge
-			overlap="circular"
-			anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-			badgeContent={<Group />}
-			classes={{ badge }}
-		>
-			<Avatar size="lg">
-				<AvatarImage src={avatarURL} />
-				<AvatarFallback>{avatarLetter(name)}</AvatarFallback>
-			</Avatar>
-		</Badge>
+		<Avatar>
+			<AvatarImage src={avatarURL} />
+			<AvatarFallback>{avatarLetter(name)}</AvatarFallback>
+		</Avatar>
 	);
 };
-
-const classNames = {
-	badge: (css, theme) =>
-		css({
-			backgroundColor: theme.palette.background.paper,
-			border: `1px solid ${theme.palette.divider}`,
-			borderRadius: "100%",
-			width: 24,
-			height: 24,
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-
-			"& svg": {
-				width: 14,
-				height: 14,
-			},
-		}),
-} satisfies Record<string, ClassName>;
diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx
@@ -3,6 +3,12 @@ import type { Interpolation, Theme } from "@emotion/react";
 import AddIcon from "@mui/icons-material/Add";
 import SettingsIcon from "@mui/icons-material/Settings";
 import type { AuthorizationResponse, Organization } from "api/typesGenerated";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+	avatarLetter,
+} from "components/Avatar/Avatar";
 import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { Loader } from "components/Loader/Loader";
 import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar";
@@ -259,12 +265,12 @@ const OrganizationSettingsNavigation: FC<
 				active={active}
 				href={urlForSubpage(organization.name)}
 				icon={
-					<UserAvatar
-						key={organization.id}
-						size="sm"
-						username={organization.display_name}
-						avatarURL={organization.icon}
-					/>
+					<Avatar variant="icon">
+						<AvatarImage src={organization.icon} />
+						<AvatarFallback>
+							{avatarLetter(organization.display_name)}
+						</AvatarFallback>
+					</Avatar>
 				}
 			>
 				{organization.display_name}

@@ -158,12 +158,12 @@ const styles = {
 			backgroundColor: theme.palette.divider,
 			position: "absolute",
 			top: 0,
-			left: 49,
+			left: 43,
 		},
 	}),
 
 	agentStatusWrapper: {
-		width: 36,
+		width: 24,
 		display: "flex",
 		justifyContent: "center",
 		flexShrink: 0,

@@ -99,11 +99,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
 				css={styles.resourceCardHeader}
 				spacing={10}
 			>
-				<Stack
-					direction="row"
-					alignItems="center"
-					css={styles.resourceCardProfile}
-				>
+				<Stack direction="row" spacing={1} css={styles.resourceCardProfile}>
 					<div>
 						<ResourceAvatar resource={resource} />
 					</div>

@@ -152,7 +152,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 	return (
 		<Margins size="medium">
 			<PageHeader actions={<Button onClick={onCancel}>Cancel</Button>}>
-				<Stack direction="row" spacing={3} alignItems="center">
+				<Stack direction="row">
 					<Avatar variant="icon" size="lg">
 						<AvatarImage src={template.icon} />
 						<AvatarFallback>{avatarLetter(template.name)}</AvatarFallback>

@@ -15,7 +15,7 @@ export interface SelectedTemplateProps {
 
 export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
 	return (
-		<Stack direction="row" spacing={2} css={styles.template}>
+		<Stack direction="row" css={styles.template}>
 			<Avatar variant="icon" size="lg">
 				<AvatarImage src={template.icon} />
 				<AvatarFallback>{avatarLetter(template.name)}</AvatarFallback>

@@ -102,7 +102,7 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app }) => {
 					title={app.name}
 					avatar={
 						Boolean(app.icon) && (
-							<Avatar variant="icon">
+							<Avatar variant="icon" size="lg">
 								<AvatarImage src={app.icon} />
 							</Avatar>
 						)

@@ -81,7 +81,10 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 			</p>
 
 			{externalAuth.installations.length > 0 && (
-				<div css={styles.authorizedInstalls}>
+				<div
+					css={styles.authorizedInstalls}
+					className="flex gap-2 items-center"
+				>
 					{externalAuth.installations.map((install) => {
 						if (!install.account) {
 							return;
@@ -93,7 +96,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 									target="_blank"
 									rel="noreferrer"
 								>
-									<Avatar size="sm">
+									<Avatar>
 										<AvatarImage src={install.account.avatar_url} />
 										<AvatarFallback>
 											{avatarLetter(install.account.login)}

@@ -132,7 +132,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
 														<AvatarGroup
 															max={10}
 															total={group.members.length}
-															css={{ justifyContent: "flex-end" }}
+															css={{ justifyContent: "flex-end", gap: 4 }}
 														>
 															{group.members.map((member) => (
 																<UserAvatar

@@ -139,7 +139,7 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
 				<AvatarGroup
 					max={10}
 					total={group.members.length}
-					css={{ justifyContent: "flex-end" }}
+					css={{ justifyContent: "flex-end", gap: 8 }}
 				>
 					{group.members.map((member) => (
 						<UserAvatar

@@ -1,4 +1,6 @@
+import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import type { Organization } from "api/typesGenerated";
+import { Avatar } from "components/Avatar/Avatar";
 import {
 	PageHeader,
 	PageHeaderSubtitle,
@@ -23,13 +25,13 @@ export const OrganizationSummaryPageView: FC<
 					paddingTop: 0,
 				}}
 			>
-				<Stack direction="row" spacing={3} alignItems="center">
-					<UserAvatar
-						key={organization.id}
-						size="lg"
-						username={organization.display_name || organization.name}
-						avatarURL={organization.icon}
-					/>
+				<Stack direction="row">
+					<Avatar key={organization.id} size="lg" variant="icon">
+						<AvatarImage src={organization.icon} />
+						<AvatarFallback>
+							{organization.display_name || organization.name}
+						</AvatarFallback>
+					</Avatar>
 					<div>
 						<PageHeaderTitle>
 							{organization.display_name || organization.name}

@@ -206,7 +206,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
 					</>
 				}
 			>
-				<Stack direction="row" spacing={3} alignItems="center">
+				<Stack direction="row">
 					<Avatar size="lg" variant="icon">
 						<AvatarImage src={template.icon} />
 						<AvatarFallback>{avatarLetter(template.name)}</AvatarFallback>