diff --git a/packages/website/src/components/DropdownMenu/index.module.css b/packages/website/src/components/DropdownMenu/index.module.css index bed63cad0..d9a9958de 100644 --- a/packages/website/src/components/DropdownMenu/index.module.css +++ b/packages/website/src/components/DropdownMenu/index.module.css @@ -1,4 +1,5 @@ -.Content { +.Content, +.SubContent { --gutter: var(--space-5); min-width: min(calc(100dvw - 2 * var(--space-4)), 16rem); @@ -13,8 +14,7 @@ display: flex; flex-direction: column; - margin-top: var(--space-3); - margin-right: var(--space-4); + margin: var(--space-4); box-shadow: var(--shadow-subtle); border-radius: var(--space-3); @@ -47,7 +47,8 @@ .Item, .CheckboxItem, - .RadioItem { + .RadioItem, + .SubTrigger { position: relative; background-color: var(--gray-3); @@ -70,8 +71,8 @@ background-color: var(--gray-5); } - & + & { - border-top: var(--space-1) solid var(--gray-2); + &:not(:last-child) { + border-bottom: var(--space-1) solid var(--gray-2); } img, diff --git a/packages/website/src/components/TankSearchBar/index.tsx b/packages/website/src/components/TankSearchBar/index.tsx index 752570af0..039fc2282 100644 --- a/packages/website/src/components/TankSearchBar/index.tsx +++ b/packages/website/src/components/TankSearchBar/index.tsx @@ -10,7 +10,7 @@ import { useStrings } from "../../hooks/useStrings"; import { TankFilters } from "../../stores/tankFilters"; import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; import { Flex } from "../Flex"; -import { Sort } from "../TankSearch/components/Sort"; +import { TankSearchSort } from "../TankSearchSort"; import { TextField } from "../TextField"; type SearchBarProps = MaybeSkeletonComponentProps & { @@ -74,7 +74,7 @@ export function TankSearchBar({ - + ); } diff --git a/packages/website/src/components/TankSearch/components/Sort.tsx b/packages/website/src/components/TankSearchSort.tsx similarity index 67% rename from packages/website/src/components/TankSearch/components/Sort.tsx rename to packages/website/src/components/TankSearchSort.tsx index d48045ae6..5cefb3be5 100644 --- a/packages/website/src/components/TankSearch/components/Sort.tsx +++ b/packages/website/src/components/TankSearchSort.tsx @@ -1,12 +1,16 @@ -import { CaretDownIcon } from "@radix-ui/react-icons"; -import { characteristicsGroups } from "../../../config/characteristicsGroups"; -import { useStrings } from "../../../hooks/useStrings"; -import { TankopediaSortDirection } from "../../../stores/tankopediaPersistent"; -import { TankSort } from "../../../stores/tankopediaSort"; -import { sortableCharacteristics } from "../../../tankopedia/sortableCharacteristics"; -import type { CharacteristicName } from "../../../types/characteristics"; -import { Button } from "../../Button"; -import { DropdownMenu } from "../../DropdownMenu"; +import { + CaretDownIcon, + CaretRightIcon, + DotFilledIcon, +} from "@radix-ui/react-icons"; +import { characteristicsGroups } from "../config/characteristicsGroups"; +import { useStrings } from "../hooks/useStrings"; +import { TankopediaSortDirection } from "../stores/tankopediaPersistent"; +import { TankSort } from "../stores/tankopediaSort"; +import { sortableCharacteristics } from "../tankopedia/sortableCharacteristics"; +import type { CharacteristicName } from "../types/characteristics"; +import { Button } from "./Button"; +import { DropdownMenu } from "./DropdownMenu"; interface ItemProps { by: CharacteristicName; @@ -25,12 +29,16 @@ function Item({ by }: ItemProps) { }); }} > + + + + {strings.tanks.characteristics.items[by]} ); } -export function Sort() { +export function TankSearchSort() { const by = TankSort.use((state) => state.by); const direction = TankSort.use((state) => state.direction); const strings = useStrings(); @@ -46,7 +54,7 @@ export function Sort() { - {strings.website.common.tank_search.sort.direction.label} + {strings.website.common.tank_search.sort.by} + + + + {strings.website.common.tank_search.sort.none} @@ -76,6 +88,8 @@ export function Sort() { > )[group.name] } + + @@ -93,8 +107,10 @@ export function Sort() { {strings.website.common.tank_search.sort.direction.label} { + value={`${direction}`} + onValueChange={(_value) => { + const value = Number(_value); + if ( value !== TankopediaSortDirection.Ascending && value !== TankopediaSortDirection.Descending @@ -107,10 +123,22 @@ export function Sort() { }); }} > - + + + + + {strings.website.common.tank_search.sort.direction.ascending} - + + + + + {strings.website.common.tank_search.sort.direction.descending}