From a4527ef2eacc01c930870fb2b2eb01ef691d5b85 Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Sat, 3 Jan 2026 15:04:54 +0100
Subject: [PATCH] Tourney styling

---
 app/components/InfoPopover.module.css         |  8 +-
 app/components/MapPoolSelector.module.css     |  5 ++
 app/components/MapPoolSelector.tsx            |  2 +-
 app/components/layout/index.module.css        | 10 +--
 .../routes/calendar.$id.report-winners.tsx    |  1 -
 app/features/chat/components/Chat.module.css  |  3 +-
 .../sendouq/components/GroupCard.module.css   | 14 +++-
 .../components/Bracket/bracket.module.css     | 25 +++---
 .../components/MatchRosters.tsx               |  6 +-
 .../components/MatchTimer.module.css          |  7 +-
 .../components/StartedMatch.tsx               |  7 +-
 .../routes/to.$id.matches.$mid.tsx            |  6 +-
 .../tournament-bracket.module.css             | 78 ++++++++++---------
 app/features/tournament/tournament.module.css |  4 +-
 .../routes/u.$identifier.seasons.tsx          |  5 +-
 app/features/vods/routes/vods.new.tsx         |  2 +-
 app/styles/common.css                         | 10 +++
 app/styles/utils.css                          |  4 -
 18 files changed, 107 insertions(+), 90 deletions(-)

diff --git a/app/components/InfoPopover.module.css b/app/components/InfoPopover.module.css
index 83b1b0852..68937dc9d 100644
--- a/app/components/InfoPopover.module.css
+++ b/app/components/InfoPopover.module.css
@@ -5,8 +5,8 @@
 	color: var(--color-text);
 	font-size: var(--fonts-md);
 	padding: var(--s-0-5);
-	width: 28px;
-	height: 28px;
+	width: var(--input-height);
+	height: var(--input-height);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -18,7 +18,7 @@
 }
 
 .triggerTiny {
-	width: 20px;
-	height: 20px;
+	width: var(--input-height-smaller);
+	height: var(--input-height-smaller);
 	font-size: var(--fonts-xs);
 }
diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index 3f7543487..6c7f2aa8d 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -57,6 +57,11 @@
 	color: var(--color-accent);
 	opacity: 1 !important;
 	outline: initial;
