Faro & grafana improvements

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

@@ -1,29 +1,33 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 export default function ScanTabScreen() {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
 
   return (
     <View style={styles.container}>
-      <View style={styles.content}>
-        <View style={styles.iconContainer}>
-          <Ionicons name="scan" size={64} color={colors.scanButton} />
+      <View style={[styles.content, isTablet && styles.contentTablet]}>
+        <View style={[styles.iconContainer, isTablet && styles.iconContainerTablet]}>
+          <Ionicons name="scan" size={isTablet ? 80 : 64} color={colors.scanButton} />
         </View>
-        <Text style={styles.title}>Escanear TSI</Text>
-        <Text style={styles.description}>
+        <Text style={[styles.title, isTablet && styles.titleTablet]}>Escanear TSI</Text>
+        <Text style={[styles.description, isTablet && styles.descriptionTablet]}>
           Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos
         </Text>
         <TouchableOpacity
-          style={[styles.button, shadows.scanButton]}
+          style={[styles.button, shadows.scanButton, isTablet && styles.buttonTablet]}
           activeOpacity={0.85}
           onPress={() => router.push('/scanner')}
         >
-          <Ionicons name="scan" size={24} color="#ffffff" />
-          <Text style={styles.buttonText}>Iniciar escaneo</Text>
+          <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
+          <Text style={[styles.buttonText, isTablet && styles.buttonTextTablet]}>Iniciar escaneo</Text>
         </TouchableOpacity>
       </View>
     </View>
@@ -42,6 +46,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.xl,
     gap: spacing.md,
   },
+  contentTablet: {
+    gap: spacing.lg,
+  },
   iconContainer: {
     width: 100,
     height: 100,
@@ -51,11 +58,19 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: spacing.sm,
   },
+  iconContainerTablet: {
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+  },
   title: {
     fontSize: 22,
     fontWeight: 'bold',
     color: colors.text,
   },
+  titleTablet: {
+    fontSize: 28,
+  },
   description: {
     fontSize: 15,
     color: colors.textSecondary,
@@ -63,6 +78,11 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     maxWidth: 280,
   },
+  descriptionTablet: {
+    fontSize: 17,
+    maxWidth: 420,
+    lineHeight: 26,
+  },
   button: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -73,9 +93,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.xl,
     marginTop: spacing.md,
   },
+  buttonTablet: {
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing.xl * 1.5,
+  },
   buttonText: {
     fontSize: 17,
     fontWeight: '600',
     color: '#ffffff',
   },
+  buttonTextTablet: {
+    fontSize: 20,
+  },
 });