This commit is contained in:
2026-02-11 13:03:22 +01:00
parent d7e30ce781
commit da9ba3094c
3 changed files with 25 additions and 29 deletions
-1
View File
@@ -15,7 +15,6 @@ export default function App() {
const [isSplashFinished, setSplashFinished] = useState(false); const [isSplashFinished, setSplashFinished] = useState(false);
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
// Fix for white background behind modals
const backgroundColor = colorScheme === 'dark' ? AppDarkTheme.colors.background : AppLightTheme.colors.background; const backgroundColor = colorScheme === 'dark' ? AppDarkTheme.colors.background : AppLightTheme.colors.background;
SystemUI.setBackgroundColorAsync(backgroundColor); SystemUI.setBackgroundColorAsync(backgroundColor);
+15 -17
View File
@@ -1,8 +1,6 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Platform, useColorScheme, Image } from 'react-native'; import { View, Text, TouchableOpacity, StyleSheet, Platform, useColorScheme, Image } from 'react-native';
import * as AppleAuthentication from 'expo-apple-authentication';
import { FontAwesome } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons';
import { COLORS } from '../theme/colors';
interface SocialButtonsProps { interface SocialButtonsProps {
onGooglePress: () => void; onGooglePress: () => void;
@@ -17,35 +15,35 @@ export default function SocialButtons({ onGooglePress, onFacebookPress, onAppleP
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.divider, { color: isDark ? '#a0aec0' : '#888' }]}>Or continue with</Text> <Text style={[styles.divider, { color: isDark ? '#a0aec0' : '#888' }]}>Or continue with</Text>
<View style={styles.row}> <View style={styles.row}>
{/* Google Button - Multicolored Image */} {/* Google Button */}
<TouchableOpacity <TouchableOpacity
style={[styles.circleButton, { backgroundColor: 'white' }]} style={[styles.circleButton, { backgroundColor: 'white' }]}
onPress={onGooglePress} onPress={onGooglePress}
> >
<Image <Image
source={require('../../assets/icons/google.png')} source={require('../../assets/icons/google.png')}
style={{ width: 24, height: 24 }} style={{ width: 24, height: 24 }}
resizeMode="contain" resizeMode="contain"
/> />
</TouchableOpacity> </TouchableOpacity>
{/* Facebook Button - White F on Blue Background */} {/* Facebook Button */}
<TouchableOpacity <TouchableOpacity
style={[styles.circleButton, { backgroundColor: '#1877F2', borderWidth: 0 }]} style={[styles.circleButton, { backgroundColor: '#1877F2', borderWidth: 0 }]}
onPress={onFacebookPress} onPress={onFacebookPress}
> >
<FontAwesome name="facebook" size={24} color="white" /> <FontAwesome name="facebook" size={24} color="white" />
</TouchableOpacity> </TouchableOpacity>
{/* Apple Button - White on Black (Light) / Black on White (Dark) */} {/* Apple Button */}
{Platform.OS === 'ios' && ( {Platform.OS === 'ios' && (
<TouchableOpacity <TouchableOpacity
style={[ style={[
styles.circleButton, styles.circleButton,
{ backgroundColor: isDark ? 'white' : 'black', borderWidth: 0 } { backgroundColor: isDark ? 'white' : 'black', borderWidth: 0 }
]} ]}
onPress={onApplePress} onPress={onApplePress}
> >
<FontAwesome name="apple" size={24} color={isDark ? "black" : "white"} /> <FontAwesome name="apple" size={24} color={isDark ? "black" : "white"} />
@@ -89,7 +87,7 @@ const styles = StyleSheet.create({
backgroundColor: 'white', backgroundColor: 'white',
}, },
facebook: { facebook: {
backgroundColor: 'white', backgroundColor: 'white',
}, },
appleLight: { appleLight: {
backgroundColor: 'white', backgroundColor: 'white',
+10 -11
View File
@@ -1,7 +1,6 @@
import React, { useEffect, useRef, useState, useCallback } from 'react'; import React, { useEffect, useRef, useState, useCallback } from 'react';
import { View, StyleSheet, Image, Animated, useColorScheme } from 'react-native'; import { View, StyleSheet, Image, Animated, useColorScheme } from 'react-native';
import * as SplashScreen from 'expo-splash-screen'; import * as SplashScreen from 'expo-splash-screen';
import { COLORS } from '../theme/colors';
interface AnimatedSplashProps { interface AnimatedSplashProps {
onFinish: () => void; onFinish: () => void;
@@ -36,7 +35,7 @@ export default function AnimatedSplash({ onFinish }: AnimatedSplashProps) {
if (isAppReady && isLayoutReady) { if (isAppReady && isLayoutReady) {
// Hide native splash screen // Hide native splash screen
SplashScreen.hideAsync(); SplashScreen.hideAsync();
// Start fade out // Start fade out
Animated.timing(fadeAnim, { Animated.timing(fadeAnim, {
toValue: 0, toValue: 0,
@@ -49,24 +48,24 @@ export default function AnimatedSplash({ onFinish }: AnimatedSplashProps) {
}, [isAppReady, isLayoutReady]); }, [isAppReady, isLayoutReady]);
return ( return (
<Animated.View <Animated.View
style={[ style={[
styles.container, styles.container,
{ {
opacity: fadeAnim, opacity: fadeAnim,
backgroundColor: isDark ? '#000000' : '#ffffff' backgroundColor: isDark ? '#000000' : '#ffffff'
} }
]} ]}
onLayout={onLayoutRootView} onLayout={onLayoutRootView}
> >
<View style={styles.centered}> <View style={styles.centered}>
<Image <Image
source={ source={
isDark isDark
? require('../../assets/icons/splash-icon-light.png') ? require('../../assets/icons/splash-icon-light.png')
: require('../../assets/icons/splash-icon-dark.png') : require('../../assets/icons/splash-icon-dark.png')
} }
style={styles.logo} style={styles.logo}
resizeMode="contain" resizeMode="contain"
/> />
</View> </View>