From 4604f191e933d2b419ca85b2834b1a0299f301b9 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 1 Apr 2025 21:29:36 -0300
Subject: [PATCH] refactor: increase workspace and template avatar size
 (#17200)

**Before**
<img width="1363" alt="Screenshot 2025-04-01 at 14 46 10"
src="https://github.com/user-attachments/assets/d3d76d70-df16-4b27-a138-e493e0bcac83"
/>
<img width="1360" alt="Screenshot 2025-04-01 at 14 45 55"
src="https://github.com/user-attachments/assets/bbae38fe-6ed2-42fa-99b0-e24f6c8d382d"
/>

**After**
<img width="1359" alt="Screenshot 2025-04-01 at 14 46 18"
src="https://github.com/user-attachments/assets/230b606b-fd5f-4e42-9ca2-56ddb2e1f617"
/>
<img width="1362" alt="Screenshot 2025-04-01 at 14 46 02"
src="https://github.com/user-attachments/assets/b22d4b59-4660-47dd-a362-e8d842dd2a82"
/>
---
 site/src/components/Avatar/AvatarData.tsx     | 26 +++++--------------
 .../components/Avatar/AvatarDataSkeleton.tsx  | 10 +++----
 .../pages/TemplatesPage/TemplatesPageView.tsx |  1 +
 .../pages/WorkspacesPage/WorkspacesTable.tsx  |  3 ++-
 site/tailwind.config.js                       |  2 +-
 5 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/site/src/components/Avatar/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx
index 008aaafd27..5eda0e326d 100644
--- a/site/src/components/Avatar/AvatarData.tsx
+++ b/site/src/components/Avatar/AvatarData.tsx
@@ -37,31 +37,17 @@ export const AvatarData: FC<AvatarDataProps> = ({
 	}
 
 	return (
-		<Stack spacing={1} direction="row" className="w-full">
+		<div className="flex items-center w-full gap-3">
 			{avatar}
 
-			<Stack spacing={0} className="w-full">
-				<span
-					css={{
-						color: theme.palette.text.primary,
-						fontWeight: 600,
-					}}
-				>
-					{title}
-				</span>
+			<div className="flex flex-col w-full">
+				<span className="text-sm font-semibold">{title}</span>
 				{subtitle && (
-					<span
-						css={{
-							fontSize: 13,
-							color: theme.palette.text.secondary,
-							lineHeight: 1.5,
-							maxWidth: 540,
-						}}
-					>
+					<span className="text-content-secondary text-xs font-medium">
 						{subtitle}
 					</span>
 				)}
-			</Stack>
-		</Stack>
+			</div>
+		</div>
 	);
 };
diff --git a/site/src/components/Avatar/AvatarDataSkeleton.tsx b/site/src/components/Avatar/AvatarDataSkeleton.tsx
index b360e80611..13083ce8b0 100644
--- a/site/src/components/Avatar/AvatarDataSkeleton.tsx
+++ b/site/src/components/Avatar/AvatarDataSkeleton.tsx
@@ -4,13 +4,13 @@ import type { FC } from "react";
 
 export const AvatarDataSkeleton: FC = () => {
 	return (
-		<Stack spacing={1} direction="row" className="w-full">
-			<Skeleton variant="rectangular" className="size-6 rounded-sm" />
+		<div className="flex items-center gap-3 w-full">
+			<Skeleton variant="rectangular" className="size-10 rounded-sm" />
 
-			<Stack spacing={0}>
+			<div className="flex flex-col w-full">
 				<Skeleton variant="text" width={100} />
 				<Skeleton variant="text" width={60} />
-			</Stack>
-		</Stack>
+			</div>
+		</div>
 	);
 };
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 3d51570f9f..5d2a512980 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -113,6 +113,7 @@ const TemplateRow: FC<TemplateRowProps> = ({ showOrganizations, template }) => {
 					subtitle={template.description}
 					avatar={
 						<Avatar
+							size="lg"
 							variant="icon"
 							src={template.icon}
 							fallback={template.display_name || template.name}
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index dc6843af3a..5f6d32614a 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -221,7 +221,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 											}
 											subtitle={
 												<div>
-													<span css={{ ...visuallyHidden }}>User: </span>
+													<span css={{ ...visuallyHidden }}>Owner: </span>
 													{workspace.owner_name}
 												</div>
 											}
@@ -230,6 +230,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 													variant="icon"
 													src={workspace.template_icon}
 													fallback={workspace.name}
+													size="lg"
 												/>
 											}
 										/>
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index aa5a338c34..449b07b54d 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -15,7 +15,7 @@ module.exports = {
 			},
 			fontSize: {
 				"2xs": ["0.625rem", "0.875rem"],
-				xs: ["0.75rem", "1.125rem"],
+				xs: ["0.75rem", "1rem"],
 				sm: ["0.875rem", "1.5rem"],
 				"3xl": ["2rem", "2.5rem"],
 			},