Division logos visual tweaks

app/features/top-search/components/DivisionImage.module.css

@@ -0,0 +1,12 @@
+.lightThemeOnly {
+	:is(html:global(.dark), [data-theme="dark"]) &:not([data-theme="light"] *) {
+		display: none;
+	}
+}
+
+.darkThemeOnly {
+	html:not(:global(.dark)) &:not([data-theme="dark"] *),
+	[data-theme="light"] & {
+		display: none;
+	}
+}

app/features/top-search/components/DivisionImage.tsx

@@ -0,0 +1,47 @@
+import { Image } from "~/components/Image";
+import { brandImageUrl } from "~/utils/urls";
+import type { XRankPlacementRegion } from "../top-search-types";
+import styles from "./DivisionImage.module.css";
+
+const TENTATEK_BRAND_ID = "B10";
+const TAKOROKA_BRAND_ID = "B11";
+
+/** X Rank division logo. Takoroka has a lighter variant for dark theme, `inverted` flips it for backgrounds contrasting the theme (e.g. a selected chip). */
+export function DivisionImage({
+	region,
+	size,
+	alt,
+	inverted = false,
+}: {
+	region: XRankPlacementRegion;
+	size: number;
+	alt: string;
+	inverted?: boolean;
+}) {
+	if (region === "WEST") {
+		return (
+			<Image path={brandImageUrl(TENTATEK_BRAND_ID)} size={size} alt={alt} />
+		);
+	}
+
+	return (
+		<>
+			<Image
+				path={brandImageUrl(TAKOROKA_BRAND_ID)}
+				size={size}
+				alt={alt}
+				containerClassName={
+					inverted ? styles.darkThemeOnly : styles.lightThemeOnly
+				}
+			/>
+			<Image
+				path={`${brandImageUrl(TAKOROKA_BRAND_ID)}-dark`}
+				size={size}
+				alt={alt}
+				containerClassName={
+					inverted ? styles.lightThemeOnly : styles.darkThemeOnly
+				}
+			/>
+		</>
+	);
+}

app/features/top-search/components/Placements.tsx

@@ -11,9 +11,10 @@ import {
 	topSearchPage,
 	topSearchPlayerPage,
 } from "~/features/top-search/top-search-urls";
-import { brandImageUrl, modeImageUrl } from "~/utils/urls";
+import { modeImageUrl } from "~/utils/urls";
 import { monthYearToSpan } from "../top-search-utils";
 import type * as XRankPlacementRepository from "../XRankPlacementRepository.server";
