diff --git a/app/features/top-search/components/DivisionImage.module.css b/app/features/top-search/components/DivisionImage.module.css
new file mode 100644
index 000000000..6b70585d9
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/app/features/top-search/components/DivisionImage.tsx b/app/features/top-search/components/DivisionImage.tsx
new file mode 100644
index 000000000..c2f5a04b9
--- /dev/null
+++ b/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 (
+
+ );
+ }
+
+ return (
+ <>
+
+
+ >
+ );
+}
diff --git a/app/features/top-search/components/Placements.tsx b/app/features/top-search/components/Placements.tsx
index 673e34284..3c931d7cc 100644
--- a/app/features/top-search/components/Placements.tsx
+++ b/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" ? (
<>
-
diff --git a/app/features/top-search/routes/xsearch.tsx b/app/features/top-search/routes/xsearch.tsx
index 602b36865..48fa78ae9 100644
--- a/app/features/top-search/routes/xsearch.tsx
+++ b/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 (
- {DIVISIONS.map(({ region, brandId }) => (
+ {DIVISIONS.map((region) => (
setParams({ region })}
>
-
+
{t(`common:divisions.${region}`)}
diff --git a/app/features/user-page/components/Widget.tsx b/app/features/user-page/components/Widget.tsx
index 410bbf06f..5f9eed831 100644
--- a/app/features/user-page/components/Widget.tsx
+++ b/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}
/>
-
diff --git a/changelog/2026-09-22-division-logos.md b/changelog/2026-09-22-division-logos.md
new file mode 100644
index 000000000..517524a54
--- /dev/null
+++ b/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