feat: better ui

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"

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,12 +76,8 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
       </Popover.Trigger>
 
       <Popover.Content>
-        <Flex
+        <Inset>
-          style={{
+          <Flex>
-            borderRadius: 'var(--radius-full)',
-            overflow: 'hidden',
-          }}
-        >
             {Object.values(ShellType).map((shellType) => {
               if (typeof shellType === 'string') return null;
 
@@ -107,6 +112,7 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
               );
             })}
           </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))