Moved logout button

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 = () => {
       </ThemedView>
       
       <ThemedView style={styles.section}>
-        <Logout_Button />
       </ThemedView>
     </ParallaxScrollView>
   );

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}
       />
+      <Logout_Button 
+        fontSize={18}
+        fontWeight='semibold'
+        width='90%'
+        style={styles.logoutButton}
+      />
 
     </ThemedView>
   );
@@ -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',
   },

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<PressableProps, 'children'> & {
+  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<ThemedTextButtonProps> = ({
+  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 (
     <ThemedTextButton
-      width={120}
-      height={60}
       text='Logout'
-      fontSize={16}
+      width={width}
+      height={height}
+      fontSize={fontSize}
+      fontWeight={fontWeight}
+      containerStyle={containerStyle}
+      buttonStyle={buttonStyle}
       onPress={() => signOut()}
+      {...restProps}
     />
   );
 };