Center the step markers with the tens

frontend/src/components/Map/Markers/TrekChildMarker.tsx

@@ -1,35 +1,32 @@
 import { TrekChildrenMarker } from 'components/Icons/TrekChildrenMarker';
 import { DivIcon } from 'leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
-import styled from 'styled-components';
-import { colorPalette, typography } from 'stylesheet';
+import { colorPalette, SPACING_UNIT } from 'stylesheet';
 
 const markerHeight = 44;
 const markerWidth = 36;
 // We emulate a padding on the pictogram by centering it thanks to the "horizontal padding"
-const markerHorizontalPadding = 13;
-const markerTopPadding = 6;
-
-const ChildLabel = styled.span<{ zoomRatio: number }>`
-  color: ${colorPalette.primary1};
-  ${props => (props.zoomRatio > 1 ? typography.h3 : typography.h4)}
-  width: ${props => (markerWidth - 2 * markerHorizontalPadding) * props.zoomRatio}px;
-  top: ${props => markerTopPadding * props.zoomRatio}px;
-  position: absolute;
-  text-align: center;
-`;
+const markerHorizontalPadding = 6;
+const markerTopPadding = 8;
 
 const ChildMarker: React.FC<{ label: string; zoomRatio: number; color: string }> = ({
   label,
   zoomRatio,
   color,
 }) => {
+  const width = `w-${
+    (markerWidth / SPACING_UNIT - 2 * (markerHorizontalPadding / SPACING_UNIT)) * zoomRatio
+  }`;
+  const top = `top-${(markerTopPadding / SPACING_UNIT) * zoomRatio}`;
+  const fontSize = zoomRatio === 1 ? 'text-xl' : 'text-2xl';
   return (
     <div className="relative flex justify-center">
       <TrekChildrenMarker color={color ?? colorPalette.primary1} size={markerWidth * zoomRatio} />
-      <ChildLabel className="z-leafletSvg" zoomRatio={zoomRatio}>
+      <span
+        className={`absolute z-leafletSvg text-primary font-bold text-center leading-5 ${width} ${top} ${fontSize}`}
+      >
         {label}
-      </ChildLabel>
+      </span>
     </div>
   );
 };