diff --git a/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx b/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx index 302037b79..af0da40b4 100644 --- a/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx +++ b/apps/mobile-app/app/(tabs)/settings/auto-lock.tsx @@ -44,8 +44,6 @@ export default function AutoLockScreen() : React.ReactNode { flex: 1, }, header: { - borderBottomColor: colors.accentBorder, - borderBottomWidth: StyleSheet.hairlineWidth, padding: 16, }, headerText: { @@ -54,13 +52,17 @@ export default function AutoLockScreen() : React.ReactNode { }, option: { alignItems: 'center', - backgroundColor: colors.accentBackground, borderBottomColor: colors.accentBorder, borderBottomWidth: StyleSheet.hairlineWidth, flexDirection: 'row', paddingHorizontal: 16, paddingVertical: 16, }, + optionContainer: { + backgroundColor: colors.accentBackground, + borderRadius: 10, + margin: 16, + }, optionText: { color: colors.text, flex: 1, @@ -80,21 +82,23 @@ export default function AutoLockScreen() : React.ReactNode { Choose how long the app can stay in the background before requiring re-authentication. You'll need to use Face ID or enter your password to unlock the vault again. - {timeoutOptions.map((option) => ( - { - setAutoLockTimeout(option.value); - setAutoLockTimeoutState(option.value); - }} - > - {option.label} - {autoLockTimeout === option.value && ( - - )} - - ))} + + {timeoutOptions.map((option) => ( + { + setAutoLockTimeout(option.value); + setAutoLockTimeoutState(option.value); + }} + > + {option.label} + {autoLockTimeout === option.value && ( + + )} + + ))} + ); diff --git a/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx b/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx index be39539eb..2a2fd7d3f 100644 --- a/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx +++ b/apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx @@ -127,9 +127,8 @@ export default function VaultUnlockSettingsScreen() : React.ReactNode { opacity: 0.5, }, header: { - borderBottomColor: colors.accentBorder, - borderBottomWidth: StyleSheet.hairlineWidth, padding: 16, + paddingBottom: 0, }, headerText: { color: colors.textMuted, @@ -147,7 +146,9 @@ export default function VaultUnlockSettingsScreen() : React.ReactNode { paddingVertical: 12, }, optionContainer: { - backgroundColor: colors.background, + backgroundColor: colors.accentBackground, + borderRadius: 10, + margin: 16, }, optionHeader: { alignItems: 'center', diff --git a/apps/mobile-app/app/_layout.tsx b/apps/mobile-app/app/_layout.tsx index 5de3bb25e..02a59af71 100644 --- a/apps/mobile-app/app/_layout.tsx +++ b/apps/mobile-app/app/_layout.tsx @@ -34,6 +34,7 @@ function RootLayoutNav() : React.ReactNode { ...DefaultTheme, colors: { ...DefaultTheme.colors, + primary: colors.primary, background: colors.background, }, }; diff --git a/apps/mobile-app/components/LoadingIndicator.tsx b/apps/mobile-app/components/LoadingIndicator.tsx index f7c60a141..d27bd52aa 100644 --- a/apps/mobile-app/components/LoadingIndicator.tsx +++ b/apps/mobile-app/components/LoadingIndicator.tsx @@ -1,4 +1,4 @@ -import { StyleSheet, View, Text, Animated } from 'react-native'; +import { StyleSheet, View, Text, Animated, useColorScheme } from 'react-native'; import { useEffect, useRef, useState } from 'react'; import { useColors } from '@/hooks/useColorScheme'; @@ -18,6 +18,7 @@ export default function LoadingIndicator({ status }: LoadingIndicatorProps): Rea const dot4Anim = useRef(new Animated.Value(0)).current; const animationRef = useRef(null); const [dots, setDots] = useState(''); + const colorScheme = useColorScheme(); useEffect(() => { /** @@ -91,7 +92,7 @@ export default function LoadingIndicator({ status }: LoadingIndicatorProps): Rea const statusTrimmed = status.endsWith('|') ? status.slice(0, -1) : status; const shouldShowDots = !status.endsWith('|'); - const backgroundColor = 'transparent'; + const backgroundColor = colorScheme === 'dark' ? 'transparent' : '#fff'; const shadowColor = '#000'; const styles = StyleSheet.create({ diff --git a/apps/mobile-app/components/LoadingOverlay.tsx b/apps/mobile-app/components/LoadingOverlay.tsx index 73357ce3d..281d3222c 100644 --- a/apps/mobile-app/components/LoadingOverlay.tsx +++ b/apps/mobile-app/components/LoadingOverlay.tsx @@ -1,6 +1,7 @@ import { StyleSheet, View } from 'react-native'; import LoadingIndicator from './LoadingIndicator'; +import { useColors } from '@/hooks/useColorScheme'; type LoadingOverlayProps = { status: string; @@ -14,12 +15,12 @@ type LoadingOverlayProps = { * */ export default function LoadingOverlay({ status }: LoadingOverlayProps): React.ReactNode { - const backgroundColor = 'rgba(0,0,0,0.5)'; + const colors = useColors(); const styles = StyleSheet.create({ container: { alignItems: 'center', - backgroundColor: backgroundColor, + backgroundColor: colors.background, bottom: 0, justifyContent: 'center', left: 0, diff --git a/apps/mobile-app/constants/Colors.ts b/apps/mobile-app/constants/Colors.ts index b0ea11e74..e01638806 100644 --- a/apps/mobile-app/constants/Colors.ts +++ b/apps/mobile-app/constants/Colors.ts @@ -7,7 +7,7 @@ export const Colors = { light: { text: '#11181C', textMuted: '#4b5563', - background: '#ffffff', + background: '#f3f4f6', accentBackground: '#fff', accentBorder: '#d1d5db', errorBackground: '#f8d7da', diff --git a/apps/mobile-app/ios/Autofill/CredentialProviderViewController.swift b/apps/mobile-app/ios/Autofill/CredentialProviderViewController.swift index 14692739c..c461e8afd 100644 --- a/apps/mobile-app/ios/Autofill/CredentialProviderViewController.swift +++ b/apps/mobile-app/ios/Autofill/CredentialProviderViewController.swift @@ -14,9 +14,10 @@ import VaultModels * logins in the keyboard). */ public class CredentialProviderViewController: ASCredentialProviderViewController { + private var hostingController: UIHostingController? private var viewModel: CredentialProviderViewModel? private var isChoosingTextToInsert = false - private var hostingController: UIHostingController? + private var initialServiceUrl: String? override public func viewDidLoad() { super.viewDidLoad() @@ -66,7 +67,8 @@ public class CredentialProviderViewController: ASCredentialProviderViewControlle }, cancelHandler: { self.handleCancel() - } + }, + serviceUrl: initialServiceUrl ) self.viewModel = viewModel @@ -91,18 +93,18 @@ public class CredentialProviderViewController: ASCredentialProviderViewControlle } override public func prepareCredentialList(for serviceIdentifiers: [ASCredentialServiceIdentifier]) { - guard let viewModel = self.viewModel else { return } - let matchedDomains = serviceIdentifiers.map { $0.identifier.lowercased() } if let firstDomain = matchedDomains.first { + initialServiceUrl = firstDomain + // Set the search text to the first domain which will auto filter the credentials // to show the most likely credentials first as suggestion. - viewModel.setSearchFilter(firstDomain) + viewModel?.setSearchFilter(firstDomain) // Set the service URL to the first domain which will be used to pass onto the // add credential view when the user taps the "+" button and prefill it with the // domain name. - viewModel.serviceUrl = firstDomain + viewModel?.serviceUrl = firstDomain } } diff --git a/apps/mobile-app/ios/VaultUI/ColorConstants.swift b/apps/mobile-app/ios/VaultUI/ColorConstants.swift index 83140d7ec..931a333d2 100644 --- a/apps/mobile-app/ios/VaultUI/ColorConstants.swift +++ b/apps/mobile-app/ios/VaultUI/ColorConstants.swift @@ -6,8 +6,8 @@ public struct ColorConstants { public struct Light { static let text = SwiftUI.Color(hex: "#11181C") static let textMuted = SwiftUI.Color(hex: "#4b5563") - static let background = SwiftUI.Color(hex: "#ffffff") - static let accentBackground = SwiftUI.Color(hex: "#fff") + static let background = SwiftUI.Color(hex: "#f3f4f6") + static let accentBackground = SwiftUI.Color(hex: "#ffffff") static let accentBorder = SwiftUI.Color(hex: "#d1d5db") static let primary = SwiftUI.Color(hex: "#f49541") static let secondary = SwiftUI.Color(hex: "#6b7280") diff --git a/apps/mobile-app/ios/VaultUI/Components/CredentialCardView.swift b/apps/mobile-app/ios/VaultUI/Components/CredentialCardView.swift index 885a2c31e..04594e6ef 100644 --- a/apps/mobile-app/ios/VaultUI/Components/CredentialCardView.swift +++ b/apps/mobile-app/ios/VaultUI/Components/CredentialCardView.swift @@ -34,7 +34,7 @@ public struct CredentialCard: View { .padding(8) .padding(.horizontal, 8) .padding(.vertical, 2) - .background(colorScheme == .dark ? ColorConstants.Dark.accentBackground : ColorConstants.Light.background) + .background(colorScheme == .dark ? ColorConstants.Dark.accentBackground : ColorConstants.Light.accentBackground) .overlay( RoundedRectangle(cornerRadius: 8) .stroke(colorScheme == .dark ? ColorConstants.Dark.accentBorder : ColorConstants.Light.accentBorder, lineWidth: 1) @@ -97,7 +97,7 @@ public struct CredentialCard: View { Text(copyToastMessage) .padding() .background(Color.black.opacity(0.7)) - .foregroundColor(.white) + .foregroundColor(colorScheme == .dark ? ColorConstants.Dark.accentBackground : ColorConstants.Light.accentBackground) .cornerRadius(8) .padding(.bottom, 20) } diff --git a/apps/mobile-app/ios/VaultUI/Views/CredentialProviderView.swift b/apps/mobile-app/ios/VaultUI/Views/CredentialProviderView.swift index ae158ad93..b3600c15e 100644 --- a/apps/mobile-app/ios/VaultUI/Views/CredentialProviderView.swift +++ b/apps/mobile-app/ios/VaultUI/Views/CredentialProviderView.swift @@ -54,11 +54,13 @@ public struct CredentialProviderView: View { if !viewModel.isChoosingTextToInsert { VStack(spacing: 12) { Button(action: { + var urlString = "net.aliasvault.app://credentials/add-edit" if let serviceUrl = viewModel.serviceUrl { let encodedUrl = serviceUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? "" - if let url = URL(string: "net.aliasvault.app://credentials/add-edit?serviceUrl=\(encodedUrl)") { - UIApplication.shared.open(url, options: [:], completionHandler: nil) - } + urlString += "?serviceUrl=\(encodedUrl)" + } + if let url = URL(string: urlString) { + UIApplication.shared.open(url, options: [:], completionHandler: nil) } }, label: { HStack { @@ -106,11 +108,13 @@ public struct CredentialProviderView: View { ToolbarItem(placement: .navigationBarTrailing) { HStack { Button(action: { + var urlString = "net.aliasvault.app://credentials/add-edit" if let serviceUrl = viewModel.serviceUrl { let encodedUrl = serviceUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? "" - if let url = URL(string: "net.aliasvault.app://credentials/add-edit?serviceUrl=\(encodedUrl)") { - UIApplication.shared.open(url, options: [:], completionHandler: nil) - } + urlString += "?serviceUrl=\(encodedUrl)" + } + if let url = URL(string: urlString) { + UIApplication.shared.open(url, options: [:], completionHandler: nil) } }, label: { Image(systemName: "plus")