Polished up some UI and added dark/light mode

FastNotes/components/social-auth-buttons/sign-out-button.tsx

@@ -1,7 +1,8 @@
 import { supabase } from '@/libs/supabase'
 import { router } from 'expo-router'
 import React from 'react'
-import { Button } from 'react-native'
+import { Pressable, StyleSheet, Text } from 'react-native'
+import { useAppTheme } from '@/src/theme/AppThemeProvider'
 
 async function onSignOutButtonPress() {
   const { error } = await supabase.auth.signOut()
@@ -15,5 +16,27 @@ async function onSignOutButtonPress() {
 }
 
 export default function SignOutButton() {
-  return <Button title="Sign out" onPress={onSignOutButtonPress} />
+  const { palette } = useAppTheme()
+
+  return (
+    <Pressable
+      onPress={onSignOutButtonPress}
+      style={[styles.button, { borderColor: palette.border, backgroundColor: palette.elevated }]}
+    >
+      <Text style={[styles.text, { color: palette.text }]}>Sign out</Text>
+    </Pressable>
+  )
 }
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 1,
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+})

FastNotes/components/themed-text.tsx

@@ -1,12 +1,12 @@
-import { StyleSheet, Text, type TextProps } from 'react-native';
+import { StyleSheet, Text, type TextProps } from 'react-native'
 
-import { useThemeColor } from '@/hooks/use-theme-color';
+import { useThemeColor } from '@/hooks/use-theme-color'
 
 export type ThemedTextProps = TextProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
-};
+  lightColor?: string
+  darkColor?: string
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'
+}
 
 export function ThemedText({
   style,
@@ -15,7 +15,7 @@ export function ThemedText({
   type = 'default',
   ...rest
 }: ThemedTextProps) {
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text')
 
   return (
     <Text
@@ -30,7 +30,7 @@ export function ThemedText({
       ]}
       {...rest}
     />
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -57,4 +57,4 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: '#0a7ea4',
   },
-});
+})

FastNotes/components/themed-view.tsx

@@ -1,14 +1,14 @@
-import { View, type ViewProps } from 'react-native';
+import { View, type ViewProps } from 'react-native'
 
-import { useThemeColor } from '@/hooks/use-theme-color';
+import { useThemeColor } from '@/hooks/use-theme-color'
 
 export type ThemedViewProps = ViewProps & {
-  lightColor?: string;
-  darkColor?: string;
-};
+  lightColor?: string
+  darkColor?: string
+}
 
 export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background')
 
-  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />
 }