Maps components css modules migration (#2173)

app/components/MapPoolSelector.module.css

@@ -0,0 +1,76 @@
+.templateSelection {
+	display: grid;
+	gap: var(--s-2);
+	grid-template-columns: 1fr;
+}
+
+@media screen and (min-width: 640px) {
+	.templateSelection {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.stageRow {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: var(--s-3);
+}
+
+.stageNameRow {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	align-items: center;
+	justify-content: space-between;
+	border-radius: var(--rounded);
+	background-color: var(--bg-lighter);
+	font-size: var(--fonts-xs);
+	font-weight: var(--semi-bold);
+	gap: var(--s-2);
+	padding-block: var(--s-1-5);
+	padding-inline: var(--s-3);
+}
+
+@media screen and (min-width: 640px) {
+	.stageNameRow {
+		flex-direction: row;
+	}
+}
+
+.stageImage {
+	border-radius: var(--rounded);
+}
+
+.modeButtonsContainer {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--s-1-5);
+}
+
+.modeButton {
+	padding: 0;
+	padding: var(--s-1);
+	border: 2px solid var(--bg-darker);
+	border-radius: var(--rounded-full);
+	background-color: transparent;
+	color: var(--theme);
+	opacity: 1 !important;
+	outline: initial;
+}
+
+.modeButton.selected {
+	border: 2px solid transparent;
+	background-color: var(--bg-mode-active);
+}
+
+.modeButton.preselected {
+	border: 2px solid var(--theme-info);
+	background-color: var(--bg-mode-active);
+}
+
+.mode:not(.selected, .preselected) {
+	filter: var(--inactive-image-filter);
+	opacity: 0.6;
+}

app/components/MapPoolSelector.tsx

@@ -20,6 +20,8 @@ import { MapPoolEventsCombobox } from "./Combobox";
 import { ArrowLongLeftIcon } from "./icons/ArrowLongLeft";
 import { CrossIcon } from "./icons/Cross";
 
+import styles from "./MapPoolSelector.module.css";
+
 export type MapPoolSelectorProps = {
 	mapPool: MapPool;
 	preselectedMapPool?: MapPool;
@@ -138,7 +140,7 @@ export function MapPoolSelector({
 			)}
 			<div className="stack md">
 				{allowBulkEdit && (
-					<div className="maps__template-selection">
+					<div className={styles.templateSelection}>
 						<MapPoolTemplateSelect
 							value={template}
 							handleChange={handleTemplateChange}
@@ -243,16 +245,16 @@ export function MapPoolStages({
 	return (
 		<div className="stack md">
 			{stageIds.filter(stageRowIsVisible).map((stageId) => (
-				<div key={stageId} className="maps__stage-row">
+				<div key={stageId} className={styles.stageRow}>
 					<Image
-						className="maps__stage-image"
+						className={styles.stageImage}
 						alt=""
 						path={stageImageUrl(stageId)}
 						width={80}
 						height={45}
 					/>
 					<div
-						className="maps__stage-name-row"
+						className={styles.stageNameRow}
 						// biome-ignore lint/a11y/useSemanticElements: todo
 						role="group"
 						aria-labelledby={`${id}-stage-name-${stageId}`}
@@ -260,7 +262,7 @@ export function MapPoolStages({
 						<div id={`${id}-stage-name-${stageId}`}>
 							{t(`game-misc:STAGE_${stageId}`)}
 						</div>
-						<div className="maps__mode-buttons-container">
+						<div className={styles.modeButtonsContainer}>
 							{modes
 								.filter(
 									(mode) =>
@@ -274,8 +276,8 @@ export function MapPoolStages({
 										return (
 											<Image
 												key={mode.short}
-												className={clsx("maps__mode", {
-													selected,
+												className={clsx(styles.mode, {
+													[styles.selected]: selected,
 												})}
 												title={t(`game-misc:MODE_LONG_${mode.short}`)}
 												alt={t(`game-misc:MODE_LONG_${mode.short}`)}
@@ -294,9 +296,9 @@ export function MapPoolStages({
 									return (
 										<button
 											key={mode.short}
-											className={clsx("maps__mode-button", "outline-theme", {
-												selected,
-												preselected,
+											className={clsx(styles.modeButton, "outline-theme", {
+												[styles.selected]: selected,
+												[styles.preselected]: preselected,
 												invisible:
 													hideBanned &&
 													BANNED_MAPS[mode.short].includes(stageId),
@@ -311,9 +313,9 @@ export function MapPoolStages({
 											disabled={preselected}
 										>
 											<Image
-												className={clsx("maps__mode", {
-													selected,
-													preselected,
+												className={clsx(styles.mode, {
+													[styles.selected]: selected,
+													[styles.preselected]: preselected,
 												})}
 												alt={t(`game-misc:MODE_LONG_${mode.short}`)}
 												path={modeImageUrl(mode.short)}

app/features/calendar/routes/calendar.$id.tsx

@@ -41,7 +41,6 @@ import { loader } from "../loaders/calendar.$id.server";
 export { loader, action };
 
 import "~/styles/calendar-event.css";
-import "~/styles/maps.css";
 
 export const meta: MetaFunction = (args) => {
 	const data = args.data as SerializeFrom<typeof loader>;

app/features/calendar/routes/calendar.new.tsx

@@ -50,7 +50,6 @@ import { canAddNewEvent } from "../calendar-utils";
 import { BracketProgressionSelector } from "../components/BracketProgressionSelector";
 import { Tags } from "../components/Tags";
 import "~/styles/calendar-new.css";
-import "~/styles/maps.css";
 import { SendouSwitch } from "~/components/elements/Switch";
 import { metaTags } from "~/utils/remix";
 

app/features/map-list-generator/routes/maps.module.css

@@ -0,0 +1,56 @@
+.container {
+	max-width: 38rem;
+}
+
+.poolSelector {
+	padding-block: var(--s-3);
+}
+
+.poolMeta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.poolInfo {
+	font-size: var(--fonts-xs);
+	font-weight: var(--bold);
+}
+
+.poolInfo a {
+	font-weight: var(--semi-bold);
+}
+
+.tournamentMapListLink {
+	font-size: var(--fonts-xxs);
+	text-align: center;
+}
+
+.mapListCreator {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--s-4);
+}
+
+.toggleContainer {
+	--label-margin: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--s-2);
+}
+
+.mapList {
+	font-size: var(--fonts-xs);
+	font-weight: var(--semi-bold);
+	margin-block-start: var(--s-4);
+}
+
+.modeAbbr {
+	color: var(--text-lighter);
+	font-weight: var(--bold);
+	text-decoration: none;
+}

app/features/map-list-generator/routes/maps.tsx

@@ -12,7 +12,6 @@ import { SendouSwitch } from "~/components/elements/Switch";
 import { EditIcon } from "~/components/icons/Edit";
 import type { Tables } from "~/db/tables";
 import { type ModeWithStage, stageIds } from "~/modules/in-game-lists";
-import "~/styles/maps.css";
 import invariant from "~/utils/invariant";
 import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
@@ -27,6 +26,8 @@ import { modesOrder } from "../core/map-list-generator/modes";
 import { mapPoolToNonEmptyModes } from "../core/map-list-generator/utils";
 import { MapPool } from "../core/map-pool";
 
+import styles from "./maps.module.css";
+
 import { loader } from "../loaders/maps.server";
 export { loader };
 
@@ -66,16 +67,14 @@ export default function MapListPage() {
 		useSearchParamPersistedMapPool();
 
 	return (
-		<Main className="maps__container stack lg">
+		<Main className={`${styles.container} stack lg`}>
 			{searchParams.has("readonly") && data.calendarEvent && (
-				<div className="maps__pool-meta">
-					<div className="maps__pool-info">
+				<div className={styles.poolMeta}>
+					<div className={styles.poolInfo}>
 						{t("common:maps.mapPool")}:{" "}
-						{
-							<Link to={calendarEventPage(data.calendarEvent.id)}>
-								{data.calendarEvent.name}
-							</Link>
-						}
+						<Link to={calendarEventPage(data.calendarEvent.id)}>
+							{data.calendarEvent.name}
+						</Link>
 					</div>
 					<Button
 						variant="outlined"
@@ -96,14 +95,14 @@ export default function MapListPage() {
 					recentEvents={data.recentEventsWithMapPools}
 					initialEvent={data.calendarEvent}
 					allowBulkEdit
-					className="maps__pool-selector"
+					className={styles.poolSelector}
 				/>
 			)}
 			<a
 				href={ipLabsMaps(mapPool.serialized)}
 				target="_blank"
 				rel="noreferrer"
-				className="maps__tournament-map-list-link"
+				className={styles.tournamentMapListLink}
 			>
 				{t("common:maps.tournamentMaplist")}
 			</a>
@@ -112,7 +111,7 @@ export default function MapListPage() {
 	);
 }
 
-function useSearchParamPersistedMapPool() {
+export function useSearchParamPersistedMapPool() {
 	const data = useLoaderData<typeof loader>();
 	const [searchParams, setSearchParams] = useSearchParams();
 
@@ -185,8 +184,8 @@ function MapListCreator({ mapPool }: { mapPool: MapPool }) {
 		mapPool.isEmpty() || (szEveryOther && !mapPool.hasMode("SZ"));
 
 	return (
-		<div className="maps__map-list-creator">
-			<div className="maps__toggle-container">
+		<div className={styles.mapListCreator}>
+			<div className={styles.toggleContainer}>
 				<Label>{t("common:maps.halfSz")}</Label>
 				<SendouSwitch
 					isSelected={szEveryOther}
@@ -199,11 +198,11 @@ function MapListCreator({ mapPool }: { mapPool: MapPool }) {
 			</Button>
 			{mapList && (
 				<>
-					<ol className="maps__map-list">
+					<ol className={styles.mapList}>
 						{mapList.map(({ mode, stageId }, i) => (
 							<li key={i}>
 								<abbr
-									className="maps__mode-abbr"
+									className={styles.modeAbbr}
 									title={t(`game-misc:MODE_LONG_${mode}`)}
 								>
 									{t(`game-misc:MODE_SHORT_${mode}`)}

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

@@ -28,7 +28,6 @@ import { type TournamentLoaderData, loader } from "../loaders/to.$id.server";
 export { loader };
 
 import "~/styles/calendar-event.css";
-import "~/styles/maps.css";
 import "../tournament.css";
 
 export const shouldRevalidate: ShouldRevalidateFunction = (args) => {

app/styles/maps.css

@@ -1,133 +0,0 @@
-.maps__container {
-	max-width: 38rem;
-}
-
-.maps__pool-selector {
-	padding-block: var(--s-3);
-}
-
-.maps__pool-meta {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.maps__pool-info {
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
-}
-
-.maps__pool-info a {
-	font-weight: var(--semi-bold);
-}
-
-.maps__tournament-map-list-link {
-	font-size: var(--fonts-xxs);
-	text-align: center;
-}
-
-.maps__stage-row {
-	display: flex;
-	width: 100%;
-	align-items: center;
-	gap: var(--s-3);
-}
-
-.maps__stage-name-row {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	align-items: center;
-	justify-content: space-between;
-	border-radius: var(--rounded);
-	background-color: var(--bg-lighter);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
-	gap: var(--s-2);
-	padding-block: var(--s-1-5);
-	padding-inline: var(--s-3);
-}
-
-@media screen and (min-width: 640px) {
-	.maps__stage-name-row {
-		flex-direction: row;
-	}
-}
-
-.maps__mode-buttons-container {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: var(--s-1-5);
-}
-
-.maps__mode-button {
-	padding: 0;
-	padding: var(--s-1);
-	border: 2px solid var(--bg-darker);
-	border-radius: var(--rounded-full);
-	background-color: transparent;
-	color: var(--theme);
-	opacity: 1 !important;
-	outline: initial;
-}
-
-.maps__mode-button.selected {
-	border: 2px solid transparent;
-	background-color: var(--bg-mode-active);
-}
-
-.maps__mode-button.preselected {
-	border: 2px solid var(--theme-info);
-	background-color: var(--bg-mode-active);
-}
-
-.maps__stage-image {
-	border-radius: var(--rounded);
-}
-
-.maps__mode:not(.selected, .preselected) {
-	filter: var(--inactive-image-filter);
-	opacity: 0.6;
-}
-
-.maps__map-list-creator {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--s-4);
-}
-
-.maps__toggle-container {
-	--label-margin: 0;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--s-2);
-}
-
-.maps__map-list {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
-	margin-block-start: var(--s-4);
-}
-
-.maps__mode-abbr {
-	color: var(--text-lighter);
-	font-weight: var(--bold);
-	text-decoration: none;
-}
-
-.maps__template-selection {
-	display: grid;
-	gap: var(--s-2);
-	grid-template-columns: 1fr;
-}
-
-@media screen and (min-width: 640px) {
-	.maps__template-selection {
-		grid-template-columns: 1fr 1fr;
-	}
-}