From d630e667adb674af71f690cbd1ed90b273ae35db Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Wed, 23 Sep 2026 17:21:43 +0300 Subject: [PATCH] Division logos visual tweaks --- .../components/DivisionImage.module.css | 12 +++++ .../top-search/components/DivisionImage.tsx | 47 +++++++++++++++++++ .../top-search/components/Placements.tsx | 17 ++----- app/features/top-search/routes/xsearch.tsx | 19 ++++---- app/features/user-page/components/Widget.tsx | 16 ++----- changelog/2026-09-22-division-logos.md | 5 ++ 6 files changed, 84 insertions(+), 32 deletions(-) create mode 100644 app/features/top-search/components/DivisionImage.module.css create mode 100644 app/features/top-search/components/DivisionImage.tsx create mode 100644 changelog/2026-09-22-division-logos.md 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 ( + {alt} + ); + } + + return ( + <> + {alt} + {alt} + + ); +} 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} />
- {peak.region
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