oh lord

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

@@ -16,9 +16,17 @@
 
   cursor: pointer;
 
+  &[data-even-padding] {
+    padding: var(--space-3);
+  }
+
   &[data-size="minor"] {
     font-size: 0.7em;
     padding: var(--space-2) var(--space-3);
+
+    &[data-even-padding] {
+      padding: var(--space-2);
+    }
   }
 
   &[data-size="major"] {
@@ -62,8 +70,6 @@
     width: 1.25em;
     height: 1.25em;
 
-    margin: -0.25em 0;
-
     object-fit: contain;
   }
 

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

@@ -9,6 +9,7 @@ export interface ButtonProps extends ComponentProps<"button"> {
   variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline";
   size?: "regular" | "minor" | "major";
   highContrast?: boolean;
+  evenPadding?: boolean;
 
   listChild?: "horizontal" | "vertical";
   parentListChild?: "horizontal" | "vertical";
@@ -36,6 +37,7 @@ export function Button({
   style,
   radius = "max",
   size = "regular",
+  evenPadding,
 
   listChild,
   parentListChild,
@@ -53,6 +55,7 @@ export function Button({
       data-list-child={listChild}
       data-parent-list-child={parentListChild}
       data-high-contrast={highContrast}
+      data-even-padding={evenPadding}
       {...props}
     />
   );

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

@@ -17,7 +17,7 @@
   margin: var(--space-4);
 
   box-shadow: var(--shadow-subtle);
-  border-radius: var(--space-3);
+  border-radius: var(--space-4);
   outline: var(--outline-interactive) !important;
 
   scrollbar-width: none;

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

@@ -2,6 +2,4 @@ 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" },
-});

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

@@ -21,7 +21,6 @@ import { Button } from "../Button";
 import { ClassIcon } from "../ClassIcon";
 import { DropdownMenu } from "../DropdownMenu";
 import { GunTypeIcon } from "../GunTypeIcon";
-import { IconButton } from "../IconButton";
 import { MissingShellIcon } from "../MissingShellIcon";
 import { ResearchedIcon } from "../ResearchedIcon";
 import { ScienceIcon } from "../ScienceIcon";
@@ -174,7 +173,8 @@ export function TankSearchFilters() {
 
 function ResetButton() {
   return (
-    <IconButton
+    <Button
+      evenPadding
       color="red"
       variant="solid"
       onClick={() => {
@@ -182,7 +182,7 @@ function ResetButton() {
       }}
     >
       <TrashIcon />
-    </IconButton>
+    </Button>
   );
 }
 
@@ -599,7 +599,7 @@ function IndividualShellFilter({
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <IconButton listChild="horizontal" variant="soft" color="gray">
+        <Button listChild="horizontal" variant="soft" color="gray" evenPadding>
           {shells[index] === null && (
             <MissingShellIcon width="1em" height="1em" />
           )}
@@ -612,7 +612,7 @@ function IndividualShellFilter({
               )}
             />
           )}
-        </IconButton>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -709,7 +709,8 @@ function OwnershipFilterInternal() {
 
   return (
     <div className={styles.grouped}>
-      <IconButton
+      <Button
+        evenPadding
         listChild="horizontal"
         disabled={!wargaming}
         variant={showOwned ? "solid" : "soft"}
@@ -723,9 +724,10 @@ function OwnershipFilterInternal() {
         }}
       >
         <LockOpen2Icon />
-      </IconButton>
+      </Button>
 
-      <IconButton
+      <Button
+        evenPadding
         listChild="horizontal"
         disabled={!wargaming}
         variant={showUnowned ? "solid" : "soft"}
@@ -739,7 +741,7 @@ function OwnershipFilterInternal() {
         }}
       >
         <LockClosedIcon />
-      </IconButton>
+      </Button>
     </div>
   );
 }
@@ -750,7 +752,8 @@ function TestFilter() {
 
   return (
     <div className={styles.grouped}>
-      <IconButton
+      <Button
+        evenPadding
         variant={showNonTesting ? "solid" : "soft"}
         color={showNonTesting ? undefined : "gray"}
         highContrast={showNonTesting}
@@ -763,9 +766,10 @@ function TestFilter() {
         }}
       >
         <ScienceOffIcon />
-      </IconButton>
+      </Button>
 
-      <IconButton
+      <Button
+        evenPadding
         variant={showTesting ? "solid" : "soft"}
         color={showTesting ? undefined : "gray"}
         highContrast={showTesting}
@@ -778,7 +782,7 @@ function TestFilter() {
         }}
       >
         <ScienceIcon />
-      </IconButton>
+      </Button>
     </div>
   );
 }