tank search ui rebuilt... somewhat

packages/website/src/components/Button/index.module.css

@@ -10,14 +10,15 @@
   border: none;
 
   font-family: var(--font-family-regular);
-  font-size: 0.75rem;
+  font-size: 0.75em;
   color: var(--gray-1);
   font-weight: var(--weight-medium);
 
   cursor: pointer;
 
   &[data-size="minor"] {
-    font-size: 0.75rem;
+    font-size: 0.75em;
+    padding: var(--space-2) var(--space-3);
   }
 
   &[data-array="true"] {

packages/website/src/components/DropdownMenu/index.module.css

@@ -0,0 +1,2 @@
+.Trigger {
+}

packages/website/src/components/Flex/index.module.css

@@ -4,4 +4,61 @@
   &[data-column="true"] {
     flex-direction: column;
   }
+  &[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
+  &[data-justify="start"] {
+    justify-content: flex-start;
+  }
+  &[data-justify="center"] {
+    justify-content: center;
+  }
+  &[data-justify="end"] {
+    justify-content: flex-end;
+  }
+  &[data-justify="between"] {
+    justify-content: space-between;
+  }
+
+  &[data-align="start"] {
+    align-items: flex-start;
+  }
+  &[data-align="center"] {
+    align-items: center;
+  }
+  &[data-align="end"] {
+    align-items: flex-end;
+  }
+
+  &[data-gap="0"] {
+    gap: var(--space-0);
+  }
+  &[data-gap="1"] {
+    gap: var(--space-1);
+  }
+  &[data-gap="2"] {
+    gap: var(--space-2);
+  }
+  &[data-gap="3"] {
+    gap: var(--space-3);
+  }
+  &[data-gap="4"] {
+    gap: var(--space-4);
+  }
+  &[data-gap="5"] {
+    gap: var(--space-5);
+  }
+  &[data-gap="6"] {
+    gap: var(--space-6);
+  }
+  &[data-gap="7"] {
+    gap: var(--space-7);
+  }
+  &[data-gap="8"] {
+    gap: var(--space-8);
+  }
+  &[data-gap="9"] {
+    gap: var(--space-9);
+  }
 }

packages/website/src/components/Flex/index.tsx

@@ -4,17 +4,34 @@ import { classNames } from "../../ui/classNames";
 import styles from "./index.module.css";
 
 interface Props extends ComponentProps<"div"> {
-  gap?: Space;
   column?: boolean;
+  wrap?: boolean;
+
+  align?: "start" | "center" | "end";
+  justify?: "start" | "center" | "end" | "between";
+
+  gap?: Space;
 }
 
-export function Flex({ children, column, className, gap, ...props }: Props) {
+export function Flex({
+  children,
+  column,
+  className,
+  gap,
+  justify,
+  align,
+  wrap,
+  ...props
+}: Props) {
   return (
     <div
       {...props}
       className={classNames(styles.flex, className)}
-      data-gap={gap}
       data-column={column}
+      data-wrap={wrap}
+      data-gap={gap}
+      data-justify={justify}
+      data-align={align}
     >
       {children}
     </div>

packages/website/src/components/LinkI18nWrapper/index.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+  display: contents;
+}

packages/website/src/components/LinkI18nWrapper/index.tsx

@@ -0,0 +1,21 @@
+import locales from "@blitzkit/i18n/locales.json";
+import { LinkWrapper, type LinkWrapperProps } from "../LinkWrapper";
+import styles from "./index.module.css";
+
+export interface LinkI18nWrapperProps extends LinkWrapperProps {
+  locale: string;
+}
+
+export function LinkI18nWrapper({
+  locale,
+  href,
+  ...props
+}: LinkI18nWrapperProps) {
+  return (
+    <LinkWrapper
+      className={styles.wrapper}
+      href={`${locale === locales.default ? "" : `/${locale}`}${href}`}
+      {...props}
+    />
+  );
+}

packages/website/src/components/LinkWrapper/index.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+  display: contents;
+}

packages/website/src/components/LinkWrapper/index.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+export interface LinkWrapperProps extends ComponentProps<"a"> {}
+
+export function LinkWrapper({ className, ...props }: LinkWrapperProps) {
+  return <a className={classNames(styles.wrapper, className)} {...props} />;
+}

packages/website/src/components/TankCard/index.css

@@ -1,43 +0,0 @@
-.tank-search-card {
-  user-select: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2);
-  background-position: top left;
-  background-size: contain;
-  background-repeat: no-repeat;
-  overflow: hidden;
-}
-
-.tank-search-card[data-provide-link='true'] {
-  cursor: pointer;
-}
-
-.tank-search-card .link {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  color: inherit;
-}
-
-.tank-search-card .image {
-  width: 100%;
-  height: 8rem;
-  object-position: center right;
-  object-fit: contain;
-  filter: drop-shadow(-1px -1px 4px black);
-}
-
-.tank-search-card .class-icon {
-  width: 1em;
-  height: 1em;
-  min-width: 1em;
-  min-height: 1em;
-}
-
-.tank-search-card .name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

packages/website/src/components/TankCard/index.module.css

@@ -0,0 +1,15 @@
+.image-wrapper {
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+
+  height: 6rem;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+}

packages/website/src/components/TankCard/index.tsx

@@ -1,15 +1,15 @@
 import { alias, TankType, type TankDefinition } from "@blitzkit/core";
 import { uniq } from "lodash-es";
-import { forwardRef, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { api } from "../../core/blitzkit/api";
 import { useLocale } from "../../hooks/useLocale";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { classIcons } from "../ClassIcon";
 import { Flex } from "../Flex";
-import { LinkI18n } from "../LinkI18n";
+import { LinkI18nWrapper } from "../LinkI18nWrapper";
 import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
 import { Text, type TextProps } from "../Text";
-import "./index.css";
+import styles from "./index.module.css";
 
 type TankCardProps = TextProps & {
   tank: TankDefinition;
@@ -20,100 +20,80 @@ type TankCardProps = TextProps & {
 
 const tankDefinitions = await api.tankDefinitions();
 
-export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
-  (
-    {
-      tank,
-      discriminator,
-      onTankSelect: onSelect,
-      noLink,
-      style,
-      ...props
-    }: TankCardProps,
-    ref,
-  ) => {
-    const { unwrap, locale } = useLocale();
-    const provideLink = !noLink && onSelect === undefined;
+export const TankCard = ({
+  tank,
+  discriminator,
+  onTankSelect: onSelect,
+  noLink,
+  style,
+  ...props
+}: TankCardProps) => {
+  const { unwrap, locale } = useLocale();
 
-    const Icon = classIcons[tank.class];
+  const provideLink = !noLink && onSelect === undefined;
+  const name = unwrap(tank.name!);
 
-    return (
-      <Text
-        ref={ref}
-        tabIndex={onSelect ? 0 : undefined}
-        size="2"
-        color={
-          tank.type === TankType.TANK_TYPE_COLLECTOR
-            ? "blue"
-            : tank.type === TankType.TANK_TYPE_PREMIUM
-              ? "amber"
-              : "gray"
-        }
-        highContrast={tank.type === TankType.TANK_TYPE_RESEARCHABLE}
-        onClick={() => {
-          onSelect?.(tank);
-          TankopediaPersistent.mutate((draft) => {
-            draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
-              .filter((id) => id in tankDefinitions.tanks)
-              .slice(0, MAX_RECENTLY_VIEWED);
-          });
-        }}
-        className="tank-search-card"
-        data-provide-link={provideLink}
+  const color: TextProps["color"] =
+    tank.type === TankType.TANK_TYPE_COLLECTOR
+      ? "blue"
+      : tank.type === TankType.TANK_TYPE_PREMIUM
+        ? "amber"
+        : "gray";
+  const lowContrast = tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
+
+  const Icon = classIcons[tank.class];
+
+  const content = (
+    <Flex
+      column
+      gap="3"
+      onClick={() => {
+        onSelect?.(tank);
+        TankopediaPersistent.mutate((draft) => {
+          draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
+            .filter((id) => id in tankDefinitions.tanks)
+            .slice(0, MAX_RECENTLY_VIEWED);
+        });
+      }}
+    >
+      <Flex
+        justify="end"
+        className={styles["image-wrapper"]}
         style={{
           backgroundImage: `url(${alias(
             "api",
             `/flags/scratched/${tank.nation}.webp`,
           )})`,
-          ...style,
         }}
-        {...props}
       >
-        <LinkI18n
-          locale={locale}
-          className="link"
-          underline="hover"
-          href={provideLink ? `/tanks/${tank.slug}` : "#"}
-          onClick={(event) => {
-            if (!provideLink) event.preventDefault();
-          }}
-        >
-          <img
-            alt={unwrap(tank.name!)}
-            src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
-            className="image"
-            draggable={false}
-          />
+        <img
+          alt={name}
+          src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
+        />
+      </Flex>
 
-          <Flex
-            justify="center"
-            gap="1"
-            align="center"
-            overflow="hidden"
-            width="100%"
-            mt="1"
-          >
-            <Icon className="class-icon" />
-            <Text align="center" className="name">
-              {unwrap(tank.name!)}
-            </Text>
-          </Flex>
-
-          {discriminator && (
-            <Text
-              color="gray"
-              align="center"
-              style={{
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}
-            >
-              {discriminator}
-            </Text>
-          )}
-        </LinkI18n>
+      <Text color={color} lowContrast={lowContrast}>
+        <Flex align="center" gap="2" justify="center">
+          <Icon className={styles.icon} />
+          {name}
+        </Flex>
       </Text>
+
+      {discriminator && (
+        <Text lowContrast align="center">
+          {discriminator}
+        </Text>
+      )}
+    </Flex>
+  );
+
+  if (provideLink) {
+    return (
+      <LinkI18nWrapper locale={locale} href={`/tanks/${tank.slug}`}>
+        {content}
+      </LinkI18nWrapper>
     );
-  },
-);
+  }
+
+  return content;
+};

packages/website/src/components/TankCardWrapper/index.module.css

@@ -1,7 +1,8 @@
 .wrapper {
-  /* py="4"
-      columns="repeat(auto-fill, minmax(7rem, 1fr))"
-      flow="dense"
-      gap="4"
-      gapY="8" */
+  display: grid;
+
+  gap: var(--space-4);
+  row-gap: var(--space-5);
+
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }

packages/website/src/components/TankSearch/components/Sort.tsx

@@ -5,6 +5,7 @@ import type {
   TankopediaSortDirection,
 } from "../../../stores/tankopediaPersistent";
 import { TankSort } from "../../../stores/tankopediaSort";
+import { Button } from "../../Button";
 import { DropdownMenu } from "../../DropdownMenu";
 
 interface ItemProps {
@@ -39,9 +40,11 @@ export function Sort() {
 
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        {strings.website.common.tank_search.sort_dropdown.label}
-        <CaretDownIcon />
+      <DropdownMenu.Trigger asChild>
+        <Button variant="surface" color="gray">
+          {strings.website.common.tank_search.sort_dropdown.label}
+          <CaretDownIcon />
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content align="end">

packages/website/src/components/TankSearch/index.module.css

@@ -1,19 +1,11 @@
-.container {
-  display: flex;
-  flex-direction: column;
+.tanks {
+  /* mt="2" gap="1" align="center" justify="center" direction="column" */
 
-  gap: var(--space-2);
-  flex-grow: 1;
-
-  .tanks {
-    /* mt="2" gap="1" align="center" justify="center" direction="column" */
-
-    .count {
-      /* gap="2" */
-    }
-  }
-
-  .test-warning {
-    /* justify="center" mt="4" */
+  .count {
+    /* gap="2" */
   }
 }
+
+.test-warning {
+  /* justify="center" mt="4" */
+}

packages/website/src/components/TankSearch/index.tsx

@@ -9,7 +9,7 @@ import {
 import { literals } from "@blitzkit/i18n/src/literals";
 import fuzzysort from "fuzzysort";
 import { times, uniq } from "lodash-es";
-import { memo, useEffect, useMemo, useState, type ComponentProps } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import usePromise from "react-promise-suspense";
 import { awaitableTankNames } from "../../core/awaitables/tankNames";
 import { api } from "../../core/blitzkit/api";
@@ -24,6 +24,7 @@ import { TankSort } from "../../stores/tankopediaSort";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
+import { Flex } from "../Flex";
 import { Link } from "../Link";
 import { RecentlyViewedTanks } from "../RecentlyViewedTanks";
 import { TankCardSkeleton } from "../TankCardSkeleton";
@@ -36,12 +37,11 @@ import { NoResults } from "./components/NoResults";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 import styles from "./index.module.css";
 
-export type TankSearchProps = MaybeSkeletonComponentProps &
-  ComponentProps<"div"> & {
-    compact?: boolean;
-    onSelect?: (tank: TankDefinition) => void;
-    onSelectAll?: (tanks: TankDefinition[]) => void;
-  };
+export type TankSearchProps = MaybeSkeletonComponentProps & {
+  compact?: boolean;
+  onSelect?: (tank: TankDefinition) => void;
+  onSelectAll?: (tanks: TankDefinition[]) => void;
+};
 
 const PREVIEW_COUNT = 20;
 const DEFAULT_LOADED_CARDS = 64;
@@ -55,7 +55,7 @@ const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
   ]);
 
 export const TankSearch = memo<TankSearchProps>(
-  ({ compact, onSelect, onSelectAll, skeleton, ...props }) => {
+  ({ compact, onSelect, onSelectAll, skeleton }) => {
     const { strings, locale } = useLocale();
     const wargaming = App.use((state) => state.logins.wargaming);
     const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
@@ -430,7 +430,7 @@ export const TankSearch = memo<TankSearchProps>(
     }, [tankFilters, tankopediaSort]);
 
     return (
-      <div className={styles.container} {...props}>
+      <Flex column gap="4">
         <TankSearchBar
           skeleton={skeleton}
           topResult={tanks?.[0]}
@@ -543,7 +543,7 @@ export const TankSearch = memo<TankSearchProps>(
             )}
           </TankCardWrapper>
         )}
-      </div>
+      </Flex>
     );
   },
 );

packages/website/src/components/TankSearchBar/index.module.css

@@ -1,7 +0,0 @@
-.search-bar {
-  /*  justify="center" */
-
-  .wrapper {
-    /* gap="2" flexGrow="1" */
-  }
-}

packages/website/src/components/TankSearchBar/index.tsx

@@ -5,10 +5,10 @@ import { type KeyboardEventHandler, useCallback, useRef } from "react";
 import { useLocale } from "../../hooks/useLocale";
 import { TankFilters } from "../../stores/tankFilters";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
+import { Flex } from "../Flex";
 import { Spinner } from "../Spinner";
 import { Sort } from "../TankSearch/components/Sort";
 import { TextField } from "../TextField";
-import styles from "./index.module.css";
 
 type SearchBarProps = MaybeSkeletonComponentProps & {
   topResult?: TankDefinition;
@@ -65,22 +65,20 @@ export function TankSearchBar({
   );
 
   return (
-    <div className={styles["search-bar"]}>
-      <div className={styles.wrapper}>
-        <TextField
-          disabled={skeleton}
-          defaultValue={search ?? undefined}
-          style={{ flex: 1 }}
-          ref={input}
-          placeholder={strings.website.common.tank_search.search_bar_hint}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-        >
-          {searching ? <Spinner /> : <MagnifyingGlassIcon />}
-        </TextField>
+    <Flex gap="3">
+      <TextField
+        disabled={skeleton}
+        defaultValue={search ?? undefined}
+        style={{ flex: 1 }}
+        ref={input}
+        placeholder={strings.website.common.tank_search.search_bar_hint}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      >
+        {searching ? <Spinner /> : <MagnifyingGlassIcon />}
+      </TextField>
 
-        <Sort />
-      </div>
-    </div>
+      <Sort />
+    </Flex>
   );
 }

packages/website/src/components/TankSearchFilters/index.tsx

@@ -21,6 +21,7 @@ import { api } from "../../core/blitzkit/api";
 import { useLocale } from "../../hooks/useLocale";
 import { App } from "../../stores/app";
 import { TankFilters, type CaseType } from "../../stores/tankFilters";
+import { Button } from "../Button";
 import { classIcons } from "../ClassIcon";
 import { DropdownMenu } from "../DropdownMenu";
 import { Flex } from "../Flex";
@@ -173,7 +174,7 @@ const TIERS = times(10, (i) => 10 - i);
 
 export function TankSearchFilters() {
   return (
-    <div className={styles.container}>
+    <Flex gap="3" wrap>
       <TiersFilter />
       <ClassFilter />
       <TypeFilter />
@@ -189,7 +190,7 @@ export function TankSearchFilters() {
       <GameModeAbilitiesFilter />
 
       <ResetButton />
-    </div>
+    </Flex>
   );
 }
 
@@ -214,22 +215,24 @@ function TiersFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex gap="1">
-          {tiers.slice(0, MAX_ICONS).map((tier) => (
-            <Text size="minor" key={tier}>
-              {TIER_ROMAN_NUMERALS[tier]}
-            </Text>
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex gap="1">
+            {tiers.slice(0, MAX_ICONS).map((tier) => (
+              <Text size="minor" key={tier}>
+                {TIER_ROMAN_NUMERALS[tier]}
+              </Text>
+            ))}
 
-          {tiers.length > MAX_ICONS && (
-            <Text size="minor">
-              {literals(strings.common.units.plus, {
-                value: tiers.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {tiers.length > MAX_ICONS && (
+              <Text size="minor">
+                {literals(strings.common.units.plus, {
+                  value: tiers.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -287,21 +290,23 @@ function NationsFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {nations.map((nation, index) => (
-            <img
-              key={nation}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-              }}
-              src={alias("api", `/flags/circle/${nation}.webp`)}
-            />
-          ))}
-        </Flex>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {nations.map((nation, index) => (
+              <img
+                key={nation}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                }}
+                src={alias("api", `/flags/circle/${nation}.webp`)}
+              />
+            ))}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -369,25 +374,27 @@ function ClassFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {classes.map((tankClass, index) => {
-            const Icon = classIcons[tankClass];
-            return (
-              <Icon
-                key={tankClass}
-                style={{
-                  color: "var(--gray-12)",
-                  opacity: 1,
-                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                  marginLeft: index > 0 ? "-0.5em" : undefined,
-                  width: "1.25em",
-                  height: "1.25em",
-                }}
-              />
-            );
-          })}
-        </Flex>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {classes.map((tankClass, index) => {
+              const Icon = classIcons[tankClass];
+              return (
+                <Icon
+                  key={tankClass}
+                  style={{
+                    color: "var(--gray-12)",
+                    opacity: 1,
+                    filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                    marginLeft: index > 0 ? "-0.5em" : undefined,
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -447,25 +454,27 @@ function GunTypeFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {gunTypes.map((gunType) => {
-            const Icon = GUN_TYPE_ICONS[gunType];
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {gunTypes.map((gunType) => {
+              const Icon = GUN_TYPE_ICONS[gunType];
 
-            return (
-              <Icon
-                key={gunType}
-                style={{
-                  margin: gunType === "regular" ? "0 -0.125em" : undefined,
-                  opacity: 1,
-                  color: "var(--gray-12)",
-                  width: "1.25em",
-                  height: "1.25em",
-                }}
-              />
-            );
-          })}
-        </Flex>
+              return (
+                <Icon
+                  key={gunType}
+                  style={{
+                    margin: gunType === "regular" ? "0 -0.125em" : undefined,
+                    opacity: 1,
+                    color: "var(--gray-12)",
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -523,25 +532,27 @@ function TypeFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex gap="1">
-          {types.map((tankType) => {
-            return (
-              <ResearchedIcon
-                style={{
-                  color: `var(--${TANK_TYPE_COLORS[tankType]}-${
-                    tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
-                  })`,
-                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                  opacity: 1,
-                  width: "1.25em",
-                  height: "1.25em",
-                }}
-                key={tankType}
-              />
-            );
-          })}
-        </Flex>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex gap="1">
+            {types.map((tankType) => {
+              return (
+                <ResearchedIcon
+                  style={{
+                    color: `var(--${TANK_TYPE_COLORS[tankType]}-${
+                      tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
+                    })`,
+                    filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                    opacity: 1,
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                  key={tankType}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -622,21 +633,34 @@ function IndividualShellFilter({
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        {shells[index] === null && (
-          <Text color="gray" style={{ display: "contents" }}>
-            <MissingShellIcon width="1em" height="1em" />
-          </Text>
-        )}
-        {shells[index] !== null && (
-          <img
-            style={{ width: "1em", height: "1em" }}
-            src={alias(
-              "api",
-              `/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`,
-            )}
-          />
-        )}
+      <DropdownMenu.Trigger asChild>
+        <IconButton
+          size="minor"
+          variant="surface"
+          style={{
+            borderTopLeftRadius: index === 0 ? undefined : 0,
+            borderBottomLeftRadius: index === 0 ? undefined : 0,
+            borderTopRightRadius: index === 2 ? undefined : 0,
+            borderBottomRightRadius: index === 2 ? undefined : 0,
+          }}
+          color="gray"
+          highContrast
+        >
+          {shells[index] === null && (
+            <Text color="gray" style={{ display: "contents" }}>
+              <MissingShellIcon width="1em" height="1em" />
+            </Text>
+          )}
+          {shells[index] !== null && (
+            <img
+              style={{ width: "1em", height: "1em" }}
+              src={alias(
+                "api",
+                `/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`,
+              )}
+            />
+          )}
+        </IconButton>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -825,30 +849,32 @@ function ConsumablesFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
-            <img
-              key={consumable}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-                objectFit: "contain",
-              }}
-              src={alias("api", `/icons/consumables/${consumable}.webp`)}
-            />
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
+              <img
+                key={consumable}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                  objectFit: "contain",
+                }}
+                src={alias("api", `/icons/consumables/${consumable}.webp`)}
+              />
+            ))}
 
-          {consumables.length > MAX_ICONS && (
-            <Text size="minor" className={styles["overflow-plus"]}>
-              {literals(strings.common.units.plus, {
-                value: consumables.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {consumables.length > MAX_ICONS && (
+              <Text size="minor" className={styles["overflow-plus"]}>
+                {literals(strings.common.units.plus, {
+                  value: consumables.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -917,30 +943,32 @@ function ProvisionsFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {provisions.slice(0, MAX_ICONS).map((provision, index) => (
-            <img
-              key={provision}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-                objectFit: "contain",
-              }}
-              src={alias("api", `/icons/provisions/${provision}.webp`)}
-            />
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {provisions.slice(0, MAX_ICONS).map((provision, index) => (
+              <img
+                key={provision}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                  objectFit: "contain",
+                }}
+                src={alias("api", `/icons/provisions/${provision}.webp`)}
+              />
+            ))}
 
-          {provisions.length > MAX_ICONS && (
-            <Text size="minor" className={styles["overflow-plus"]}>
-              {literals(strings.common.units.plus, {
-                value: provisions.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {provisions.length > MAX_ICONS && (
+              <Text size="minor" className={styles["overflow-plus"]}>
+                {literals(strings.common.units.plus, {
+                  value: provisions.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -1024,30 +1052,32 @@ function GameModeAbilitiesFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {icons.slice(0, MAX_ICONS).map((icon, index) => (
-            <img
-              key={icon}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-                objectFit: "contain",
-              }}
-              src={icon}
-            />
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {icons.slice(0, MAX_ICONS).map((icon, index) => (
+              <img
+                key={icon}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                  objectFit: "contain",
+                }}
+                src={icon}
+              />
+            ))}
 
-          {icons.length > MAX_ICONS && (
-            <Text size="minor" className={styles["overflow-plus"]}>
-              {literals(strings.common.units.plus, {
-                value: icons.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {icons.length > MAX_ICONS && (
+              <Text size="minor" className={styles["overflow-plus"]}>
+                {literals(strings.common.units.plus, {
+                  value: icons.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>

packages/website/src/components/ToolCard.astro

@@ -77,7 +77,7 @@ const toolStrings =
 </style>
 
 <div
-  style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
+  style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
   class="container"
 >
   <LinkI18n
@@ -89,7 +89,7 @@ const toolStrings =
   >
     <div
       class="background"
-      style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
+      style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
     >
     </div>
 

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro

@@ -1,4 +1,5 @@
 ---
+import ColorScale from "../../../../components/ColorScale.astro";
 import { Section } from "../../../../components/Section";
 import ToolBanner from "../../../../components/ToolBanner.astro";
 import { tools } from "../../../../constants/tools";
@@ -11,6 +12,9 @@ const { locale } = Astro.props;
 ---
 
 <BaseLayout {locale} accent="purple">
+  <ColorScale color="blue" />
+  <ColorScale color="amber" />
+
   <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
 
   <Section>

packages/website/src/ui/compose.tsx

@@ -27,7 +27,7 @@ export function composeRadixComponents<
 
     mapped[key] = composeRadixComponent(
       components[key] as FC,
-      styles[key],
+      `radix__${styles[key]}`,
     ) as Components[Extract<keyof Components, string>];
   }