fix: improve workspace and template icon display in lists

bpmct · bpmct · commit ea74fdb077de · 2025-03-27T11:39:14.000Z
This change makes workspace and template icons more prominent by: - Adding a listView prop to Avatar component for specialized styling - Removing background and border for icon-based avatars - Making icons 30% larger with transform: scale(1.3) - Preserving normal Avatar behavior in other parts of the app - Ensuring proper vertical alignment with the workspace/template name Fixes #17127
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -58,18 +58,45 @@ export type AvatarProps = AvatarPrimitive.AvatarProps &
 	VariantProps<typeof avatarVariants> & {
 		src?: string;
 		fallback?: string;
+		/**
+		 * Style overrides specifically for list view avatars.
+		 * When true, applies special styling for workspace/template list views:
+		 * - Removes background and border when an image is present
+		 * - Makes the icon slightly larger
+		 */
+		listView?: boolean;
 	};
 
 const Avatar = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Root>,
 	AvatarProps
->(({ className, size, variant, src, fallback, children, ...props }, ref) => {
+>(({ className, size, variant, src, fallback, listView, children, ...props }, ref) => {
 	const theme = useTheme();
-
+	
+	// Process list view styling
+	const processedCss = {
+		...(listView && {
+			width: "42px",
+			height: "42px",
+			fontSize: "16px",
+			...(src && {
+				background: "transparent !important",
+				backgroundColor: "transparent !important",
+				border: "none !important",
+				boxShadow: "none !important",
+				padding: 0,
+				"& img": {
+					transform: "scale(1.3)", // 30% larger icon
+				}
+			})
+		})
+	};
+	
 	return (
 		<AvatarPrimitive.Root
 			ref={ref}
 			className={cn(avatarVariants({ size, variant, className }))}
+			css={processedCss}
 			{...props}
 		>
 			<AvatarPrimitive.Image
@@ -78,7 +105,7 @@ const Avatar = React.forwardRef<
 				css={getExternalImageStylesFromUrl(theme.externalImages, src)}
 			/>
 			{fallback && (
-				<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full">
+				<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center">
 					{fallback.charAt(0).toUpperCase()}
 				</AvatarPrimitive.Fallback>
 			)}
diff --git a/site/src/components/Avatar/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx
@@ -37,7 +37,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
 	}
 
 	return (
-		<Stack spacing={1} direction="row" className="w-full">
+		<Stack spacing={1} direction="row" className="w-full" alignItems="center">
 			{avatar}
 
 			<Stack spacing={0} className="w-full">
@@ -64,4 +64,4 @@ export const AvatarData: FC<AvatarDataProps> = ({
 			</Stack>
 		</Stack>
 	);
-};
+};
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -116,6 +116,7 @@ const TemplateRow: FC<TemplateRowProps> = ({ showOrganizations, template }) => {
 							variant="icon"
 							src={template.icon}
 							fallback={template.display_name || template.name}
+							listView
 						/>
 					}
 				/>
@@ -321,4 +322,4 @@ const styles = {
 		transition: "none",
 		color: theme.palette.text.primary,
 	}),
-} satisfies Record<string, Interpolation<Theme>>;
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -190,6 +190,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 													variant="icon"
 													src={workspace.template_icon}
 													fallback={workspace.name}
+													listView
 												/>
 											}
 										/>
@@ -342,4 +343,4 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
 
 const cantBeChecked = (workspace: Workspace) => {
 	return ["deleting", "pending"].includes(workspace.latest_build.status);
-};
+};
