show different state via button color

Author: karussell

src/map/LocationButton.tsx

@@ -4,6 +4,7 @@ import { StartSyncCurrentLocation, StartWatchCurrentLocation } from '@/actions/A
 import LocationError from '@/map/location_error.svg'
 import LocationSearching from '@/map/location_searching.svg'
 import LocationOn from '@/map/location_on.svg'
+import Location from '@/map/location.svg'
 import LocationNotInSync from '@/map/location_not_in_sync.svg'
 import { useEffect, useState } from 'react'
 import { CurrentLocationStoreState } from '@/stores/CurrentLocationStore'
@@ -15,8 +16,10 @@ export default function LocationButton(props: { currentLocation: CurrentLocation
         if (props.currentLocation.enabled) {
             if (!props.currentLocation.syncView) setLocationSearch('on_but_not_in_sync')
             else if (props.currentLocation.error) setLocationSearch('error')
-            else if (props.currentLocation.coordinate != null) setLocationSearch('initial')
+            else if (props.currentLocation.coordinate != null) setLocationSearch('on')
             else setLocationSearch('search')
+        } else {
+            setLocationSearch('initial')
         }
     }, [
         props.currentLocation.syncView,
@@ -37,9 +40,10 @@ export default function LocationButton(props: { currentLocation: CurrentLocation
                 }
             }}
         >
+            {locationSearch == 'initial' && <Location />}
             {locationSearch == 'error' && <LocationError />}
             {locationSearch == 'search' && <LocationSearching />}
-            {locationSearch == 'initial' && <LocationOn />}
+            {locationSearch == 'on' && <LocationOn />}
             {locationSearch == 'on_but_not_in_sync' && <LocationNotInSync />}
         </div>
     )