diff --git a/apps/frontend-mobile/app/(tabs)/profile.tsx b/apps/frontend-mobile/app/(tabs)/profile.tsx index 8fac40d..a2411d0 100644 --- a/apps/frontend-mobile/app/(tabs)/profile.tsx +++ b/apps/frontend-mobile/app/(tabs)/profile.tsx @@ -818,6 +818,9 @@ const styles = StyleSheet.create({ color: colors.text, marginTop: spacing.lg, }, + authTitleTablet: { + fontSize: 32, + }, authSubtitle: { fontSize: 16, color: colors.textSecondary, @@ -825,11 +828,18 @@ const styles = StyleSheet.create({ marginTop: spacing.sm, marginBottom: spacing.xl, }, + authSubtitleTablet: { + fontSize: 18, + maxWidth: 400, + }, avatarSection: { alignItems: 'center', padding: spacing.xl, backgroundColor: colors.card, }, + avatarSectionTablet: { + paddingVertical: spacing.xxl, + }, avatarContainer: { width: 100, height: 100, @@ -839,11 +849,21 @@ const styles = StyleSheet.create({ alignItems: 'center', overflow: 'hidden', }, + avatarContainerTablet: { + width: 140, + height: 140, + borderRadius: 70, + }, avatarImage: { width: 100, height: 100, borderRadius: 50, }, + avatarImageTablet: { + width: 140, + height: 140, + borderRadius: 70, + }, avatarOverlay: { position: 'absolute', top: 0, @@ -866,6 +886,11 @@ const styles = StyleSheet.create({ marginTop: spacing.sm, gap: spacing.md, }, + infoSectionTablet: { + maxWidth: 600, + alignSelf: 'center', + width: '100%', + }, infoCard: { backgroundColor: colors.surfaceLow, padding: spacing.md, @@ -890,6 +915,11 @@ const styles = StyleSheet.create({ marginTop: spacing.sm, backgroundColor: colors.card, }, + menuSectionTablet: { + maxWidth: 600, + alignSelf: 'center', + width: '100%', + }, menuItem: { flexDirection: 'row', alignItems: 'center', @@ -936,11 +966,18 @@ const styles = StyleSheet.create({ paddingVertical: spacing.md, paddingHorizontal: spacing.xl, }, + buttonTablet: { + paddingVertical: spacing.lg, + paddingHorizontal: spacing.xl * 1.5, + }, buttonText: { color: colors.textInverse, fontSize: 16, fontWeight: '600', }, + buttonTextTablet: { + fontSize: 18, + }, linkButton: { marginTop: spacing.md, }, @@ -959,6 +996,11 @@ const styles = StyleSheet.create({ borderWidth: 1, borderColor: colors.danger, }, + logoutButtonTablet: { + maxWidth: 600, + alignSelf: 'center', + width: '100%', + }, logoutText: { marginLeft: spacing.sm, color: colors.danger, diff --git a/apps/frontend-mobile/components/MedicineCard.tsx b/apps/frontend-mobile/components/MedicineCard.tsx index 6799c7c..e7649e1 100644 --- a/apps/frontend-mobile/components/MedicineCard.tsx +++ b/apps/frontend-mobile/components/MedicineCard.tsx @@ -1,46 +1,54 @@ import React from 'react'; -import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; +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 { StockBadge } from './StockBadge'; import { Medicine } from '../types'; +const TABLET_MIN_WIDTH = 768; + interface MedicineCardProps { medicine: Medicine; } export function MedicineCard({ medicine }: MedicineCardProps) { const router = useRouter(); + const { width } = useWindowDimensions(); + const isTablet = width >= TABLET_MIN_WIDTH; const handlePress = () => { router.push(`/medicine/${medicine.nregistro}`); }; return ( - + - + {medicine.nombre} - + {medicine.principioActivo} - + - + {medicine.precio ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'} - + - + {medicine.laboratorio} @@ -62,6 +70,12 @@ const styles = StyleSheet.create({ shadowRadius: 8, elevation: 2, }, + cardTablet: { + padding: spacing.lg, + maxWidth: 700, + alignSelf: 'center', + width: '100%', + }, header: { flexDirection: 'row', justifyContent: 'space-between', @@ -75,6 +89,9 @@ const styles = StyleSheet.create({ color: colors.text, marginRight: spacing.sm, }, + nameTablet: { + fontSize: 18, + }, principioActivo: { fontSize: 14, color: colors.textSecondary, @@ -95,6 +112,9 @@ const styles = StyleSheet.create({ color: colors.primary, marginLeft: spacing.xs, }, + priceTablet: { + fontSize: 16, + }, labContainer: { flexDirection: 'row', alignItems: 'center', @@ -107,4 +127,8 @@ const styles = StyleSheet.create({ marginLeft: spacing.xs, maxWidth: 120, }, + laboratorioTablet: { + fontSize: 14, + maxWidth: 200, + }, });