ahhhhhh

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

@@ -16,11 +16,6 @@
 
   cursor: pointer;
 
-  &[data-disabled="true"] {
-    cursor: default;
-    opacity: 0.5;
-  }
-
   &[data-size="minor"] {
     font-size: 0.7em;
     padding: var(--space-2) var(--space-3);
@@ -67,6 +62,8 @@
     width: 1.25em;
     height: 1.25em;
 
+    margin: -0.25em 0;
+
     object-fit: contain;
   }
 
@@ -78,6 +75,7 @@
     background-color: var(--accent-8);
 
     &[data-high-contrast="true"] {
+      color: var(--accent-1);
       background-color: var(--accent-12);
     }
   }
@@ -111,4 +109,10 @@
       outline: var(--space-1) solid var(--accent-11);
     }
   }
+
+  &[disabled] {
+    cursor: default;
+    opacity: 0.5;
+    outline: none;
+  }
 }

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

@@ -39,7 +39,6 @@ export function Button({
 
   listChild,
   parentListChild,
-  disabled,
   highContrast,
   ...props
 }: ButtonProps) {
@@ -54,8 +53,6 @@ export function Button({
       data-list-child={listChild}
       data-parent-list-child={parentListChild}
       data-high-contrast={highContrast}
-      data-disabled={disabled}
-      disabled={disabled}
       {...props}
     />
   );

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

@@ -52,6 +52,9 @@
 
     img,
     svg {
+      width: 1em;
+      height: 1em;
+
       &:last-child {
         margin-left: auto;
       }
@@ -65,12 +68,6 @@
       display: flex;
 
       transform: translate(calc(-50% + var(--gutter) / 2), -50%);
-
-      img,
-      svg {
-        width: 1em;
-        height: 1em;
-      }
     }
   }
 }

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

@@ -2,10 +2,4 @@
   padding: var(--space-3);
 
   aspect-ratio: 1 / 1;
-
-  img,
-  svg {
-    width: 0.75em;
-    height: 0.75em;
-  }
 }

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

@@ -1,4 +1,8 @@
 .container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+
   flex: 1;
 
   .label {

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

@@ -206,7 +206,7 @@ export const TankSearch = memo<TankSearchProps>(
     });
 
     return (
-      <Flex className={styles.container} column gap="4">
+      <div className={styles.container}>
         <TankSearchBar
           skeleton={skeleton}
           topResult={sorted[0]}
@@ -288,7 +288,7 @@ export const TankSearch = memo<TankSearchProps>(
         {!skeleton && sorted.length === 0 && (
           <TankSearchNoResults type="search" />
         )}
-      </Flex>
+      </div>
     );
   },
 );

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

