From e714d8563cc4f349c4c7e6c186c9b2111ffe4089 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Tue, 6 May 2025 12:41:53 +0200
Subject: [PATCH] UI tweaks (#771)

---
 .../app/(tabs)/credentials/add-edit.tsx       |  8 +-
 .../app/(tabs)/credentials/index.tsx          |  3 +-
 apps/mobile-app/app/(tabs)/emails/index.tsx   |  3 +-
 .../app/(tabs)/settings/auto-lock.tsx         | 38 +++++----
 apps/mobile-app/app/(tabs)/settings/index.tsx |  5 +-
 .../app/(tabs)/settings/ios-autofill.tsx      | 22 ++---
 .../app/(tabs)/settings/vault-unlock.tsx      |  5 +-
 apps/mobile-app/components/EmailCard.tsx      |  2 -
 .../components/credentials/CredentialCard.tsx |  2 -
 .../form/FormInputCopyToClipboard.tsx         |  2 -
 .../components/form/ValidatedFormField.tsx    |  2 +-
 .../components/ui/CollapsibleHeader.tsx       | 81 ++++++++++++-------
 apps/mobile-app/constants/Colors.ts           | 10 +--
 13 files changed, 104 insertions(+), 79 deletions(-)

diff --git a/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx b/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx
index d832d1531..97579d91a 100644
--- a/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx
+++ b/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx
@@ -439,6 +439,10 @@ export default function AddEditCredentialScreen() : React.ReactNode {
       padding: 10,
       paddingLeft: 0,
     },
+    headerLeftButtonText: {
+      color: colors.primary,
+      fontSize: 20,
+    },
     headerRightButton: {
       padding: 10,
       paddingRight: 0,
@@ -492,7 +496,7 @@ export default function AddEditCredentialScreen() : React.ReactNode {
           onPress={() => router.back()}
           style={styles.headerLeftButton}
         >
-          <ThemedText style={{ color: colors.primary }}>Cancel</ThemedText>
+          <ThemedText style={styles.headerLeftButtonText}>Cancel</ThemedText>
         </TouchableOpacity>
       ),
       /**
@@ -507,7 +511,7 @@ export default function AddEditCredentialScreen() : React.ReactNode {
         </TouchableOpacity>
       ),
     });
-  }, [navigation, mode, handleSubmit, onSubmit, colors.primary, isEditMode, router, styles.headerLeftButton, styles.headerRightButton]);
+  }, [navigation, mode, handleSubmit, onSubmit, colors.primary, isEditMode, router, styles.headerLeftButton, styles.headerLeftButtonText, styles.headerRightButton]);
 
   return (
     <>
diff --git a/apps/mobile-app/app/(tabs)/credentials/index.tsx b/apps/mobile-app/app/(tabs)/credentials/index.tsx
index c334c7a48..6efbc011a 100644
--- a/apps/mobile-app/app/(tabs)/credentials/index.tsx
+++ b/apps/mobile-app/app/(tabs)/credentials/index.tsx
@@ -190,13 +190,12 @@ export default function CredentialsScreen() : React.ReactNode {
     },
     content: {
       flex: 1,
-      marginTop: 36,
       padding: 16,
       paddingTop: 0,
     },
     contentContainer: {
       paddingBottom: 40,
-      paddingTop: 4,
+      paddingTop: 42,
     },
     emptyText: {
       color: colors.textMuted,
diff --git a/apps/mobile-app/app/(tabs)/emails/index.tsx b/apps/mobile-app/app/(tabs)/emails/index.tsx
index 13865b5bd..f0468c1e7 100644
--- a/apps/mobile-app/app/(tabs)/emails/index.tsx
+++ b/apps/mobile-app/app/(tabs)/emails/index.tsx
@@ -165,12 +165,11 @@ export default function EmailsScreen() : React.ReactNode {
     },
     content: {
       flex: 1,
-      marginTop: 22,
       padding: 16,
     },
     contentContainer: {
       paddingBottom: 40,
-      paddingTop: 4,
+      paddingTop: 26,
     },
     emptyText: {
       color: colors.textMuted,
diff --git a/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx b/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx
index af0da40b4..86e3cc8f6 100644
--- a/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx
+++ b/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx
@@ -56,13 +56,16 @@ export default function AutoLockScreen() : React.ReactNode {
       borderBottomWidth: StyleSheet.hairlineWidth,
       flexDirection: 'row',
       paddingHorizontal: 16,
-      paddingVertical: 16,
+      paddingVertical: 14,
     },
     optionContainer: {
       backgroundColor: colors.accentBackground,
       borderRadius: 10,
       margin: 16,
     },
+    optionLast: {
+      borderBottomWidth: 0,
+    },
     optionText: {
       color: colors.text,
       flex: 1,
@@ -83,21 +86,24 @@ export default function AutoLockScreen() : React.ReactNode {
           </ThemedText>
         </View>
         <View style={styles.optionContainer}>
-          {timeoutOptions.map((option) => (
-            <TouchableOpacity
-              key={option.value}
-              style={styles.option}
-              onPress={() => {
-                setAutoLockTimeout(option.value);
-                setAutoLockTimeoutState(option.value);
-              }}
-            >
-              <ThemedText style={styles.optionText}>{option.label}</ThemedText>
-              {autoLockTimeout === option.value && (
-                <Ionicons name="checkmark" size={24} style={styles.selectedIcon} />
-              )}
-            </TouchableOpacity>
-          ))}
+          {timeoutOptions.map((option, index) => {
+            const isLast = index === timeoutOptions.length - 1;
+            return (
+              <TouchableOpacity
+                key={option.value}
+                style={[styles.option, isLast && styles.optionLast]}
+                onPress={() => {
+                  setAutoLockTimeout(option.value);
+                  setAutoLockTimeoutState(option.value);
+                }}
+              >
+                <ThemedText style={styles.optionText}>{option.label}</ThemedText>
+                {autoLockTimeout === option.value && (
+                  <Ionicons name="checkmark" size={20} style={styles.selectedIcon} />
+                )}
+              </TouchableOpacity>
+            );
+          })}
         </View>
       </ThemedScrollView>
     </ThemedView>
diff --git a/apps/mobile-app/app/(tabs)/settings/index.tsx b/apps/mobile-app/app/(tabs)/settings/index.tsx
index bfe8727c3..66b4af021 100644
--- a/apps/mobile-app/app/(tabs)/settings/index.tsx
+++ b/apps/mobile-app/app/(tabs)/settings/index.tsx
@@ -111,12 +111,11 @@ export default function SettingsScreen() : React.ReactNode {
     },
     content: {
       flex: 1,
-      marginTop: 22,
       padding: 16,
     },
     scrollContent: {
       paddingBottom: 40,
-      paddingTop: 4,
+      paddingTop: 26,
     },
     scrollView: {
       flex: 1,
@@ -159,7 +158,7 @@ export default function SettingsScreen() : React.ReactNode {
       alignItems: 'center',
       flex: 1,
       flexDirection: 'row',
-      paddingVertical: 12,
+      paddingVertical: 10,
     },
     settingItemIcon: {
       alignItems: 'center',
diff --git a/apps/mobile-app/app/(tabs)/settings/ios-autofill.tsx b/apps/mobile-app/app/(tabs)/settings/ios-autofill.tsx
index c301114b7..fe97db302 100644
--- a/apps/mobile-app/app/(tabs)/settings/ios-autofill.tsx
+++ b/apps/mobile-app/app/(tabs)/settings/ios-autofill.tsx
@@ -115,16 +115,6 @@ export default function IosAutofillScreen() : React.ReactNode {
                 Open iOS Settings
               </ThemedText>
             </TouchableOpacity>
-            {shouldShowIosAutofillReminder && (
-              <TouchableOpacity
-                style={styles.secondaryButton}
-                onPress={handleAlreadyConfigured}
-              >
-                <ThemedText style={styles.secondaryButtonText}>
-                I already configured it
-                </ThemedText>
-              </TouchableOpacity>
-            )}
           </View>
           <ThemedText style={styles.instructionStep}>
             2. Go to &quot;General&quot;
@@ -141,6 +131,18 @@ export default function IosAutofillScreen() : React.ReactNode {
           <ThemedText style={styles.warningText}>
             Note: You&apos;ll need to authenticate with Face ID/Touch ID or your device passcode when using autofill.
           </ThemedText>
+          <View style={styles.buttonContainer}>
+            {shouldShowIosAutofillReminder && (
+              <TouchableOpacity
+                style={styles.secondaryButton}
+                onPress={handleAlreadyConfigured}
+              >
+                <ThemedText style={styles.secondaryButtonText}>
+                I already configured it
+                </ThemedText>
+              </TouchableOpacity>
+            )}
+          </View>
         </View>
       </ThemedScrollView>
     </ThemedView>
diff --git a/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx b/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx
index 2a2fd7d3f..585ae149e 100644
--- a/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx
+++ b/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx
@@ -156,6 +156,9 @@ export default function VaultUnlockSettingsScreen() : React.ReactNode {
       justifyContent: 'space-between',
       marginBottom: 4,
     },
+    optionLast: {
+      borderBottomWidth: 0,
+    },
     optionText: {
       color: colors.text,
       fontSize: 16,
@@ -197,7 +200,7 @@ export default function VaultUnlockSettingsScreen() : React.ReactNode {
             )}
           </TouchableOpacity>
 
-          <View style={styles.option}>
+          <View style={[styles.option, styles.optionLast]}>
             <View style={styles.optionHeader}>
               <ThemedText style={styles.optionText}>Password</ThemedText>
               <Switch
diff --git a/apps/mobile-app/components/EmailCard.tsx b/apps/mobile-app/components/EmailCard.tsx
index 46ca9b7d4..0fdd36933 100644
--- a/apps/mobile-app/components/EmailCard.tsx
+++ b/apps/mobile-app/components/EmailCard.tsx
@@ -44,9 +44,7 @@ export function EmailCard({ email }: EmailCardProps) : React.ReactNode {
   const styles = StyleSheet.create({
     emailCard: {
       backgroundColor: colors.accentBackground,
-      borderColor: colors.accentBorder,
       borderRadius: 8,
-      borderWidth: 1,
       elevation: 3,
       marginBottom: 12,
       padding: 12,
diff --git a/apps/mobile-app/components/credentials/CredentialCard.tsx b/apps/mobile-app/components/credentials/CredentialCard.tsx
index 864aa8de2..6a2175072 100644
--- a/apps/mobile-app/components/credentials/CredentialCard.tsx
+++ b/apps/mobile-app/components/credentials/CredentialCard.tsx
@@ -37,9 +37,7 @@ export function CredentialCard({ credential }: CredentialCardProps) : React.Reac
   const styles = StyleSheet.create({
     credentialCard: {
       backgroundColor: colors.accentBackground,
-      borderColor: colors.accentBorder,
       borderRadius: 8,
-      borderWidth: 1,
       marginBottom: 8,
       padding: 12,
     },
diff --git a/apps/mobile-app/components/form/FormInputCopyToClipboard.tsx b/apps/mobile-app/components/form/FormInputCopyToClipboard.tsx
index 8b3cd93bf..16d4a5145 100644
--- a/apps/mobile-app/components/form/FormInputCopyToClipboard.tsx
+++ b/apps/mobile-app/components/form/FormInputCopyToClipboard.tsx
@@ -52,9 +52,7 @@ const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> = ({
     },
     inputContainer: {
       backgroundColor: colors.accentBackground,
-      borderColor: colors.accentBorder,
       borderRadius: 8,
-      borderWidth: 1,
       marginBottom: 12,
       padding: 12,
     },
diff --git a/apps/mobile-app/components/form/ValidatedFormField.tsx b/apps/mobile-app/components/form/ValidatedFormField.tsx
index 302ca5785..423e61d58 100644
--- a/apps/mobile-app/components/form/ValidatedFormField.tsx
+++ b/apps/mobile-app/components/form/ValidatedFormField.tsx
@@ -77,7 +77,7 @@ const ValidatedFormFieldComponent = forwardRef<ValidatedFormFieldRef, ValidatedF
       alignItems: 'center',
       backgroundColor: colors.background,
       borderColor: colors.accentBorder,
-      borderRadius: 4,
+      borderRadius: 6,
       borderWidth: 1,
       flexDirection: 'row',
     },
diff --git a/apps/mobile-app/components/ui/CollapsibleHeader.tsx b/apps/mobile-app/components/ui/CollapsibleHeader.tsx
index ca869d165..923c0ac4c 100644
--- a/apps/mobile-app/components/ui/CollapsibleHeader.tsx
+++ b/apps/mobile-app/components/ui/CollapsibleHeader.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
-import { StyleSheet, Platform, Animated, TouchableOpacity } from 'react-native';
+import { StyleSheet, Platform, Animated, TouchableOpacity, useColorScheme } from 'react-native';
 import { Stack } from 'expo-router';
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { BlurView } from 'expo-blur';
 
 import { ThemedText } from '@/components/themed/ThemedText';
 import { useColors } from '@/hooks/useColorScheme';
 
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+
 type HeaderButton = {
   icon: keyof typeof MaterialIcons.glyphMap;
   onPress: () => void;
@@ -29,10 +32,11 @@ export function CollapsibleHeader({
   showNavigationHeader = false,
   alwaysVisible = false,
   headerButtons = []
-}: CollapsibleHeaderProps) : React.ReactNode {
+}: CollapsibleHeaderProps): React.ReactNode {
   const colors = useColors();
+  const colorScheme = useColorScheme();
 
-  // Calculate header opacity based on scroll position and transform
+  // Calculate header opacity and transforms based on scroll
   const headerOpacity = scrollY.interpolate({
     inputRange: [10, 60],
     outputRange: [0, 1],
@@ -45,12 +49,13 @@ export function CollapsibleHeader({
     extrapolate: 'clamp',
   });
 
-  const headerTransform = alwaysVisible ? 0 : headerOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-20, 0],
-  });
+  const headerTransform = alwaysVisible
+    ? 0
+    : headerOpacity.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-20, 0],
+    });
 
-  // Interpolate the header background color and border
   const headerBackground = headerOpacity.interpolate({
     inputRange: [0, 1],
     outputRange: [colors.background, colors.accentBackground],
@@ -63,6 +68,7 @@ export function CollapsibleHeader({
       height: Platform.OS === 'ios' ? 100 : 64,
       justifyContent: 'center',
       left: 0,
+      overflow: 'hidden',
       paddingBottom: Platform.OS === 'ios' ? 12 : 16,
       paddingTop: Platform.OS === 'ios' ? 60 : 0,
       position: 'absolute',
@@ -92,7 +98,6 @@ export function CollapsibleHeader({
     },
     headerButton: {
       bottom: Platform.OS === 'ios' ? 6 : 16,
-      color: colors.primary,
       padding: 4,
       position: 'absolute',
     },
@@ -106,37 +111,53 @@ export function CollapsibleHeader({
 
   return (
     <>
-      {showNavigationHeader ? (
-        <Stack.Screen options={{
-          title: title,
-          headerShown: false,
-        }} />
-      ) : null}
+      {showNavigationHeader && (
+        <Stack.Screen options={{ title, headerShown: false }} />
+      )}
 
       <Animated.View
         style={[
           styles.floatingHeader,
           {
-            backgroundColor: headerBackground,
-            transform: [{
-              translateY: headerTransform
-            }]
-          }
+            transform: [{ translateY: headerTransform }],
+          },
         ]}
       >
-        <Animated.View style={[
-          styles.floatingTitleContainer,
-          { opacity: alwaysVisible ? titleOpacity : headerOpacity },
-        ]}>
+        {Platform.OS === 'ios' ? (
+          colorScheme === 'dark' ? (
+            <AnimatedBlurView
+              tint="dark"
+              intensity={80}
+              style={[StyleSheet.absoluteFill, { opacity: headerOpacity }]}
+            />
+          ) : (
+            <AnimatedBlurView
+              tint="light"
+              intensity={100}
+              style={[StyleSheet.absoluteFill, { opacity: headerOpacity }]}
+            />
+          )
+        ) : (
+          <Animated.View
+            style={[StyleSheet.absoluteFill, { backgroundColor: headerBackground }]}
+          />
+        )}
+
+        <Animated.View
+          style={[
+            styles.floatingTitleContainer,
+            { opacity: alwaysVisible ? titleOpacity : headerOpacity },
+          ]}
+        >
           <ThemedText style={styles.floatingTitle}>{title}</ThemedText>
         </Animated.View>
 
-        {headerButtons.map((button, index) => (
+        {headerButtons.map((button, idx) => (
           <TouchableOpacity
-            key={`${button.icon}-${index}`}
+            key={`${button.icon}-${idx}`}
             style={[
               styles.headerButton,
-              button.position === 'left' ? styles.leftButton : styles.rightButton
+              button.position === 'left' ? styles.leftButton : styles.rightButton,
             ]}
             onPress={button.onPress}
           >
@@ -147,12 +168,10 @@ export function CollapsibleHeader({
         <Animated.View
           style={[
             styles.headerBorder,
-            {
-              opacity: headerOpacity
-            }
+            { opacity: headerOpacity },
           ]}
         />
       </Animated.View>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/mobile-app/constants/Colors.ts b/apps/mobile-app/constants/Colors.ts
index e01638806..4b52d2ca2 100644
--- a/apps/mobile-app/constants/Colors.ts
+++ b/apps/mobile-app/constants/Colors.ts
@@ -30,9 +30,9 @@ export const Colors = {
     white: '#ffffff',
     text: '#ECEDEE',
     textMuted: '#9BA1A6',
-    background: '#111827',
-    accentBackground: '#1f2937',
-    accentBorder: '#4b5563',
+    background: '#000',
+    accentBackground: '#202020',
+    accentBorder: '#444',
     errorBackground: '#3d1a1e',
     errorBorder: '#9c2530',
     errorText: '#fae1e3',
@@ -40,8 +40,8 @@ export const Colors = {
     icon: '#9BA1A6',
     tabIconDefault: '#9BA1A6',
     tabIconSelected: '#f49541',
-    headerBackground: '#1f2937',
-    tabBarBackground: '#1f2937',
+    headerBackground: '#202020',
+    tabBarBackground: '#202020',
     primary: '#f49541',
     primarySurfaceText: '#ffffff',
     secondary: '#6b7280',