Cleaner SVGs for unit icons

client/src/components/world/boards/UnitIcon.tsx

@@ -2,9 +2,8 @@ import { getNationColour } from '../../../types/enums/nation';
 import Unit from '../../../types/unit';
 import UnitType from '../../../types/enums/unitType';
 import { unitWidth } from '../../../utils/constants';
-
-import ArmyIcon from '../../../assets/icons/Army.svg?react';
-import FleetIcon from '../../../assets/icons/Fleet.svg?react';
+import ArmyIcon from '../../../assets/icons/ArmyIcon.svg?react';
+import FleetIcon from '../../../assets/icons/FleetIcon.svg?react';
 
 type UnitIconProps = {
   unit: Unit;
@@ -14,26 +13,29 @@ type UnitIconProps = {
 
 const UnitIcon = ({ unit, scaleFactor = 1, variant = 'world' }: UnitIconProps) => {
   const isWorldVariant = variant === 'world';
-  const shadow = unit.mustRetreat ? '0px 0px 2px red' : '0px 0px 2px black';
-  const Svg = (unit.type === UnitType.Army ? ArmyIcon : FleetIcon);
+  const Svg = unit.type === UnitType.Army ? ArmyIcon : FleetIcon;
 
   return (
-    <Svg
-      className="flex justify-center"
-      style={{
-        color: getNationColour(unit.owner),
-        filter: isWorldVariant ? `drop-shadow(${shadow})` : '',
-        width: unitWidth * scaleFactor,
-        height: unitWidth * scaleFactor,
-        margin: isWorldVariant ? -(unitWidth * scaleFactor) / 2 : 0,
-        zIndex: unit.mustRetreat ? 30 : 10,
-        position: isWorldVariant ? 'absolute' : 'relative',
-        pointerEvents: isWorldVariant ? 'none' : 'auto',
-      }}
-    >
-    </Svg>
+    <>
+      <Svg
+        className="flex justify-center overflow-visible"
+        style={{
+          color: getNationColour(unit.owner),
+          filter:
+            isWorldVariant && !unit.mustRetreat ? 'drop-shadow(0px 0px 1px rgb(0 0 0 / 0.8))' : '',
+          width: unitWidth * scaleFactor,
+          height: unitWidth * scaleFactor,
+          margin: isWorldVariant ? -(unitWidth * scaleFactor) / 2 : 0,
+          zIndex: unit.mustRetreat ? 30 : 10,
+          position: isWorldVariant ? 'absolute' : 'relative',
+          pointerEvents: isWorldVariant ? 'none' : 'auto',
+        }}
+      />
+      {isWorldVariant && unit.mustRetreat && (
+        <div style={{ boxShadow: '0px 0px 35px 35px red', zIndex: 5 }} />
+      )}
+    </>
   );
-}
-
+};
 
 export default UnitIcon;