diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx index 937c203d..a09fa012 100644 --- a/src/app/(app)/_layout.tsx +++ b/src/app/(app)/_layout.tsx @@ -4,7 +4,6 @@ import { NovuProvider } from '@novu/react-native'; import Countly from 'countly-sdk-react-native-bridge'; import * as NavigationBar from 'expo-navigation-bar'; import { Redirect, SplashScreen, Tabs } from 'expo-router'; -import { CloudAlert, Contact, ListTree, Map, Megaphone, Menu, Navigation, Notebook, Settings } from 'lucide-react-native'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ActivityIndicator, type ColorValue, Platform, StyleSheet, useWindowDimensions } from 'react-native'; @@ -17,6 +16,7 @@ import { FocusAwareStatusBar, View } from '@/components/ui'; import { Button, ButtonText } from '@/components/ui/button'; import { Drawer, DrawerBackdrop, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from '@/components/ui/drawer'; import { Icon } from '@/components/ui/icon'; +import { CloudAlert, Contact, ListTree, Map, Megaphone, Menu, Navigation, Notebook, Settings } from '@/components/ui/lucide-icons'; import { Pressable } from '@/components/ui/pressable'; import { Text } from '@/components/ui/text'; import { useAnalytics } from '@/hooks/use-analytics'; diff --git a/src/app/(app)/settings.tsx b/src/app/(app)/settings.tsx index 92d10a03..40e28421 100644 --- a/src/app/(app)/settings.tsx +++ b/src/app/(app)/settings.tsx @@ -11,6 +11,7 @@ import { KeepAliveItem } from '@/components/settings/keep-alive-item'; import { LanguageItem } from '@/components/settings/language-item'; import { LoginInfoBottomSheet } from '@/components/settings/login-info-bottom-sheet'; import { ModernNotificationSoundsItem } from '@/components/settings/modern-notification-sounds-item'; +import { RealtimeGeolocationItem } from '@/components/settings/realtime-geolocation-item'; import { ServerUrlBottomSheet } from '@/components/settings/server-url-bottom-sheet'; import { ThemeItem } from '@/components/settings/theme-item'; import { ToggleItem } from '@/components/settings/toggle-item'; @@ -130,6 +131,7 @@ export default function Settings() { + diff --git a/src/app/call/new/index.tsx b/src/app/call/new/index.tsx index 13322d2d..7abe358c 100644 --- a/src/app/call/new/index.tsx +++ b/src/app/call/new/index.tsx @@ -2,7 +2,6 @@ import { zodResolver } from '@hookform/resolvers/zod'; import axios from 'axios'; import * as Location from 'expo-location'; import { router, Stack } from 'expo-router'; -import { ChevronDownIcon, PlusIcon, SearchIcon } from 'lucide-react-native'; import { useColorScheme } from 'nativewind'; import React, { useEffect, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -26,6 +25,7 @@ import { Card } from '@/components/ui/card'; import { FocusAwareStatusBar } from '@/components/ui/focus-aware-status-bar'; import { FormControl, FormControlError, FormControlLabel, FormControlLabelText } from '@/components/ui/form-control'; import { Input, InputField } from '@/components/ui/input'; +import { ChevronDownIcon, PlusIcon, SearchIcon } from '@/components/ui/lucide-icons'; import { Select, SelectBackdrop, SelectContent, SelectIcon, SelectInput, SelectItem, SelectPortal, SelectTrigger } from '@/components/ui/select'; import { Text } from '@/components/ui/text'; import { Textarea, TextareaInput } from '@/components/ui/textarea'; diff --git a/src/app/login/login-form.tsx b/src/app/login/login-form.tsx index 1b9c4cf1..d6bc6a7f 100644 --- a/src/app/login/login-form.tsx +++ b/src/app/login/login-form.tsx @@ -1,6 +1,4 @@ import { zodResolver } from '@hookform/resolvers/zod'; -import { AlertTriangle, EyeIcon, EyeOffIcon, Globe, ShieldCheck } from 'lucide-react-native'; -import { ChevronDownIcon } from 'lucide-react-native'; import { useColorScheme } from 'nativewind'; import React, { useState } from 'react'; import type { SubmitHandler } from 'react-hook-form'; @@ -14,6 +12,8 @@ import { View } from '@/components/ui'; import { Button, ButtonSpinner, ButtonText } from '@/components/ui/button'; import { FormControl, FormControlError, FormControlErrorIcon, FormControlErrorText, FormControlLabel, FormControlLabelText } from '@/components/ui/form-control'; import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input'; +import { AlertTriangle, EyeIcon, EyeOffIcon, Globe, ShieldCheck } from '@/components/ui/lucide-icons'; +import { ChevronDownIcon } from '@/components/ui/lucide-icons'; import { Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectIcon, SelectInput, SelectItem, SelectPortal, SelectTrigger } from '@/components/ui/select'; import { Text } from '@/components/ui/text'; import colors from '@/constants/colors'; diff --git a/src/app/login/sso.tsx b/src/app/login/sso.tsx index 5b1a64d7..f910884d 100644 --- a/src/app/login/sso.tsx +++ b/src/app/login/sso.tsx @@ -1,7 +1,6 @@ import { zodResolver } from '@hookform/resolvers/zod'; import * as Linking from 'expo-linking'; import { useRouter } from 'expo-router'; -import { AlertTriangle, ArrowLeft, ShieldCheck } from 'lucide-react-native'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; @@ -13,6 +12,7 @@ import { FocusAwareStatusBar, View } from '@/components/ui'; import { Button, ButtonSpinner, ButtonText } from '@/components/ui/button'; import { FormControl, FormControlError, FormControlErrorIcon, FormControlErrorText, FormControlLabel, FormControlLabelText } from '@/components/ui/form-control'; import { Input, InputField, InputSlot } from '@/components/ui/input'; +import { AlertTriangle, ArrowLeft, ShieldCheck } from '@/components/ui/lucide-icons'; import { Modal, ModalBackdrop, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/ui/modal'; import { Text } from '@/components/ui/text'; import colors from '@/constants/colors'; diff --git a/src/components/calls/call-notes-modal.tsx b/src/components/calls/call-notes-modal.tsx index 17cc4f09..3784a8a0 100644 --- a/src/components/calls/call-notes-modal.tsx +++ b/src/components/calls/call-notes-modal.tsx @@ -1,10 +1,10 @@ -import { SearchIcon, X } from 'lucide-react-native'; import { useColorScheme } from 'nativewind'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { FlatList, Keyboard, Modal, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native'; import { KeyboardAvoidingView } from 'react-native-keyboard-controller'; +import { SearchIcon, X } from '@/components/ui/lucide-icons'; import { useAnalytics } from '@/hooks/use-analytics'; import { useAuthStore } from '@/lib/auth'; import { logger } from '@/lib/logging'; diff --git a/src/components/calls/dispatch-selection-modal.tsx b/src/components/calls/dispatch-selection-modal.tsx index cdbe51d5..d05836e5 100644 --- a/src/components/calls/dispatch-selection-modal.tsx +++ b/src/components/calls/dispatch-selection-modal.tsx @@ -1,4 +1,3 @@ -import { CheckIcon, SearchIcon, UsersIcon, X } from 'lucide-react-native'; import { useColorScheme } from 'nativewind'; import React, { useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -11,6 +10,7 @@ import { Button, ButtonText } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { HStack } from '@/components/ui/hstack'; import { Input, InputField } from '@/components/ui/input'; +import { CheckIcon, SearchIcon, UsersIcon, X } from '@/components/ui/lucide-icons'; import { Text } from '@/components/ui/text'; import { VStack } from '@/components/ui/vstack'; import { type DispatchSelection, useDispatchStore } from '@/stores/dispatch/store'; diff --git a/src/components/common/loading.tsx b/src/components/common/loading.tsx index b817c452..88fe196e 100644 --- a/src/components/common/loading.tsx +++ b/src/components/common/loading.tsx @@ -1,8 +1,9 @@ -import { Box, Loader2 } from 'lucide-react-native'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { View } from 'react-native'; +import { Box, Loader2 } from '@/components/ui/lucide-icons'; + import { HStack } from '../ui/hstack'; import { Spinner } from '../ui/spinner'; import { Text } from '../ui/text'; diff --git a/src/components/contacts/contact-card.tsx b/src/components/contacts/contact-card.tsx index 5e2841de..dab3b3fc 100644 --- a/src/components/contacts/contact-card.tsx +++ b/src/components/contacts/contact-card.tsx @@ -1,8 +1,8 @@ -import { BuildingIcon, MailIcon, PhoneIcon, StarIcon, UserIcon } from 'lucide-react-native'; import React from 'react'; import { Pressable, Text, View } from 'react-native'; import { Avatar, AvatarImage } from '@/components/ui/avatar'; +import { BuildingIcon, MailIcon, PhoneIcon, StarIcon, UserIcon } from '@/components/ui/lucide-icons'; import { type ContactResultData, ContactType } from '@/models/v4/contacts/contactResultData'; interface ContactCardProps { diff --git a/src/components/contacts/contact-details-sheet.tsx b/src/components/contacts/contact-details-sheet.tsx index b7ce7ee4..f5b90e6c 100644 --- a/src/components/contacts/contact-details-sheet.tsx +++ b/src/components/contacts/contact-details-sheet.tsx @@ -1,3 +1,8 @@ +import React, { useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Linking, Platform, ScrollView, useWindowDimensions, View } from 'react-native'; + +import { Avatar, AvatarImage } from '@/components/ui/avatar'; import { BuildingIcon, CalendarIcon, @@ -15,12 +20,7 @@ import { TrashIcon, UserIcon, X, -} from 'lucide-react-native'; -import React, { useCallback, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Linking, Platform, ScrollView, useWindowDimensions, View } from 'react-native'; - -import { Avatar, AvatarImage } from '@/components/ui/avatar'; +} from '@/components/ui/lucide-icons'; import { useAnalytics } from '@/hooks/use-analytics'; import { logger } from '@/lib/logging'; import { ContactType } from '@/models/v4/contacts/contactResultData'; diff --git a/src/components/notes/note-details-sheet.tsx b/src/components/notes/note-details-sheet.tsx index 4d5a34de..0a624fd5 100644 --- a/src/components/notes/note-details-sheet.tsx +++ b/src/components/notes/note-details-sheet.tsx @@ -1,9 +1,9 @@ -import { Calendar, Tag, X } from 'lucide-react-native'; import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { StyleSheet } from 'react-native'; import { HtmlRenderer } from '@/components/ui/html-renderer'; +import { Calendar, Tag, X } from '@/components/ui/lucide-icons'; import { useAnalytics } from '@/hooks/use-analytics'; import { formatDateForDisplay, parseDateISOString } from '@/lib/utils'; import { useNotesStore } from '@/stores/notes/store'; diff --git a/src/components/notifications/NotificationButton.tsx b/src/components/notifications/NotificationButton.tsx index 605dd4bc..afe5069d 100644 --- a/src/components/notifications/NotificationButton.tsx +++ b/src/components/notifications/NotificationButton.tsx @@ -1,5 +1,6 @@ import { useCounts } from '@novu/react-native'; import { BellIcon } from 'lucide-react-native'; +import { useColorScheme } from 'nativewind'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -11,6 +12,7 @@ interface NotificationButtonProps { export const NotificationButton = ({ onPress }: NotificationButtonProps) => { const { t } = useTranslation(); + const { colorScheme } = useColorScheme(); const { counts, isLoading } = useCounts({ filters: [ { @@ -24,7 +26,7 @@ export const NotificationButton = ({ onPress }: NotificationButtonProps) => { return ( - + {counts?.[0]?.count && counts?.[0]?.count > 0 ? ( diff --git a/src/components/notifications/NotificationDetail.tsx b/src/components/notifications/NotificationDetail.tsx index 8c6a1d16..e84c4eff 100644 --- a/src/components/notifications/NotificationDetail.tsx +++ b/src/components/notifications/NotificationDetail.tsx @@ -1,6 +1,7 @@ import { ArrowLeft, Calendar, ExternalLink, Trash2 } from 'lucide-react-native'; +import { useColorScheme } from 'nativewind'; import React from 'react'; -import { Animated, Appearance, Dimensions, Platform, Pressable, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native'; +import { Animated, Dimensions, Platform, Pressable, SafeAreaView, StatusBar, type StyleProp, StyleSheet, Text, type TextStyle, View, type ViewStyle } from 'react-native'; // Define the interface directly in this file interface NotificationPayload { @@ -26,7 +27,93 @@ const { width } = Dimensions.get('window'); const SIDEBAR_WIDTH = Math.min(width * 0.85, 400); const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 44 : StatusBar.currentHeight || 0; +// Color-dependent rules live here instead of the module-level StyleSheet so they follow the +// app theme (nativewind) rather than the system theme captured once at app launch. +const createThemedStyles = (isDark: boolean) => + StyleSheet.create({ + sidebarContainer: { + backgroundColor: isDark ? '#171717' : '#fff', + shadowColor: isDark ? '#262626' : '#e5e5e5', + }, + header: { + borderBottomColor: isDark ? '#333333' : '#e5e5e5', + }, + headerTitle: { + color: isDark ? '#f3f4f6' : '#111827', + }, + dateText: { + color: isDark ? '#9ca3af' : '#6b7280', + }, + timeText: { + color: isDark ? '#9ca3af' : '#6b7280', + }, + typeTagText: { + color: isDark ? '#f3f4f6' : '#111827', + }, + typeTagDefault: { + backgroundColor: isDark ? '#374151' : '#e5e7eb', + }, + typeTagInfo: { + backgroundColor: isDark ? '#1e40af' : '#dbeafe', + }, + typeTagSuccess: { + backgroundColor: isDark ? '#065f46' : '#d1fae5', + }, + typeTagWarning: { + backgroundColor: isDark ? '#92400e' : '#fef3c7', + }, + typeTagAlert: { + backgroundColor: isDark ? '#991b1b' : '#fee2e2', + }, + title: { + color: isDark ? '#f3f4f6' : '#111827', + }, + bodyContainer: { + backgroundColor: isDark ? '#262626' : '#f9fafb', + }, + body: { + color: isDark ? '#e5e5e5' : '#374151', + }, + metadataDetailsContainer: { + backgroundColor: isDark ? '#262626' : '#f9fafb', + }, + metadataTitle: { + color: isDark ? '#f3f4f6' : '#111827', + }, + metadataKey: { + color: isDark ? '#9ca3af' : '#6b7280', + }, + metadataValue: { + color: isDark ? '#e5e5e5' : '#111827', + }, + buttonText: { + color: isDark ? '#60a5fa' : '#2563eb', + }, + referenceButton: { + backgroundColor: isDark ? '#1e3a8a' : '#dbeafe', + borderColor: isDark ? '#3b82f6' : '#60a5fa', + }, + }); + +type ThemedStyles = ReturnType; + +// lucide-react-native icons default to `stroke="currentColor"`, which react-native-svg resolves +// from the `color` *prop* only — a nativewind `className` (or a `color` key in a style object) +// lands in `style` and is dropped, so the icons rendered near-black on the dark sidebar. +const createIconColors = (isDark: boolean) => ({ + accent: isDark ? '#60a5fa' : '#3b82f6', + danger: isDark ? '#f87171' : '#ef4444', + muted: isDark ? '#9ca3af' : '#6b7280', +}); + +const useThemedStyles = () => { + const { colorScheme } = useColorScheme(); + const isDark = colorScheme === 'dark'; + return React.useMemo(() => ({ themed: createThemedStyles(isDark), iconColors: createIconColors(isDark) }), [isDark]); +}; + export const NotificationDetail = ({ notification, onClose, onDelete, onNavigateToReference }: NotificationDetailProps) => { + const { themed, iconColors } = useThemedStyles(); const slideAnim = React.useRef(new Animated.Value(0)).current; const fadeAnim = React.useRef(new Animated.Value(1)).current; @@ -79,55 +166,55 @@ export const NotificationDetail = ({ notification, onClose, onDelete, onNavigate - + - + - + - Notification + Notification - + - - {formattedDate} + + {formattedDate} - {formattedTime} + {formattedTime} {notification.type ? ( - - {notification.type} + + {notification.type} ) : null} - {notification.title ? {notification.title} : null} + {notification.title ? {notification.title} : null} - - {notification.body} + + {notification.body} {notification.metadata && Object.keys(notification.metadata).length > 0 ? ( - - Additional Information + + Additional Information {Object.entries(notification.metadata).map(([key, value]) => ( - {formatKey(key)}: - {formatValue(value)} + {formatKey(key)}: + {formatValue(value)} ))} ) : null} {notification.referenceType && notification.referenceId ? ( - - - View {notification.referenceType} + + + View {notification.referenceType} ) : null} @@ -153,19 +240,19 @@ const formatValue = (value: any): string => { }; // Helper function to get tag style based on notification type -const getTypeTagStyle = (type: string): any => { +const getTypeTagStyle = (type: string, themed: ThemedStyles): StyleProp => { const lowerType = type.toLowerCase(); if (lowerType.includes('alert') || lowerType.includes('emergency')) { - return styles.typeTagAlert; + return themed.typeTagAlert; } else if (lowerType.includes('warning')) { - return styles.typeTagWarning; + return themed.typeTagWarning; } else if (lowerType.includes('info')) { - return styles.typeTagInfo; + return themed.typeTagInfo; } else if (lowerType.includes('success')) { - return styles.typeTagSuccess; + return themed.typeTagSuccess; } else { - return styles.typeTagDefault; + return themed.typeTagDefault; } }; @@ -184,8 +271,6 @@ const styles = StyleSheet.create({ right: 0, width: SIDEBAR_WIDTH, height: '100%', - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#171717' : '#fff', - shadowColor: Appearance.getColorScheme() === 'dark' ? '#262626' : '#e5e5e5', shadowOffset: { width: -2, height: 0, @@ -205,14 +290,12 @@ const styles = StyleSheet.create({ padding: 16, paddingTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT + 16 : 16, borderBottomWidth: 1, - borderBottomColor: Appearance.getColorScheme() === 'dark' ? '#333333' : '#e5e5e5', }, headerTitle: { fontSize: 18, fontWeight: 'bold', flex: 1, textAlign: 'center', - color: Appearance.getColorScheme() === 'dark' ? '#f3f4f6' : '#111827', }, backButton: { padding: 8, @@ -235,12 +318,10 @@ const styles = StyleSheet.create({ }, dateText: { fontSize: 14, - color: Appearance.getColorScheme() === 'dark' ? '#9ca3af' : '#6b7280', marginLeft: 6, }, timeText: { fontSize: 14, - color: Appearance.getColorScheme() === 'dark' ? '#9ca3af' : '#6b7280', }, typeTag: { alignSelf: 'flex-start', @@ -254,29 +335,12 @@ const styles = StyleSheet.create({ fontWeight: '500', textTransform: 'uppercase', }, - typeTagDefault: { - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#374151' : '#e5e7eb', - }, - typeTagInfo: { - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#1e40af' : '#dbeafe', - }, - typeTagSuccess: { - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#065f46' : '#d1fae5', - }, - typeTagWarning: { - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#92400e' : '#fef3c7', - }, - typeTagAlert: { - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#991b1b' : '#fee2e2', - }, title: { fontSize: 20, fontWeight: 'bold', marginBottom: 12, - color: Appearance.getColorScheme() === 'dark' ? '#f3f4f6' : '#111827', }, bodyContainer: { - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#262626' : '#f9fafb', padding: 16, borderRadius: 8, marginBottom: 20, @@ -284,19 +348,16 @@ const styles = StyleSheet.create({ body: { fontSize: 16, lineHeight: 24, - color: Appearance.getColorScheme() === 'dark' ? '#e5e5e5' : '#374151', }, metadataDetailsContainer: { marginTop: 10, padding: 16, - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#262626' : '#f9fafb', borderRadius: 8, }, metadataTitle: { fontSize: 16, fontWeight: '600', marginBottom: 10, - color: Appearance.getColorScheme() === 'dark' ? '#f3f4f6' : '#111827', }, metadataItem: { flexDirection: 'row', @@ -306,31 +367,25 @@ const styles = StyleSheet.create({ fontSize: 14, fontWeight: '500', marginRight: 8, - color: Appearance.getColorScheme() === 'dark' ? '#9ca3af' : '#6b7280', }, metadataValue: { fontSize: 14, flex: 1, - color: Appearance.getColorScheme() === 'dark' ? '#e5e5e5' : '#111827', }, buttonText: { fontSize: 16, fontWeight: '500', - color: Appearance.getColorScheme() === 'dark' ? '#3b82f6' : '#2563eb', }, referenceButton: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 24, - backgroundColor: Appearance.getColorScheme() === 'dark' ? '#1e3a8a' : '#dbeafe', padding: 12, borderRadius: 8, borderWidth: 1, - borderColor: Appearance.getColorScheme() === 'dark' ? '#3b82f6' : '#60a5fa', }, referenceButtonIcon: { marginRight: 8, - color: Appearance.getColorScheme() === 'dark' ? '#3b82f6' : '#2563eb', }, }); diff --git a/src/components/notifications/NotificationInbox.tsx b/src/components/notifications/NotificationInbox.tsx index e8a42f7d..90d747cc 100644 --- a/src/components/notifications/NotificationInbox.tsx +++ b/src/components/notifications/NotificationInbox.tsx @@ -22,6 +22,16 @@ const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 44 : StatusBar.currentHeight | const getSidebarWidth = (windowWidth: number) => Math.min(windowWidth * 0.85, 400); +// lucide-react-native icons default to `stroke="currentColor"`, which react-native-svg resolves +// from the `color` *prop* only — a nativewind `className` lands in `style` and is dropped, so the +// icons rendered near-black on the dark sidebar. Colors are passed explicitly instead. +const getIconColors = (isDark: boolean) => + ({ + accent: isDark ? '#60a5fa' : '#3b82f6', + danger: isDark ? '#f87171' : '#ef4444', + muted: isDark ? '#9ca3af' : '#6b7280', + }) as const; + /** Color-dependent style fragments; computed per render from the reactive color scheme. */ const getThemedStyles = (isDark: boolean) => ({ @@ -29,6 +39,9 @@ const getThemedStyles = (isDark: boolean) => backgroundColor: isDark ? '#171717' : '#fff', shadowColor: isDark ? '#262626' : '#e5e5e5', }, + header: { + borderBottomColor: isDark ? '#333333' : '#eee', + }, selectionCount: { color: isDark ? '#ffffff' : '#000000', }, @@ -74,6 +87,7 @@ const NotificationRow = React.memo( ({ notification, unread, isSelectionMode, isSelected, onPress, onLongPress, onNavigateToReference }: NotificationRowProps) => { const { colorScheme } = useColorScheme(); const themed = React.useMemo(() => getThemedStyles(colorScheme === 'dark'), [colorScheme]); + const iconColors = React.useMemo(() => getIconColors(colorScheme === 'dark'), [colorScheme]); const handlePress = React.useCallback(() => onPress(notification), [onPress, notification]); const handleLongPress = React.useCallback(() => onLongPress(notification), [onLongPress, notification]); const handleNavigate = React.useCallback( @@ -90,9 +104,7 @@ const NotificationRow = React.memo( {unread ? : null} {isSelectionMode ? ( - - {isSelected ? : } - + {isSelected ? : } ) : null} @@ -106,12 +118,12 @@ const NotificationRow = React.memo( notification.referenceType && notification.referenceId ? ( - + ) : ( - + ) ) : null} @@ -135,6 +147,7 @@ export const NotificationInbox = ({ isOpen, onClose }: NotificationInboxProps) = const { width: windowWidth } = useWindowDimensions(); const sidebarWidth = getSidebarWidth(windowWidth); const themed = React.useMemo(() => getThemedStyles(colorScheme === 'dark'), [colorScheme]); + const iconColors = React.useMemo(() => getIconColors(colorScheme === 'dark'), [colorScheme]); const activeUnitId = useCoreStore((state) => state.activeUnitId); const config = useCoreStore((state: any) => state.config); const { notifications, isLoading, fetchMore, hasMore, refetch } = useNotifications(); @@ -369,7 +382,7 @@ export const NotificationInbox = ({ isOpen, onClose }: NotificationInboxProps) = setSelectedNotification(null)} onDelete={handleDeleteNotification} onNavigateToReference={handleNavigateToReference} /> ) : ( <> - + {isSelectionMode ? ( <> @@ -379,7 +392,7 @@ export const NotificationInbox = ({ isOpen, onClose }: NotificationInboxProps) = {selectedNotificationIds.size === notifications?.length ? t('notifications.deselect_all') : t('notifications.select_all')}