From 3daddd8f5781d043348a6bec769c76da59888c37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Mon, 30 Dec 2024 20:53:52 +0100
Subject: [PATCH] fix(dashboard): improve map colors if system theme

---
 .../[projectId]/realtime/map/map.tsx            | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx
index 5ba1a15b..d949d400 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx
@@ -93,7 +93,6 @@ const Map = ({ markers }: Props) => {
   };
 
   const theme = useTheme();
-  console.log(theme.theme);
 
   return (
     <div
@@ -123,8 +122,10 @@ const Map = ({ markers }: Props) => {
                     <Geography
                       key={geo.rsmKey}
                       geography={geo}
-                      fill={theme.theme === 'dark' ? '#000' : '#e5eef6'}
-                      stroke={theme.theme === 'dark' ? '#333' : '#bcccda'}
+                      fill={theme.resolvedTheme === 'dark' ? '#000' : '#e5eef6'}
+                      stroke={
+                        theme.resolvedTheme === 'dark' ? '#333' : '#bcccda'
+                      }
                       pointerEvents={'none'}
                     />
                   ))
@@ -153,7 +154,9 @@ const Map = ({ markers }: Props) => {
                     <Marker coordinates={coordinates}>
                       <circle
                         r={size}
-                        fill={theme.theme === 'dark' ? '#3d79ff' : '#2266ec'}
+                        fill={
+                          theme.resolvedTheme === 'dark' ? '#3d79ff' : '#2266ec'
+                        }
                         className="animate-ping opacity-20"
                       />
                     </Marker>
@@ -161,7 +164,11 @@ const Map = ({ markers }: Props) => {
                       <Marker coordinates={coordinates}>
                         <circle
                           r={size}
-                          fill={theme.theme === 'dark' ? '#3d79ff' : '#2266ec'}
+                          fill={
+                            theme.resolvedTheme === 'dark'
+                              ? '#3d79ff'
+                              : '#2266ec'
+                          }
                           fillOpacity={0.5}
                         />
                       </Marker>