@oxyhq/services 6.9.33 → 6.9.34

package/src/ui/components/SignInModal.tsx

@@ -358,8 +358,8 @@ const SignInModal: React.FC = () => {
                     {/* Header */}
                     <View style={styles.header}>
                         <OxyLogo width={56} height={56} />
-                        <Text style={[styles.title, { color: theme.colors.text }]}>Sign in with Oxy</Text>
-                        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+                        <Text className="text-foreground" style={styles.title}>Sign in with Oxy</Text>
+                        <Text className="text-muted-foreground" style={styles.subtitle}>
                             Scan with Oxy Accounts app or use the button below
                         </Text>
                     </View>
@@ -367,13 +367,13 @@ const SignInModal: React.FC = () => {
                     {isLoading ? (
                         <View style={styles.loadingContainer}>
                             <Loading size="large" />
-                            <Text style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
+                            <Text className="text-muted-foreground" style={styles.loadingText}>
                                 Preparing sign in...
                             </Text>
                         </View>
                     ) : error ? (
                         <View style={styles.errorContainer}>
-                            <Text style={[styles.errorText, { color: theme.colors.error }]}>{error}</Text>
+                            <Text className="text-destructive" style={styles.errorText}>{error}</Text>
                             <Button onPress={handleRefresh}>Try Again</Button>
                         </View>
                     ) : (
@@ -462,13 +462,11 @@ const styles = StyleSheet.create({
         fontSize: 28,
         fontWeight: 'bold',
         marginTop: 16,
-        color: 'white',
     },
     subtitle: {
         fontSize: 15,
         marginTop: 8,
         textAlign: 'center',
-        color: 'rgba(255, 255, 255, 0.7)',
     },
     qrContainer: {
         padding: 20,

package/src/ui/components/TextField/TextFieldFlat.tsx

@@ -8,7 +8,7 @@ import {
   View,
   Animated,
 } from 'react-native';
-import { useThemeColors } from '../../hooks/useThemeColors';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 import { Underline } from './Addons/Underline';
 import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums';
@@ -158,17 +158,17 @@ const TextInputFlat = ({
     theme,
   });
 
-  const themeColors = useThemeColors();
+  const { colors: bloomColors } = useTheme();
 
   const containerStyle = {
-    backgroundColor: themeColors.inputBackground,
+    backgroundColor: bloomColors.backgroundSecondary,
     borderTopLeftRadius: theme.roundness,
     borderTopRightRadius: theme.roundness,
   };
 
   // Override text color with theme color (unless custom textColor prop is provided)
   // If disabled, keep the original inputTextColor which handles opacity correctly
-  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : themeColors.text);
+  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : bloomColors.text);
 
   const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
   const fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;

package/src/ui/components/TextField/TextFieldOutlined.tsx

@@ -10,7 +10,7 @@ import {
   type ColorValue,
   type LayoutChangeEvent,
 } from 'react-native';
-import { useThemeColors } from '../../hooks/useThemeColors';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 import { Outline } from './Addons/Outline';
 import { AdornmentType, AdornmentSide } from './Adornment/enums';
@@ -89,7 +89,7 @@ const TextInputOutlined = ({
   const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET, MIN_WIDTH } =
     getConstants(isV3);
 
-  const themeColors = useThemeColors();
+  const { colors: bloomColors } = useTheme();
 
   const {
     fontSize: fontSizeStyle,
@@ -101,7 +101,7 @@ const TextInputOutlined = ({
     ...viewStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
 
-  const backgroundColor = styleBackgroundColor ?? themeColors.background;
+  const backgroundColor = styleBackgroundColor ?? bloomColors.background;
   const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
   // Always set a minimum lineHeight to prevent text cutoff
   // Use at least 1.4x fontSize for better text spacing
@@ -127,7 +127,7 @@ const TextInputOutlined = ({
 
   // Override text color with theme color (unless custom textColor prop is provided)
   // If disabled, keep the original inputTextColor which handles opacity correctly
-  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : themeColors.text);
+  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : bloomColors.text);
 
   const densePaddingTop = label ? LABEL_PADDING_TOP_DENSE : 0;
   const paddingTop = label ? LABEL_PADDING_TOP : 0;

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
 import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
-import type { ThemeStyles } from '../../hooks/useThemeStyles';
 
 interface FileDetailsModalProps {
     visible: boolean;
@@ -12,8 +12,9 @@ interface FileDetailsModalProps {
     onClose: () => void;
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
-    themeStyles: ThemeStyles;
     isOwner: boolean;
+    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
+    themeStyles?: unknown;
 }
 
 export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
@@ -22,11 +23,9 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
     onClose,
     onDownload,
     onDelete,
-    themeStyles,
     isOwner,
 }) => {
-    const backgroundColor = themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
+    const { colors } = useTheme();
 
     if (!file) return null;
 
@@ -37,66 +36,66 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
             presentationStyle="pageSheet"
             onRequestClose={onClose}
         >
-            <View style={[fileManagementStyles.modalContainer, { backgroundColor }]}>
-                <View style={[fileManagementStyles.modalHeader, { borderBottomColor: borderColor }]}>
+            <View className="bg-background" style={fileManagementStyles.modalContainer}>
+                <View className="border-b border-border" style={fileManagementStyles.modalHeader}>
                     <TouchableOpacity
                         style={fileManagementStyles.modalCloseButton}
                         onPress={onClose}
                     >
-                        <Ionicons name="close" size={24} color={themeStyles.textColor} />
+                        <Ionicons name="close" size={24} color={colors.text} />
                     </TouchableOpacity>
-                    <Text style={[fileManagementStyles.modalTitle, { color: themeStyles.textColor }]}>File Details</Text>
+                    <Text className="text-foreground" style={fileManagementStyles.modalTitle}>File Details</Text>
                     <View style={fileManagementStyles.modalPlaceholder} />
                 </View>
 
                 <ScrollView style={fileManagementStyles.modalContent}>
-                    <View style={[fileManagementStyles.fileDetailCard, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
+                    <View className="bg-secondary border-border" style={fileManagementStyles.fileDetailCard}>
                         <View style={fileManagementStyles.fileDetailIcon}>
                             <Ionicons
                                 name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
                                 size={64}
-                                color={themeStyles.primaryColor}
+                                color={colors.primary}
                             />
                         </View>
 
-                        <Text style={[fileManagementStyles.fileDetailName, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.fileDetailName}>
                             {file.filename}
                         </Text>
 
                         <View style={fileManagementStyles.fileDetailInfo}>
                             <View style={fileManagementStyles.detailRow}>
-                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                     Size:
                                 </Text>
-                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                     {formatFileSize(file.length)}
                                 </Text>
                             </View>
 
                             <View style={fileManagementStyles.detailRow}>
-                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                     Type:
                                 </Text>
-                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                     {file.contentType}
                                 </Text>
                             </View>
 
                             <View style={fileManagementStyles.detailRow}>
-                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                     Uploaded:
                                 </Text>
-                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                     {new Date(file.uploadDate).toLocaleString()}
                                 </Text>
                             </View>
 
                             {file.metadata?.description && (
                                 <View style={fileManagementStyles.detailRow}>
-                                    <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                         Description:
                                     </Text>
-                                    <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                    <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                         {file.metadata.description}
                                     </Text>
                                 </View>
@@ -105,7 +104,8 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
 
                         <View style={fileManagementStyles.modalActions}>
                             <TouchableOpacity
-                                style={[fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.primaryColor }]}
+                                className="bg-primary"
+                                style={fileManagementStyles.modalActionButton}
                                 onPress={() => {
                                     onDownload(file.id, file.filename);
                                     onClose();
@@ -117,7 +117,8 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
 
                             {isOwner && (
                                 <TouchableOpacity
-                                    style={[fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.dangerColor }]}
+                                    className="bg-destructive"
+                                    style={fileManagementStyles.modalActionButton}
                                     onPress={() => {
                                         onClose();
                                         onDelete(file.id, file.filename);

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -4,10 +4,11 @@ import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Image } fr
 import { Image as ExpoImage } from 'expo-image';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
-import type { ThemeStyles } from '../../hooks/useThemeStyles';
+import { Colors } from '../../constants/theme';
 import { GroupedSection } from '../GroupedSection';
 
 interface FileViewerProps {
@@ -19,8 +20,9 @@ interface FileViewerProps {
     onClose: () => void;
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
-    themeStyles: ThemeStyles;
     isOwner: boolean;
+    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
+    themeStyles?: unknown;
 }
 
 export const FileViewer: React.FC<FileViewerProps> = ({
@@ -32,9 +34,10 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     onClose,
     onDownload,
     onDelete,
-    themeStyles,
     isOwner,
 }) => {
+    const { colors, isDark } = useTheme();
+    const constantColors = Colors[isDark ? 'dark' : 'light'];
     const isImage = file.contentType.startsWith('image/');
     const isText = file.contentType.startsWith('text/') ||
         file.contentType.includes('json') ||
@@ -45,10 +48,9 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     const isVideo = file.contentType.startsWith('video/');
     const isAudio = file.contentType.startsWith('audio/');
 
-    const backgroundColor = isImage && fileContent
+    const bgColor = isImage && fileContent
         ? 'transparent'
-        : themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
+        : undefined;
 
     const [containerWidth, setContainerWidth] = useState<number>(0);
     const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
@@ -107,28 +109,28 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             {
                 id: 'filename',
                 icon: 'file-document',
-                iconColor: themeStyles.colors.iconSecurity,
+                iconColor: constantColors.iconSecurity,
                 title: 'File Name',
                 subtitle: file.filename,
             },
             {
                 id: 'size',
                 icon: 'server',
-                iconColor: themeStyles.colors.iconStorage,
+                iconColor: constantColors.iconStorage,
                 title: 'Size',
                 subtitle: formatFileSize(file.length),
             },
             {
                 id: 'type',
                 icon: 'code-tags',
-                iconColor: themeStyles.colors.iconData,
+                iconColor: constantColors.iconData,
                 title: 'Type',
                 subtitle: file.contentType,
             },
             {
                 id: 'uploaded',
                 icon: 'clock',
-                iconColor: themeStyles.colors.iconPersonalInfo,
+                iconColor: constantColors.iconPersonalInfo,
                 title: 'Uploaded',
                 subtitle: new Date(file.uploadDate).toLocaleString(),
             },
@@ -138,7 +140,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             items.push({
                 id: 'description',
                 icon: 'text',
-                iconColor: themeStyles.colors.iconData,
+                iconColor: constantColors.iconData,
                 title: 'Description',
                 subtitle: file.metadata.description,
             });
@@ -147,16 +149,19 @@ export const FileViewer: React.FC<FileViewerProps> = ({
         items.push({
             id: 'fileId',
             icon: 'key',
-            iconColor: themeStyles.colors.iconSecurity,
+            iconColor: constantColors.iconSecurity,
             title: 'File ID',
             subtitle: file.id,
         });
 
         return items;
-    }, [file, themeStyles.colors]);
+    }, [file, constantColors]);
 
     return (
-        <View style={[fileManagementStyles.fileViewerContainer, { backgroundColor }]}>
+        <View
+            className={isImage && fileContent ? undefined : 'bg-background'}
+            style={[fileManagementStyles.fileViewerContainer, bgColor ? { backgroundColor: bgColor } : undefined]}
+        >
             {/* Blurred Background Image - only for images */}
             {isImage && fileContent && (
                 <>
@@ -168,24 +173,26 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         transition={120}
                         cachePolicy="memory-disk"
                     />
-                    <View style={[fileManagementStyles.backgroundOverlay, { backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.85)' }]} />
+                    <View style={[fileManagementStyles.backgroundOverlay, { backgroundColor: isDark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.85)' }]} />
                 </>
             )}
 
             {/* Floating Back Button */}
             <TouchableOpacity
-                style={[fileManagementStyles.floatingBackButton, { backgroundColor: themeStyles.colors.card }]}
+                className="bg-card"
+                style={fileManagementStyles.floatingBackButton}
                 onPress={onClose}
             >
-                <MaterialCommunityIcons name="arrow-left" size={20} color={themeStyles.textColor} />
+                <MaterialCommunityIcons name="arrow-left" size={20} color={colors.text} />
             </TouchableOpacity>
 
             {/* Floating Download Button */}
             <TouchableOpacity
-                style={[fileManagementStyles.floatingDownloadButton, { backgroundColor: themeStyles.colors.card }]}
+                className="bg-card"
+                style={fileManagementStyles.floatingDownloadButton}
                 onPress={() => onDownload(file.id, file.filename)}
             >
-                <MaterialCommunityIcons name="download" size={20} color={themeStyles.primaryColor} />
+                <MaterialCommunityIcons name="download" size={20} color={colors.primary} />
             </TouchableOpacity>
 
             {/* File Content */}
@@ -195,13 +202,13 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             >
                 {loadingFileContent ? (
                     <View style={fileManagementStyles.fileViewerLoading}>
-                        <ActivityIndicator size="large" color={themeStyles.primaryColor} />
-                        <Text style={[fileManagementStyles.fileViewerLoadingText, { color: themeStyles.textColor }]}>
+                        <ActivityIndicator size="large" color={colors.primary} />
+                        <Text className="text-foreground" style={fileManagementStyles.fileViewerLoadingText}>
                             Loading file content...
                         </Text>
                     </View>
                 ) : isImage && fileContent ? (
-                    <View 
+                    <View
                         style={fileManagementStyles.imageContainer}
                         onLayout={(e) => {
                             const width = e.nativeEvent.layout.width;
@@ -210,7 +217,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             }
                         }}
                     >
-                        <View 
+                        <View
                             style={[
                                 fileManagementStyles.imageWrapper,
                                 {
@@ -236,9 +243,9 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         </View>
                     </View>
                 ) : isText && fileContent ? (
-                    <View style={[fileManagementStyles.textContainer, { backgroundColor: themeStyles.colors.card }]}>
+                    <View className="bg-card" style={fileManagementStyles.textContainer}>
                         <ScrollView style={{ flex: 1 }} nestedScrollEnabled>
-                            <Text style={[fileManagementStyles.textContent, { color: themeStyles.textColor }]}>
+                            <Text className="text-foreground" style={fileManagementStyles.textContent}>
                                 {fileContent}
                             </Text>
                         </ScrollView>
@@ -248,17 +255,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="file-pdf-box"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             PDF Preview Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             PDF files cannot be previewed in this viewer.{'\n'}
                             Download the file to view its contents.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -270,17 +278,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="video-outline"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             Video Playback Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             Video playback is not supported in this viewer.{'\n'}
                             Download the file to view it.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -292,17 +301,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="music-note-outline"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             Audio Playback Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             Audio playback is not supported in this viewer.{'\n'}
                             Download the file to listen to it.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -314,17 +324,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name="file-outline"
                             size={64}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
-                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
                             Preview Not Available
                         </Text>
-                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
                             This file type cannot be previewed.{'\n'}
                             Download the file to view its contents.
                         </Text>
                         <TouchableOpacity
-                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            className="bg-primary"
+                            style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
                             <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
@@ -335,9 +346,9 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             </ScrollView>
 
             {/* File Details Section - at bottom */}
-            <View style={[fileManagementStyles.fileDetailsSection, { backgroundColor: themeStyles.colors.card }]}>
+            <View className="bg-card" style={fileManagementStyles.fileDetailsSection}>
                 <View style={fileManagementStyles.fileDetailsSectionHeader}>
-                    <Text style={[fileManagementStyles.fileDetailsSectionTitle, { color: themeStyles.textColor }]}>
+                    <Text className="text-foreground" style={fileManagementStyles.fileDetailsSectionTitle}>
                         File Details
                     </Text>
                     <TouchableOpacity
@@ -347,7 +358,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         <MaterialCommunityIcons
                             name={showFileDetailsInViewer ? "chevron-up" : "chevron-down"}
                             size={20}
-                            color={themeStyles.colors.secondaryText}
+                            color={colors.textSecondary}
                         />
                     </TouchableOpacity>
                 </View>
@@ -361,7 +372,8 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         {isOwner && (
                             <View style={fileManagementStyles.fileDetailsActions}>
                                 <TouchableOpacity
-                                    style={[fileManagementStyles.fileDetailsActionButton, { backgroundColor: themeStyles.dangerColor }]}
+                                    className="bg-destructive"
+                                    style={fileManagementStyles.fileDetailsActionButton}
                                     onPress={() => {
                                         onClose();
                                         onDelete(file.id, file.filename);