+import { DivisionImage } from "./DivisionImage";
 import styles from "./Placements.module.css";
 
 interface PlacementsTableProps {
@@ -21,9 +22,6 @@ interface PlacementsTableProps {
 	type?: "PLAYER_NAME" | "MODE_INFO";
 }
 
-const TENTATEK_BRAND_ID = "B10";
-const TAKOROKA_BRAND_ID = "B11";
-
 export function PlacementsTable({
 	placements,
 	type = "PLAYER_NAME",
@@ -47,19 +45,14 @@ export function PlacementsTable({
 						{type === "MODE_INFO" ? (
 							<>
 								<div className={styles.tableMode}>
-									<Image
+									<DivisionImage
+										region={placement.region}
 										alt={
 											placement.region === "WEST"
 												? "Tentatek Division"
 												: "Takoroka Division"
 										}
-										path={brandImageUrl(
-											placement.region === "WEST"
-												? TENTATEK_BRAND_ID
-												: TAKOROKA_BRAND_ID,
-										)}
-										width={24}
-										height={24}
+										size={24}
 									/>
 								</div>
 

app/features/top-search/routes/xsearch.tsx

@@ -10,7 +10,7 @@ import {
 	SendouSelectItem,
 	SendouSelectItemSection,
 } from "~/components/elements/Select";
-import { Image, ModeImage } from "~/components/Image";
+import { ModeImage } from "~/components/Image";
 import { LocaleTimeRange } from "~/components/LocaleTimeRange";
 import { Main } from "~/components/Main";
 import { topSearchPage } from "~/features/top-search/top-search-urls";
@@ -18,7 +18,8 @@ import { rankedModesShort } from "~/modules/in-game-lists/modes";
 import { useSearchParamsTyped } from "~/modules/search-params/hooks";
 import { metaTags, ogPageImage } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
-import { brandImageUrl, navIconUrl } from "~/utils/urls";
+import { navIconUrl } from "~/utils/urls";
+import { DivisionImage } from "../components/DivisionImage";
 import { PlacementsTable } from "../components/Placements";
 import { loader } from "../loaders/xsearch.server";
 import { topSearchSearchParams } from "../top-search-search-params";
@@ -26,10 +27,7 @@ import { type MonthYear, monthYearToSpan } from "../top-search-utils";
 
 export { loader };
 
-const DIVISIONS = [
-	{ region: "WEST", brandId: "B10" },
-	{ region: "JPN", brandId: "B11" },
-] as const;
+const DIVISIONS = ["WEST", "JPN"] as const;
 
 export const handle: SendouRouteHandle = {
 	breadcrumb: () => ({
@@ -148,7 +146,7 @@ function DivisionFilter() {
 
 	return (
 		<SendouChipRadioGroup>
-			{DIVISIONS.map(({ region, brandId }) => (
+			{DIVISIONS.map((region) => (
 				<SendouChipRadio
 					key={region}
 					name="region"
@@ -157,7 +155,12 @@ function DivisionFilter() {
 					onChange={() => setParams({ region })}
 				>
 					<span className="stack horizontal xs items-center">
-						<Image path={brandImageUrl(brandId)} size={18} alt="" />
+						<DivisionImage
+							region={region}
+							size={18}
+							alt=""
+							inverted={params.region === region}
+						/>
 						{t(`common:divisions.${region}`)}
 					</span>
 				</SendouChipRadio>

app/features/user-page/components/Widget.tsx

@@ -29,6 +29,7 @@ import { previewUrl } from "~/features/art/art-utils";
 import { BadgeDisplay } from "~/features/badges/components/BadgeDisplay";
 import { lfgSearchParams } from "~/features/lfg/lfg-search-params";
 import { tierListMakerSearchParams } from "~/features/tier-list-maker/tier-list-maker-search-params";
+import { DivisionImage } from "~/features/top-search/components/DivisionImage";
 import { topSearchPlayerPage } from "~/features/top-search/top-search-urls";
 import { tournamentBracketsPage } from "~/features/tournament-bracket/tournament-bracket-urls";
 import { tournamentOrganizationPage } from "~/features/tournament-organization/tournament-organization-urls";
@@ -50,7 +51,6 @@ import type { SerializeFrom } from "~/utils/remix";
 import { rawSensToString } from "~/utils/strings";
 import { assertUnreachable } from "~/utils/types";
 import {
-	brandImageUrl,
 	calendarEventPage,
 	controllerImageUrl,
 	gameBadgeUrl,
@@ -563,9 +563,6 @@ function LFGPosts({
 	);
 }
 
-const TENTATEK_BRAND_ID = "B10";
-const TAKOROKA_BRAND_ID = "B11";
-
 function XRankPeaks({
 	peaks,
 }: {
@@ -583,15 +580,10 @@ function XRankPeaks({
 							height={24}
 						/>
 						<div className={styles.xRankPeakDivision}>
-							<Image
-								path={brandImageUrl(
-									peak.region === "WEST"
-										? TENTATEK_BRAND_ID
-										: TAKOROKA_BRAND_ID,
-								)}
+							<DivisionImage
+								region={peak.region}
 								alt={peak.region === "WEST" ? "Tentatek" : "Takoroka"}
-								width={12}
-								height={12}
+								size={12}
 							/>
 						</div>
 					</div>

changelog/2026-09-22-division-logos.md

@@ -0,0 +1,5 @@
+---
+navItem: xsearch
+type: bug
+---
+Takoroka division logo is now visible in dark mode and the Tentatek logo is better centered