diff --git a/app/(tabs)/settings/index.tsx b/app/(tabs)/settings/index.tsx index 1f7dd11..8cf6a73 100644 --- a/app/(tabs)/settings/index.tsx +++ b/app/(tabs)/settings/index.tsx @@ -3,7 +3,6 @@ import { useRouter } from 'expo-router'; import ParallaxScrollView from '@/components/default/ParallaxScrollView'; import { ThemedText, ThemedTextButton, ThemedView } from '@/components/theme'; import { IconSymbol } from '@/components/ui/IconSymbol'; -import Logout_Button from '@/components/auth/Logout_Button'; const SettingsScreen = () => { const router = useRouter(); @@ -35,7 +34,6 @@ const SettingsScreen = () => { - ); diff --git a/app/(tabs)/settings/profile.tsx b/app/(tabs)/settings/profile.tsx index ba7812f..6c4dcd0 100644 --- a/app/(tabs)/settings/profile.tsx +++ b/app/(tabs)/settings/profile.tsx @@ -6,6 +6,7 @@ import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/com import { IconSymbol } from '@/components/ui/IconSymbol'; import Avatar from '@/components/auth/Profile_Avatar'; import { Session } from '@supabase/supabase-js' +import Logout_Button from '@/components/auth/Logout_Button'; export default function ProfileScreen() { const [loading, setLoading] = useState(false); @@ -101,6 +102,12 @@ export default function ProfileScreen() { width='90%' style={styles.saveButton} /> + ); @@ -150,7 +157,12 @@ const styles = StyleSheet.create({ marginBottom: 20, }, saveButton: { - paddingVertical: 14, + borderRadius: 8, + alignItems: 'center', + }, + logoutButton: { + backgroundColor: 'red', + marginTop: 50, borderRadius: 8, alignItems: 'center', }, diff --git a/components/auth/Logout_Button.tsx b/components/auth/Logout_Button.tsx index de7a513..fd51a3a 100644 --- a/components/auth/Logout_Button.tsx +++ b/components/auth/Logout_Button.tsx @@ -1,8 +1,33 @@ import { supabase } from '@/lib/supabase'; import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme'; import { Alert, StyleSheet, AppState } from 'react-native'; +import React from 'react'; +import { TextStyle, PressableProps, DimensionValue } from 'react-native'; +import ThemedButton from '@/components/theme/buttons/ThemedButton'; +import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; -const Logout_Button = () => { +// Extend ThemedButton props (which already extends PressableProps) +type ThemedTextButtonProps = Omit & { + width?: DimensionValue; + height?: DimensionValue; + fontSize?: number; + fontWeight?: 'normal' | 'semibold' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; + textStyle?: TextStyle; + containerStyle?: object; + buttonStyle?: object; +}; + +const Logout_Button: React.FC = ({ + width, + height, + fontSize = 16, + fontWeight = 'normal', + textStyle, + containerStyle, + buttonStyle, + ...restProps +}) => { const signOut = async () => { const { error } = await supabase.auth.signOut(); if (error) Alert.alert(error.message); @@ -10,11 +35,15 @@ const Logout_Button = () => { return ( signOut()} + {...restProps} /> ); };