slight refactor of all the code, made it so that login and onboarding works, need to add system to validate connections to google photos + NAS before just blindly accepting

Added library home page and navigation bar at the bottom, using emojis as icon placeholders, album page also works.

elipses for settings and icon also work.

src/screens/RegisterScreen.js

@@ -20,60 +20,51 @@ const RegisterScreen = ({ navigation }) => {
   const [confirmPassword, setConfirmPassword] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const validateForm = () => {
+  const handleRegister = async () => {
     if (!username.trim()) {
       Alert.alert('Error', 'Please enter a username');
-      return false;
+      return;
+    }
+    if (username.trim().length < 3) {
+      Alert.alert('Error', 'Username must be at least 3 characters');
+      return;
     }
     if (!email.trim()) {
       Alert.alert('Error', 'Please enter an email');
-      return false;
+      return;
     }
-    if (!email.includes('@')) {
-      Alert.alert('Error', 'Please enter a valid email');
-      return false;
+    if (!email.includes('@') || !email.includes('.')) {
+      Alert.alert('Error', 'Please enter a valid email address');
+      return;
     }
     if (!password.trim()) {
       Alert.alert('Error', 'Please enter a password');
-      return false;
+      return;
     }
     if (password.length < 6) {
       Alert.alert('Error', 'Password must be at least 6 characters');
-      return false;
+      return;
     }
     if (password !== confirmPassword) {
       Alert.alert('Error', 'Passwords do not match');
-      return false;
-    }
-    return true;
-  };
-
-  const handleRegister = async () => {
-    if (!validateForm()) {
       return;
     }
 
     setLoading(true);
     try {
-      await DatabaseService.initDatabase();
-      // Check if email already exists
-      const exists = await DatabaseService.userExists(email);
+      const exists = await DatabaseService.userExists(username.trim(), email.trim().toLowerCase());
       if (exists) {
-        Alert.alert('Error', 'Email already registered');
+        Alert.alert('Error', 'Username or email already taken');
         setLoading(false);
         return;
       }
 
-      // Create new user
-      const userId = await DatabaseService.createUser(username, email, password);
+      const userId = await DatabaseService.createUser(username.trim(), email.trim().toLowerCase(), password);
 
-      Alert.alert('Success', 'Account created successfully!', [
+      Alert.alert('Success', 'Account created!', [
         {
           text: 'OK',
-          onPress: () => {
-            // Navigate to onboarding after successful registration
-            navigation.replace('Onboarding', { userId });
-          },
+          onPress: () => navigation.replace('Onboarding', { userId }),
         },
       ]);
     } catch (error) {
@@ -89,14 +80,12 @@ const RegisterScreen = ({ navigation }) => {
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={styles.container}
     >
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
         <View style={styles.content}>
           <View style={styles.headerContainer}>
+            <Text style={styles.appIcon}>📸</Text>
             <Text style={styles.title}>Create Account</Text>
-            <Text style={styles.subtitle}>Join our photo library</Text>
+            <Text style={styles.subtitle}>Set up your local photo library account</Text>
           </View>
 
           <View style={styles.inputContainer}>
@@ -104,34 +93,36 @@ const RegisterScreen = ({ navigation }) => {
             <TextInput
               style={styles.input}
               placeholder="Choose a username"
-              placeholderTextColor="#999"
+              placeholderTextColor="#9aa0a6"
               value={username}
               onChangeText={setUsername}
               editable={!loading}
               autoCapitalize="none"
+              autoCorrect={false}
             />
 
             <Text style={styles.label}>Email</Text>
             <TextInput
               style={styles.input}
               placeholder="Enter your email"
-              placeholderTextColor="#999"
+              placeholderTextColor="#9aa0a6"
               value={email}
               onChangeText={setEmail}
               editable={!loading}
-              keyboardType="email-address"
               autoCapitalize="none"
+              autoCorrect={false}
+              keyboardType="email-address"
             />
 
             <Text style={styles.label}>Password</Text>
             <TextInput
               style={styles.input}
               placeholder="Create a password (min 6 characters)"
-              placeholderTextColor="#999"
+              placeholderTextColor="#9aa0a6"
               value={password}
               onChangeText={setPassword}
               editable={!loading}
-              secureTextEntry={true}
+              secureTextEntry
               autoCapitalize="none"
             />
 
@@ -139,11 +130,11 @@ const RegisterScreen = ({ navigation }) => {
             <TextInput
               style={styles.input}
               placeholder="Confirm your password"
-              placeholderTextColor="#999"
+              placeholderTextColor="#9aa0a6"
               value={confirmPassword}
               onChangeText={setConfirmPassword}
               editable={!loading}
-              secureTextEntry={true}
+              secureTextEntry
               autoCapitalize="none"
             />
           </View>
@@ -162,11 +153,8 @@ const RegisterScreen = ({ navigation }) => {
 
           <View style={styles.loginContainer}>
             <Text style={styles.loginText}>Already have an account? </Text>
-            <TouchableOpacity
-              onPress={() => navigation.navigate('Login')}
-              disabled={loading}
-            >
-              <Text style={styles.loginLink}>Login here</Text>
+            <TouchableOpacity onPress={() => navigation.navigate('Login')} disabled={loading}>
+              <Text style={styles.loginLink}>Sign in</Text>
             </TouchableOpacity>
           </View>
         </View>
@@ -178,55 +166,59 @@ const RegisterScreen = ({ navigation }) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#fff',
   },
   scrollContent: {
     flexGrow: 1,
     justifyContent: 'center',
   },
   content: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
     paddingVertical: 40,
   },
   headerContainer: {
-    marginBottom: 40,
+    marginBottom: 36,
     alignItems: 'center',
   },
+  appIcon: {
+    fontSize: 56,
+    marginBottom: 16,
+  },
   title: {
-    fontSize: 32,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 10,
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#202124',
+    marginBottom: 8,
   },
   subtitle: {
-    fontSize: 16,
-    color: '#999',
+    fontSize: 15,
+    color: '#5f6368',
+    textAlign: 'center',
   },
   inputContainer: {
-    marginBottom: 30,
+    marginBottom: 24,
   },
   label: {
-    fontSize: 14,
+    fontSize: 13,
     fontWeight: '600',
-    color: '#333',
-    marginBottom: 8,
+    color: '#3c4043',
+    marginBottom: 6,
     marginTop: 16,
   },
   input: {
     borderWidth: 1,
-    borderColor: '#ddd',
+    borderColor: '#dadce0',
     borderRadius: 8,
-    paddingHorizontal: 16,
+    paddingHorizontal: 14,
     paddingVertical: 12,
-    fontSize: 16,
+    fontSize: 15,
     backgroundColor: '#fff',
-    color: '#333',
+    color: '#202124',
   },
   registerButton: {
-    backgroundColor: '#34C759',
+    backgroundColor: '#1a73e8',
     borderRadius: 8,
     paddingVertical: 14,
-    paddingHorizontal: 20,
     alignItems: 'center',
     marginBottom: 20,
   },
@@ -235,7 +227,7 @@ const styles = StyleSheet.create({
   },
   buttonText: {
     color: '#fff',
-    fontSize: 16,
+    fontSize: 15,
     fontWeight: '600',
   },
   loginContainer: {
@@ -244,15 +236,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   loginText: {
-    color: '#666',
+    color: '#5f6368',
     fontSize: 14,
   },
   loginLink: {
-    color: '#007AFF',
+    color: '#1a73e8',
     fontSize: 14,
     fontWeight: '600',
   },
 });
 
 export default RegisterScreen;
-