feat: smolecraft suggestions 1

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

@@ -6,6 +6,7 @@ import {
   IconButton,
   Link,
   Text,
+  Theme,
 } from '@radix-ui/themes';
 import { use } from 'react';
 import { asset } from '../../../../../../../core/blitzkit/asset';
@@ -103,7 +104,9 @@ function ModuleButton({
   );
 
   return unlock.type === 'vehicle' ? (
-    <Link href={`/tools/tankopedia/${unlock.id}`}>{button}</Link>
+    <Link href={`/tools/tankopedia/${unlock.id}`}>
+      <Theme scaling="110%">{button}</Theme>
+    </Link>
   ) : (
     button
   );

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

@@ -93,6 +93,7 @@ export function Options() {
                 color={thisShell.id === antagonistShell.id ? undefined : 'gray'}
                 variant="soft"
                 key={thisShell.id}
+                size="3"
                 style={{
                   borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
                   borderTopRightRadius: shellIndex === 0 ? undefined : 0,
@@ -114,8 +115,8 @@ export function Options() {
               >
                 <img
                   alt={thisShell.name}
-                  width={16}
+                  width={20}
-                  height={16}
+                  height={20}
                   src={asset(`icons/shells/${thisShell.icon}.webp`)}
                 />
               </IconButton>
@@ -130,6 +131,7 @@ export function Options() {
                 borderBottomRightRadius: 0,
                 borderBottomLeftRadius: 0,
               }}
+              size="3"
               onClick={() => {
                 mutateDuel((draft) => {
                   draft.antagonist!.equipmentMatrix[0][0] = hasCalibratedShells
@@ -140,14 +142,15 @@ export function Options() {
             >
               <img
                 alt="Calibrated Shells"
-                width={16}
+                width={20}
-                height={16}
+                height={20}
                 src={asset('icons/equipment/103.webp')}
               />
             </IconButton>
             <IconButton
               color={hasEnhancedArmor ? undefined : 'gray'}
               variant="soft"
+              size="3"
               style={{
                 borderTopRightRadius: 0,
                 borderTopLeftRadius: 0,
@@ -163,8 +166,8 @@ export function Options() {
             >
               <img
                 alt="Enhanced Armor"
-                width={16}
+                width={20}
-                height={16}
+                height={20}
                 src={asset('icons/equipment/110.webp')}
               />
             </IconButton>

src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx

@@ -1,4 +1,4 @@
-import { CaretSortIcon } from '@radix-ui/react-icons';
+import { HeightIcon, WidthIcon } from '@radix-ui/react-icons';
 import { Flex, TextField } from '@radix-ui/themes';
 import { use, useEffect, useRef } from 'react';
 import { degToRad, radToDeg } from 'three/src/math/MathUtils';
@@ -87,7 +87,7 @@ export function RotationInputs() {
             userSelect: 'none',
           }}
         >
-          <CaretSortIcon style={{ transform: 'rotate(90deg)' }} />
+          <WidthIcon />
         </TextField.Slot>
         <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
       </TextField.Root>
@@ -136,7 +136,7 @@ export function RotationInputs() {
             userSelect: 'none',
           }}
         >
-          <CaretSortIcon />
+          <HeightIcon />
         </TextField.Slot>
         <TextField.Slot
           style={{