feat: de-mui <LogLine /> and <Logs /> (#24043)

Migrated LogLine and Logs components from Emotion CSS-in-JS to Tailwind
CSS classes.

- Replaced Emotion `css` prop and theme-based styling with Tailwind
utility classes in `LogLine` and `LogLinePrefix` components
- Converted CSS-in-JS styles object to conditional Tailwind classes
using the `cn` utility function
- Updated log level styling (error, debug, warn) to use Tailwind classes
with design token references
- Migrated the Logs container component styling from Emotion to Tailwind
classes
- Removed Emotion imports and theme dependencies

site/src/components/Logs/LogLine.tsx

@@ -1,7 +1,6 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { FC, HTMLAttributes } from "react";
 import type { LogLevel } from "#/api/typesGenerated";
-import { MONOSPACE_FONT_FAMILY } from "#/theme/constants";
+import { cn } from "#/utils/cn";
 
 const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
 
@@ -17,65 +16,40 @@ type LogLineProps = {
 	level: LogLevel;
 } & HTMLAttributes<HTMLPreElement>;
 
-export const LogLine: FC<LogLineProps> = ({ level, ...divProps }) => {
+export const LogLine: FC<LogLineProps> = ({ level, className, ...props }) => {
 	return (
 		<pre
-			css={styles.line}
-			className={`${level} ${divProps.className} logs-line`}
-			{...divProps}
+			{...props}
+			className={cn(
+				"logs-line",
+				"m-0 break-all flex items-center h-auto",
+				"text-[13px] text-content-primary font-mono",
+				level === "error" &&
+					"bg-surface-error text-content-error [&_.dashed-line]:bg-border-error",
+				level === "debug" &&
+					"bg-surface-sky text-content-sky [&_.dashed-line]:bg-border-sky",
+				level === "warn" &&
+					"bg-surface-warning text-content-warning [&_.dashed-line]:bg-border-warning",
+				className,
+			)}
+			style={{
+				padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
+			}}
 		/>
 	);
 };
 
-export const LogLinePrefix: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
-	return <pre css={styles.prefix} {...props} />;
+export const LogLinePrefix: FC<HTMLAttributes<HTMLSpanElement>> = ({
+	className,
+	...props
+}) => {
+	return (
+		<pre
+			className={cn(
+				"select-none m-0 inline-block text-content-secondary mr-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
 };
-
-const styles = {
-	line: (theme) => ({
-		margin: 0,
-		wordBreak: "break-all",
-		display: "flex",
-		alignItems: "center",
-		fontSize: 13,
-		color: theme.palette.text.primary,
-		fontFamily: MONOSPACE_FONT_FAMILY,
-		height: "auto",
-		padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
-
-		"&.error": {
-			backgroundColor: theme.roles.error.background,
-			color: theme.roles.error.text,
-
-			"& .dashed-line": {
-				backgroundColor: theme.roles.error.outline,
-			},
-		},
-
-		"&.debug": {
-			backgroundColor: theme.roles.notice.background,
-			color: theme.roles.notice.text,
-
-			"& .dashed-line": {
-				backgroundColor: theme.roles.notice.outline,
-			},
-		},
-
-		"&.warn": {
-			backgroundColor: theme.roles.warning.background,
-			color: theme.roles.warning.text,
-
-			"& .dashed-line": {
-				backgroundColor: theme.roles.warning.outline,
-			},
-		},
-	}),
-
-	prefix: (theme) => ({
-		userSelect: "none",
-		margin: 0,
-		display: "inline-block",
-		color: theme.palette.text.secondary,
-		marginRight: 24,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

site/src/components/Logs/Logs.tsx

@@ -1,6 +1,6 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import dayjs from "dayjs";
 import type { FC } from "react";
+import { cn } from "#/utils/cn";
 import { type Line, LogLine, LogLinePrefix } from "./LogLine";
 
 export const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
@@ -17,7 +17,17 @@ export const Logs: FC<LogsProps> = ({
 	className = "",
 }) => {
 	return (
-		<div css={styles.root} className={`${className} logs-container`}>
+		<div
+			className={cn(
+				"logs-container",
+				"min-h-40 py-2 rounded-lg overflow-x-auto bg-surface-primary",
+				"[&:not(:last-child)]:border-0",
+				"[&:not(:last-child)]:border-solid",
+				"[&:not(:last-child)]:border-b-border",
+				"[&:not(:last-child)]:rounded-none",
+				className,
+			)}
+		>
 			<div className="min-w-fit">
 				{lines.map((line) => (
 					<LogLine key={line.id} level={line.level}>
@@ -33,18 +43,3 @@ export const Logs: FC<LogsProps> = ({
 		</div>
 	);
 };
-
-const styles = {
-	root: (theme) => ({
-		minHeight: 156,
-		padding: "8px 0",
-		borderRadius: 8,
-		overflowX: "auto",
-		background: theme.palette.background.default,
-
-		"&:not(:last-child)": {
-			borderBottom: `1px solid ${theme.palette.divider}`,
-			borderRadius: 0,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;