Fix/unify icons (#593)

* Replace One Image with two overlapping image * fix width and height of the images * unify icon size in stats card * make icon smaller * fix prettier * Update desktop-app.module.css --------- Co-authored-by: Rajneesh Verma <rajneeshverma@Rajneesh-MacBook-Air.local> Co-authored-by: Petr Vecera <petr.vecera@profiq.com>
cohstats · Sep 30, 2024 · f361c75 · f361c75
1 parent f459f2c
commit f361c75
Showing 1 changed file with 28 additions and 32 deletions.
diff --git a/components/unit-cards/unit-squad-card.tsx b/components/unit-cards/unit-squad-card.tsx
@@ -43,6 +43,11 @@ type UnitSquadInput = {
   };
 };
 
+const uniformIconSize = {
+  width: 20,
+  height: 20,
+};
+
 const UnitSquadIcons = {
   sight_range: "/icons/unit_status/bw2/5_obervationmode.png",
   max_speed: "/icons/unit_status/bw2/2_offensivebonus.png",
@@ -76,13 +81,12 @@ export const UnitSquadCard = ({
           {type}
         </Text>
       </Stack>
-      <Grid fz="sm" columns={12} align="center" gutter="xs">
+      <Grid fz="sm" columns={12} align="center" gutter="lg">
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4}>
+            <Group gap={4} align="center">
               <ImageWithFallback
-                height={32}
-                width={32}
+                {...uniformIconSize}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["sight_range"]}
                 alt="squad sight range"
@@ -95,14 +99,13 @@ export const UnitSquadCard = ({
 
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4}>
+            <Group gap={4} align="center">
               <ImageWithFallback
-                height={18}
-                width={18}
+                {...uniformIconSize}
                 fallbackSrc={symbolPlaceholder}
                 src={type === "vehicles" ? UnitSquadIcons["max_speed"] : UnitSquadIcons["sprint"]}
                 alt="squad default speed"
-              ></ImageWithFallback>
+              />
               <Text>Speed</Text>
             </Group>
             <Text style={{ textAlign: "end" }}>{moving?.defaultSpeed || 0.0}</Text>
@@ -112,14 +115,13 @@ export const UnitSquadCard = ({
         {type === "vehicles" ? (
           <Grid.Col span={{ base: 6, md: 4 }}>
             <Flex gap={4} align="center" justify="space-between">
-              <Group gap={4}>
+              <Group gap={4} align="center">
                 <ImageWithFallback
-                  height={32}
-                  width={32}
+                  {...uniformIconSize}
                   fallbackSrc={symbolPlaceholder}
                   src={UnitSquadIcons["acceleration"]}
                   alt="squad acceleration"
-                ></ImageWithFallback>
+                />
                 <Text>Acceleration</Text>
               </Group>
               <Text style={{ textAlign: "end" }}>{moving?.acceleration || 0.0}</Text>
@@ -132,10 +134,9 @@ export const UnitSquadCard = ({
         {type === "vehicles" ? (
           <Grid.Col span={{ base: 6, md: 4 }}>
             <Flex gap={4} align="center" justify="space-between">
-              <Group gap={4}>
+              <Group gap={4} align="center">
                 <ImageWithFallback
-                  height={32}
-                  width={32}
+                  {...uniformIconSize}
                   fallbackSrc={symbolPlaceholder}
                   src={UnitSquadIcons["deceleration"]}
                   alt="squad deceleration"
@@ -151,10 +152,9 @@ export const UnitSquadCard = ({
 
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4}>
+            <Group gap={4} align="center">
               <ImageWithFallback
-                height={18}
-                width={18}
+                {...uniformIconSize}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["range_of_fire"]}
                 alt="squad max range of fire"
@@ -167,15 +167,14 @@ export const UnitSquadCard = ({
 
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4} ml={4}>
+            <Group gap={4} align="center">
               <ImageWithFallback
-                height={20}
-                width={20}
+                {...uniformIconSize}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["target_size"]}
                 alt="squad target size"
               />
-              <Text ml={8}>Target Size</Text>
+              <Text>Target Size</Text>
             </Group>
             <Text style={{ textAlign: "end" }}>{health?.targetSize || 0}</Text>
           </Flex>
@@ -184,10 +183,9 @@ export const UnitSquadCard = ({
         {type !== "vehicles" ? (
           <Grid.Col span={4}>
             <Flex gap={4} align="center" justify="space-between">
-              <Group gap={4}>
+              <Group gap={4} align="center">
                 <ImageWithFallback
-                  height={32}
-                  width={32}
+                  {...uniformIconSize}
                   fallbackSrc={symbolPlaceholder}
                   src={UnitSquadIcons["infantry_armor"]}
                   alt="squad armor (infantry only)"
@@ -203,26 +201,24 @@ export const UnitSquadCard = ({
 
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4} ml={4}>
+            <Group gap={4} align="center">
               <ImageWithFallback
-                height={20}
-                width={20}
+                {...uniformIconSize}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["cap_mult"]}
                 alt="squad capture rate multiplier"
               />
-              <Text ml={8}>Capture Multiplier</Text>
+              <Text>Capture Multiplier</Text>
             </Group>
             <Text style={{ textAlign: "end" }}>{capture?.cap || 0.0}</Text>
           </Flex>
         </Grid.Col>
 
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4}>
+            <Group gap={4} align="center">
               <ImageWithFallback
-                height={20}
-                width={20}
+                {...uniformIconSize}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["decap_mult"]}
                 alt="squad decapture rate multiplier"