From 4ae327b6fc339a7f025f1aa5cdc60e4a09f09426 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 31 Oct 2026 16:35:43 -0500
Subject: [PATCH] more consistent

---
 .../website/src/components/BaseStyles.astro   |   1 +
 .../src/components/Button/index.module.css    |   8 +-
 .../TankSearchFilters/index.module.css        |  12 ++
 .../components/TankSearchFilters/index.tsx    | 107 ++++++------------
 .../src/components/Text/index.module.css      |   5 +-
 5 files changed, 54 insertions(+), 79 deletions(-)

diff --git a/packages/website/src/components/BaseStyles.astro b/packages/website/src/components/BaseStyles.astro
index 090ffde91..a84aeebd2 100644
--- a/packages/website/src/components/BaseStyles.astro
+++ b/packages/website/src/components/BaseStyles.astro
@@ -76,6 +76,7 @@ import "@fontsource-variable/roboto-flex";
     --shadow-aggressive: var(--space-1) var(--space-1) var(--space-4)
       var(--black-a11);
     --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5);
+    --shadow-icon: 0 0 var(--space-1) var(--black-a11);
     --shadow-none: 0 0 0 transparent;
 
     &.light {
diff --git a/packages/website/src/components/Button/index.module.css b/packages/website/src/components/Button/index.module.css
index 419ea8cbc..2e5c30a5f 100644
--- a/packages/website/src/components/Button/index.module.css
+++ b/packages/website/src/components/Button/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 
   border-radius: var(--max-size);
   padding: var(--space-3) var(--space-4);
@@ -64,8 +64,8 @@
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 1.25em;
+    height: 1.25em;
 
     object-fit: contain;
   }
@@ -105,7 +105,7 @@
 
   &[data-variant="surface"],
   &[data-variant="outline"] {
-    outline: var(--space-1) solid var(--accent-6);
+    outline: var(--space-1) solid var(--accent-5);
 
     &[data-high-contrast="true"] {
       outline: var(--space-1) solid var(--accent-11);
diff --git a/packages/website/src/components/TankSearchFilters/index.module.css b/packages/website/src/components/TankSearchFilters/index.module.css
index 8a545c944..8f5cf4b20 100644
--- a/packages/website/src/components/TankSearchFilters/index.module.css
+++ b/packages/website/src/components/TankSearchFilters/index.module.css
@@ -11,3 +11,15 @@
     background-position: 0% 50%;
   }
 }
+
+.plus {
+  color: var(--gray-11);
+}
+
+.icon {
+  filter: drop-shadow(var(--shadow-icon));
+
+  & + & {
+    margin-left: -0.5em;
+  }
+}
diff --git a/packages/website/src/components/TankSearchFilters/index.tsx b/packages/website/src/components/TankSearchFilters/index.tsx
index 0eec02871..06e3e505d 100644
--- a/packages/website/src/components/TankSearchFilters/index.tsx
+++ b/packages/website/src/components/TankSearchFilters/index.tsx
@@ -164,6 +164,7 @@ export function TankSearchFilters() {
 
       <GunTypeFilter />
       <ShellFilter />
+
       <ConsumablesFilter />
       <ProvisionsFilter />
       <GameModeAbilitiesFilter />
@@ -195,22 +196,19 @@ function TiersFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <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}>
-                {romanize(tier)}
-              </Text>
-            ))}
+        <Button color="gray" variant="surface">
+          {tiers
+            .slice(0, MAX_ICONS)
+            .map((tier) => romanize(tier))
+            .join(" ")}
 
-            {tiers.length > MAX_ICONS && (
-              <Text size="minor">
-                {literals(strings.common.units.plus, {
-                  value: tiers.length - MAX_ICONS,
-                })}
-              </Text>
-            )}
-          </Flex>
+          {tiers.length > MAX_ICONS && (
+            <span className={styles.plus}>
+              {literals(strings.common.units.plus, {
+                value: tiers.length - MAX_ICONS,
+              })}
+            </span>
+          )}
         </Button>
       </DropdownMenu.Trigger>
 
