feat: large tank icons

src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx

@@ -6,7 +6,6 @@ import {
   IconButton,
   Link,
   Text,
-  Theme,
 } from '@radix-ui/themes';
 import { use } from 'react';
 import { asset } from '../../../../../../../core/blitzkit/asset';
@@ -38,6 +37,7 @@ function ModuleButton({
     notation: 'compact',
     maximumFractionDigits: 0,
   });
+  const isTank = unlock.type === 'vehicle';
   const button = (
     <IconButton
       size="4"
@@ -47,6 +47,8 @@ function ModuleButton({
       onClick={onClick}
       style={{
         position: 'relative',
+        width: isTank ? 72 : undefined,
+        height: isTank ? 72 : undefined,
       }}
     >
       <Text
@@ -54,8 +56,8 @@ function ModuleButton({
         color="gray"
         style={{
           position: 'absolute',
-          left: 4,
-          top: 4,
+          left: isTank ? 8 : 4,
+          top: isTank ? 8 : 4,
         }}
       >
         {TIER_ROMAN_NUMERALS[tier]}
@@ -70,6 +72,7 @@ function ModuleButton({
             transform: 'translateX(-50%)',
           }}
           align="center"
+          gap={isTank ? '1' : undefined}
         >
           <Text size="1" color="gray">
             {numberFormat.format(unlock.cost.value)}
@@ -90,23 +93,21 @@ function ModuleButton({
       <img
         alt={unlock.type}
         src={
-          unlock.type === 'vehicle'
+          isTank
             ? tankIcon(unlock.id)
             : asset(`icons/modules/${unlock.type}.webp`)
         }
         style={{
-          width: 32,
-          height: 32,
+          width: isTank ? 64 : 32,
+          height: isTank ? 64 : 32,
           objectFit: 'contain',
         }}
       />
     </IconButton>
   );
 
-  return unlock.type === 'vehicle' ? (
-    <Link href={`/tools/tankopedia/${unlock.id}`}>
-      <Theme scaling="110%">{button}</Theme>
-    </Link>
+  return isTank ? (
+    <Link href={`/tools/tankopedia/${unlock.id}`}>{button}</Link>
   ) : (
     button
   );

src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx

@@ -9,7 +9,7 @@ import { Provisions } from '../Characteristics/components/Provisions';
 import { Skills } from '../Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
-  const wideFormat = useWideFormat(700);
+  const wideFormat = useWideFormat(880);
 
   return (
     <Flex
@@ -27,7 +27,7 @@ export function CharacteristicsSection() {
         direction={wideFormat ? 'row' : 'column'}
         justify="center"
       >
-        <Flex style={{ flex: 1, maxWidth: 380 }} direction="column" gap="4">
+        <Flex direction="column" gap="4">
           <Heading>Configure</Heading>
           <Modules />
           <Equipment />

src/components/ConsumablesManager.tsx

@@ -24,7 +24,12 @@ export function ConsumablesManager({
   hasHighEndConsumables,
 }: ConsumablesManagerProps) {
   return (
-    <Flex wrap="wrap">
+    <Flex
+      wrap="wrap"
+      style={{
+        maxWidth: 360,
+      }}
+    >
       {consumables.map((consumable, index) => {
         const isSelected = selected.some((id) => id === consumable.id);