From d9254e8711e5410567e212e12195aad30624afbc Mon Sep 17 00:00:00 2001
From: rohansinha01 <rohansinha01@gmail.com>
Date: Tue, 11 Mar 2025 17:51:03 -0400
Subject: [PATCH 1/7] updated to tailwind

---
 .../pages/WorkspacesPage/WorkspacesEmpty.tsx    | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index e78991df13f69..162d969b5a0a7 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -25,21 +25,10 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 	const defaultMessage =
 		"A workspace is your personal, customizable development environment.";
 	const defaultImage = (
-		<div
-			css={{
-				maxWidth: "50%",
-				height: 272,
-				overflow: "hidden",
-				marginTop: 48,
-				opacity: 0.85,
+		<div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
 
-				"& img": {
-					maxWidth: "100%",
-				},
-			}}
-		>
-			<img src="/featured/workspaces.webp" alt="" />
-		</div>
+		<img src="/featured/workspaces.webp" alt="" className="max-w-full"/>
+	</div>
 	);
 
 	if (isUsingFilter) {

From 2d6136567b311023a6fb1e7d02e1098008c2cac3 Mon Sep 17 00:00:00 2001
From: rohansinha01 <rohansinha01@gmail.com>
Date: Tue, 11 Mar 2025 21:16:50 -0400
Subject: [PATCH 2/7] updated WorkspacesEmpty material ui to tailwind

---
 .../pages/WorkspacesPage/WorkspacesEmpty.tsx  | 63 +++----------------
 1 file changed, 10 insertions(+), 53 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index 162d969b5a0a7..7f7e7ab5ea75a 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -45,9 +45,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 						<Link to="/templates">Go to templates</Link>
 					</Button>
 				}
-				css={{
-					paddingBottom: 0,
-				}}
+				className="pb-0"
+
 				image={defaultImage}
 			/>
 		);
@@ -58,9 +57,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 			<TableEmpty
 				message={defaultTitle}
 				description={`${defaultMessage} There are no templates available, but you will see them here once your admin adds them.`}
-				css={{
-					paddingBottom: 0,
-				}}
+				className="pb-0"
 				image={defaultImage}
 			/>
 		);