@@ -274,17 +272,12 @@ function NationsFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button size="minor" color="gray" variant="surface">
+        <Button color="gray" variant="surface">
           <Flex>
-            {nations.map((nation, index) => (
+            {nations.map((nation) => (
               <img
+                className={styles.icon}
                 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`)}
               />
             ))}
@@ -362,21 +355,14 @@ function ClassFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button size="minor" color="gray" variant="surface">
+        <Button color="gray" variant="surface">
           <Flex>
             {classes.map((tankClass, index) => {
               return (
                 <ClassIcon
                   key={tankClass}
                   class={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",
-                  }}
+                  className={styles.icon}
                 />
               );
             })}
@@ -449,7 +435,7 @@ function GunTypeFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button size="minor" color="gray" variant="surface">
+        <Button color="gray" variant="surface">
           <Flex>
             {gunTypes.map((gunType) => {
               return (
@@ -528,7 +514,7 @@ function TypeFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button size="minor" color="gray" variant="surface">
+        <Button color="gray" variant="surface">
           <Flex gap="1">
             {types.map((tankType) => {
               return (
@@ -537,11 +523,8 @@ function TypeFilter() {
                     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",
                   }}
+                  className={styles.icon}
                   key={tankType}
                 />
               );
@@ -634,7 +617,7 @@ function IndividualShellFilter({
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <IconButton listChild size="minor" variant="surface" color="gray">
+        <IconButton listChild variant="surface" color="gray">
           {shells[index] === null && (
             <Text lowContrast className={styles["shell-icon"]}>
               <MissingShellIcon width="1em" height="1em" />
@@ -844,28 +827,22 @@ function ConsumablesFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button size="minor" color="gray" variant="surface">
+        <Button 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",
-                }}
+                className={styles.icon}
                 src={alias("api", `/icons/consumables/${consumable}.webp`)}
               />
             ))}
 
             {consumables.length > MAX_ICONS && (
-              <Text size="minor" className={styles["overflow-plus"]}>
+              <span className={styles.plus}>
                 {literals(strings.common.units.plus, {
                   value: consumables.length - MAX_ICONS,
                 })}
-              </Text>
+              </span>
             )}
           </Flex>
         </Button>
@@ -939,28 +916,22 @@ function ProvisionsFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button size="minor" color="gray" variant="surface">
+        <Button 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",
-                }}
+                className={styles.icon}
                 src={alias("api", `/icons/provisions/${provision}.webp`)}
               />
             ))}
 
             {provisions.length > MAX_ICONS && (
-              <Text size="minor" className={styles["overflow-plus"]}>
+              <span className={styles.plus}>
                 {literals(strings.common.units.plus, {
                   value: provisions.length - MAX_ICONS,
                 })}
-              </Text>
+              </span>
             )}
           </Flex>
         </Button>
@@ -1049,28 +1020,18 @@ function GameModeAbilitiesFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <Button size="minor" color="gray" variant="surface">
+        <Button 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}
-              />
+              <img key={icon} className={styles.icon} src={icon} />
             ))}
 
             {icons.length > MAX_ICONS && (
-              <Text size="minor" className={styles["overflow-plus"]}>
+              <span className={styles.plus}>
                 {literals(strings.common.units.plus, {
                   value: icons.length - MAX_ICONS,
                 })}
-              </Text>
+              </span>
             )}
           </Flex>
         </Button>
diff --git a/packages/website/src/components/Text/index.module.css b/packages/website/src/components/Text/index.module.css
index b716e926b..1a73019b6 100644
--- a/packages/website/src/components/Text/index.module.css
+++ b/packages/website/src/components/Text/index.module.css
@@ -1,6 +1,7 @@
 .text {
-  font-size: var(--font-size-regular);
-
+  &[data-size="regular"] {
+    font-size: var(--font-size-regular);
+  }
   &[data-size="minor"] {
     font-size: var(--font-size-minor);
   }