localize

packages/i18n/strings/en.json

@@ -40,12 +40,20 @@
   },
 
   "tanks": {
+    "antagonist_control": {
+      "calibrated_shells": "Calibrated shells",
+      "enhanced_armor": "Enhanced armor",
+      "equalize": "Equalize"
+    },
+
     "custom_shell": {
+      "title": "Custom shell",
       "type": "Type",
       "caliber": "Caliber",
       "penetration": "Penetration",
       "normalization": "Normalization",
       "ricochet": "Ricochet",
+      "explosion_radius": "Explosion radius",
       "exit": "Exit",
       "reset": "Reset"
     },

packages/website/src/components/CustomShellButton/index.tsx

@@ -12,6 +12,7 @@ import { Select } from "../Select";
 import { Slider } from "../Slider";
 import { Text } from "../Text";
 import { TextField } from "../TextField";
+import { Tooltip } from "../Tooltip";
 import styles from "./index.module.css";
 
 interface NumberFieldProps {
@@ -90,17 +91,19 @@ export function CustomShellButton() {
         });
       }}
     >
-      <Popover.Trigger asChild>
+      <Tooltip tooltip={strings.tanks.custom_shell.title} side="left">
-        <IconButton
+        <Popover.Trigger asChild>
-          listChild="vertical"
+          <IconButton
-          color={customShell ? undefined : "gray"}
+            listChild="vertical"
-          variant={customShell ? "solid" : "soft"}
+            color={customShell ? undefined : "gray"}
-          highContrast={customShell !== undefined}
+            variant={customShell ? "solid" : "soft"}
-          size="major"
+            highContrast={customShell !== undefined}
-        >
+            size="major"
-          <img alt="custom shell" src="/assets/images/icons/custom-shell.png" />
+          >
-        </IconButton>
+            <img alt="custom shell" src="/assets/images/icons/custom-shell.png" />
-      </Popover.Trigger>
+          </IconButton>
+        </Popover.Trigger>
+      </Tooltip>
 
       <Popover.Portal>
         <Popover.Content side="left" align="center">
@@ -265,7 +268,7 @@ export function CustomShellButton() {
 
                 {customShell.type === ShellType.SHELL_TYPE_HE && (
                   <div className={styles.row}>
-                    <Text>Explosion radius</Text>
+                    <Text>{strings.tanks.custom_shell.explosion_radius}</Text>
                     <NumberField
                       value={customShell.explosion_radius ?? 0}
                       suffix="m"

packages/website/src/components/Slider/index.module.css

@@ -28,8 +28,8 @@
 
 .Thumb {
   display: block;
-  width: var(--space-5);
+  width: var(--space-4);
-  height: var(--space-5);
+  height: var(--space-4);
 
   border-radius: var(--max-size);
   background-color: var(--gray-12);

packages/website/src/components/TankopediaAntagonistControl/index.tsx

@@ -127,7 +127,7 @@ export function TankopediaAntagonistControl({
       </div>
 
       <div className={styles.group}>
-        <Tooltip tooltip="Calibrated Shells" side="left">
+        <Tooltip tooltip={strings.tanks.antagonist_control.calibrated_shells} side="left">
           <IconButton
             parentListChild="vertical"
             color={hasCalibratedShells ? undefined : "gray"}
@@ -147,13 +147,13 @@ export function TankopediaAntagonistControl({
             }}
           >
             <img
-              alt="Calibrated Shells"
+              alt={strings.tanks.antagonist_control.calibrated_shells}
               src={alias("api", "/icons/equipment/103.webp")}
             />
           </IconButton>
         </Tooltip>
 
-        <Tooltip tooltip="Enhanced Armor" side="left">
+        <Tooltip tooltip={strings.tanks.antagonist_control.enhanced_armor} side="left">
           <IconButton
             parentListChild="vertical"
             color={hasEnhancedArmor ? undefined : "gray"}
@@ -173,14 +173,14 @@ export function TankopediaAntagonistControl({
             }}
           >
             <img
-              alt="Enhanced Armor"
+              alt={strings.tanks.antagonist_control.enhanced_armor}
               src={alias("api", "/icons/equipment/110.webp")}
             />
           </IconButton>
         </Tooltip>
       </div>
 
-      <Tooltip tooltip="Equalize" side="left">
+      <Tooltip tooltip={strings.tanks.antagonist_control.equalize} side="left">
         <IconButton
           color={equalize ? undefined : "gray"}
           variant={equalize ? "solid" : "soft"}