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}