@@ -72,71 +69,31 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 			description={`${defaultMessage} Select one template below to start.`}
 			cta={
 				<div>
-					<div
-						css={{
-							display: "flex",
-							flexWrap: "wrap",
-							gap: 16,
-							marginBottom: 24,
-							justifyContent: "center",
-							maxWidth: "800px",
-						}}
-					>
+					<div className="flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]">
 						{featuredTemplates?.map((t) => (
 							<Link
 								key={t.id}
 								to={`${getLink(
 									linkToTemplate(t.organization_name, t.name),
 								)}/workspace`}
-								css={(theme) => ({
-									width: "320px",
-									padding: 16,
-									borderRadius: 6,
-									border: `1px solid ${theme.palette.divider}`,
-									textAlign: "left",
-									display: "flex",
-									gap: 16,
-									textDecoration: "none",
-									color: "inherit",
-
-									"&:hover": {
-										backgroundColor: theme.palette.background.paper,
-									},
-								})}
+								className="w-[320px] p-4 rounded-md border border-divider text-left flex gap-4 no-underline text-inherit hover:bg-paper"
 							>
-								<div css={{ flexShrink: 0, paddingTop: 4 }}>
+								<div className="flex-shrink-0 pt-1">
 									<Avatar variant="icon" src={t.icon} fallback={t.name} />
 								</div>
 
-								<div css={{ width: "100%", minWidth: "0" }}>
-									<h4
-										css={{
-											fontSize: 14,
-											fontWeight: 600,
-											margin: 0,
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-										}}
-									>
+								<div className="w-full min-w-0">
+									<h4 className="text-sm font-semibold m-0 overflow-hidden truncate whitespace-nowrap">
 										{t.display_name || t.name}
 									</h4>
 
-									<p
-										css={(theme) => ({
-											fontSize: 13,
-											color: theme.palette.text.secondary,
-											lineHeight: "1.4",
-											margin: 0,
-											paddingTop: "4px",
+									<p className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
 
 											// We've had users plug URLs directly into the
 											// descriptions, when those URLS have no hyphens or other
 											// easy semantic breakpoints. Need to set this to ensure
 											// those URLs don't break outside their containing boxes
-											wordBreak: "break-word",
-										})}
-									>
+										>
 										{t.description}
 									</p>
 								</div>

From 5111f08e26a00191b220c99b9596840b5a5ac38a Mon Sep 17 00:00:00 2001
From: rohansinha01 <rohansinha01@gmail.com>
Date: Tue, 11 Mar 2025 22:08:38 -0400
Subject: [PATCH 3/7] make fmt

---
 .../pages/WorkspacesPage/WorkspacesEmpty.tsx  | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index 7f7e7ab5ea75a..3fa830a4158f5 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -26,9 +26,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 		"A workspace is your personal, customizable development environment.";
 	const defaultImage = (
 		<div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
-
-		<img src="/featured/workspaces.webp" alt="" className="max-w-full"/>
-	</div>
+			<img src="/featured/workspaces.webp" alt="" className="max-w-full" />
+		</div>
 	);
 
 	if (isUsingFilter) {
@@ -46,7 +45,6 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 					</Button>
 				}
 				className="pb-0"
-
 				image={defaultImage}
 			/>
 		);
@@ -87,13 +85,14 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 										{t.display_name || t.name}
 									</h4>
 
-									<p className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
+									<p
+										className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
 
-											// We've had users plug URLs directly into the
-											// descriptions, when those URLS have no hyphens or other
-											// easy semantic breakpoints. Need to set this to ensure
-											// those URLs don't break outside their containing boxes
-										>
+										// We've had users plug URLs directly into the
+										// descriptions, when those URLS have no hyphens or other
+										// easy semantic breakpoints. Need to set this to ensure
+										// those URLs don't break outside their containing boxes
+									>
 										{t.description}
 									</p>
 								</div>

From 40ac4e5c5ae18f02b27d3076903fcbcb2b88f2fe Mon Sep 17 00:00:00 2001
From: rohansinha01 <rohansinha01@gmail.com>
Date: Wed, 12 Mar 2025 13:14:46 -0400
Subject: [PATCH 4/7] moved comment before className

---
 site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index 3fa830a4158f5..6dc6e3f070759 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -86,12 +86,13 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 									</h4>
 
 									<p
-										className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
-
 										// We've had users plug URLs directly into the
 										// descriptions, when those URLS have no hyphens or other
 										// easy semantic breakpoints. Need to set this to ensure
 										// those URLs don't break outside their containing boxes
+										className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
+
+
 									>
 										{t.description}
 									</p>

From 2e19a4e092c7e941567c6351410ef32ef4d9cd9c Mon Sep 17 00:00:00 2001
From: rohansinha01 <rohansinha01@gmail.com>
Date: Wed, 12 Mar 2025 13:16:25 -0400
Subject: [PATCH 5/7] removed blank space

---
 site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index 6dc6e3f070759..88785783cb620 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -91,8 +91,6 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 										// easy semantic breakpoints. Need to set this to ensure
 										// those URLs don't break outside their containing boxes
 										className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
-
-
 									>
 										{t.description}
 									</p>

From 9c7d3cc1e1930d60638302d5647a75054293fba8 Mon Sep 17 00:00:00 2001
From: rohansinha01 <rohansinha01@gmail.com>
Date: Wed, 12 Mar 2025 20:28:54 -0400
Subject: [PATCH 6/7] fixed outdated colors from palette

---
 site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index 88785783cb620..4aeff4f4cafb0 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -74,7 +74,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 								to={`${getLink(
 									linkToTemplate(t.organization_name, t.name),
 								)}/workspace`}
-								className="w-[320px] p-4 rounded-md border border-divider text-left flex gap-4 no-underline text-inherit hover:bg-paper"
+								className="w-[320px] p-4 rounded-md border-solid border-surface-grey text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
 							>
 								<div className="flex-shrink-0 pt-1">
 									<Avatar variant="icon" src={t.icon} fallback={t.name} />

From 8b7f0497f8626677162fe576ec8aafdc6dc57171 Mon Sep 17 00:00:00 2001
From: rohansinha01 <rohansinha01@gmail.com>
Date: Mon, 17 Mar 2025 10:53:44 -0400
Subject: [PATCH 7/7] updated colors

---
 site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index 4aeff4f4cafb0..2850e56e181a7 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -74,7 +74,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 								to={`${getLink(
 									linkToTemplate(t.organization_name, t.name),
 								)}/workspace`}
-								className="w-[320px] p-4 rounded-md border-solid border-surface-grey text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
+								className="w-[320px] p-4 rounded-md border border-solid border-surface-quaternary text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
 							>
 								<div className="flex-shrink-0 pt-1">
 									<Avatar variant="icon" src={t.icon} fallback={t.name} />
@@ -90,7 +90,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 										// descriptions, when those URLS have no hyphens or other
 										// easy semantic breakpoints. Need to set this to ensure
 										// those URLs don't break outside their containing boxes
-										className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
+										className="text-sm text-gray-400 leading-[1.4] m-0 pt-1 break-words"
 									>
 										{t.description}
 									</p>