Mobile App design

apps/frontend-mobile/components/MedicineCard.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius } from '../constants/theme';
+import { useThemeContext } from './ThemeProvider';
+import { spacing, borderRadius } from '../constants/theme';
 import { StockBadge } from './StockBadge';
 import { Medicine } from '../types';
 
@@ -16,6 +17,7 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
   const router = useRouter();
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
+  const { colors } = useThemeContext();
 
   const handlePress = () => {
     router.push(`/medicine/${medicine.nregistro}`);
@@ -23,32 +25,32 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
 
   return (
     <TouchableOpacity
-      style={[styles.card, isTablet && styles.cardTablet]}
+      style={[styles.card, isTablet && styles.cardTablet, { backgroundColor: colors.card }]}
       onPress={handlePress}
       activeOpacity={0.7}
     >
       <View style={styles.header}>
-        <Text style={[styles.name, isTablet && styles.nameTablet]} numberOfLines={2}>
+        <Text style={[styles.name, isTablet && styles.nameTablet, { color: colors.text }]} numberOfLines={2}>
           {medicine.name}
         </Text>
         {medicine.stock != null && <StockBadge stock={medicine.stock} />}
       </View>
 
-      <Text style={styles.principioActivo} numberOfLines={1}>
+      <Text style={[styles.principioActivo, { color: colors.textSecondary }]} numberOfLines={1}>
         {medicine.active_ingredient}{medicine.dosage ? ` - ${medicine.dosage}` : ''}
       </Text>
 
       <View style={styles.footer}>
         <View style={styles.priceContainer}>
           <Ionicons name="pricetag" size={14} color={colors.textSecondary} />
-          <Text style={[styles.price, isTablet && styles.priceTablet]}>
+          <Text style={[styles.price, isTablet && styles.priceTablet, { color: colors.primary }]}>
             {medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
           </Text>
         </View>
 
         <View style={styles.labContainer}>
           <Ionicons name="business" size={14} color={colors.textSecondary} />
-          <Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet]} numberOfLines={1}>
+          <Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet, { color: colors.textSecondary }]} numberOfLines={1}>
             {medicine.laboratory}
           </Text>
         </View>
@@ -59,7 +61,6 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: colors.card,
     borderRadius: borderRadius.lg,
     padding: spacing.md,
     marginHorizontal: spacing.lg,
@@ -86,7 +87,6 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 16,
     fontWeight: '600',
-    color: colors.text,
     marginRight: spacing.sm,
   },
   nameTablet: {
@@ -94,7 +94,6 @@ const styles = StyleSheet.create({
   },
   principioActivo: {
     fontSize: 14,
-    color: colors.textSecondary,
     marginBottom: spacing.sm,
   },
   footer: {
@@ -109,7 +108,6 @@ const styles = StyleSheet.create({
   price: {
     fontSize: 14,
     fontWeight: '600',
-    color: colors.primary,
     marginLeft: spacing.xs,
   },
   priceTablet: {
@@ -123,7 +121,6 @@ const styles = StyleSheet.create({
   },
   laboratorio: {
     fontSize: 12,
-    color: colors.textSecondary,
     marginLeft: spacing.xs,
     maxWidth: 120,
   },