From f13165e77d41a7c12c0e4376519c4c8ec09d0bfe Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 5 Apr 2025 15:09:15 -0500
Subject: [PATCH] feat: better ui

---
 .../src/components/MissingShellIcon.tsx       |   2 +-
 .../TankSearch/components/FilterControl.tsx   | 100 +++++++++++-------
 2 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/packages/website/src/components/MissingShellIcon.tsx b/packages/website/src/components/MissingShellIcon.tsx
index 686c4b492..e8df7963b 100644
--- a/packages/website/src/components/MissingShellIcon.tsx
+++ b/packages/website/src/components/MissingShellIcon.tsx
@@ -11,7 +11,7 @@ export function MissingShellIcon(props: ComponentProps<'svg'>) {
       {...props}
     >
       <path
-        d="M40.8038 14L50 23.1962M13.5 38.5L25.5 50.5M60 6.77686L57.2231 4C32.2774 18.0987 20.4352 28.1445 4 50.7438C4.15427 51.3609 4.7405 53.3355 7.70248 56.2975C10.6645 59.2595 12.6391 59.8457 13.2562 60C35.8555 43.5648 45.9013 31.7226 60 6.77686Z"
+        d="M39.5461 16.5714L47.4286 24.4539M16.1429 37.5714L26.4286 47.8571M56 10.3802L53.6198 8C32.2378 20.0846 22.0873 28.6952 8 48.0661C8.13223 48.595 8.63471 50.2876 11.1736 52.8264C13.7124 55.3653 15.405 55.8678 15.9339 56C35.3048 41.9127 43.9154 31.7622 56 10.3802Z"
         stroke="currentColor"
         stroke-width="4"
         stroke-linecap="round"
diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx
index cbcd4f84f..b8f4da472 100644
--- a/packages/website/src/components/TankSearch/components/FilterControl.tsx
+++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx
@@ -7,9 +7,18 @@ import {
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
 import { ReloadIcon } from '@radix-ui/react-icons';
-import { Box, Button, Flex, IconButton, Popover, Text } from '@radix-ui/themes';
+import {
+  Box,
+  Button,
+  Flex,
+  IconButton,
+  Inset,
+  Popover,
+  Text,
+} from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { awaitableGameDefinitions } from '../../../core/awaitables/gameDefinitions';
+import { Var } from '../../../core/radix/var';
 import { useLocale } from '../../../hooks/useLocale';
 import {
   $tankFilters,
@@ -67,46 +76,43 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
       </Popover.Trigger>
 
       <Popover.Content>
-        <Flex
-          style={{
-            borderRadius: 'var(--radius-full)',
-            overflow: 'hidden',
-          }}
-        >
-          {Object.values(ShellType).map((shellType) => {
-            if (typeof shellType === 'string') return null;
+        <Inset>
+          <Flex>
+            {Object.values(ShellType).map((shellType) => {
+              if (typeof shellType === 'string') return null;
 
-            const selected = tankFilters.shells[index] === shellType;
+              const selected = tankFilters.shells[index] === shellType;
 
-            return (
-              <IconButton
-                value={`${shellType}`}
-                radius="none"
-                variant={selected ? 'solid' : 'soft'}
-                onClick={() => {
-                  const mutated = [
-                    tankFilters.shells[0],
-                    tankFilters.shells[1],
-                    tankFilters.shells[2],
-                  ] as TankFilters['shells'];
+              return (
+                <IconButton
+                  value={`${shellType}`}
+                  radius="none"
+                  variant={selected ? 'solid' : 'soft'}
+                  onClick={() => {
+                    const mutated = [
+                      tankFilters.shells[0],
+                      tankFilters.shells[1],
+                      tankFilters.shells[2],
+                    ] as TankFilters['shells'];
 
-                  mutated[index] = selected ? null : shellType;
+                    mutated[index] = selected ? null : shellType;
 
-                  $tankFilters.setKey('shells', mutated);
-                }}
-                highContrast={selected}
-                color={selected ? undefined : 'gray'}
-              >
-                <img
-                  src={asset(
-                    `icons/shells/${shellTypeIcons[shellType]}${premium ? '_premium' : ''}.webp`,
-                  )}
-                  style={{ width: '1em', height: '1em' }}
-                />
-              </IconButton>
-            );
-          })}
-        </Flex>
+                    $tankFilters.setKey('shells', mutated);
+                  }}
+                  highContrast={selected}
+                  color={selected ? undefined : 'gray'}
+                >
+                  <img
+                    src={asset(
+                      `icons/shells/${shellTypeIcons[shellType]}${premium ? '_premium' : ''}.webp`,
+                    )}
+                    style={{ width: '1em', height: '1em' }}
+                  />
+                </IconButton>
+              );
+            })}
+          </Flex>
+        </Inset>
       </Popover.Content>
     </Popover.Root>
   );
@@ -126,7 +132,6 @@ export function FilterControl({ compact }: FilterControlProps) {
       <Flex
         direction={compact ? 'row' : { initial: 'row', md: 'column' }}
         overflow="hidden"
-        gap={{ initial: '0', md: '1' }}
         style={{ borderRadius: 'var(--radius-5)' }}
       >
         <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
@@ -157,6 +162,15 @@ export function FilterControl({ compact }: FilterControlProps) {
             );
           })}
         </Flex>
+
+        <Box
+          display={{ initial: 'none', md: 'block' }}
+          style={{
+            height: Var('space-1'),
+            backgroundColor: Var('gray-a3'),
+          }}
+        />
+
         <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
           {times(5, (index) => {
             const tier = index + 6;
@@ -191,7 +205,6 @@ export function FilterControl({ compact }: FilterControlProps) {
         direction={compact ? 'row' : { initial: 'row', md: 'column' }}
         overflow="hidden"
         style={{ borderRadius: 'var(--radius-5)' }}
-        gap={{ initial: '0', md: '1' }}
       >
         <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
           {gameDefinitions.nations
@@ -228,6 +241,15 @@ export function FilterControl({ compact }: FilterControlProps) {
               );
             })}
         </Flex>
+
+        <Box
+          display={{ initial: 'none', md: 'block' }}
+          style={{
+            height: Var('space-1'),
+            backgroundColor: Var('gray-a3'),
+          }}
+        />
+
         <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
           {gameDefinitions.nations
             .slice(Math.ceil(gameDefinitions.nations.length / 2))