refactor: update the workspace table design (#17404)

BrunoQuaresma · web-flow · commit b0fe62625042 · 2025-04-15T13:52:32.000-03:00
Related to #17309 **Before:** <img width="1624" alt="Screenshot 2025-04-15 at 11 36 32" src="https://github.com/user-attachments/assets/ecca4c22-8d9c-4ee9-8c1d-193f538a0515" /> **After:** <img width="1624" alt="Screenshot 2025-04-15 at 11 36 22" src="https://github.com/user-attachments/assets/dd95b5cb-12c0-4806-8253-9be97d5a3a8a" />
diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
@@ -13,9 +13,9 @@
  * It might not make sense to test this hook until the underlying design
  * problems are fixed.
  */
-import { type CSSObject, useTheme } from "@emotion/react";
 import type { TableRowProps } from "@mui/material/TableRow";
 import type { MouseEventHandler } from "react";
+import { cn } from "utils/cn";
 import {
 	type ClickableAriaRole,
 	type UseClickableResult,
@@ -26,7 +26,7 @@ type UseClickableTableRowResult<
 	TRole extends ClickableAriaRole = ClickableAriaRole,
 > = UseClickableResult<HTMLTableRowElement, TRole> &
 	TableRowProps & {
-		css: CSSObject;
+		className: string;
 		hover: true;
 		onAuxClick: MouseEventHandler<HTMLTableRowElement>;
 	};
@@ -54,23 +54,13 @@ export const useClickableTableRow = <
 	onAuxClick: externalOnAuxClick,
 }: UseClickableTableRowConfig<TRole>): UseClickableTableRowResult<TRole> => {
 	const clickableProps = useClickable(onClick, (role ?? "button") as TRole);
-	const theme = useTheme();
 
 	return {
 		...clickableProps,
-		css: {
-			cursor: "pointer",
-
-			"&:focus": {
-				outline: `1px solid ${theme.palette.primary.main}`,
-				outlineOffset: -1,
-			},
-
-			"&:last-of-type": {
-				borderBottomLeftRadius: 8,
-				borderBottomRightRadius: 8,
-			},
-		},
+		className: cn([
+			"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
+			"first:rounded-t-md last:rounded-b-md",
+		]),
 		hover: true,
 		onDoubleClick,
 		onAuxClick: (event) => {
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -102,7 +102,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 	);
 	const navigate = useNavigate();
 
-	const { css: clickableCss, ...clickableRow } = useClickableTableRow({
+	const clickableRow = useClickableTableRow({
 		onClick: () => navigate(templatePageLink),
 	});
 
@@ -111,7 +111,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 			key={template.id}
 			data-testid={`template-${template.id}`}
 			{...clickableRow}
-			css={[clickableCss, styles.tableRow]}
+			css={styles.tableRow}
 		>
 			<TableCell>
 				<AvatarData
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
 import { StatusIndicatorDot } from "components/StatusIndicator/StatusIndicator";
 import dayjs from "dayjs";
@@ -12,8 +11,6 @@ interface LastUsedProps {
 }
 
 export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
-	const theme = useTheme();
-
 	const [circle, message] = useTime(() => {
 		const t = dayjs(lastUsedAt);
 		const now = dayjs();
@@ -40,7 +37,7 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 
 	return (
 		<Stack
-			style={{ color: theme.palette.text.secondary }}
+			className="text-content-secondary"
 			direction="row"
 			spacing={1}
 			alignItems="center"
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
