Align avatar with the timeline vertical line

BrunoQuaresma · BrunoQuaresma · commit f47ed9d9292c · 2024-12-18T14:53:35.000Z
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -16,9 +16,9 @@ const avatarVariants = cva(
 	{
 		variants: {
 			size: {
-				lg: "h-10 w-10 rounded-[6px] text-sm font-medium",
-				default: "h-6 w-6 text-2xs",
-				sm: "h-[18px] w-[18px] text-[8px]",
+				lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
+				default: "h-[--avatar-default] w-[--avatar-default] text-2xs",
+				sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
 			},
 			variant: {
 				default: "",
diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx
@@ -1,5 +1,7 @@
+import type { Interpolation } from "@emotion/react";
 import TableRow, { type TableRowProps } from "@mui/material/TableRow";
 import { forwardRef } from "react";
+import type { Theme } from "theme";
 
 interface TimelineEntryProps extends TableRowProps {
 	clickable?: boolean;
@@ -12,39 +14,44 @@ export const TimelineEntry = forwardRef<
 	return (
 		<TableRow
 			ref={ref}
-			css={(theme) => [
-				{
-					"&:focus": {
-						outlineStyle: "solid",
-						outlineOffset: -1,
-						outlineWidth: 2,
-						outlineColor: theme.palette.primary.main,
-					},
-					"& td": {
-						position: "relative",
-						overflow: "hidden",
-					},
-					"& td:before": {
-						position: "absolute",
-						left: 49, // 50px - (width / 2)
-						display: "block",
-						content: "''",
-						height: "100%",
-						width: 2,
-						background: theme.palette.divider,
-					},
-				},
-				clickable && {
-					cursor: "pointer",
-
-					"&:hover": {
-						backgroundColor: theme.palette.action.hover,
-					},
-				},
-			]}
+			css={[styles.row, clickable ? styles.clickable : null]}
 			{...props}
 		>
 			{children}
 		</TableRow>
 	);
 });
+
+const styles = {
+	row: (theme) => ({
+		"--side-padding": "32px",
+		"&:focus": {
+			outlineStyle: "solid",
+			outlineOffset: -1,
+			outlineWidth: 2,
+			outlineColor: theme.palette.primary.main,
+		},
+		"& td": {
+			position: "relative",
+			overflow: "hidden",
+		},
+		"& td:before": {
+			"--line-width": "2px",
+			position: "absolute",
+			left: "calc((var(--side-padding) + var(--avatar-default)/2) - var(--line-width) / 2)",
+			display: "block",
+			content: "''",
+			height: "100%",
+			width: "var(--line-width)",
+			background: theme.palette.divider,
+		},
+	}),
+
+	clickable: (theme) => ({
+		cursor: "pointer",
+
+		"&:hover": {
+			backgroundColor: theme.palette.action.hover,
+		},
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/index.css b/site/src/index.css
@@ -31,6 +31,10 @@
 		--border: 240 5.9% 90%;
 		--input: 240 5.9% 90%;
 		--ring: 240 10% 3.9%;
+
+		--avatar-lg: 2.5rem;
+		--avatar-default: 1.5rem;
+		--avatar-sm: 1.125rem;
 	}
 	.dark {
 		--content-primary: 0, 0%, 98%;
