Mobile App design

apps/frontend-mobile/app/(tabs)/alerts.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius, shadows } from '../../constants/theme';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import api from '../../services/api';
 
@@ -21,6 +22,7 @@ interface NotificationItem {
 export default function AlertsScreen() {
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
+  const { colors } = useThemeContext();
   const [items, setItems] = useState<NotificationItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -81,33 +83,33 @@ export default function AlertsScreen() {
   function renderItem({ item }: { item: NotificationItem }) {
     const key = `${item.scope}:${item.id}`;
     return (
-      <View style={styles.item}>
+      <View style={[styles.item, { backgroundColor: colors.card }]}>
         <View style={styles.itemContent}>
-          <Text style={styles.itemName} numberOfLines={2}>
+          <Text style={[styles.itemName, { color: colors.text }]} numberOfLines={2}>
             {item.medicine_name || item.medicine_nregistro}
           </Text>
           <View style={styles.itemMeta}>
-            <View style={styles.chip}>
+            <View style={[styles.chip, { backgroundColor: colors.primaryContainer }]}>
               <Ionicons
                 name={item.scope === 'pharmacy' ? 'medical' : 'globe'}
                 size={12}
                 color={colors.primary}
               />
-              <Text style={styles.chipText}>
+              <Text style={[styles.chipText, { color: colors.onPrimaryContainer }]}>
                 {item.scope === 'pharmacy'
                   ? item.pharmacy_name || `Farmacia #${item.pharmacy_id}`
                   : 'Cualquier farmacia'}
               </Text>
             </View>
             {item.pharmacy_address && (
-              <Text style={styles.itemAddress} numberOfLines={1}>
+              <Text style={[styles.itemAddress, { color: colors.textSecondary }]} numberOfLines={1}>
                 {item.pharmacy_address}
               </Text>
             )}
           </View>
         </View>
         <TouchableOpacity
-          style={styles.deleteButton}
+          style={[styles.deleteButton, { backgroundColor: colors.dangerContainer }]}
           onPress={() => handleDelete(item)}
           disabled={deletingId === key}
         >
@@ -126,19 +128,19 @@ export default function AlertsScreen() {
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <View style={[styles.header, isTablet && styles.headerTablet]}>
-        <Text style={[styles.title, isTablet && styles.titleTablet]}>Notificaciones Guardadas</Text>
-        <Text style={[styles.subtitle, isTablet && styles.subtitleTablet]}>
+        <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>Notificaciones Guardadas</Text>
+        <Text style={[styles.subtitle, isTablet && styles.subtitleTablet, { color: colors.textSecondary }]}>
           Recibe avisos cuando medicamentos sin stock se repongan
         </Text>
       </View>
 
       {error && (
-        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
-          <Text style={styles.errorText}>{error}</Text>
+        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
+          <Text style={[styles.errorText, { color: colors.danger }]}>{error}</Text>
           <TouchableOpacity onPress={loadNotifications} style={styles.retryButton}>
-            <Text style={styles.retryText}>Reintentar</Text>
+            <Text style={[styles.retryText, { color: colors.primary }]}>Reintentar</Text>
           </TouchableOpacity>
         </View>
       )}
@@ -146,8 +148,8 @@ export default function AlertsScreen() {
       {!error && items.length === 0 && (
         <View style={styles.emptyContainer}>
           <Ionicons name="notifications-off-outline" size={isTablet ? 80 : 64} color={colors.border} />
-          <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet]}>Sin notificaciones</Text>
-          <Text style={[styles.emptyText, isTablet && styles.emptyTextTablet]}>
+          <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet, { color: colors.text }]}>Sin notificaciones</Text>
+          <Text style={[styles.emptyText, isTablet && styles.emptyTextTablet, { color: colors.textSecondary }]}>
             Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga.
           </Text>
         </View>
@@ -169,7 +171,6 @@ export default function AlertsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.background,
   },
   header: {
     paddingHorizontal: spacing.lg,
@@ -184,14 +185,12 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 22,
     fontWeight: 'bold',
-    color: colors.text,
   },
   titleTablet: {
     fontSize: 28,
   },
   subtitle: {
     fontSize: 14,
-    color: colors.textSecondary,
     marginTop: spacing.xs,
     lineHeight: 20,
   },
@@ -212,7 +211,6 @@ const styles = StyleSheet.create({
   item: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: colors.card,
     borderRadius: borderRadius.lg,
     padding: spacing.md,
     ...shadows.card,
@@ -224,7 +222,6 @@ const styles = StyleSheet.create({
   itemName: {
     fontSize: 16,
     fontWeight: '600',
-    color: colors.text,
     lineHeight: 22,
   },
   itemMeta: {
@@ -234,7 +231,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.xs,
-    backgroundColor: colors.primaryContainer,
     borderRadius: borderRadius.full,
     paddingHorizontal: spacing.sm,
     paddingVertical: 3,
@@ -243,17 +239,14 @@ const styles = StyleSheet.create({
   chipText: {
     fontSize: 12,
     fontWeight: '600',
-    color: colors.onPrimaryContainer,
   },
   itemAddress: {
     fontSize: 12,
-    color: colors.textSecondary,
   },
   deleteButton: {
     width: 36,
     height: 36,
     borderRadius: 18,
-    backgroundColor: colors.dangerContainer,
     alignItems: 'center',
     justifyContent: 'center',
     marginLeft: spacing.sm,
@@ -261,7 +254,6 @@ const styles = StyleSheet.create({
   errorContainer: {
     margin: spacing.lg,
     padding: spacing.md,
-    backgroundColor: colors.dangerContainer,
     borderRadius: borderRadius.lg,
     alignItems: 'center',
     gap: spacing.sm,
@@ -272,7 +264,6 @@ const styles = StyleSheet.create({
   },
   errorText: {
     fontSize: 14,
-    color: colors.danger,
     textAlign: 'center',
   },
   retryButton: {
@@ -282,7 +273,6 @@ const styles = StyleSheet.create({
   retryText: {
     fontSize: 14,
     fontWeight: '600',
-    color: colors.primary,
   },
   emptyContainer: {
     flex: 1,
@@ -294,14 +284,12 @@ const styles = StyleSheet.create({
   emptyTitle: {
     fontSize: 18,
     fontWeight: '600',
-    color: colors.text,
   },
   emptyTitleTablet: {
     fontSize: 24,
   },
   emptyText: {
     fontSize: 14,
-    color: colors.textSecondary,
     textAlign: 'center',
     lineHeight: 20,
   },