From 4245ae4b7b03185f5b66de9582f1ee9da6b3a690 Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Sat, 31 Oct 2026 16:08:27 -0500 Subject: [PATCH] some drop down styles --- .../website/src/components/BaseMeta.astro | 6 +- .../website/src/components/BaseStyles.astro | 2 +- .../components/DropdownMenu/index.module.css | 79 ++++++++++++++----- .../src/components/DropdownMenu/index.tsx | 4 +- .../components/TankSearchFilters/index.tsx | 7 +- packages/website/src/ui/compose.tsx | 48 +++++++---- 6 files changed, 104 insertions(+), 42 deletions(-) diff --git a/packages/website/src/components/BaseMeta.astro b/packages/website/src/components/BaseMeta.astro index b8890591c..2d0a8ec5f 100644 --- a/packages/website/src/components/BaseMeta.astro +++ b/packages/website/src/components/BaseMeta.astro @@ -1,3 +1,7 @@ - + + diff --git a/packages/website/src/components/BaseStyles.astro b/packages/website/src/components/BaseStyles.astro index 445cc011a..090ffde91 100644 --- a/packages/website/src/components/BaseStyles.astro +++ b/packages/website/src/components/BaseStyles.astro @@ -22,7 +22,7 @@ import "@fontsource-variable/roboto-flex"; --radius-max: var(--max-size); --font-size-regular: 1rem; - --font-size-minor: 0.75rem; + --font-size-minor: 0.85rem; --font-size-major: 1.25rem; --font-size-heading-1: 3rem; diff --git a/packages/website/src/components/DropdownMenu/index.module.css b/packages/website/src/components/DropdownMenu/index.module.css index 5552dd860..62d0d9911 100644 --- a/packages/website/src/components/DropdownMenu/index.module.css +++ b/packages/website/src/components/DropdownMenu/index.module.css @@ -1,38 +1,75 @@ .Content { + --gutter: var(--space-5); + + min-width: min(calc(100dvw - 2 * var(--space-4)), 16rem); + + z-index: 1; + background-color: var(--gray-2); + display: flex; flex-direction: column; - padding: var(--space-4); + margin-top: var(--space-3); - background-color: var(--gray-3); - - box-shadow: var(--shadow-aggressive); + box-shadow: var(--shadow-subtle); outline: var(--outline-interactive); border-radius: var(--space-3); -} + overflow: hidden; -.Separator { - background-color: var(--gray-6); + outline: var(--outline-interactive) !important; - margin: var(--space-4) var(--space-3); + .Separator { + height: var(--space-3); + } - height: var(--space-0); -} + .Item, + .CheckboxItem { + position: relative; -.Item, -.CheckboxItem { - border-radius: var(--space-2); - padding: var(--space-3) var(--space-4); + background-color: var(--gray-3); - cursor: pointer; + padding: var(--space-3); + padding-left: var(--gutter); - display: flex; - align-items: center; - gap: var(--space-3); + cursor: pointer; - &:focus { - outline: none; + display: flex; + align-items: center; + gap: var(--space-3); - background-color: var(--accent-9); + font-size: var(--font-size-minor); + + &:focus { + outline: none; + + background-color: var(--gray-5); + } + + & + & { + border-top: var(--space-1) solid var(--gray-2); + } + + img, + svg { + &:last-child { + margin-left: auto; + } + } + + .ItemIndicator { + position: absolute; + left: 0; + top: 50%; + + display: flex; + + transform: translate(calc(-50% + var(--gutter) / 2), -50%); + + img, + svg { + width: 1em; + height: 1em; + } + } } } diff --git a/packages/website/src/components/DropdownMenu/index.tsx b/packages/website/src/components/DropdownMenu/index.tsx index 8afe69f1b..1e0140660 100644 --- a/packages/website/src/components/DropdownMenu/index.tsx +++ b/packages/website/src/components/DropdownMenu/index.tsx @@ -2,4 +2,6 @@ import { DropdownMenu as _ } from "radix-ui"; import { composeRadixComponents } from "../../ui/compose"; import styles from "./index.module.css"; -export const DropdownMenu = composeRadixComponents(_, styles); +export const DropdownMenu = composeRadixComponents(_, styles, { + Content: { align: "start" }, +}); diff --git a/packages/website/src/components/TankSearchFilters/index.tsx b/packages/website/src/components/TankSearchFilters/index.tsx index 20e2f6f56..6fc325dbd 100644 --- a/packages/website/src/components/TankSearchFilters/index.tsx +++ b/packages/website/src/components/TankSearchFilters/index.tsx @@ -4,6 +4,7 @@ import { literals } from "@blitzkit/i18n"; import locales from "@blitzkit/i18n/locales.json"; import { ShellType, TankType } from "@blitzkit/protos"; import { + CheckIcon, LockClosedIcon, LockOpen2Icon, ResetIcon, @@ -233,6 +234,10 @@ function TiersFilter() { checked={selected} key={tier} > + + + + {literals(strings.website.common.tank_search.tier, { tier: romanize(tier), })} @@ -252,8 +257,8 @@ function TiersFilter() { }); }} > - {strings.website.common.tank_search.clear} + diff --git a/packages/website/src/ui/compose.tsx b/packages/website/src/ui/compose.tsx index 2b405a00d..acc239027 100644 --- a/packages/website/src/ui/compose.tsx +++ b/packages/website/src/ui/compose.tsx @@ -1,35 +1,49 @@ -import type { FC } from "react"; +import type { ComponentProps, ComponentType } from "react"; import { classNames } from "./classNames"; -function composeRadixComponent( - Component: FC, +function composeRadixComponent( + Component: ComponentType, style: CSSModuleClasses[string], + _props?: Partial, ) { return function (props: Props & { className?: string }) { return ( - + ); }; } -export function composeRadixComponents< - Components extends Record, ->(components: Components, styles: CSSModuleClasses) { - const mapped: Partial = {}; +type ComponentKeys = { + [K in keyof T]: T[K] extends ComponentType ? K : never; +}[keyof T]; + +type PickComponents = Pick>; + +export function composeRadixComponents>( + components: Module, + styles: CSSModuleClasses, + props: Partial<{ + [C in ComponentKeys]: ComponentProps< + Extract> + >; + }> = {}, +) { + const mapped: Record = {}; + const propsByName = props as Record; for (const key in components) { - const isMethod = key[0].toLowerCase() === key[0]; - - if (isMethod) { - mapped[key] = components[key]; - continue; - } + if (key[0].toLowerCase() === key[0]) continue; mapped[key] = composeRadixComponent( - components[key] as FC, + components[key] as ComponentType, styles[key], - ) as Components[Extract]; + propsByName[key], + ); } - return mapped as Components; + return mapped as PickComponents; }