mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-03-19 07:07:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update light/dark mode styling (#771)

Browse Source
This commit is contained in:
Leendert de Borst
2025-05-05 17:52:27 +02:00
parent 095a3f617e
commit 5a019098e1
10 changed files with 56 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/mobile-app/app/(tabs)/settings/auto-lock.tsx
View File

@@ -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.
</ThemedText>
</View>
{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>
))}
<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>
))}
</View>
</ThemedScrollView>
</ThemedView>
);

7
apps/mobile-app/app/(tabs)/settings/vault-unlock.tsx
View File

@@ -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',

1
apps/mobile-app/app/_layout.tsx
View File

@@ -34,6 +34,7 @@ function RootLayoutNav() : React.ReactNode {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: colors.primary,
background: colors.background,
},
};

5
apps/mobile-app/components/LoadingIndicator.tsx
View File

@@ -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<Animated.CompositeAnimation | null>(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({

5
apps/mobile-app/components/LoadingOverlay.tsx
View File

@@ -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,

2
apps/mobile-app/constants/Colors.ts
View File

@@ -7,7 +7,7 @@ export const Colors = {
light: {
text: '#11181C',
textMuted: '#4b5563',
background: '#ffffff',
background: '#f3f4f6',
accentBackground: '#fff',
accentBorder: '#d1d5db',
errorBackground: '#f8d7da',

14
apps/mobile-app/ios/Autofill/CredentialProviderViewController.swift
View File

@@ -14,9 +14,10 @@ import VaultModels
* logins in the keyboard).
*/
public class CredentialProviderViewController: ASCredentialProviderViewController {
private var hostingController: UIHostingController<CredentialProviderView>?
private var viewModel: CredentialProviderViewModel?
private var isChoosingTextToInsert = false
private var hostingController: UIHostingController<CredentialProviderView>?
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
}
}

4
apps/mobile-app/ios/VaultUI/ColorConstants.swift
View File

@@ -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")

4
apps/mobile-app/ios/VaultUI/Components/CredentialCardView.swift
View File

@@ -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)
}

16
apps/mobile-app/ios/VaultUI/Views/CredentialProviderView.swift
View File

@@ -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")