@@ -1,25 +1,39 @@
-.nation {
+.filters {
-  .flag {
+  display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
 
-    width: var(--space-7);
+  gap: var(--space-3);
-    height: 100%;
 
-    background-size: 200%;
+  .nation {
-    background-position: 0% 50%;
+    .flag {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      width: var(--space-7);
+      height: 100%;
+
+      background-size: 200%;
+      background-position: 0% 50%;
+    }
+  }
+
+  .plus {
+    color: var(--gray-11);
   }
-}
 
-.plus {
+  .icon {
-  color: var(--gray-11);
+    filter: drop-shadow(var(--shadow-icon));
-}
+
+    & + &:not([data-no-overlap]) {
+      margin-left: calc(-0.5em - var(--space-3));
+    }
 
-.icon {
+    &[data-no-overlap] {
-  filter: drop-shadow(var(--shadow-icon));
+      margin: 0 calc(-1 * var(--space-1));
+    }
+  }
 
-  & + & {
+  .grouped {
-    margin-left: -0.5em;
+    display: flex;
   }
 }

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

@@ -153,7 +153,7 @@ const TIERS = await awaitableTiers;
 
 export function TankSearchFilters() {
   return (
-    <Flex gap="3" wrap>
+    <div className={styles.filters}>
       <TiersFilter />
       <ClassFilter />
       <TypeFilter />
@@ -163,14 +163,14 @@ export function TankSearchFilters() {
       <TestFilter />
 
       <GunTypeFilter />
-      <ShellFilter />
+      {/* <ShellFilter />
 
       <ConsumablesFilter />
       <ProvisionsFilter />
       <GameModeAbilitiesFilter />
 
-      <ResetButton />
+      <ResetButton /> */}
-    </Flex>
+    </div>
   );
 }
 
@@ -196,7 +196,7 @@ function TiersFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button color="gray" variant="surface">
+        <Button color="gray" variant="soft">
           {tiers
             .slice(0, MAX_ICONS)
             .map((tier) => romanize(tier))
@@ -272,16 +272,14 @@ function NationsFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button color="gray" variant="surface">
+        <Button color="gray" variant="soft">
-          <Flex>
+          {nations.map((nation) => (
-            {nations.map((nation) => (
+            <img
-              <img
+              className={styles.icon}
-                className={styles.icon}
+              key={nation}
-                key={nation}
+              src={alias("api", `/flags/circle/${nation}.webp`)}
-                src={alias("api", `/flags/circle/${nation}.webp`)}
+            />
-              />
+          ))}
-            ))}
-          </Flex>
         </Button>
       </DropdownMenu.Trigger>
 
@@ -355,18 +353,16 @@ function ClassFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button color="gray" variant="surface">
+        <Button color="gray" variant="soft">
-          <Flex>
+          {classes.map((tankClass) => {
-            {classes.map((tankClass, index) => {
+            return (
-              return (
+              <ClassIcon
-                <ClassIcon
+                key={tankClass}
-                  key={tankClass}
+                class={tankClass}
-                  class={tankClass}
+                className={styles.icon}
-                  className={styles.icon}
+              />
-                />
+            );
-              );
+          })}
-            })}
-          </Flex>
         </Button>
       </DropdownMenu.Trigger>
 
@@ -435,24 +431,17 @@ function GunTypeFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button color="gray" variant="surface">
+        <Button color="gray" variant="soft">
-          <Flex>
+          {gunTypes.map((gunType) => {
-            {gunTypes.map((gunType) => {
+            return (
-              return (
+              <GunTypeIcon
-                <GunTypeIcon
+                key={gunType}
-                  key={gunType}
+                type={gunType}
-                  type={gunType}
+                data-no-overlap
-                  style={{
+                className={styles.icon}
-                    margin: gunType === "regular" ? "0 -0.125em" : undefined,
+              />
-                    opacity: 1,
+            );
-                    color: "var(--gray-12)",
+          })}
-                    width: "1.25em",
-                    height: "1.25em",
-                  }}
-                />
-              );
-            })}
-          </Flex>
         </Button>
       </DropdownMenu.Trigger>
 
@@ -476,12 +465,13 @@ function GunTypeFilter() {
               checked={selected}
               key={gunType}
             >
-              <GunTypeIcon
+              <DropdownMenu.ItemIndicator>
-                type={gunType}
+                <CheckIcon />
-                style={{ width: "1.25em", height: "1.25em" }}
+              </DropdownMenu.ItemIndicator>
-              />
 
               {strings.common.gun_types[gunType]}
+
+              <GunTypeIcon type={gunType} />
             </DropdownMenu.CheckboxItem>
           );
         })}
@@ -498,8 +488,9 @@ function GunTypeFilter() {
             });
           }}
         >
-          <TrashIcon />
           {strings.website.common.tank_search.clear}
+
+          <TrashIcon />
         </DropdownMenu.Item>
       </DropdownMenu.Content>
     </DropdownMenu.Root>
@@ -514,22 +505,21 @@ function TypeFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button color="gray" variant="surface">
+        <Button color="gray" variant="soft">
-          <Flex gap="1">
+          {types.map((tankType) => {
-            {types.map((tankType) => {
+            return (
-              return (
+              <ResearchedIcon
-                <ResearchedIcon
+                style={{
-                  style={{
+                  color: `var(--${TANK_TYPE_COLORS[tankType]}-${
-                    color: `var(--${TANK_TYPE_COLORS[tankType]}-${
+                    tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
-                      tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
+                  })`,
-                    })`,
+                }}
-                  }}
+                data-no-overlap
-                  className={styles.icon}
+                className={styles.icon}
-                  key={tankType}
+                key={tankType}
-                />
+              />
-              );
+            );
-            })}
+          })}
-          </Flex>
         </Button>
       </DropdownMenu.Trigger>
 
@@ -730,10 +720,11 @@ function OwnershipFilterInternal() {
           borderTopRightRadius: 0,
           borderBottomRightRadius: 0,
         }}
-        listChild
+        listChild="horizontal"
         disabled={!wargaming}
-        variant={showOwned ? "solid" : "surface"}
+        variant={showOwned ? "solid" : "soft"}
         color={showOwned ? undefined : "gray"}
+        highContrast={showOwned}
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showOwned = !draft.showOwned;
@@ -750,10 +741,11 @@ function OwnershipFilterInternal() {
           borderBottomLeftRadius: 0,
           marginLeft: "-1px",
         }}
-        listChild
+        listChild="horizontal"
         disabled={!wargaming}
