@oxyhq/services 5.4.1 → 5.4.2

package/src/ui/screens/FileManagementScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
     View,
     Text,
@@ -65,14 +65,24 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [loadingDimensions, setLoadingDimensions] = useState(false);
     const [hoveredPreview, setHoveredPreview] = useState<string | null>(null);
 
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#f2f2f2';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#007AFF';
-    const dangerColor = '#FF3B30';
-    const successColor = '#34C759';
+    // Memoize theme-related calculations to prevent unnecessary recalculations
+    const themeStyles = useMemo(() => {
+        const isDarkTheme = theme === 'dark';
+        return {
+            isDarkTheme,
+            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
+            backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
+            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#FFFFFF',
+            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
+            primaryColor: '#007AFF',
+            dangerColor: '#FF3B30',
+            successColor: '#34C759',
+        };
+    }, [theme]);
+
+    // Extract commonly used theme variables
+    const backgroundColor = themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
 
     const targetUserId = userId || user?.id;
 
@@ -199,7 +209,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     }, [oxyServices, photoDimensions]);
 
     // Create justified rows from photos with responsive algorithm
-    const createJustifiedRows = useCallback((photos: FileMetadata[]) => {
+    const createJustifiedRows = useCallback((photos: FileMetadata[], containerWidth: number) => {
         if (photos.length === 0) return [];
         
         const rows: FileMetadata[][] = [];
@@ -689,11 +699,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         const isVideo = file.contentType.startsWith('video/');
         const isAudio = file.contentType.startsWith('audio/');
         const hasPreview = isImage || isPDF || isVideo;
+        const borderColor = themeStyles.borderColor;
 
         return (
             <View
                 key={file.id}
-                style={[styles.fileItem, { backgroundColor: secondaryBackgroundColor, borderColor }]}
+                style={[styles.fileItem, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}
             >
                 <TouchableOpacity
                     style={styles.fileContent}
@@ -744,14 +755,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                 )}
                                 {isPDF && (
                                     <View style={styles.pdfPreview}>
-                                        <Ionicons name="document" size={32} color={primaryColor} />
-                                        <Text style={[styles.pdfLabel, { color: primaryColor }]}>PDF</Text>
+                                        <Ionicons name="document" size={32} color={themeStyles.primaryColor} />
+                                        <Text style={[styles.pdfLabel, { color: themeStyles.primaryColor }]}>PDF</Text>
                                     </View>
                                 )}
                                 {isVideo && (
                                     <View style={styles.videoPreview}>
-                                        <Ionicons name="play-circle" size={32} color={primaryColor} />
-                                        <Text style={[styles.videoLabel, { color: primaryColor }]}>VIDEO</Text>
+                                        <Ionicons name="play-circle" size={32} color={themeStyles.primaryColor} />
+                                        <Text style={[styles.videoLabel, { color: themeStyles.primaryColor }]}>VIDEO</Text>
                                     </View>
                                 )}
                                 {/* Fallback icon (hidden by default for images) */}
@@ -762,7 +773,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     <Ionicons
                                         name={getFileIcon(file.contentType) as any}
                                         size={32}
-                                        color={primaryColor}
+                                        color={themeStyles.primaryColor}
                                     />
                                 </View>
                                 
@@ -778,22 +789,22 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                 <Ionicons
                                     name={getFileIcon(file.contentType) as any}
                                     size={32}
-                                    color={primaryColor}
+                                    color={themeStyles.primaryColor}
                                 />
                             </View>
                         )}
                     </View>
                     
                     <View style={styles.fileInfo}>
-                        <Text style={[styles.fileName, { color: textColor }]} numberOfLines={1}>
+                        <Text style={[styles.fileName, { color: themeStyles.textColor }]} numberOfLines={1}>
                             {file.filename}
                         </Text>
-                        <Text style={[styles.fileDetails, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.fileDetails, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                             {formatFileSize(file.length)} • {new Date(file.uploadDate).toLocaleDateString()}
                         </Text>
                         {file.metadata?.description && (
                             <Text
-                                style={[styles.fileDescription, { color: isDarkTheme ? '#AAAAAA' : '#888888' }]}
+                                style={[styles.fileDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888' }]}
                                 numberOfLines={2}
                             >
                                 {file.metadata.description}
@@ -806,32 +817,32 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     {/* Preview button for supported files */}
                     {hasPreview && (
                         <TouchableOpacity
-                            style={[styles.actionButton, { backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                            style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
                             onPress={() => handleFileOpen(file)}
                         >
-                            <Ionicons name="eye" size={20} color={primaryColor} />
+                            <Ionicons name="eye" size={20} color={themeStyles.primaryColor} />
                         </TouchableOpacity>
                     )}
                     
                     <TouchableOpacity
-                        style={[styles.actionButton, { backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                        style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
                         onPress={() => handleFileDownload(file.id, file.filename)}
                     >
-                        <Ionicons name="download" size={20} color={primaryColor} />
+                        <Ionicons name="download" size={20} color={themeStyles.primaryColor} />
                     </TouchableOpacity>
 
                     {/* Always show delete button for debugging */}
                     <TouchableOpacity
-                        style={[styles.actionButton, { backgroundColor: isDarkTheme ? '#400000' : '#FFEBEE' }]}
+                        style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }]}
                         onPress={() => {
                             handleFileDelete(file.id, file.filename);
                         }}
                         disabled={deleting === file.id}
                     >
                         {deleting === file.id ? (
-                            <ActivityIndicator size="small" color={dangerColor} />
+                            <ActivityIndicator size="small" color={themeStyles.dangerColor} />
                         ) : (
-                            <Ionicons name="trash" size={20} color={dangerColor} />
+                            <Ionicons name="trash" size={20} color={themeStyles.dangerColor} />
                         )}
                     </TouchableOpacity>
                 </View>
@@ -839,15 +850,81 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         );
     };
 
+    const renderPhotoItem = (photo: FileMetadata, index: number) => {
+        const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
+        
+        // Calculate photo item width based on actual container size from bottom sheet
+        let itemsPerRow = 3; // Default for mobile
+        if (containerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
+        else if (containerWidth > 480) itemsPerRow = 4; // Large mobile
+        
+        // Account for the photoScrollContainer padding (16px on each side = 32px total)
+        const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
+        const gaps = (itemsPerRow - 1) * 4; // Gap between items
+        const availableWidth = containerWidth - scrollContainerPadding;
+        const itemWidth = (availableWidth - gaps) / itemsPerRow;
+        
+        return (
+            <TouchableOpacity
+                key={photo.id}
+                style={[
+                    styles.photoItem,
+                    {
+                        width: itemWidth,
+                        height: itemWidth,
+                    }
+                ]}
+                onPress={() => handleFileOpen(photo)}
+                activeOpacity={0.8}
+            >
+                <View style={styles.photoContainer}>
+                    {Platform.OS === 'web' ? (
+                        <img
+                            src={downloadUrl}
+                            alt={photo.filename}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'cover',
+                                borderRadius: 8,
+                                transition: 'transform 0.2s ease',
+                            }}
+                            loading="lazy"
+                            onError={(e) => {
+                                console.error('Photo failed to load:', e);
+                                // Could replace with placeholder image
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.transform = 'scale(1.02)';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.transform = 'scale(1)';
+                            }}
+                        />
+                    ) : (
+                        <Image
+                            source={{ uri: downloadUrl }}
+                            style={styles.photoImage}
+                            resizeMode="cover"
+                            onError={(e) => {
+                                console.error('Photo failed to load:', e);
+                            }}
+                        />
+                    )}
+                </View>
+            </TouchableOpacity>
+        );
+    };
+
     const renderPhotoGrid = useCallback(() => {
         const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
         
         if (photos.length === 0) {
             return (
                 <View style={styles.emptyState}>
-                    <Ionicons name="images-outline" size={64} color={isDarkTheme ? '#666666' : '#CCCCCC'} />
-                    <Text style={[styles.emptyStateTitle, { color: textColor }]}>No Photos Yet</Text>
-                    <Text style={[styles.emptyStateDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                    <Ionicons name="images-outline" size={64} color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} />
+                    <Text style={[styles.emptyStateTitle, { color: themeStyles.textColor }]}>No Photos Yet</Text>
+                    <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                         {user?.id === targetUserId 
                             ? `Upload photos to get started. You can select multiple photos at once${Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}`
                             : "This user hasn't uploaded any photos yet"
@@ -855,7 +932,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     </Text>
                     {user?.id === targetUserId && (
                         <TouchableOpacity
-                            style={[styles.emptyStateButton, { backgroundColor: primaryColor }]}
+                            style={[styles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
                             onPress={handleFileUpload}
                             disabled={uploading}
                         >
@@ -881,15 +958,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     <RefreshControl
                         refreshing={refreshing}
                         onRefresh={() => loadFiles(true)}
-                        tintColor={primaryColor}
+                        tintColor={themeStyles.primaryColor}
                     />
                 }
                 showsVerticalScrollIndicator={false}
             >
                 {loadingDimensions && (
                     <View style={styles.dimensionsLoadingIndicator}>
-                        <ActivityIndicator size="small" color={primaryColor} />
-                        <Text style={[styles.dimensionsLoadingText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <ActivityIndicator size="small" color={themeStyles.primaryColor} />
+                        <Text style={[styles.dimensionsLoadingText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                             Loading photo layout...
                         </Text>
                     </View>
@@ -902,12 +979,28 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     createJustifiedRows={createJustifiedRows}
                     renderJustifiedPhotoItem={renderJustifiedPhotoItem}
                     renderSimplePhotoItem={renderPhotoItem}
-                    textColor={textColor}
+                    textColor={themeStyles.textColor}
                     containerWidth={containerWidth}
                 />
             </ScrollView>
         );
-    }, [filteredFiles, isDarkTheme, textColor, user?.id, targetUserId, uploading, primaryColor, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem]);
+    }, [
+        filteredFiles, 
+        themeStyles, 
+        user?.id, 
+        targetUserId, 
+        uploading, 
+        handleFileUpload, 
+        refreshing, 
+        loadFiles, 
+        loadingDimensions, 
+        photoDimensions, 
+        loadPhotoDimensions, 
+        createJustifiedRows, 
+        renderJustifiedPhotoItem, 
+        renderPhotoItem, 
+        containerWidth
+    ]);
 
     // Separate component for the photo grid to optimize rendering
     const JustifiedPhotoGrid = React.memo(({ 
@@ -960,7 +1053,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     
                     return (
                         <View key={date} style={styles.photoDateSection}>
-                            <Text style={[styles.photoDateHeader, { color: textColor }]}>
+                            <Text style={[styles.photoDateHeader, { color: themeStyles.textColor }]}>
                                 {new Date(date).toLocaleDateString('en-US', { 
                                     weekday: 'long', 
                                     year: 'numeric', 
@@ -1031,140 +1124,78 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         );
     });
 
-    const renderPhotoItem = (photo: FileMetadata, index: number) => {
-        const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
-        
-        // Calculate photo item width based on actual container size from bottom sheet
-        let itemsPerRow = 3; // Default for mobile
-        if (containerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
-        else if (containerWidth > 480) itemsPerRow = 4; // Large mobile
-        
-        // Account for the photoScrollContainer padding (16px on each side = 32px total)
-        const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
-        const gaps = (itemsPerRow - 1) * 4; // Gap between items
-        const availableWidth = containerWidth - scrollContainerPadding;
-        const itemWidth = (availableWidth - gaps) / itemsPerRow;
+    const renderFileDetailsModal = () => {
+        const backgroundColor = themeStyles.backgroundColor;
+        const borderColor = themeStyles.borderColor;
         
         return (
-            <TouchableOpacity
-                key={photo.id}
-                style={[
-                    styles.photoItem,
-                    {
-                        width: itemWidth,
-                        height: itemWidth,
-                    }
-                ]}
-                onPress={() => handleFileOpen(photo)}
-                activeOpacity={0.8}
+            <Modal
+                visible={showFileDetails}
+                animationType="slide"
+                presentationStyle="pageSheet"
+                onRequestClose={() => setShowFileDetails(false)}
             >
-                <View style={styles.photoContainer}>
-                    {Platform.OS === 'web' ? (
-                        <img
-                            src={downloadUrl}
-                            alt={photo.filename}
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                                objectFit: 'cover',
-                                borderRadius: 8,
-                                transition: 'transform 0.2s ease',
-                            }}
-                            loading="lazy"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                                // Could replace with placeholder image
-                            }}
-                            onMouseEnter={(e) => {
-                                e.currentTarget.style.transform = 'scale(1.02)';
-                            }}
-                            onMouseLeave={(e) => {
-                                e.currentTarget.style.transform = 'scale(1)';
-                            }}
-                        />
-                    ) : (
-                        <Image
-                            source={{ uri: downloadUrl }}
-                            style={styles.photoImage}
-                            resizeMode="cover"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                            }}
-                        />
-                    )}
-                </View>
-            </TouchableOpacity>
-        );
-    };
-
-    const renderFileDetailsModal = () => (
-        <Modal
-            visible={showFileDetails}
-            animationType="slide"
-            presentationStyle="pageSheet"
-            onRequestClose={() => setShowFileDetails(false)}
-        >
-            <View style={[styles.modalContainer, { backgroundColor }]}>
-                <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
-                    <TouchableOpacity
-                        style={styles.modalCloseButton}
-                        onPress={() => setShowFileDetails(false)}
-                    >
-                        <Ionicons name="close" size={24} color={textColor} />
+                <View style={[styles.modalContainer, { backgroundColor }]}>
+                    <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+                        <TouchableOpacity
+                            style={styles.modalCloseButton}
+                            onPress={() => setShowFileDetails(false)}
+                        >
+                        <Ionicons name="close" size={24} color={themeStyles.textColor} />
                     </TouchableOpacity>
-                    <Text style={[styles.modalTitle, { color: textColor }]}>File Details</Text>
+                    <Text style={[styles.modalTitle, { color: themeStyles.textColor }]}>File Details</Text>
                     <View style={styles.modalPlaceholder} />
                 </View>
 
                 {selectedFile && (
                     <ScrollView style={styles.modalContent}>
-                        <View style={[styles.fileDetailCard, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
+                        <View style={[styles.fileDetailCard, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
                             <View style={styles.fileDetailIcon}>
                                 <Ionicons
                                     name={getFileIcon(selectedFile.contentType) as any}
                                     size={64}
-                                    color={primaryColor}
+                                    color={themeStyles.primaryColor}
                                 />
                             </View>
 
-                            <Text style={[styles.fileDetailName, { color: textColor }]}>
+                            <Text style={[styles.fileDetailName, { color: themeStyles.textColor }]}>
                                 {selectedFile.filename}
                             </Text>
 
                             <View style={styles.fileDetailInfo}>
                                 <View style={styles.detailRow}>
-                                    <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                         Size:
                                     </Text>
-                                    <Text style={[styles.detailValue, { color: textColor }]}>
+                                    <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                         {formatFileSize(selectedFile.length)}
                                     </Text>
                                 </View>
 
                                 <View style={styles.detailRow}>
-                                    <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                         Type:
                                     </Text>
-                                    <Text style={[styles.detailValue, { color: textColor }]}>
+                                    <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                         {selectedFile.contentType}
                                     </Text>
                                 </View>
 
                                 <View style={styles.detailRow}>
-                                    <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                         Uploaded:
                                     </Text>
-                                    <Text style={[styles.detailValue, { color: textColor }]}>
+                                    <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                         {new Date(selectedFile.uploadDate).toLocaleString()}
                                     </Text>
                                 </View>
 
                                 {selectedFile.metadata?.description && (
                                     <View style={styles.detailRow}>
-                                        <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                        <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                             Description:
                                         </Text>
-                                        <Text style={[styles.detailValue, { color: textColor }]}>
+                                        <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                             {selectedFile.metadata.description}
                                         </Text>
                                     </View>
@@ -1173,7 +1204,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                             <View style={styles.modalActions}>
                                 <TouchableOpacity
-                                    style={[styles.modalActionButton, { backgroundColor: primaryColor }]}
+                                    style={[styles.modalActionButton, { backgroundColor: themeStyles.primaryColor }]}
                                     onPress={() => {
                                         handleFileDownload(selectedFile.id, selectedFile.filename);
                                         setShowFileDetails(false);
@@ -1185,7 +1216,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                                 {(user?.id === targetUserId) && (
                                     <TouchableOpacity
-                                        style={[styles.modalActionButton, { backgroundColor: dangerColor }]}
+                                        style={[styles.modalActionButton, { backgroundColor: themeStyles.dangerColor }]}
                                         onPress={() => {
                                             setShowFileDetails(false);
                                             handleFileDelete(selectedFile.id, selectedFile.filename);
@@ -1201,11 +1232,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 )}
             </View>
         </Modal>
-    );
+        );
+    };
 
     const renderFileViewer = () => {
         if (!openedFile) return null;
 
+        const backgroundColor = themeStyles.backgroundColor;
+        const borderColor = themeStyles.borderColor;
+
         const isImage = openedFile.contentType.startsWith('image/');
         const isText = openedFile.contentType.startsWith('text/') || 
                       openedFile.contentType.includes('json') || 
@@ -1224,30 +1259,30 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         style={styles.backButton}
                         onPress={handleCloseFile}
                     >
-                        <Ionicons name="arrow-back" size={24} color={textColor} />
+                        <Ionicons name="arrow-back" size={24} color={themeStyles.textColor} />
                     </TouchableOpacity>
                     <View style={styles.fileViewerTitleContainer}>
-                        <Text style={[styles.fileViewerTitle, { color: textColor }]} numberOfLines={1}>
+                        <Text style={[styles.fileViewerTitle, { color: themeStyles.textColor }]} numberOfLines={1}>
                             {openedFile.filename}
                         </Text>
-                        <Text style={[styles.fileViewerSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.fileViewerSubtitle, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                             {formatFileSize(openedFile.length)} • {openedFile.contentType}
                         </Text>
                     </View>
                     <View style={styles.fileViewerActions}>
                         <TouchableOpacity
-                            style={[styles.actionButton, { backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                            style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
                             onPress={() => handleFileDownload(openedFile.id, openedFile.filename)}
                         >
-                            <Ionicons name="download" size={20} color={primaryColor} />
+                            <Ionicons name="download" size={20} color={themeStyles.primaryColor} />
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={[
                                 styles.actionButton, 
                                 { 
                                     backgroundColor: showFileDetailsInViewer 
-                                        ? primaryColor 
-                                        : (isDarkTheme ? '#333333' : '#F0F0F0') 
+                                        ? themeStyles.primaryColor 
+                                        : (themeStyles.isDarkTheme ? '#333333' : '#F0F0F0') 
                                 }
                             ]}
                             onPress={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
@@ -1255,7 +1290,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             <Ionicons 
                                 name={showFileDetailsInViewer ? "chevron-up" : "information-circle"} 
                                 size={20} 
-                                color={showFileDetailsInViewer ? "#FFFFFF" : primaryColor} 
+                                color={showFileDetailsInViewer ? "#FFFFFF" : themeStyles.primaryColor} 
                             />
                         </TouchableOpacity>
                     </View>
@@ -1263,72 +1298,72 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                 {/* File Details Section */}
                 {showFileDetailsInViewer && (
-                    <View style={[styles.fileDetailsSection, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
+                    <View style={[styles.fileDetailsSection, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
                         <View style={styles.fileDetailsSectionHeader}>
-                            <Text style={[styles.fileDetailsSectionTitle, { color: textColor }]}>
+                            <Text style={[styles.fileDetailsSectionTitle, { color: themeStyles.textColor }]}>
                                 File Details
                             </Text>
                             <TouchableOpacity
                                 style={styles.fileDetailsSectionToggle}
                                 onPress={() => setShowFileDetailsInViewer(false)}
                             >
-                                <Ionicons name="chevron-up" size={20} color={isDarkTheme ? '#BBBBBB' : '#666666'} />
+                                <Ionicons name="chevron-up" size={20} color={themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'} />
                             </TouchableOpacity>
                         </View>
                         
                         <View style={styles.fileDetailInfo}>
                             <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                     File Name:
                                 </Text>
-                                <Text style={[styles.detailValue, { color: textColor }]}>
+                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                     {openedFile.filename}
                                 </Text>
                             </View>
 
                             <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                     Size:
                                 </Text>
-                                <Text style={[styles.detailValue, { color: textColor }]}>
+                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                     {formatFileSize(openedFile.length)}
                                 </Text>
                             </View>
 
                             <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                     Type:
                                 </Text>
-                                <Text style={[styles.detailValue, { color: textColor }]}>
+                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                     {openedFile.contentType}
                                 </Text>
                             </View>
 
                             <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                     Uploaded:
                                 </Text>
-                                <Text style={[styles.detailValue, { color: textColor }]}>
+                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                     {new Date(openedFile.uploadDate).toLocaleString()}
                                 </Text>
                             </View>
 
                             {openedFile.metadata?.description && (
                                 <View style={styles.detailRow}>
-                                    <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                         Description:
                                     </Text>
-                                    <Text style={[styles.detailValue, { color: textColor }]}>
+                                    <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
                                         {openedFile.metadata.description}
                                     </Text>
                                 </View>
                             )}
 
                             <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                     File ID:
                                 </Text>
-                                <Text style={[styles.detailValue, { color: textColor, fontSize: 12, fontFamily: Platform.OS === 'web' ? 'monospace' : 'Courier' }]}>
+                                <Text style={[styles.detailValue, { color: themeStyles.textColor, fontSize: 12, fontFamily: Platform.OS === 'web' ? 'monospace' : 'Courier' }]}>
                                     {openedFile.id}
                                 </Text>
                             </View>
@@ -1336,7 +1371,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                         <View style={styles.fileDetailsActions}>
                             <TouchableOpacity
-                                style={[styles.fileDetailsActionButton, { backgroundColor: primaryColor }]}
+                                style={[styles.fileDetailsActionButton, { backgroundColor: themeStyles.primaryColor }]}
                                 onPress={() => handleFileDownload(openedFile.id, openedFile.filename)}
                             >
                                 <Ionicons name="download" size={16} color="#FFFFFF" />
@@ -1345,7 +1380,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                             {(user?.id === targetUserId) && (
                                 <TouchableOpacity
-                                    style={[styles.fileDetailsActionButton, { backgroundColor: dangerColor }]}
+                                    style={[styles.fileDetailsActionButton, { backgroundColor: themeStyles.dangerColor }]}
                                     onPress={() => {
                                         handleCloseFile();
                                         handleFileDelete(openedFile.id, openedFile.filename);
@@ -1369,8 +1404,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 >
                     {loadingFileContent ? (
                         <View style={styles.fileViewerLoading}>
-                            <ActivityIndicator size="large" color={primaryColor} />
-                            <Text style={[styles.fileViewerLoadingText, { color: textColor }]}>
+                            <ActivityIndicator size="large" color={themeStyles.primaryColor} />
+                            <Text style={[styles.fileViewerLoadingText, { color: themeStyles.textColor }]}>
                                 Loading file content...
                             </Text>
                         </View>
@@ -1406,9 +1441,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             )}
                         </View>
                     ) : isText && fileContent ? (
-                        <View style={[styles.textContainer, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
+                        <View style={[styles.textContainer, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
                             <ScrollView style={{ flex: 1 }} nestedScrollEnabled>
-                                <Text style={[styles.textContent, { color: textColor }]}>
+                                <Text style={[styles.textContent, { color: themeStyles.textColor }]}>
                                     {fileContent}
                                 </Text>
                             </ScrollView>
@@ -1438,7 +1473,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     Your browser does not support the video tag.
                                 </video>
                             ) : (
-                                <Text style={[styles.unsupportedText, { color: textColor }]}>
+                                <Text style={[styles.unsupportedText, { color: themeStyles.textColor }]}>
                                     Video playback not supported on mobile
                                 </Text>
                             )}
@@ -1457,7 +1492,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     Your browser does not support the audio tag.
                                 </audio>
                             ) : (
-                                <Text style={[styles.unsupportedText, { color: textColor }]}>
+                                <Text style={[styles.unsupportedText, { color: themeStyles.textColor }]}>
                                     Audio playback not supported on mobile
                                 </Text>
                             )}
@@ -1467,17 +1502,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             <Ionicons 
                                 name={getFileIcon(openedFile.contentType) as any} 
                                 size={64} 
-                                color={isDarkTheme ? '#666666' : '#CCCCCC'} 
+                                color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} 
                             />
-                            <Text style={[styles.unsupportedFileTitle, { color: textColor }]}>
+                            <Text style={[styles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
                                 Preview Not Available
                             </Text>
-                            <Text style={[styles.unsupportedFileDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                            <Text style={[styles.unsupportedFileDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                 This file type cannot be previewed in the browser.{'\n'}
                                 Download the file to view its contents.
                             </Text>
                             <TouchableOpacity
-                                style={[styles.downloadButtonLarge, { backgroundColor: primaryColor }]}
+                                style={[styles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
                                 onPress={() => handleFileDownload(openedFile.id, openedFile.filename)}
                             >
                                 <Ionicons name="download" size={20} color="#FFFFFF" />
@@ -1492,9 +1527,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const renderEmptyState = () => (
         <View style={styles.emptyState}>
-            <Ionicons name="folder-open-outline" size={64} color={isDarkTheme ? '#666666' : '#CCCCCC'} />
-            <Text style={[styles.emptyStateTitle, { color: textColor }]}>No Files Yet</Text>
-            <Text style={[styles.emptyStateDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+            <Ionicons name="folder-open-outline" size={64} color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} />
+            <Text style={[styles.emptyStateTitle, { color: themeStyles.textColor }]}>No Files Yet</Text>
+            <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                 {user?.id === targetUserId 
                     ? `Upload files to get started. You can select multiple files at once${Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}`
                     : "This user hasn't uploaded any files yet"
@@ -1502,7 +1537,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             </Text>
             {user?.id === targetUserId && (
                 <TouchableOpacity
-                    style={[styles.emptyStateButton, { backgroundColor: primaryColor }]}
+                    style={[styles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
                     onPress={handleFileUpload}
                     disabled={uploading}
                 >
@@ -1522,8 +1557,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     if (loading) {
         return (
             <View style={[styles.container, styles.centerContent, { backgroundColor }]}>
-                <ActivityIndicator size="large" color={primaryColor} />
-                <Text style={[styles.loadingText, { color: textColor }]}>Loading files...</Text>
+                <ActivityIndicator size="large" color={themeStyles.primaryColor} />
+                <Text style={[styles.loadingText, { color: themeStyles.textColor }]}>Loading files...</Text>
             </View>
         );
     }
@@ -1556,13 +1591,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 styles.header, 
                 { 
                     borderBottomColor: borderColor,
-                    backgroundColor: isDarkTheme ? '#1A1A1A' : '#FFFFFF',
+                    backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
                     shadowColor: '#000000',
                     shadowOffset: {
                         width: 0,
                         height: 2,
                     },
-                    shadowOpacity: isDarkTheme ? 0.3 : 0.1,
+                    shadowOpacity: themeStyles.isDarkTheme ? 0.3 : 0.1,
                     shadowRadius: 8,
                     elevation: 4,
                 }
@@ -1571,20 +1606,20 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     style={[
                         styles.backButton, 
                         { 
-                            backgroundColor: isDarkTheme ? '#2A2A2A' : '#F8F9FA',
+                            backgroundColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#F8F9FA',
                             borderRadius: 12,
                         }
                     ]} 
                     onPress={onClose || goBack}
                 >
-                    <Ionicons name="arrow-back" size={22} color={textColor} />
+                    <Ionicons name="arrow-back" size={22} color={themeStyles.textColor} />
                 </TouchableOpacity>
                 
                 <View style={styles.headerTitleContainer}>
-                    <Text style={[styles.headerTitle, { color: textColor }]}>
+                    <Text style={[styles.headerTitle, { color: themeStyles.textColor }]}>
                         {viewMode === 'photos' ? 'Photos' : 'File Management'}
                     </Text>
-                    <Text style={[styles.headerSubtitle, { color: isDarkTheme ? '#AAAAAA' : '#666666' }]}>
+                    <Text style={[styles.headerSubtitle, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666' }]}>
                         {filteredFiles.length} {filteredFiles.length === 1 ? 'item' : 'items'}
                     </Text>
                 </View>
@@ -1594,15 +1629,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     <View style={[
                         styles.viewModeToggle, 
                         { 
-                            backgroundColor: isDarkTheme ? '#2A2A2A' : '#F8F9FA',
+                            backgroundColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#F8F9FA',
                             borderWidth: 1,
-                            borderColor: isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+                            borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
                             shadowColor: '#000000',
                             shadowOffset: {
                                 width: 0,
                                 height: 1,
                             },
-                            shadowOpacity: isDarkTheme ? 0.3 : 0.05,
+                            shadowOpacity: themeStyles.isDarkTheme ? 0.3 : 0.05,
                             shadowRadius: 4,
                             elevation: 2,
                         }
@@ -1611,8 +1646,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             style={[
                                 styles.viewModeButton,
                                 viewMode === 'all' && { 
-                                    backgroundColor: primaryColor,
-                                    shadowColor: primaryColor,
+                                    backgroundColor: themeStyles.primaryColor,
+                                    shadowColor: themeStyles.primaryColor,
                                     shadowOffset: {
                                         width: 0,
                                         height: 2,
@@ -1627,15 +1662,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             <Ionicons 
                                 name="folder" 
                                 size={18} 
-                                color={viewMode === 'all' ? '#FFFFFF' : textColor} 
+                                color={viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor} 
                             />
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={[
                                 styles.viewModeButton,
                                 viewMode === 'photos' && { 
-                                    backgroundColor: primaryColor,
-                                    shadowColor: primaryColor,
+                                    backgroundColor: themeStyles.primaryColor,
+                                    shadowColor: themeStyles.primaryColor,
                                     shadowOffset: {
                                         width: 0,
                                         height: 2,
@@ -1650,7 +1685,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             <Ionicons 
                                 name="images" 
                                 size={18} 
-                                color={viewMode === 'photos' ? '#FFFFFF' : textColor} 
+                                color={viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor} 
                             />
                         </TouchableOpacity>
                     </View>
@@ -1660,8 +1695,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             style={[
                                 styles.uploadButton, 
                                 { 
-                                    backgroundColor: primaryColor,
-                                    shadowColor: primaryColor,
+                                    backgroundColor: themeStyles.primaryColor,
+                                    shadowColor: themeStyles.primaryColor,
                                     shadowOffset: {
                                         width: 0,
                                         height: 3,
@@ -1697,23 +1732,23 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 <View style={[
                     styles.searchContainer, 
                     { 
-                        backgroundColor: isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
-                        borderColor: isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+                        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
+                        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
                         shadowColor: '#000000',
                         shadowOffset: {
                             width: 0,
                             height: 1,
                         },
-                        shadowOpacity: isDarkTheme ? 0.2 : 0.05,
+                        shadowOpacity: themeStyles.isDarkTheme ? 0.2 : 0.05,
                         shadowRadius: 4,
                         elevation: 2,
                     }
                 ]}>
-                    <Ionicons name="search" size={22} color={isDarkTheme ? '#888888' : '#666666'} />
+                    <Ionicons name="search" size={22} color={themeStyles.isDarkTheme ? '#888888' : '#666666'} />
                     <TextInput
-                        style={[styles.searchInput, { color: textColor }]}
+                        style={[styles.searchInput, { color: themeStyles.textColor }]}
                         placeholder={viewMode === 'photos' ? 'Search photos...' : 'Search files...'}
-                        placeholderTextColor={isDarkTheme ? '#888888' : '#999999'}
+                        placeholderTextColor={themeStyles.isDarkTheme ? '#888888' : '#999999'}
                         value={searchQuery}
                         onChangeText={setSearchQuery}
                     />
@@ -1722,7 +1757,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             onPress={() => setSearchQuery('')}
                             style={styles.searchClearButton}
                         >
-                            <Ionicons name="close-circle" size={22} color={isDarkTheme ? '#888888' : '#666666'} />
+                            <Ionicons name="close-circle" size={22} color={themeStyles.isDarkTheme ? '#888888' : '#666666'} />
                         </TouchableOpacity>
                     )}
                 </View>
@@ -1733,36 +1768,36 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 <View style={[
                     styles.statsContainer, 
                     { 
-                        backgroundColor: isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
-                        borderColor: isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+                        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
+                        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
                         shadowColor: '#000000',
                         shadowOffset: {
                             width: 0,
                             height: 1,
                         },
-                        shadowOpacity: isDarkTheme ? 0.2 : 0.05,
+                        shadowOpacity: themeStyles.isDarkTheme ? 0.2 : 0.05,
                         shadowRadius: 4,
                         elevation: 2,
                     }
                 ]}>
                     <View style={styles.statItem}>
-                        <Text style={[styles.statValue, { color: textColor }]}>{filteredFiles.length}</Text>
-                        <Text style={[styles.statLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.statValue, { color: themeStyles.textColor }]}>{filteredFiles.length}</Text>
+                        <Text style={[styles.statLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                             {searchQuery.length > 0 ? 'Found' : (filteredFiles.length === 1 ? (viewMode === 'photos' ? 'Photo' : 'File') : (viewMode === 'photos' ? 'Photos' : 'Files'))}
                         </Text>
                     </View>
                     <View style={styles.statItem}>
-                        <Text style={[styles.statValue, { color: textColor }]}>
+                        <Text style={[styles.statValue, { color: themeStyles.textColor }]}>
                             {formatFileSize(filteredFiles.reduce((total, file) => total + file.length, 0))}
                         </Text>
-                        <Text style={[styles.statLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.statLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                             {searchQuery.length > 0 ? 'Size' : 'Total Size'}
                         </Text>
                     </View>
                     {searchQuery.length > 0 && (
                         <View style={styles.statItem}>
-                            <Text style={[styles.statValue, { color: textColor }]}>{files.length}</Text>
-                            <Text style={[styles.statLabel, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                            <Text style={[styles.statValue, { color: themeStyles.textColor }]}>{files.length}</Text>
+                            <Text style={[styles.statLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                 Total
                             </Text>
                         </View>
@@ -1781,19 +1816,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         <RefreshControl
                             refreshing={refreshing}
                             onRefresh={() => loadFiles(true)}
-                            tintColor={primaryColor}
+                            tintColor={themeStyles.primaryColor}
                         />
                     }
                 >
                     {filteredFiles.length === 0 && searchQuery.length > 0 ? (
                         <View style={styles.emptyState}>
-                            <Ionicons name="search" size={64} color={isDarkTheme ? '#666666' : '#CCCCCC'} />
-                            <Text style={[styles.emptyStateTitle, { color: textColor }]}>No Results Found</Text>
-                            <Text style={[styles.emptyStateDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                            <Ionicons name="search" size={64} color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} />
+                            <Text style={[styles.emptyStateTitle, { color: themeStyles.textColor }]}>No Results Found</Text>
+                            <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                 No files match your search for "{searchQuery}"
                             </Text>
                             <TouchableOpacity
-                                style={[styles.emptyStateButton, { backgroundColor: primaryColor }]}
+                                style={[styles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
                                 onPress={() => setSearchQuery('')}
                             >
                                 <Ionicons name="refresh" size={20} color="#FFFFFF" />
@@ -1814,11 +1849,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             {isDragging && Platform.OS === 'web' && (
                 <View style={styles.dragDropOverlay}>
                     <View style={styles.dragDropContent}>
-                        <Ionicons name="cloud-upload" size={64} color={primaryColor} />
-                        <Text style={[styles.dragDropTitle, { color: primaryColor }]}>
+                        <Ionicons name="cloud-upload" size={64} color={themeStyles.primaryColor} />
+                        <Text style={[styles.dragDropTitle, { color: themeStyles.primaryColor }]}>
                             Drop files to upload
                         </Text>
-                        <Text style={[styles.dragDropSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.dragDropSubtitle, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                             Release to upload{uploadProgress ? ` (${uploadProgress.current}/${uploadProgress.total})` : ' multiple files'}
                         </Text>
                     </View>