+
+	&:focus-visible {
+		outline: var(--input-focus-ring);
+		outline-offset: 2px;
+	}
 }
 
 .modeButton.selected {
diff --git a/app/components/MapPoolSelector.tsx b/app/components/MapPoolSelector.tsx
index 7b832d5ae..df77bdc47 100644
--- a/app/components/MapPoolSelector.tsx
+++ b/app/components/MapPoolSelector.tsx
@@ -252,7 +252,7 @@ export function MapPoolStages({
 									return (
 										<button
 											key={mode}
-											className={clsx(styles.modeButton, "outline-theme", {
+											className={clsx(styles.modeButton, {
 												[styles.selected]: selected,
 												[styles.preselected]: preselected,
 												invisible:
diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index 1c1c646b9..d7f7e9876 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -83,14 +83,14 @@
 .hamburger.fab {
 	display: grid;
 	position: fixed;
-	right: 27.5px;
-	bottom: 105px;
+	right: var(--input-height-large);
+	bottom: var(--input-height-large);
 	border-radius: 100%;
-	width: 3.75rem;
-	height: 3.75rem;
+	width: var(--input-height-large);
+	height: var(--input-height-large);
 	backdrop-filter: var(--backdrop-filter);
 	background-color: transparent;
-	border-color: var(--color-accent-low);
+	border-color: var(--color-text-accent);
 }
 
 .hamburger.fab svg {
diff --git a/app/features/calendar/routes/calendar.$id.report-winners.tsx b/app/features/calendar/routes/calendar.$id.report-winners.tsx
index 28f80243f..331c3bff5 100644
--- a/app/features/calendar/routes/calendar.$id.report-winners.tsx
+++ b/app/features/calendar/routes/calendar.$id.report-winners.tsx
@@ -259,7 +259,6 @@ function Players({
 								size="small"
 								variant="minimal"
 								onPress={() => handlePlayerInputTypeChange(i)}
-								className="outline-theme"
 							>
 								{asPlainInput
 									? t("forms.team.player.addAsUser")
diff --git a/app/features/chat/components/Chat.module.css b/app/features/chat/components/Chat.module.css
index bc9cf431c..bd9103997 100644
--- a/app/features/chat/components/Chat.module.css
+++ b/app/features/chat/components/Chat.module.css
@@ -4,8 +4,6 @@
 }
 
 .messages {
-	border: 2px solid var(--color-bg-high);
-	border-radius: 0 0 var(--rounded) var(--rounded);
 	padding: var(--s-2-5) 0 0 0;
 	display: flex;
 	flex-direction: column;
@@ -94,6 +92,7 @@
 
 .roomButton {
 	border: 0;
+	border-bottom: 2px solid var(--color-border);
 	background-color: transparent;
 	color: var(--color-text-high);
 	border-radius: var(--rounded) var(--rounded) 0 0;
diff --git a/app/features/sendouq/components/GroupCard.module.css b/app/features/sendouq/components/GroupCard.module.css
index d8152a52b..8901a7f12 100644
--- a/app/features/sendouq/components/GroupCard.module.css
+++ b/app/features/sendouq/components/GroupCard.module.css
@@ -68,13 +68,18 @@
 	font-size: var(--fonts-xs);
 	background-color: var(--color-bg);
 	border-radius: var(--rounded);
-	padding: var(--s-0-5) var(--s-1-5);
+	padding: 0 var(--s-1-5);
 	width: max-content;
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
 	font-weight: var(--semi-bold);
-	min-height: 24px;
+	height: 24px;
+
+	& img {
+		height: 24px;
+		width: 24px;
+	}
 }
 
 .extraInfoButton {
@@ -89,7 +94,7 @@
 	font-weight: var(--semi-bold);
 	color: var(--color-text);
 	border: none;
-	min-height: 24px;
+	height: 24px;
 }
 
 .addNoteButton {
@@ -100,7 +105,8 @@
 	font-weight: var(--semi-bold);
 	background-color: var(--color-bg);
 	white-space: nowrap;
-	height: stretch;
+	height: 100%;
+	border-radius: var(--rounded);
 }
 
 .addNoteButtonEdit > svg {
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.module.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
index 513f6c9d7..4744ff409 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.module.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -17,6 +17,7 @@
 	border: 2px solid var(--color-border);
 	border-radius: var(--rounded-sm);
 	overflow: scroll;
+	user-select: none;
 }
 
 .matchHeader {
@@ -210,6 +211,18 @@ a.match:hover {
 	padding-block: var(--s-2);
 }
 
+.standingsDividerLine {
+	flex: 1;
+	height: 2px;
+	background-color: var(--color-border);
+}
+
+.standingsDividerText {
+	font-size: var(--fonts-xxs);
+	font-weight: var(--bold);
+	white-space: nowrap;
+}
+
 .standingsDividerQualified .standingsDividerLine {
 	background-color: var(--color-success);
 }
@@ -225,15 +238,3 @@ a.match:hover {
 .standingsDividerEliminated .standingsDividerText {
 	color: var(--color-error);
 }
-
-.standingsDividerLine {
-	flex: 1;
-	height: 2px;
-	background-color: var(--color-border);
-}
-
-.standingsDividerText {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
-	white-space: nowrap;
-}
diff --git a/app/features/tournament-bracket/components/MatchRosters.tsx b/app/features/tournament-bracket/components/MatchRosters.tsx
index 0d93e2cb8..50a732d83 100644
--- a/app/features/tournament-bracket/components/MatchRosters.tsx
+++ b/app/features/tournament-bracket/components/MatchRosters.tsx
@@ -6,8 +6,6 @@ import { tournamentTeamPage, userPage } from "~/utils/urls";
 import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
 import styles from "../tournament-bracket.module.css";
 
-const INACTIVE_PLAYER_CSS =
-	"tournament__team-with-roster__member__inactive text-lighter-important";
 export function MatchRosters({
 	teams,
 }: {
@@ -77,7 +75,7 @@ export function MatchRosters({
 									<Link
 										to={userPage(p)}
 										className={clsx("stack horizontal sm items-center", {
-											[INACTIVE_PLAYER_CSS]:
+											[styles.inactivePlayer]:
 												teamOneParticipatedPlayers.length > 0 &&
 												teamOneParticipatedPlayers.every(
 													(participatedPlayer) =>
@@ -135,7 +133,7 @@ export function MatchRosters({
 									<Link
 										to={userPage(p)}
 										className={clsx("stack horizontal sm items-center", {
-											[INACTIVE_PLAYER_CSS]:
+											[styles.inactivePlayer]:
 												teamTwoParticipatedPlayers.length > 0 &&
 												teamTwoParticipatedPlayers.every(
 													(participatedPlayer) =>
diff --git a/app/features/tournament-bracket/components/MatchTimer.module.css b/app/features/tournament-bracket/components/MatchTimer.module.css
index 2624038ee..c49d0afeb 100644
--- a/app/features/tournament-bracket/components/MatchTimer.module.css
+++ b/app/features/tournament-bracket/components/MatchTimer.module.css
@@ -2,7 +2,7 @@
 	position: relative;
 	width: 100%;
 	height: 18px;
-	background-color: var(--bg-light);
+	background-color: var(--color-accent-low);
 }
 
 .progressBar {
@@ -10,7 +10,7 @@
 	left: 0;
 	top: 0;
 	height: 100%;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-accent);
 	transition:
 		width 0.5s ease-in-out,
 		background-color 0.3s ease;
@@ -33,7 +33,7 @@
 .gameMarkerLine {
 	width: 2px;
 	height: 100%;
-	background-color: var(--color-text-high);
+	background-color: var(--color-text);
 	opacity: 0.6;
 }
 
@@ -54,7 +54,6 @@
 .gameMarkerText {
 	font-size: var(--fonts-xxxs);
 	font-weight: var(--semi-bold);
-	color: var(--color-text-high);
 	white-space: nowrap;
 }
 
diff --git a/app/features/tournament-bracket/components/StartedMatch.tsx b/app/features/tournament-bracket/components/StartedMatch.tsx
index a0bf89ada..6974ce45d 100644
--- a/app/features/tournament-bracket/components/StartedMatch.tsx
+++ b/app/features/tournament-bracket/components/StartedMatch.tsx
@@ -197,6 +197,8 @@ export function StartedMatch({
 								<SubmitButton
 									_action="UNDO_REPORT_SCORE"
 									className={styles.stageBannerUndoButton}
+									variant="destructive"
+									size="miniscule"
 									testId="undo-score-button"
 								>
 									{t("tournament:match.action.undoLastScore")}
@@ -212,6 +214,8 @@ export function StartedMatch({
 								<SubmitButton
 									_action="REOPEN_MATCH"
 									className={styles.stageBannerUndoButton}
+									variant="destructive"
+									size="miniscule"
 									testId="reopen-match-button"
 								>
 									{t("tournament:match.action.reopenMatch")}
@@ -871,11 +875,12 @@ function EndSetPopover({
 			placement="top"
 			trigger={
 				<SendouButton
-					variant="minimal"
 					className={clsx(
 						styles.stageBannerUndoButton,
 						styles.stageBannerEndSetButton,
 					)}
+					size="miniscule"
+					variant="destructive"
 				>
 					{t("tournament:match.action.endSet")}
 				</SendouButton>
diff --git a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
index 4c82b711f..6e132de5b 100644
--- a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
@@ -415,11 +415,7 @@ function EndedEarlyMessage() {
 				{tournament.isOrganizer(user) &&
 				tournament.matchCanBeReopened(data.match.id) ? (
 					<Form method="post" className="contents">
-						<SubmitButton
-							_action="REOPEN_MATCH"
-							className={styles.stageBannerUndoButton}
-							testId="reopen-match-button"
-						>
+						<SubmitButton _action="REOPEN_MATCH" testId="reopen-match-button">
 							Reopen match
 						</SubmitButton>
 					</Form>
diff --git a/app/features/tournament-bracket/tournament-bracket.module.css b/app/features/tournament-bracket/tournament-bracket.module.css
index bdc677b07..c138e8d72 100644
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -40,7 +40,7 @@
 .lockedBanner {
 	width: 100%;
 	height: 10rem;
-	background-color: var(--color-bg-higher);
+	background-color: var(--color-bg-high);
 	border-start-end-radius: var(--rounded);
 	border-start-start-radius: var(--rounded);
 	grid-area: img;
@@ -74,12 +74,12 @@
 	display: flex;
 	justify-content: space-between;
 	padding: var(--s-2);
-	backdrop-filter: blur(5px);
+	backdrop-filter: var(--backdrop-filter);
 	background: rgb(0 0 0 / 40%);
 	border-start-end-radius: var(--rounded);
 	border-start-start-radius: var(--rounded);
-	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
+	color: #fff;
 }
 
 .stageBannerBottomBar {
@@ -89,12 +89,6 @@
 }
 
 .stageBannerUndoButton {
-	border: 0;
-	background-color: var(--color-error);
-	color: var(--color-text);
-	font-size: var(--fonts-xxs);
-	padding-block: var(--s-1);
-	padding-inline: var(--s-2);
 	position: absolute;
 	right: 8px;
 	bottom: 8px;
@@ -128,8 +122,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 20px;
-	height: 20px;
+	width: var(--input-height-smaller);
+	height: var(--input-height-smaller);
 	border-radius: 50%;
 	font-weight: bold;
 	font-size: var(--fonts-sm);
@@ -259,37 +253,40 @@
 	outline-offset: 2px;
 }
 
-.duringMatchActionsCheckbox {
+.duringMatchActionsCheckbox.duringMatchActionsCheckbox {
+	all: unset;
 	width: 40% !important;
 	height: 1.5rem !important;
 	appearance: none;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 	border-end-start-radius: var(--rounded);
 	border-start-start-radius: var(--rounded);
 	cursor: pointer;
-}
-
-.duringMatchActionsCheckbox:checked {
-	background-color: var(--color-accent);
-}
-
-.duringMatchActionsCheckbox::after {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	justify-content: center;
-	color: var(--color-text-high);
-	content: "Inactive";
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
 	letter-spacing: 0.4px;
-	padding-block-end: 1px;
-}
 
-.duringMatchActionsCheckbox:checked::after {
-	color: var(--color-text-inverse);
-	content: "Playing";
+	&::after {
+		all: unset;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-high);
+		content: "Inactive";
+		padding-block-end: 1px;
+	}
+
+	&:checked {
+		background-color: var(--color-text-accent);
+
+		&::after {
+			display: flex;
+			color: var(--color-text-inverse);
+			content: "Playing";
+		}
+	}
 }
 
 .duringMatchActionsPlayerName {
@@ -319,7 +316,7 @@
 
 .duringMatchActionsSeed {
 	font-size: var(--fonts-xxs);
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .duringMatchActionsTeamName {
@@ -347,6 +344,11 @@
 	align-items: center;
 }
 
+.inactivePlayer {
+	color: var(--color-text-high);
+	text-decoration: line-through;
+}
+
 @media screen and (min-width: 640px) {
 	.rosters {
 		justify-content: space-evenly;
@@ -384,15 +386,15 @@
 .modeProgressImageNotable {
 	background-color: var(--color-bg-higher);
 	border: none;
-	outline: 2px solid var(--color-bg-higher);
+	outline: 2px solid transparent;
 }
 
 .modeProgressImageTeamOneWin {
-	outline: 2px solid var(--color-accent);
+	outline: 2px solid var(--color-info);
 }
 
 .modeProgressImageTeamTwoWin {
-	outline: 2px solid var(--color-accent);
+	outline: 2px solid var(--color-error);
 }
 
 .modeProgressImageSelected {
@@ -414,14 +416,14 @@
 
 .teamOneDot {
 	border-radius: 100%;
-	background-color: var(--color-accent);
+	background-color: var(--color-info);
 	width: 8px;
 	height: 8px;
 }
 
 .teamTwoDot {
 	border-radius: 100%;
-	background-color: var(--color-accent);
+	background-color: var(--color-error);
 	width: 8px;
 	height: 8px;
 }
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index 39da71927..609fa7b88 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -63,7 +63,7 @@
 	display: grid;
 	grid-template-columns: max-content max-content max-content max-content;
 	border-radius: var(--rounded);
-	border: 2px solid var(--color-accent);
+	border: 2px solid var(--color-text-accent);
 	width: max-content;
 	margin: 0 auto;
 	overflow: hidden;
@@ -74,7 +74,7 @@
 }
 
 .teamWithRosterMapPoolModeInfo {
-	background-color: var(--color-bg);
+	background-color: var(--color-bg-high);
 	display: flex;
 	font-size: var(--fonts-xxs);
 	justify-content: center;
diff --git a/app/features/user-page/routes/u.$identifier.seasons.tsx b/app/features/user-page/routes/u.$identifier.seasons.tsx
index b8c5d0146..1308ce0b5 100644
--- a/app/features/user-page/routes/u.$identifier.seasons.tsx
+++ b/app/features/user-page/routes/u.$identifier.seasons.tsx
@@ -62,6 +62,7 @@ import {
 } from "../loaders/u.$identifier.seasons.server";
 import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
 import styles from "../user-page.module.css";
+import { mainStyles } from "~/components/Main";
 export { loader };
 
 export const handle: SendouRouteHandle = {
@@ -83,7 +84,7 @@ export default function UserSeasonsPage() {
 
 	if (data.results.value.length === 0) {
 		return (
-			<div className="stack lg half-width">
+			<div className={clsx(mainStyles.narrow, "stack lg")}>
 				<SeasonHeader
 					seasonViewed={data.season}
 					seasonsParticipatedIn={data.seasonsParticipatedIn}
@@ -99,7 +100,7 @@ export default function UserSeasonsPage() {
 		`?info=${tab}&page=${data.results.currentPage}&season=${data.season}`;
 
 	return (
-		<div className="stack lg half-width">
+		<div className={clsx(mainStyles.narrow, "stack lg")}>
 			<SeasonHeader
 				seasonViewed={data.season}
 				seasonsParticipatedIn={data.seasonsParticipatedIn}
diff --git a/app/features/vods/routes/vods.new.tsx b/app/features/vods/routes/vods.new.tsx
index 6bb32a642..9576ea811 100644
--- a/app/features/vods/routes/vods.new.tsx
+++ b/app/features/vods/routes/vods.new.tsx
@@ -269,7 +269,7 @@ function PovFormField() {
 							size="small"
 							variant="minimal"
 							onPress={toggleInputType}
-							className="outline-theme mt-2"
+							className="mt-2"
 						>
 							{asPlainInput
 								? t("calendar:forms.team.player.addAsUser")
diff --git a/app/styles/common.css b/app/styles/common.css
index 00f15cef3..6e8e7640f 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -159,6 +159,11 @@ input[type="checkbox"] {
 			display: block;
 		}
 	}
+
+	/* Hacky selector to remove the margin bottom from the container from Label.tsx */
+	&:has(+ div > label) + div {
+		margin-bottom: 0;
+	}
 }
 
 input[type="radio"] {
@@ -199,6 +204,11 @@ input[type="radio"] {
 			background-color: var(--color-text-accent);
 		}
 	}
+
+	/* Hacky selector to remove the margin bottom from the container from Label.tsx */
+	&:has(+ div > label) + div {
+		margin-bottom: 0;
+	}
 }
 
 [list]::-webkit-calendar-picker-indicator {
diff --git a/app/styles/utils.css b/app/styles/utils.css
index fb1ec19d2..f2116f1a4 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -470,10 +470,6 @@
 	all: unset;
 }
 
-.outline-theme:focus {
-	outline: 2px solid var(--color-accent);
-}
-
 .focus-text-decoration:focus-visible {
 	outline: none !important;
 	text-decoration: underline;