Fix tournament results table missing stripes

Closes #3161

app/components/Table.module.css

@@ -17,7 +17,7 @@
 		font-size: var(--font-2xs);
 	}
 
-	& tbody tr:hover {
+	&:not(.noRowHover) tbody tr:hover {
 		background-color: var(--color-bg-high);
 	}
 

app/components/Table.tsx

@@ -1,9 +1,20 @@
+import clsx from "clsx";
 import styles from "./Table.module.css";
 
-export function Table({ children }: { children: React.ReactNode }) {
+export function Table({
+	children,
+	noRowHover,
+}: {
+	children: React.ReactNode;
+	noRowHover?: boolean;
+}) {
 	return (
 		<div className={styles.container}>
-			<table className={styles.table}>{children}</table>
+			<table
+				className={clsx(styles.table, { [styles.noRowHover]: noRowHover })}
+			>
+				{children}
+			</table>
 		</div>
 	);
 }

app/features/tournament/routes/to.$id.results.tsx

@@ -102,7 +102,7 @@ function ResultsTable({ standings }: { standings: Standing[] }) {
 	let rowDarkerBg = false;
 
 	return (
-		<Table>
+		<Table noRowHover>
 			<thead>
 				<tr>
 					<th>Standing</th>
@@ -151,7 +151,7 @@ function ResultsTable({ standings }: { standings: Standing[] }) {
 					return (
 						<tr
 							key={standing.team.id}
-							className={rowDarkerBg ? "bg-darker-transparent" : undefined}
+							className={rowDarkerBg ? styles.standingsRowAlt : undefined}
 						>
 							<td className="text-md">
 								{typeof placement === "number" ? (

app/features/tournament/tournament.module.css

@@ -504,6 +504,10 @@
 	border-color: var(--color-error);
 }
 
+.standingsRowAlt > td {
+	background-color: var(--color-bg-high);
+}
+
 .standingsTeamName {
 	min-width: 125px;
 	display: flex;