From 52d41cfcc1ce8e628762fa29c099f2a5c370dfa9 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 21 Mar 2026 12:02:55 +0200
Subject: [PATCH] Fix MatchActionsBanPicker styles gone in the migration

---
 .../MatchActionsBanPicker.module.css          | 85 +++++++++++++++++++
 .../components/MatchActionsBanPicker.tsx      | 30 +++----
 2 files changed, 99 insertions(+), 16 deletions(-)
 create mode 100644 app/features/tournament-bracket/components/MatchActionsBanPicker.module.css

diff --git a/app/features/tournament-bracket/components/MatchActionsBanPicker.module.css b/app/features/tournament-bracket/components/MatchActionsBanPicker.module.css
new file mode 100644
index 000000000..656f56094
--- /dev/null
+++ b/app/features/tournament-bracket/components/MatchActionsBanPicker.module.css
@@ -0,0 +1,85 @@
+.mapPoolPicker {
+	--map-width: 90px;
+	--map-height: 50px;
+}
+
+.divider::before,
+.divider::after {
+	border-bottom: 2px dotted var(--color-bg-higher);
+}
+
+.divider {
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
+	text-transform: uppercase;
+	display: flex;
+	gap: var(--s-2);
+}
+
+.mapButton {
+	background-image: var(--map-image-url);
+	background-size: cover;
+	height: var(--map-height);
+	width: var(--map-width);
+	border: none;
+	background-color: transparent;
+	transition:
+		filter,
+		opacity 0.2s;
+	border-radius: var(--radius-box);
+}
+
+.mapButton:active {
+	transform: none;
+}
+
+.mapButtonGreyedOut {
+	filter: grayscale(100%) !important;
+	opacity: 0.4 !important;
+}
+
+.mapButtonIcon {
+	position: absolute;
+	top: 2px;
+	color: var(--color-success);
+	width: 48px;
+	height: 48px;
+	cursor: pointer;
+}
+
+.mapButtonIconError {
+	color: var(--color-error);
+}
+
+.mapButtonNumber {
+	position: absolute;
+	background-color: var(--color-text-accent);
+	border-radius: 100%;
+	width: 18px;
+	height: 18px;
+	display: grid;
+	place-items: center;
+	color: var(--color-text-inverse);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	top: -5px;
+	left: 0;
+}
+
+.mapButtonFrom {
+	position: absolute;
+	bottom: -15px;
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
+}
+
+.mapButtonContainer {
+	width: var(--map-width);
+	text-align: center;
+}
+
+.mapButtonLabel {
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+	font-weight: var(--weight-semi);
+}
diff --git a/app/features/tournament-bracket/components/MatchActionsBanPicker.tsx b/app/features/tournament-bracket/components/MatchActionsBanPicker.tsx
index 65e8ca678..c555a61ed 100644
--- a/app/features/tournament-bracket/components/MatchActionsBanPicker.tsx
+++ b/app/features/tournament-bracket/components/MatchActionsBanPicker.tsx
@@ -16,6 +16,7 @@ import { stageImageUrl } from "~/utils/urls";
 import * as PickBan from "../core/PickBan";
 import type { TournamentDataTeam } from "../core/Tournament.server";
 import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
+import styles from "./MatchActionsBanPicker.module.css";
 
 export function MatchActionsBanPicker({
 	teams,
@@ -129,8 +130,8 @@ function MapPicker({
 					.sort((a, b) => a.stageId - b.stageId);
 
 				return (
-					<div key={mode} className="map-pool-picker stack sm">
-						<Divider className="map-pool-picker__divider">
+					<div key={mode} className={clsx(styles.mapPoolPicker, "stack sm")}>
+						<Divider className={styles.divider}>
 							<ModeImage mode={mode} size={32} />
 						</Divider>
 						<div
@@ -199,10 +200,12 @@ function MapButton({
 	const { t } = useTranslation(["game-misc"]);
 
 	return (
-		<div className="stack items-center relative">
+		<div
+			className={clsx("stack items-center relative", styles.mapButtonContainer)}
+		>
 			<button
-				className={clsx("map-pool-picker__map-button", {
-					"map-pool-picker__map-button__greyed-out": selected || disabled,
+				className={clsx(styles.mapButton, {
+					[styles.mapButtonGreyedOut]: selected || disabled,
 				})}
 				style={{ "--map-image-url": `url("${stageImageUrl(stageId)}.png")` }}
 				onClick={onClick}
@@ -211,20 +214,15 @@ function MapButton({
 				data-testid={!disabled && onClick ? "pick-ban-button" : undefined}
 			/>
 			{selected ? (
-				<Check
-					className="map-pool-picker__map-button__icon"
-					onClick={onClick}
-				/>
+				<Check className={styles.mapButtonIcon} onClick={onClick} />
 			) : null}
 			{disabled ? (
-				<X className="map-pool-picker__map-button__icon map-pool-picker__map-button__icon__error" />
-			) : null}
-			{number ? (
-				<span className="map-pool-picker__map-button__number">{number}</span>
+				<X className={clsx(styles.mapButtonIcon, styles.mapButtonIconError)} />
 			) : null}
+			{number ? <span className={styles.mapButtonNumber}>{number}</span> : null}
 			{from ? (
 				<span
-					className={clsx("map-pool-picker__map-button__from", {
+					className={clsx(styles.mapButtonFrom, {
 						"text-theme": from === "BOTH",
 						"text-success": from === "US",
 						"text-error": from === "THEM",
@@ -233,8 +231,8 @@ function MapButton({
 					{from === "BOTH" ? "Both" : from === "THEM" ? "Them" : "Us"}
 				</span>
 			) : null}
-			<div className="map-pool-picker__map-button__label">
-				{t(`game-misc:STAGE_${stageId}`)}
+			<div className={styles.mapButtonLabel}>
+				{t(`game-misc:STAGE_${stageId}`).split(" ")[0]}
 			</div>
 		</div>
 	);