From bf59d127f91ca061995d0c1b0a498d67a290bb64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 6 Feb 2024 15:18:18 -0600
Subject: [PATCH] feat: move some filters

---
 .../TankSearch/components/Options/index.tsx   | 126 +++++++++---------
 .../components/TankSearch/index.tsx           |   2 +-
 2 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx b/src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx
index b9cfac388..0b512243f 100644
--- a/src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx
@@ -88,6 +88,38 @@ export function Options() {
           </Button>
         ))}
       </Flex>
+      <Flex className={styles.oneLineFilters}>
+        {nations.map((nation, index) => (
+          <Button
+            key={nation}
+            color={filters.nations.includes(nation) ? undefined : 'gray'}
+            variant={filters.nations.includes(nation) ? 'surface' : 'soft'}
+            style={{
+              flex: 1,
+              margin: -0.5,
+              borderTopLeftRadius: index === 0 ? undefined : 0,
+              borderBottomLeftRadius: index === 0 ? undefined : 0,
+              borderTopRightRadius:
+                index === nations.length - 1 ? undefined : 0,
+              borderBottomRightRadius:
+                index === nations.length - 1 ? undefined : 0,
+            }}
+            onClick={() =>
+              mutateTankopediaPersistent((draft) => {
+                if (draft.filters.nations.includes(nation)) {
+                  draft.filters.nations = draft.filters.nations.filter(
+                    (preexistingType) => preexistingType !== nation,
+                  );
+                } else {
+                  draft.filters.nations.push(nation);
+                }
+              })
+            }
+          >
+            <Flag nation={nation} />
+          </Button>
+        ))}
+      </Flex>
       <Flex>
         {[...TANK_TYPES].map((type, index) => (
           <Button
@@ -123,6 +155,37 @@ export function Options() {
           </Button>
         ))}
       </Flex>
+      <Flex className={styles.oneLineFilters}>
+        {[...TIERS].map((tier, index) => (
+          <Button
+            key={tier}
+            color={filters.tiers.includes(tier) ? undefined : 'gray'}
+            variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
+            style={{
+              flex: 1,
+              margin: -0.5,
+              borderTopLeftRadius: index === 0 ? undefined : 0,
+              borderBottomLeftRadius: index === 0 ? undefined : 0,
+              borderTopRightRadius: index === TIERS.length - 1 ? undefined : 0,
+              borderBottomRightRadius:
+                index === TIERS.length - 1 ? undefined : 0,
+            }}
+            onClick={() =>
+              mutateTankopediaPersistent((draft) => {
+                if (draft.filters.tiers.includes(tier)) {
+                  draft.filters.tiers = draft.filters.tiers.filter(
+                    (preexistingTier) => preexistingTier !== tier,
+                  );
+                } else {
+                  draft.filters.tiers.push(tier);
+                }
+              })
+            }
+          >
+            {TIER_ROMAN_NUMERALS[tier]}
+          </Button>
+        ))}
+      </Flex>{' '}
       <Flex
         direction="column"
         className={styles.splitFilters}
@@ -270,69 +333,6 @@ export function Options() {
           ))}
         </Flex>
       </Flex>
-      <Flex className={styles.oneLineFilters}>
-        {nations.map((nation, index) => (
-          <Button
-            key={nation}
-            color={filters.nations.includes(nation) ? undefined : 'gray'}
-            variant={filters.nations.includes(nation) ? 'surface' : 'soft'}
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius:
-                index === nations.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === nations.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopediaPersistent((draft) => {
-                if (draft.filters.nations.includes(nation)) {
-                  draft.filters.nations = draft.filters.nations.filter(
-                    (preexistingType) => preexistingType !== nation,
-                  );
-                } else {
-                  draft.filters.nations.push(nation);
-                }
-              })
-            }
-          >
-            <Flag nation={nation} />
-          </Button>
-        ))}
-      </Flex>
-      <Flex className={styles.oneLineFilters}>
-        {[...TIERS].map((tier, index) => (
-          <Button
-            key={tier}
-            color={filters.tiers.includes(tier) ? undefined : 'gray'}
-            variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius: index === TIERS.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === TIERS.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopediaPersistent((draft) => {
-                if (draft.filters.tiers.includes(tier)) {
-                  draft.filters.tiers = draft.filters.tiers.filter(
-                    (preexistingTier) => preexistingTier !== tier,
-                  );
-                } else {
-                  draft.filters.tiers.push(tier);
-                }
-              })
-            }
-          >
-            {TIER_ROMAN_NUMERALS[tier]}
-          </Button>
-        ))}
-      </Flex>
     </Flex>
   );
 }
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 24abef99c..9f1d4d9aa 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -163,7 +163,7 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
 
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
-              <Button variant="soft">
+              <Button variant="soft" color="gray">
                 Sort
                 <CaretDownIcon />
               </Button>