v1.0.0

app/(tabs)/_layout.tsx

@@ -1,11 +1,14 @@
-import React from "react";
 import { Ionicons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
+import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { useColorScheme } from "../../hooks/use-color-scheme";
 
 export function DevicesHeader() {
 	const router = useRouter();
+	const isDark = useColorScheme() === "dark";
+	const activityColor = isDark ? "#0A84FF" : "#007AFF";
 
 	return (
 		<View style={styles.headerRight}>
@@ -13,7 +16,7 @@ export function DevicesHeader() {
 				onPress={() => router.push("/scan-devices")}
 				style={styles.headerButton}
 			>
-				<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
+				<Ionicons name="add-circle-outline" size={24} color={activityColor} />
 			</TouchableOpacity>
 		</View>
 	);
@@ -23,12 +26,12 @@ export default function TabsLayout() {
 	return (
 		<NativeTabs>
 			<NativeTabs.Trigger name="index">
-				<Icon sf="desktopcomputer"/>
-        <Label>Devices</Label>
+				<Icon sf="desktopcomputer" />
+				<Label>Devices</Label>
 			</NativeTabs.Trigger>
 			<NativeTabs.Trigger name="settings">
-				<Icon sf="gear"/>
-        <Label>Settings</Label>
+				<Icon sf="gear" />
+				<Label>Settings</Label>
 			</NativeTabs.Trigger>
 		</NativeTabs>
 	);

app/(tabs)/index.tsx

@@ -1,66 +1,111 @@
-import React, { useState, useEffect } from "react";
-import {
-	View,
-	Text,
-	FlatList,
-	TouchableOpacity,
-	StyleSheet,
-	RefreshControl,
-	Alert,
-	ActivityIndicator,
-} from "react-native";
-import { ContextMenu, Button as SwiftUIButton, Host } from "@expo/ui/swift-ui";
-import { useRouter, useLocalSearchParams, Stack } from "expo-router";
+import { ContextMenu, Host, Button as SwiftUIButton } from "@expo/ui/swift-ui";
 import { Ionicons } from "@expo/vector-icons";
+import { SymbolView } from "expo-symbols";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+	ActivityIndicator,
+	Alert,
+	AppState,
+	FlatList,
+	RefreshControl,
+	StyleSheet,
+	Text,
+	TouchableOpacity,
+	View,
+} from "react-native";
+import { useColorScheme } from "../../hooks/use-color-scheme";
 import api from "../../src/services/api";
 import { Device } from "../../src/types";
-
-function DevicesHeader() {
-	const router = useRouter();
-
-	return (
-		<View>
-			<TouchableOpacity onPress={() => router.push("/scan-devices")}>
-				<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
-			</TouchableOpacity>
-		</View>
-	);
-}
+import * as Burnt from "burnt";
 
 export default function DeviceListScreen() {
-	const router = useRouter();
+	const colorScheme = useColorScheme() ?? "light";
+	const isDark = colorScheme === "dark";
+	const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
+	const cardBg = isDark ? "#1c1c1e" : "#fff";
+	const textColor = isDark ? "#ffffff" : "#333333";
+	const subTextColor = isDark ? "#c6c6c8" : "#666666";
+	const activityColor = isDark ? "#0A84FF" : "#007AFF";
+
 	const [devices, setDevices] = useState<Device[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [refreshing, setRefreshing] = useState(false);
 
-	useEffect(() => {
-		loadDevices();
-	}, []);
-
-	const loadDevices = async () => {
+	const fetchDevices = useCallback(async (showLoading = false) => {
 		try {
-			setIsLoading(true);
+			if (showLoading) setIsLoading(true);
 			const data = await api.getDevices();
 			setDevices(data);
 		} catch (error: any) {
-			Alert.alert("Error", error.message || "Failed to load devices");
+			// For background/periodic refreshes, avoid interruptive alerts
+			if (showLoading) {
+				Alert.alert("Error", error.message || "Failed to load devices");
+			}
 		} finally {
-			setIsLoading(false);
+			if (showLoading) setIsLoading(false);
 		}
-	};
+	}, []);
+
+	useEffect(() => {
+		fetchDevices(true);
+	}, [fetchDevices]);
+
+	useEffect(() => {
+		let intervalId: number | null = null;
+
+		const startPolling = () => {
+			if (intervalId !== null) return;
+			intervalId = setInterval(() => {
+				fetchDevices(false);
+			}, 10000) as unknown as number;
+		};
+
+		const stopPolling = () => {
+			if (intervalId !== null) {
+				clearInterval(intervalId);
+				intervalId = null;
+			}
+		};
+
+		// Start polling while app is active; pause when backgrounded
+		startPolling();
+
+		const onAppStateChange = (nextAppState: string) => {
+			if (nextAppState === "active") {
+				startPolling();
+			} else {
+				stopPolling();
+			}
+		};
+
+		const subscription = AppState.addEventListener("change", onAppStateChange);
+
+		return () => {
+			stopPolling();
+			subscription.remove();
+		};
+	}, [fetchDevices]);
 
 	const onRefresh = async () => {
 		setRefreshing(true);
-		await loadDevices();
+		await fetchDevices(false);
 		setRefreshing(false);
 	};
 
 	const handleWake = async (device: Device) => {
 		try {
 			await api.wakeDevice(device.id);
-			Alert.alert("Success", `Wake signal sent to ${device.name}`);
+      Burnt.toast({
+        title: "Success",
+        preset: "done",
+        message: `Waking ${device.name} up.`,
+      });
 		} catch (error: any) {
-			Alert.alert("Error", error.message || "Failed to wake device");
+      Burnt.toast({
+        title: "Error",
+        preset: "error",
+        message: error.message || `Failed to wake up ${device.name}.`,
+      });
 		}
 	};
 
@@ -73,9 +118,17 @@ export default function DeviceListScreen() {
 				onPress: async () => {
 					try {
 						await api.sleepDevice(device.id);
-						Alert.alert("Success", `Sleep signal sent to ${device.name}`);
+						Burnt.toast({
+              title: "Success",
+              preset: "done",
+              message: `Sending ${device.name} to sleep.`,
+            });
 					} catch (error: any) {
-						Alert.alert("Error", error.message || "Failed to sleep device");
+						Burnt.toast({
+              title: "Error",
+              preset: "error",
+              message: error.message || `Failed to send ${device.name} to sleep.`,
+            });
 					}
 				},
 			},
@@ -91,9 +144,17 @@ export default function DeviceListScreen() {
 				onPress: async () => {
 					try {
 						await api.rebootDevice(device.id);
-						Alert.alert("Success", `Reboot signal sent to ${device.name}`);
+						Burnt.toast({
+              title: "Success",
+              preset: "done",
+              message: `Rebooting ${device.name}.`,
+            });
 					} catch (error: any) {
-						Alert.alert("Error", error.message || "Failed to reboot device");
+						Burnt.toast({
+              title: "Error",
+              preset: "error",
+              message: error.message || `Failed to reboot ${device.name}`,
+            });
 					}
 				},
 			},
@@ -112,12 +173,17 @@ export default function DeviceListScreen() {
 					onPress: async () => {
 						try {
 							await api.shutdownDevice(device.id);
-							Alert.alert("Success", `Shutdown signal sent to ${device.name}`);
+              Burnt.toast({
+                title: "Success",
+                preset: "done",
+                message: `Shutting down ${device.name}.`,
+              });
 						} catch (error: any) {
-							Alert.alert(
-								"Error",
-								error.message || "Failed to shutdown device"
-							);
+              Burnt.toast({
+                title: "Error",
+                preset: "error",
+                message: error.message || `Failed to shut down ${device.name}.`,
+              });
 						}
 					},
 				},
@@ -127,16 +193,31 @@ export default function DeviceListScreen() {
 
 	const handleDelete = (device: Device) => {
 		Alert.alert("Delete Device", `Delete "${device.name}"?`, [
+			{
+				text: "Cancel",
+				style: "cancel",
+				onPress: () => {
+					// Close alert
+				},
+			},
 			{
 				text: "Delete",
 				style: "destructive",
 				onPress: async () => {
 					try {
 						await api.deleteDevice(device.id);
-						Alert.alert("Success", "Device deleted successfully");
-						loadDevices();
+            Burnt.toast({
+              title: "Success",
+              preset: "done",
+              message: `Deleted ${device.name} successfully.`,
+            });
+						fetchDevices(false);
 					} catch (error: any) {
-						Alert.alert("Error", error.message || "Failed to delete device");
+            Burnt.toast({
+              title: "Error",
+              preset: "error",
+              message: error.message || `Failed to delete ${device.name}.`,
+            });
 					}
 				},
 			},
@@ -154,6 +235,42 @@ export default function DeviceListScreen() {
 		}
 	};
 
+	const ActionIcon = ({
+		name,
+		symbolName,
+		color,
+		onPress,
+		fallbackName,
+	}: {
+		name: string;
+		symbolName: string;
+		color: string;
+		onPress: () => void;
+		fallbackName?: string;
+	}) => (
+		<TouchableOpacity
+			style={styles.actionIconContainer}
+			onPress={onPress}
+			accessibilityLabel={name}
+			activeOpacity={0.75}
+		>
+			<SymbolView
+				name={symbolName as any}
+				size={20}
+				tintColor={color}
+				type="monochrome"
+				fallback={
+					<Ionicons
+						name={(fallbackName || "ellipse") as any}
+						size={20}
+						color={color}
+					/>
+				}
+				style={styles.actionIcon}
+			/>
+		</TouchableOpacity>
+	);
+
 	const renderDevice = ({ item }: { item: Device }) => (
 		<Host>
 			<ContextMenu activationMethod="longPress">
@@ -167,51 +284,83 @@ export default function DeviceListScreen() {
 					</SwiftUIButton>
 				</ContextMenu.Items>
 				<ContextMenu.Trigger>
-					<View style={styles.deviceCard}>
-						<TouchableOpacity
-							onPress={() => router.push(`/devices/${item.id}`)}
-							activeOpacity={1}
-						>
+					<View
+						style={[
+							styles.deviceCard,
+							{
+								backgroundColor: cardBg,
+								shadowColor: isDark ? "rgba(0,0,0,0.6)" : "#000",
+							},
+						]}
+					>
+						<View>
 							<View style={styles.deviceHeader}>
 								<View style={styles.deviceInfo}>
-									<Text style={styles.deviceName}>{item.name}</Text>
-									<Text style={styles.deviceIP}>{item.ip}</Text>
+									<Text style={[styles.deviceName, { color: textColor }]}>
+										{item.name}
+									</Text>
+									<Text style={[styles.deviceIP, { color: subTextColor }]}>
+										{item.mac}
+									</Text>
 								</View>
-								<View
+								<SymbolView
+									name="circle.fill"
+									size={18}
+									tintColor={getStatusColor(item.status)}
+									animationSpec={{
+										effect: { type: "pulse" },
+										repeating: true,
+										speed: 1,
+									}}
+									fallback={
+										<View
+											style={[
+												styles.statusDot,
+												{ backgroundColor: getStatusColor(item.status) },
+											]}
+										/>
+									}
 									style={[
-										styles.statusDot,
-										{ backgroundColor: getStatusColor(item.status) },
+										styles.statusSymbol,
+										{
+											shadowColor: getStatusColor(item.status),
+											shadowOpacity: isDark ? 0.9 : 0.6,
+										},
 									]}
 								/>
 							</View>
 
 							<View style={styles.deviceActions}>
-								<TouchableOpacity
-									style={[styles.actionButton, styles.wakeButton]}
+								<ActionIcon
+									name="Wake"
+									symbolName="bolt.fill"
+									fallbackName="flash"
+									color="#4CAF50"
 									onPress={() => handleWake(item)}
-								>
-									<Text style={styles.actionButtonText}>Wake</Text>
-								</TouchableOpacity>
-								<TouchableOpacity
-									style={[styles.actionButton, styles.sleepButton]}
+								/>
+								<ActionIcon
+									name="Sleep"
+									symbolName="moon.fill"
+									fallbackName="moon"
+									color="#FF9800"
 									onPress={() => handleSleep(item)}
-								>
-									<Text style={styles.actionButtonText}>Sleep</Text>
-								</TouchableOpacity>
-								<TouchableOpacity
-									style={[styles.actionButton, styles.rebootButton]}
+								/>
+								<ActionIcon
+									name="Reboot"
+									symbolName="arrow.clockwise.circle.fill"
+									fallbackName="refresh"
+									color="#2196F3"
 									onPress={() => handleReboot(item)}
-								>
-									<Text style={styles.actionButtonText}>Reboot</Text>
-								</TouchableOpacity>
-								<TouchableOpacity
-									style={[styles.actionButton, styles.shutdownButton]}
+								/>
+								<ActionIcon
+									name="Shutdown"
+									symbolName="power.circle.fill"
+									fallbackName="power"
+									color="#f44336"
 									onPress={() => handleShutdown(item)}
-								>
-									<Text style={styles.actionButtonText}>Shutdown</Text>
-								</TouchableOpacity>
+								/>
 							</View>
-						</TouchableOpacity>
+						</View>
 					</View>
 				</ContextMenu.Trigger>
 			</ContextMenu>
@@ -221,19 +370,13 @@ export default function DeviceListScreen() {
 	if (isLoading) {
 		return (
 			<View style={styles.loadingContainer}>
-				<ActivityIndicator size="large" color="#007AFF" />
+				<ActivityIndicator size="large" color={activityColor} />
 			</View>
 		);
 	}
 
 	return (
-		<View style={styles.container}>
-			<Stack.Screen
-				options={{
-					title: "Devices",
-					headerRight: () => <DevicesHeader />,
-				}}
-			/>
+		<View style={[styles.container, { backgroundColor: bgColor }]}>
 			<FlatList
 				data={devices}
 				renderItem={renderDevice}
@@ -244,7 +387,9 @@ export default function DeviceListScreen() {
 				}
 				ListEmptyComponent={
 					<View style={styles.emptyContainer}>
-						<Text style={styles.emptyText}>No devices found</Text>
+						<Text style={[styles.emptyText, { color: subTextColor }]}>
+							No devices found
+						</Text>
 					</View>
 				}
 			/>
@@ -271,12 +416,13 @@ const styles = StyleSheet.create({
 	},
 	list: {
 		padding: 15,
+		gap: 15,
 	},
 	deviceCard: {
 		backgroundColor: "#fff",
 		borderRadius: 12,
 		padding: 15,
-		marginBottom: 15,
+		paddingRight: 25,
 		shadowColor: "#000",
 		shadowOffset: { width: 0, height: 2 },
 		shadowOpacity: 0.1,
@@ -309,14 +455,27 @@ const styles = StyleSheet.create({
 	},
 	deviceActions: {
 		flexDirection: "row",
-		justifyContent: "space-between",
-		gap: 8,
-	},
-	actionButton: {
-		flex: 1,
-		paddingVertical: 10,
-		borderRadius: 8,
 		alignItems: "center",
+		justifyContent: "flex-start",
+		marginTop: 8,
+		paddingBottom: 6,
+	},
+	actionIconContainer: {
+		padding: 6,
+		marginRight: 12,
+		justifyContent: "center",
+		alignItems: "center",
+		minWidth: 36,
+		minHeight: 36,
+	},
+	actionIcon: {
+		width: 22,
+		height: 22,
+	},
+	actionButtonText: {
+		color: "#fff",
+		fontWeight: "600",
+		fontSize: 12,
 	},
 	wakeButton: {
 		backgroundColor: "#4CAF50",
@@ -330,10 +489,14 @@ const styles = StyleSheet.create({
 	shutdownButton: {
 		backgroundColor: "#f44336",
 	},
-	actionButtonText: {
-		color: "#fff",
-		fontWeight: "600",
-		fontSize: 12,
+	statusSymbol: {
+		width: 18,
+		height: 18,
+		borderRadius: 9,
+		shadowOffset: { width: 0, height: 0 },
+		shadowOpacity: 0.6,
+		shadowRadius: 8,
+		elevation: 6,
 	},
 	emptyContainer: {
 		alignItems: "center",

app/(tabs)/settings.tsx

@@ -1,231 +1,251 @@
-import React from 'react';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import React from "react";
 import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  TouchableOpacity,
-  Alert,
-} from 'react-native';
-import { useAuth } from '../../src/context/AuthContext';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+	Alert,
+	ScrollView,
+	StyleSheet,
+	Text,
+	TouchableOpacity,
+	View,
+} from "react-native";
+import { useColorScheme } from "../../hooks/use-color-scheme";
+import { useAuth } from "../../src/context/AuthContext";
+import { useRouter } from "expo-router";
 
 export default function SettingsScreen() {
-  const { user, logout } = useAuth();
+	const { user, serverAddress, logout } = useAuth();
+	const router = useRouter();
+	const colorScheme = useColorScheme() ?? "light";
+	const isDark = colorScheme === "dark";
+	const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
+	const sectionBg = isDark ? "#1c1c1e" : "#fff";
+	const sectionTitleBg = isDark ? "#111111" : "#f9f9f9";
+	const textColor = isDark ? "#fff" : "#333";
+	const subTextColor = isDark ? "#c6c6c8" : "#666";
+	const primary = isDark ? "#0A84FF" : "#007AFF";
+	const destructiveColor = "#f44336";
 
-  const handleLogout = () => {
-    Alert.alert(
-      'Logout',
-      'Are you sure you want to logout?',
-      [
-        { text: 'Cancel', style: 'cancel' },
-        {
-          text: 'Logout',
-          style: 'destructive',
-          onPress: async () => {
-            await logout();
-          },
-        },
-      ]
-    );
-  };
+	const handleLogout = () => {
+		Alert.alert("Logout", "Are you sure you want to logout?", [
+			{ text: "Cancel", style: "cancel" },
+			{
+				text: "Logout",
+				style: "destructive",
+				onPress: async () => {
+					router.replace("/login");
+					await logout();
+				},
+			},
+		]);
+	};
 
-  const handleClearData = () => {
-    Alert.alert(
-      'Clear Data',
-      'This will clear all stored data. Are you sure?',
-      [
-        { text: 'Cancel', style: 'cancel' },
-        {
-          text: 'Clear',
-          style: 'destructive',
-          onPress: async () => {
-            try {
-              await AsyncStorage.clear();
-              Alert.alert('Success', 'All data cleared');
-            } catch (error) {
-              Alert.alert('Error', 'Failed to clear data');
-            }
-          },
-        },
-      ]
-    );
-  };
+	const SettingItem = ({
+		label,
+		value,
+		onPress,
+	}: {
+		label: string;
+		value?: string;
+		onPress?: () => void;
+	}) => (
+		<TouchableOpacity
+			style={[
+				styles.settingItem,
+				{ borderBottomColor: isDark ? "rgba(255,255,255,0.03)" : "#f0f0f0" },
+			]}
+			onPress={onPress}
+			disabled={!onPress}
+			activeOpacity={onPress ? 0.7 : 1}
+		>
+			<Text style={[styles.settingLabel, { color: textColor }]}>{label}</Text>
+			<View style={styles.settingValueContainer}>
+				<Text
+					style={[styles.settingValue, { color: subTextColor }]}
+					numberOfLines={1}
+				>
+					{value}
+				</Text>
+			</View>
+		</TouchableOpacity>
+	);
 
-  const SettingItem = ({ 
-    label, 
-    value, 
-    onPress 
-  }: { 
-    label: string; 
-    value?: string; 
-    onPress?: () => void;
-  }) => (
-    <TouchableOpacity
-      style={styles.settingItem}
-      onPress={onPress}
-      disabled={!onPress}
-      activeOpacity={onPress ? 0.7 : 1}
-    >
-      <Text style={styles.settingLabel}>{label}</Text>
-      <View style={styles.settingValueContainer}>
-        <Text style={styles.settingValue} numberOfLines={1}>
-          {value || 'N/A'}
-        </Text>
-      </View>
-    </TouchableOpacity>
-  );
+	const ActionButton = ({
+		title,
+		onPress,
+		destructive = false,
+	}: {
+		title: string;
+		onPress: () => void;
+		destructive?: boolean;
+	}) => (
+		<TouchableOpacity
+			style={[
+				styles.actionButton,
+				{ backgroundColor: destructive ? destructiveColor : primary },
+			]}
+			onPress={onPress}
+		>
+			<Text style={styles.actionButtonText}>{title}</Text>
+		</TouchableOpacity>
+	);
 
-  const ActionButton = ({
-    title,
-    onPress,
-    destructive = false,
-  }: {
-    title: string;
-    onPress: () => void;
-    destructive?: boolean;
-  }) => (
-    <TouchableOpacity
-      style={[styles.actionButton, destructive && styles.actionButtonDestructive]}
-      onPress={onPress}
-    >
-      <Text
-        style={[
-          styles.actionButtonText,
-          destructive && styles.actionButtonTextDestructive,
-        ]}
-      >
-        {title}
-      </Text>
-    </TouchableOpacity>
-  );
+	return (
+		<ScrollView style={[styles.container, { backgroundColor: bgColor }]}>
+			<View style={styles.content}>
+				<View
+					style={[
+						styles.section,
+						{
+							backgroundColor: sectionBg,
+							shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
+						},
+					]}
+				>
+					<Text
+						style={[
+							styles.sectionTitle,
+							{ color: subTextColor, backgroundColor: sectionTitleBg },
+						]}
+					>
+						User Information
+					</Text>
+					<SettingItem label="Username" value={user?.username || "Admin"} />
+					<SettingItem label="Email" value={user?.email || "N/A"} />
+					<SettingItem label="Server URL" value={serverAddress || "N/A"} />
+				</View>
 
-  return (
-    <ScrollView style={styles.container}>
-      <View style={styles.content}>
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>User Information</Text>
-          <SettingItem label="Username" value={user?.username || 'N/A'} />
-          <SettingItem label="Email" value={user?.email || 'N/A'} />
-          <SettingItem 
-            label="User ID" 
-            value={user?.id || 'N/A'} 
-          />
-        </View>
+				<View
+					style={[
+						styles.section,
+						{
+							backgroundColor: sectionBg,
+							shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
+						},
+					]}
+				>
+					<Text
+						style={[
+							styles.sectionTitle,
+							{ color: subTextColor, backgroundColor: sectionTitleBg },
+						]}
+					>
+						App Info
+					</Text>
+					<SettingItem label="Version" value="1.0.0" />
+					<SettingItem label="Build" value="Expo" />
+				</View>
 
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Server</Text>
-          <SettingItem 
-            label="Server URL" 
-            value="https://wol.f6knight.duckdns.org" 
-          />
-          <SettingItem 
-            label="API Base" 
-            value="/api" 
-          />
-        </View>
+				<View
+					style={[
+						styles.section,
+						{
+							backgroundColor: sectionBg,
+							shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
+						},
+					]}
+				>
+					<Text
+						style={[
+							styles.sectionTitle,
+							{ color: subTextColor, backgroundColor: sectionTitleBg },
+						]}
+					>
+						Actions
+					</Text>
+					<ActionButton title="Logout" onPress={handleLogout} destructive />
+				</View>
 
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>App Info</Text>
-          <SettingItem label="Version" value="1.0.0" />
-          <SettingItem label="Build" value="Expo" />
-        </View>
-
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Actions</Text>
-          <ActionButton title="Logout" onPress={handleLogout} destructive />
-          <ActionButton title="Clear All Data" onPress={handleClearData} destructive />
-        </View>
-
-        <View style={styles.footer}>
-          <Text style={styles.footerText}>
-            UpSnap Mobile App
-          </Text>
-          <Text style={styles.footerText}>
-            Connect to your UpSnap server
-          </Text>
-        </View>
-      </View>
-    </ScrollView>
-  );
+				<View style={styles.footer}>
+					<Text style={[styles.footerText, { color: subTextColor }]}>
+						UpSnap Mobile App
+					</Text>
+					<Text style={[styles.footerText, { color: subTextColor }]}>
+						Connect to your UpSnap server
+					</Text>
+				</View>
+			</View>
+		</ScrollView>
+	);
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    padding: 20,
-  },
-  section: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    marginBottom: 20,
-    overflow: 'hidden',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  sectionTitle: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#666',
-    paddingHorizontal: 15,
-    paddingTop: 15,
-    paddingBottom: 10,
-    backgroundColor: '#f9f9f9',
-  },
-  settingItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 15,
-    paddingVertical: 15,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-  },
-  settingLabel: {
-    fontSize: 16,
-    color: '#333',
-    flex: 1,
-  },
-  settingValueContainer: {
-    flex: 1,
-    alignItems: 'flex-end',
-  },
-  settingValue: {
-    fontSize: 14,
-    color: '#666',
-    maxWidth: 200,
-  },
-  actionButton: {
-    backgroundColor: '#007AFF',
-    margin: 15,
-    padding: 15,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  actionButtonDestructive: {
-    backgroundColor: '#f44336',
-  },
-  actionButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  actionButtonTextDestructive: {
-    color: '#fff',
-  },
-  footer: {
-    alignItems: 'center',
-    paddingVertical: 30,
-  },
-  footerText: {
-    fontSize: 14,
-    color: '#999',
-    marginBottom: 5,
-  },
+	container: {
+		flex: 1,
+		backgroundColor: "#f5f5f5",
+	},
+	content: {
+		padding: 20,
+	},
+	section: {
+		backgroundColor: "#fff",
+		borderRadius: 12,
+		marginBottom: 20,
+		overflow: "hidden",
+		shadowColor: "#000",
+		shadowOffset: { width: 0, height: 2 },
+		shadowOpacity: 0.1,
+		shadowRadius: 4,
+		elevation: 3,
+	},
+	sectionTitle: {
+		fontSize: 14,
+		fontWeight: "bold",
+		color: "#666",
+		paddingHorizontal: 15,
+		paddingTop: 15,
+		paddingBottom: 10,
+		backgroundColor: "#f9f9f9",
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+	},
+	settingItem: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		paddingHorizontal: 15,
+		paddingVertical: 15,
+		borderBottomWidth: 1,
+		borderBottomColor: "#f0f0f0",
+	},
+	settingLabel: {
+		fontSize: 16,
+		color: "#333",
+		flex: 1,
+	},
+	settingValueContainer: {
+		flex: 1,
+		alignItems: "flex-end",
+	},
+	settingValue: {
+		fontSize: 14,
+		color: "#666",
+		maxWidth: 200,
+	},
+	actionButton: {
+		backgroundColor: "#007AFF",
+		margin: 15,
+		padding: 15,
+		borderRadius: 8,
+		alignItems: "center",
+	},
+	actionButtonDestructive: {
+		backgroundColor: "#f44336",
+	},
+	actionButtonText: {
+		color: "#fff",
+		fontSize: 16,
+		fontWeight: "bold",
+	},
+	actionButtonTextDestructive: {
+		color: "#fff",
+	},
+	footer: {
+		alignItems: "center",
+		paddingVertical: 30,
+	},
+	footerText: {
+		fontSize: 14,
+		color: "#999",
+		marginBottom: 5,
+	},
 });