Change map styles to make transition seem more smooth

1 files changed, 18 insertions, 26 deletions

diff --git a/gui/src/renderer/components/SvgMap.tsx b/gui/src/renderer/components/SvgMap.tsx
index ea5dbf4978..aa2a8d430b 100644
--- a/gui/src/renderer/components/SvgMap.tsx
+++ b/gui/src/renderer/components/SvgMap.tsx
@@ -33,12 +33,28 @@ const mapStyle = {
 };
 
 const zoomableGroupStyle = {
-  transition: `transform ${MOVE_SPEED}ms ease-in-out`,
+  transition: `transform ${MOVE_SPEED}ms ease-out`,
 };
 
 const markerStyle = mergeRsmStyle({
   default: {
-    transition: `transform ${MOVE_SPEED}ms ease-in-out`,
+    transition: `transform ${MOVE_SPEED}ms ease-out`,
+  },
+});
+
+const geographyStyle = mergeRsmStyle({
+  default: {
+    fill: '#294d73',
+    stroke: '#192e45',
+    strokeWidth: 0.2,
+  },
+});
+
+const stateProvinceLineStyle = mergeRsmStyle({
+  default: {
+    fill: 'transparent',
+    stroke: '#192e45',
+    strokeWidth: 0.2,
   },
 });
 
@@ -154,30 +170,6 @@ export default function SvgMap(props: IProps) {
     [combinedViewportBboxMatch],
   );
 
-  const geographyStyle = useMemo(
-    () =>
-      mergeRsmStyle({
-        default: {
-          fill: '#294d73',
-          stroke: '#192e45',
-          strokeWidth: `${1 / zoomLevel}`,
-        },
-      }),
-    [zoomLevel],
-  );
-
-  const stateProvinceLineStyle = useMemo(
-    () =>
-      mergeRsmStyle({
-        default: {
-          fill: 'transparent',
-          stroke: '#192e45',
-          strokeWidth: `${1 / zoomLevel}`,
-        },
-      }),
-    [zoomLevel],
-  );
-
   const removeOldViewportBboxes = useCallback(() => {
     setViewportBboxes((viewportBboxes) => viewportBboxes.slice(-1));
   }, []);