-        variant={showUnowned ? "solid" : "surface"}
+        variant={showUnowned ? "solid" : "soft"}
         color={showUnowned ? undefined : "gray"}
+        highContrast={showUnowned}
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showUnowned = !draft.showUnowned;
@@ -772,15 +764,16 @@ function TestFilter() {
   const showNonTesting = TankFilters.use((state) => state.showNonTesting);
 
   return (
-    <Flex>
+    <div className={styles.grouped}>
       <IconButton
         style={{
           borderTopRightRadius: 0,
           borderBottomRightRadius: 0,
         }}
-        variant={showNonTesting ? "solid" : "surface"}
+        variant={showNonTesting ? "solid" : "soft"}
         color={showNonTesting ? undefined : "gray"}
-        listChild
+        highContrast={showNonTesting}
+        listChild="horizontal"
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showNonTesting = !draft.showNonTesting;
@@ -799,9 +792,10 @@ function TestFilter() {
           borderBottomLeftRadius: 0,
           marginLeft: "-1px",
         }}
-        variant={showTesting ? "solid" : "surface"}
+        variant={showTesting ? "solid" : "soft"}
         color={showTesting ? undefined : "gray"}
-        listChild
+        highContrast={showTesting}
+        listChild="horizontal"
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showTesting = !draft.showTesting;
@@ -813,7 +807,7 @@ function TestFilter() {
           style={{ width: "1em", height: "1em", color: "currentColor" }}
         />
       </IconButton>
-    </Flex>
+    </div>
   );
 }
 
@@ -828,23 +822,21 @@ function ConsumablesFilter() {
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
         <Button color="gray" variant="surface">
-          <Flex>
+          {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
-            {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
+            <img
-              <img
+              key={consumable}
-                key={consumable}
+              className={styles.icon}
-                className={styles.icon}
+              src={alias("api", `/icons/consumables/${consumable}.webp`)}
-                src={alias("api", `/icons/consumables/${consumable}.webp`)}
+            />
-              />
+          ))}
-            ))}
 
-            {consumables.length > MAX_ICONS && (
+          {consumables.length > MAX_ICONS && (
-              <span className={styles.plus}>
+            <span className={styles.plus}>
-                {literals(strings.common.units.plus, {
+              {literals(strings.common.units.plus, {
-                  value: consumables.length - MAX_ICONS,
+                value: consumables.length - MAX_ICONS,
-                })}
+              })}
-              </span>
+            </span>
-            )}
+          )}
-          </Flex>
         </Button>
       </DropdownMenu.Trigger>
 
@@ -917,23 +909,21 @@ function ProvisionsFilter() {
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
         <Button color="gray" variant="surface">
-          <Flex>
+          {provisions.slice(0, MAX_ICONS).map((provision, index) => (
-            {provisions.slice(0, MAX_ICONS).map((provision, index) => (
+            <img
-              <img
+              key={provision}
-                key={provision}
+              className={styles.icon}
-                className={styles.icon}
+              src={alias("api", `/icons/provisions/${provision}.webp`)}
-                src={alias("api", `/icons/provisions/${provision}.webp`)}
+            />
-              />
+          ))}
-            ))}
 
-            {provisions.length > MAX_ICONS && (
+          {provisions.length > MAX_ICONS && (
-              <span className={styles.plus}>
+            <span className={styles.plus}>
-                {literals(strings.common.units.plus, {
+              {literals(strings.common.units.plus, {
-                  value: provisions.length - MAX_ICONS,
+                value: provisions.length - MAX_ICONS,
-                })}
+              })}
-              </span>
+            </span>
-            )}
+          )}
-          </Flex>
         </Button>
       </DropdownMenu.Trigger>
 
@@ -1021,19 +1011,17 @@ function GameModeAbilitiesFilter() {
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
         <Button color="gray" variant="surface">
-          <Flex>
+          {icons.slice(0, MAX_ICONS).map((icon, index) => (
-            {icons.slice(0, MAX_ICONS).map((icon, index) => (
+            <img key={icon} className={styles.icon} src={icon} />
-              <img key={icon} className={styles.icon} src={icon} />
+          ))}
-            ))}
 
-            {icons.length > MAX_ICONS && (
+          {icons.length > MAX_ICONS && (
-              <span className={styles.plus}>
+            <span className={styles.plus}>
-                {literals(strings.common.units.plus, {
+              {literals(strings.common.units.plus, {
-                  value: icons.length - MAX_ICONS,
+                value: icons.length - MAX_ICONS,
-                })}
+              })}
-              </span>
+            </span>
-            )}
+          )}
-          </Flex>
         </Button>
       </DropdownMenu.Trigger>