fix: map marker scaling

solana-labs · Oct 9, 2019 · 6ce18dc · 6ce18dc
1 parent c5ab79e
commit 6ce18dc
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/v2/components/ValidatorsMap/Marker.jsx b/src/v2/components/ValidatorsMap/Marker.jsx
@@ -7,7 +7,7 @@ import useStyles from './styles';
 
 const Marker = ({scale, marker}: {scale: number, marker: any}) => {
   const classes = useStyles();
-  const size = scale < 4 ? 10 * scale : 40;
+  const transformScale = scale < 4 ? scale / 4 : 1;
   return (
     <MapTooltip
       classes={{tooltip: classes.tooltip}}
@@ -18,10 +18,13 @@ const Marker = ({scale, marker}: {scale: number, marker: any}) => {
         </>
       )}
     >
-      <div className={classes.marker}>
+      <div
+        className={classes.marker}
+        style={{transform: `scale(${transformScale})`}}
+      >
         <Avatar
-          width={size}
-          height={size}
+          width={40}
+          height={40}
           avatarUrl={marker.avatarUrl}
           name={marker.name}
           pubkey={marker.pubkey}