From 9af505ffb3971b782c475755dde53764bedca7ce Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Thu, 24 Apr 2025 16:40:39 +0200
Subject: [PATCH] Tweak login and unlock layout (#771)

---
 mobile-app/app/_layout.tsx |  3 +-
 mobile-app/app/login.tsx   | 76 ++++++++++++++++++++++++++------------
 mobile-app/app/unlock.tsx  | 50 +++++++++++++++++--------
 3 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/mobile-app/app/_layout.tsx b/mobile-app/app/_layout.tsx
index 9868b55e9..042d15222 100644
--- a/mobile-app/app/_layout.tsx
+++ b/mobile-app/app/_layout.tsx
@@ -129,7 +129,7 @@ function RootLayoutNav() {
         headerShown: true,
         animation: 'none',
         headerStyle: {
-          backgroundColor: colors.background,
+          backgroundColor: colors.accentBackground,
         },
         headerTintColor: colors.text,
         headerTitleStyle: {
@@ -140,6 +140,7 @@ function RootLayoutNav() {
         <Stack.Screen name="login" options={{ title: 'Login', headerShown: false }} />
         <Stack.Screen name="sync" options={{ headerShown: false }} />
         <Stack.Screen name="unlock" options={{ headerShown: false }} />
+        <Stack.Screen name="settings" options={{ title: 'Settings', headerShown: true }} />
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="+not-found" options={{ title: 'Not Found' }} />
       </Stack>
diff --git a/mobile-app/app/login.tsx b/mobile-app/app/login.tsx
index 4687ca51d..5911bb6ea 100644
--- a/mobile-app/app/login.tsx
+++ b/mobile-app/app/login.tsx
@@ -16,6 +16,7 @@ import { useColors } from '@/hooks/useColorScheme';
 import Logo from '@/assets/images/logo.svg';
 import { AppInfo } from '@/utils/AppInfo';
 import LoadingIndicator from '@/components/LoadingIndicator';
+import { MaterialIcons } from '@expo/vector-icons';
 
 
 export default function LoginScreen() {
@@ -298,15 +299,26 @@ export default function LoginScreen() {
       marginBottom: 4,
       color: colors.text,
     },
-    input: {
+    inputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '100%',
       borderWidth: 1,
-      borderRadius: 8,
-      padding: 12,
-      fontSize: 16,
       borderColor: colors.accentBorder,
-      color: colors.text,
+      borderRadius: 8,
+      marginBottom: 16,
       backgroundColor: colors.accentBackground,
     },
+    inputIcon: {
+      padding: 10,
+    },
+    input: {
+      flex: 1,
+      height: 45,
+      paddingHorizontal: 4,
+      fontSize: 16,
+      color: colors.text,
+    },
     buttonContainer: {
       gap: 8,
     },
@@ -459,26 +471,42 @@ export default function LoginScreen() {
             ) : (
               <View style={styles.formContainer}>
                 <Text style={[styles.label]}>Username or email</Text>
-                <TextInput
-                  style={[styles.input]}
-                  value={credentials.username}
-                  onChangeText={(text) => setCredentials({ ...credentials, username: text })}
-                  placeholder="name / name@company.com"
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  placeholderTextColor={colors.textMuted}
-                />
+                <View style={styles.inputContainer}>
+                  <MaterialIcons
+                    name="person"
+                    size={24}
+                    color={colors.textMuted}
+                    style={styles.inputIcon}
+                  />
+                  <TextInput
+                    style={styles.input}
+                    value={credentials.username}
+                    onChangeText={(text) => setCredentials({ ...credentials, username: text })}
+                    placeholder="name / name@company.com"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    placeholderTextColor={colors.textMuted}
+                  />
+                </View>
                 <Text style={[styles.label]}>Password</Text>
-                <TextInput
-                  style={[styles.input]}
-                  value={credentials.password}
-                  onChangeText={(text) => setCredentials({ ...credentials, password: text })}
-                  placeholder="Enter your password"
-                  secureTextEntry
-                  placeholderTextColor={colors.textMuted}
-                  autoCorrect={false}
-                  autoCapitalize="none"
-                />
+                <View style={styles.inputContainer}>
+                  <MaterialIcons
+                    name="lock"
+                    size={24}
+                    color={colors.textMuted}
+                    style={styles.inputIcon}
+                  />
+                  <TextInput
+                    style={styles.input}
+                    value={credentials.password}
+                    onChangeText={(text) => setCredentials({ ...credentials, password: text })}
+                    placeholder="Enter your password"
+                    secureTextEntry
+                    placeholderTextColor={colors.textMuted}
+                    autoCorrect={false}
+                    autoCapitalize="none"
+                  />
+                </View>
                 <View style={styles.rememberMeContainer}>
                   <TouchableOpacity
                     style={[styles.checkbox]}
diff --git a/mobile-app/app/unlock.tsx b/mobile-app/app/unlock.tsx
index 0f6be6500..e39dd15ae 100644
--- a/mobile-app/app/unlock.tsx
+++ b/mobile-app/app/unlock.tsx
@@ -11,6 +11,7 @@ import Logo from '@/assets/images/logo.svg';
 import EncryptionUtility from '@/utils/EncryptionUtility';
 import { SrpUtility } from '@/utils/SrpUtility';
 import { useWebApi } from '@/context/WebApiContext';
+import { MaterialIcons } from '@expo/vector-icons';
 
 export default function UnlockScreen() {
   const { isLoggedIn, username, isFaceIDEnabled } = useAuth();
@@ -99,7 +100,7 @@ export default function UnlockScreen() {
     },
     logoContainer: {
       alignItems: 'center',
-      marginBottom: 32,
+      marginBottom: 16,
     },
     logo: {
       width: 200,
@@ -108,9 +109,10 @@ export default function UnlockScreen() {
     title: {
       fontSize: 28,
       fontWeight: 'bold',
-      marginBottom: 8,
+      marginBottom: 16,
       textAlign: 'center',
       color: colors.text,
+      paddingTop: 4,
     },
     avatarContainer: {
       flexDirection: 'row',
@@ -137,17 +139,25 @@ export default function UnlockScreen() {
       opacity: 0.7,
       color: colors.text,
     },
-    input: {
+    inputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
       width: '100%',
-      height: 50,
       borderWidth: 1,
       borderColor: colors.accentBorder,
       borderRadius: 8,
-      paddingHorizontal: 16,
       marginBottom: 16,
+      backgroundColor: colors.accentBackground,
+    },
+    inputIcon: {
+      padding: 12,
+    },
+    input: {
+      flex: 1,
+      height: 50,
+      paddingHorizontal: 16,
       fontSize: 16,
       color: colors.text,
-      backgroundColor: colors.accentBackground,
     },
     button: {
       width: '100%',
@@ -210,16 +220,24 @@ export default function UnlockScreen() {
             </View>
             <ThemedText style={styles.subtitle}>Enter your password to unlock your vault</ThemedText>
 
-            <TextInput
-              style={styles.input}
-              placeholder="Password"
-              placeholderTextColor={colors.textMuted}
-              secureTextEntry
-              value={password}
-              onChangeText={setPassword}
-              autoCapitalize="none"
-              autoCorrect={false}
-            />
+            <View style={styles.inputContainer}>
+              <MaterialIcons
+                name="lock"
+                size={24}
+                color={colors.textMuted}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="Password"
+                placeholderTextColor={colors.textMuted}
+                secureTextEntry
+                value={password}
+                onChangeText={setPassword}
+                autoCapitalize="none"
+                autoCorrect={false}
+              />
+            </View>
 
             <TouchableOpacity
               style={styles.button}