names and icons

packages/website-ue/src/components/TankopediaCharacteristics/index.module.css

@@ -45,9 +45,9 @@
             .align {
               display: flex;
               align-items: center;
-              gap: var(--space-2);
+              gap: var(--space-3);
 
-              svg {
+              img {
                 width: 1em;
                 height: 1em;
               }

packages/website-ue/src/components/TankopediaCharacteristics/index.tsx

@@ -58,7 +58,7 @@ function Group({ group, characteristics }: GroupProps) {
                   strings.tanks.characteristics.titles as Record<string, string>
                 )[group.group]
               }
-              {/*<GearIcon />*/}
+              <img src={`/media/groups/${group.group}.png`} />
             </div>
           </Heading>
         </div>
@@ -96,7 +96,13 @@ function Item({ config, value }: ItemProps) {
   return (
     <span className={styles.item}>
       <div className={styles.value}>
-        <Text lowContrast>{config.name}</Text>
+        <Text lowContrast>
+          {
+            (strings.tanks.characteristics.items as Record<string, string>)[
+              config.name
+            ]
+          }
+        </Text>
         <Text>{renderCharacteristic(value, config)}</Text>
       </div>