refactored app theme

changed texts to suit dark theme.

src/components/screens/global/GlobalCacheViewScreen.js

@@ -1,10 +1,10 @@
-import {useEffect} from "react";
+import { useEffect } from "react";
-import {StyleSheet, Text, View} from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import Screen from "../../layout/Screen";
-import {Button, ButtonTray} from "../../UI/Button";
+import { Button, ButtonTray } from "../../UI/Button";
 import Card from "../../UI/Card";
-import {getSession} from "../../../hooks/SessionStore";
+import { getSession } from "../../../hooks/SessionStore";
-import {GAME_MODE} from "../../../utils/gameConstants";
+import { GAME_MODE } from "../../../utils/gameConstants";
 
 const GlobalCacheViewScreen = ({ navigation, route }) => {
   // Initialisations ---------------------
@@ -67,7 +67,8 @@ const GlobalCacheViewScreen = ({ navigation, route }) => {
 
           {!initIsFound ? (
             <Text style={styles.claimHint}>
-              Claim this cache from the Global Map while within 30m and facing it.
+              Claim this cache from the Global Map while within 30m and facing
+              it.
             </Text>
           ) : null}
         </Card>
@@ -91,7 +92,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 22,
     fontWeight: "700",
-    color: "#111827",
+    color: "#cdd6f4",
   },
   statusBadge: {
     alignSelf: "flex-start",
@@ -100,15 +101,15 @@ const styles = StyleSheet.create({
     borderRadius: 12,
   },
   badgeFound: {
-    backgroundColor: "#d1fae5",
+    backgroundColor: "#1e3a2f",
   },
   badgeOpen: {
-    backgroundColor: "#fef3c7",
+    backgroundColor: "#3d3117",
   },
   statusText: {
     fontSize: 13,
     fontWeight: "600",
-    color: "#374151",
+    color: "#cdd6f4",
   },
   detailRow: {
     gap: 2,
@@ -116,17 +117,17 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 12,
     fontWeight: "600",
-    color: "#6b7280",
+    color: "#a6adc8",
     textTransform: "uppercase",
     letterSpacing: 0.5,
   },
   value: {
     fontSize: 15,
-    color: "#111827",
+    color: "#cdd6f4",
   },
   claimHint: {
     marginTop: 6,
-    color: "#2563eb",
+    color: "#89b4fa",
     fontSize: 13,
     fontWeight: "600",
   },

src/components/screens/global/GlobalEventsScreen.js

@@ -1,21 +1,17 @@
-import {useCallback, useEffect, useRef, useState} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import {ActivityIndicator, StyleSheet, Text, View} from "react-native";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
 import Screen from "../../layout/Screen";
-import {Button, ButtonTray} from "../../UI/Button";
+import { Button, ButtonTray } from "../../UI/Button";
 import EventList from "../../../entity/event/EventList";
 import useGlobalHook from "../../../hooks/useGlobalHook";
-import {getSession, setGlobalSession} from "../../../hooks/SessionStore";
+import { getSession, setGlobalSession } from "../../../hooks/SessionStore";
-import {GAME_MODE} from "../../../utils/gameConstants";
+import { GAME_MODE } from "../../../utils/gameConstants";
 
 const GlobalEventsScreen = ({ navigation }) => {
   // Initialisations ---------------------
 
-  const {
+  const { getPublicEvents, getPlayersByEvent, joinEvent, isGlobalApiReady } =
-    getPublicEvents,
+    useGlobalHook();
-    getPlayersByEvent,
-    joinEvent,
-    isGlobalApiReady,
-  } = useGlobalHook();
   const session = getSession();
   const globalApiRef = useRef({
     getPublicEvents,
@@ -45,7 +41,9 @@ const GlobalEventsScreen = ({ navigation }) => {
 
     if (!globalApiRef.current.isGlobalApiReady()) {
       setEvents([]);
-      setError("Global API URL is not configured yet. Add it in src/components/API/api.json.");
+      setError(
+        "Global API URL is not configured yet. Add it in src/components/API/api.json.",
+      );
       setIsLoading(false);
       return;
     }
@@ -68,7 +66,9 @@ const GlobalEventsScreen = ({ navigation }) => {
     setJoining(event.EventID);
 
     if (!globalApiRef.current.isGlobalApiReady()) {
-      setError("Global API URL is not configured yet. Add it in src/components/API/api.json.");
+      setError(
+        "Global API URL is not configured yet. Add it in src/components/API/api.json.",
+      );
       setJoining(null);
       return;
     }
@@ -82,7 +82,10 @@ const GlobalEventsScreen = ({ navigation }) => {
     };
 
     // Check if already a player
-    const players = await globalApiRef.current.getPlayersByEvent(event.EventID, {forceRefresh: true});
+    const players = await globalApiRef.current.getPlayersByEvent(
+      event.EventID,
+      { forceRefresh: true },
+    );
     const existing = (players || []).find(
       (p) => String(p.PlayerUserID) === String(globalUserId),
     );
@@ -110,7 +113,10 @@ const GlobalEventsScreen = ({ navigation }) => {
     }
 
     // If create fails due duplicate race/server behavior, recover by re-reading players.
-    const refreshedPlayers = await globalApiRef.current.getPlayersByEvent(event.EventID, {forceRefresh: true});
+    const refreshedPlayers = await globalApiRef.current.getPlayersByEvent(
+      event.EventID,
+      { forceRefresh: true },
+    );
     const recovered = (refreshedPlayers || []).find(
       (p) => String(p.PlayerUserID) === String(globalUserId),
     );
@@ -131,7 +137,10 @@ const GlobalEventsScreen = ({ navigation }) => {
     <Screen>
       <View style={styles.container}>
         <ButtonTray>
-          <Button label="Refresh" onClick={() => loadEvents({forceRefresh: true})} />
+          <Button
+            label="Refresh"
+            onClick={() => loadEvents({ forceRefresh: true })}
+          />
         </ButtonTray>
 
         {error ? <Text style={styles.error}>{error}</Text> : null}
@@ -174,21 +183,21 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   loadingText: {
-    color: "#6b7280",
+    color: "#a6adc8",
     fontSize: 14,
   },
   empty: {
     textAlign: "center",
-    color: "#9ca3af",
+    color: "#a6adc8",
     marginTop: 30,
     fontSize: 15,
   },
   hint: {
     fontSize: 13,
-    color: "#6b7280",
+    color: "#a6adc8",
   },
   error: {
-    color: "#dc2626",
+    color: "#f38ba8",
     fontSize: 14,
   },
   overlay: {

src/components/screens/global/GlobalLeaderboardScreen.js

@@ -1,12 +1,18 @@
-import {useCallback, useEffect, useRef, useState} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import {ActivityIndicator, ScrollView, StyleSheet, Text, View,} from "react-native";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import Screen from "../../layout/Screen";
-import {Button, ButtonTray} from "../../UI/Button";
+import { Button, ButtonTray } from "../../UI/Button";
 import Card from "../../UI/Card";
 import FindList from "../../../entity/find/FindList";
 import useGlobalHook from "../../../hooks/useGlobalHook";
-import {getSession} from "../../../hooks/SessionStore";
+import { getSession } from "../../../hooks/SessionStore";
-import {GAME_MODE} from "../../../utils/gameConstants";
+import { GAME_MODE } from "../../../utils/gameConstants";
 
 const GlobalLeaderboardScreen = ({ navigation, route }) => {
   // Initialisations ---------------------
@@ -35,7 +41,8 @@ const GlobalLeaderboardScreen = ({ navigation, route }) => {
 
   // Handlers ----------------------------
 
-  const loadData = useCallback(async (options = {}) => {
+  const loadData = useCallback(
+    async (options = {}) => {
       if (!eventId) return;
 
       setIsLoading(true);
@@ -103,7 +110,9 @@ const GlobalLeaderboardScreen = ({ navigation, route }) => {
 
       setRankings(ranked);
       setIsLoading(false);
-  }, [eventId]);
+    },
+    [eventId],
+  );
 
   useEffect(() => {
     if (session.isBusiness || session.currentGameMode !== GAME_MODE.GLOBAL) {
@@ -126,12 +135,21 @@ const GlobalLeaderboardScreen = ({ navigation, route }) => {
   ]);
 
   useEffect(() => {
-    if (!eventId || session.currentGameMode !== GAME_MODE.GLOBAL || !session.currentGlobalPlayerId) {
+    if (
+      !eventId ||
+      session.currentGameMode !== GAME_MODE.GLOBAL ||
+      !session.currentGlobalPlayerId
+    ) {
       return;
     }
 
     loadData();
-  }, [eventId, loadData, session.currentGameMode, session.currentGlobalPlayerId]);
+  }, [
+    eventId,
+    loadData,
+    session.currentGameMode,
+    session.currentGlobalPlayerId,
+  ]);
 
   // View --------------------------------
 
@@ -199,7 +217,10 @@ const GlobalLeaderboardScreen = ({ navigation, route }) => {
         )}
 
         <ButtonTray>
-          <Button label="Refresh" onClick={() => loadData({forceRefresh: true})} />
+          <Button
+            label="Refresh"
+            onClick={() => loadData({ forceRefresh: true })}
+          />
         </ButtonTray>
       </View>
     </Screen>
@@ -222,13 +243,13 @@ const tabStyles = StyleSheet.create({
     paddingVertical: 8,
     fontSize: 14,
     fontWeight: "600",
-    color: "#6b7280",
+    color: "#a6adc8",
     borderBottomWidth: 2,
     borderBottomColor: "transparent",
   },
   activeTab: {
-    color: "#111827",
+    color: "#cdd6f4",
-    borderBottomColor: "#111827",
+    borderBottomColor: "#89b4fa",
   },
 });
 
@@ -244,7 +265,7 @@ const styles = StyleSheet.create({
   tabs: {
     flexDirection: "row",
     borderBottomWidth: 1,
-    borderBottomColor: "#e5e7eb",
+    borderBottomColor: "#45475a",
   },
   rankList: {
     gap: 6,
@@ -254,7 +275,7 @@ const styles = StyleSheet.create({
     marginBottom: 0,
   },
   myCard: {
-    borderColor: "#2563eb",
+    borderColor: "#89b4fa",
     borderWidth: 2,
   },
   rankRow: {
@@ -265,14 +286,14 @@ const styles = StyleSheet.create({
   rankPos: {
     fontSize: 16,
     fontWeight: "700",
-    color: "#6b7280",
+    color: "#a6adc8",
     width: 32,
   },
   rankName: {
     flex: 1,
     fontSize: 15,
     fontWeight: "600",
-    color: "#111827",
+    color: "#cdd6f4",
   },
   rankRight: {
     alignItems: "flex-end",
@@ -280,15 +301,15 @@ const styles = StyleSheet.create({
   rankPoints: {
     fontSize: 16,
     fontWeight: "700",
-    color: "#16a34a",
+    color: "#a6e3a1",
   },
   rankFinds: {
     fontSize: 12,
-    color: "#9ca3af",
+    color: "#a6adc8",
   },
   empty: {
     textAlign: "center",
-    color: "#9ca3af",
+    color: "#a6adc8",
     marginTop: 30,
     fontSize: 15,
   },

src/components/screens/global/GlobalMapScreen.js

@@ -1,16 +1,16 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {ActivityIndicator, StyleSheet, Text, View} from "react-native";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
-import MapView, {Circle, Marker, Polygon} from "react-native-maps";
+import MapView, { Circle, Marker, Polygon } from "react-native-maps";
 import * as Location from "expo-location";
 import Screen from "../../layout/Screen";
-import {Button, ButtonTray} from "../../UI/Button";
+import { Button, ButtonTray } from "../../UI/Button";
 import ClaimTimerView from "../../gameplay/ClaimTimerView";
 import CacheList from "../../../entity/cache/CacheList";
 import useGlobalHook from "../../../hooks/useGlobalHook";
 import usePlayerGame from "../../../hooks/usePlayerGame";
-import {getSession} from "../../../hooks/SessionStore";
+import { getSession } from "../../../hooks/SessionStore";
-import {getFovCone} from "../../../utils/geoMath";
+import { getFovCone } from "../../../utils/geoMath";
-import {GAME_MODE} from "../../../utils/gameConstants";
+import { GAME_MODE } from "../../../utils/gameConstants";
 
 const DEFAULT_REGION = {
   latitude: 51.5074,
@@ -77,7 +77,8 @@ const GlobalMapScreen = ({ navigation, route }) => {
 
   // Handlers ----------------------------
 
-  const loadData = useCallback(async (options = {}) => {
+  const loadData = useCallback(
+    async (options = {}) => {
       if (!eventId) return;
 
       setIsLoading(true);
@@ -86,14 +87,19 @@ const GlobalMapScreen = ({ navigation, route }) => {
       const [cacheData, findsData] = await Promise.all([
         globalApiRef.current.getCachesByEvent(eventId, options),
         session.currentGlobalPlayerId
-        ? globalApiRef.current.getFindsByPlayer(session.currentGlobalPlayerId, options)
+          ? globalApiRef.current.getFindsByPlayer(
+              session.currentGlobalPlayerId,
+              options,
+            )
           : Promise.resolve([]),
       ]);
 
       setCaches(cacheData || []);
       setFoundCacheIds((findsData || []).map((f) => f.FindCacheID));
       setIsLoading(false);
-  }, [eventId, session.currentGlobalPlayerId]);
+    },
+    [eventId, session.currentGlobalPlayerId],
+  );
 
   const handleClaim = useCallback(
     async (cacheId) => {
@@ -119,7 +125,7 @@ const GlobalMapScreen = ({ navigation, route }) => {
       if (result) {
         setClaimedPopupVisible(true);
         setTimeout(() => setClaimedPopupVisible(false), 3000);
-        await loadData({forceRefresh: true});
+        await loadData({ forceRefresh: true });
       }
     },
     [foundCacheIds, loadData, session.currentGlobalPlayerId, setIsClaiming],
@@ -131,7 +137,9 @@ const GlobalMapScreen = ({ navigation, route }) => {
   };
 
   const handleOpenSelectedCache = () => {
-    const selected = (caches || []).find((cache) => cache.CacheID === selectedCacheId);
+    const selected = (caches || []).find(
+      (cache) => cache.CacheID === selectedCacheId,
+    );
     if (!selected) return;
     navigation.navigate("GlobalCacheViewScreen", {
       cache: selected,
@@ -166,12 +174,21 @@ const GlobalMapScreen = ({ navigation, route }) => {
   ]);
 
   useEffect(() => {
-    if (!eventId || session.currentGameMode !== GAME_MODE.GLOBAL || !session.currentGlobalPlayerId) {
+    if (
+      !eventId ||
+      session.currentGameMode !== GAME_MODE.GLOBAL ||
+      !session.currentGlobalPlayerId
+    ) {
       return;
     }
 
     loadData();
-  }, [eventId, loadData, session.currentGameMode, session.currentGlobalPlayerId]);
+  }, [
+    eventId,
+    loadData,
+    session.currentGameMode,
+    session.currentGlobalPlayerId,
+  ]);
 
   useEffect(() => {
     const routeSelected = route?.params?.selectedCacheId;
@@ -180,7 +197,10 @@ const GlobalMapScreen = ({ navigation, route }) => {
   }, [route?.params?.selectedCacheId]);
 
   useEffect(() => {
-    if (selectedCacheId && claimableCaches.some((cache) => cache.id === selectedCacheId)) {
+    if (
+      selectedCacheId &&
+      claimableCaches.some((cache) => cache.id === selectedCacheId)
+    ) {
       return;
     }
     setSelectedCacheId(claimableCaches[0]?.id || null);
@@ -291,7 +311,9 @@ const GlobalMapScreen = ({ navigation, route }) => {
                   }}
                   title={cache.CacheName}
                   description={`${cache.CachePoints ?? 0} pts${found ? " · Found" : ""}`}
-                  pinColor={found ? "#22c55e" : selected ? "#f59e0b" : "#ef4444"}
+                  pinColor={
+                    found ? "#22c55e" : selected ? "#f59e0b" : "#ef4444"
+                  }
                   onPress={() => setSelectedCacheId(cache.CacheID)}
                   onCalloutPress={() =>
                     navigation.navigate("GlobalCacheViewScreen", {
@@ -337,9 +359,16 @@ const GlobalMapScreen = ({ navigation, route }) => {
         />
 
         <ButtonTray>
-          <Button label="Details" onClick={handleOpenSelectedCache} disabled={!selectedCacheId} />
+          <Button
+            label="Details"
+            onClick={handleOpenSelectedCache}
+            disabled={!selectedCacheId}
+          />
           <Button label="Leaderboard" onClick={handleGotoLeaderboard} />
-          <Button label="Refresh" onClick={() => loadData({forceRefresh: true})} />
+          <Button
+            label="Refresh"
+            onClick={() => loadData({ forceRefresh: true })}
+          />
         </ButtonTray>
       </View>
     </Screen>
@@ -362,13 +391,13 @@ const tabStyles = StyleSheet.create({
     paddingVertical: 8,
     fontSize: 14,
     fontWeight: "600",
-    color: "#6b7280",
+    color: "#a6adc8",
     borderBottomWidth: 2,
     borderBottomColor: "transparent",
   },
   activeTab: {
-    color: "#111827",
+    color: "#cdd6f4",
-    borderBottomColor: "#111827",
+    borderBottomColor: "#89b4fa",
   },
 });
 
@@ -384,13 +413,13 @@ const styles = StyleSheet.create({
   tabs: {
     flexDirection: "row",
     borderBottomWidth: 1,
-    borderBottomColor: "#e5e7eb",
+    borderBottomColor: "#45475a",
   },
   map: {
     flex: 1,
   },
   error: {
-    color: "#dc2626",
+    color: "#f38ba8",
     fontSize: 14,
   },
 });

src/components/screens/global/GlobalProfileScreen.js

@@ -242,7 +242,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   error: {
-    color: "#dc2626",
+    color: "#f38ba8",
     fontSize: 14,
   },
   avatarWrap: {
@@ -257,7 +257,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 13,
-    color: "#9ca3af",
+    color: "#a6adc8",
     fontWeight: "600",
   },
   input: {