refactor: update the workspace table design

BrunoQuaresma · BrunoQuaresma · commit a3bd2a0c4f28 · 2025-04-15T14:37:09.000Z
diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
@@ -13,20 +13,20 @@
  * 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 {
 	type ClickableAriaRole,
 	type UseClickableResult,
 	useClickable,
 } from "./useClickable";
+import { cn } from "utils/cn";
 
 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-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"
@@ -49,4 +46,4 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 			<span data-chromatic="ignore">{message}</span>
 		</Stack>
 	);
-};
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -239,4 +239,4 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 			)}
 		</Margins>
 	);
-};
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx

-Original file line number
+Diff line change
 			)}
 		</Margins>
 	);
 -};
 +};