some clean up and work on the budget screen

app/(tabs)/budget/index.tsx

@@ -1,38 +1,41 @@
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SearchBar } from '../../../components';
 import CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
+import { useThemeColor } from '../../../hooks/useThemeColor';
 
 export default function Page() {
 
-    const styles = StyleSheet.create({
-        container: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-        text: {
-            color: "red",
-            fontSize: 40,
-        }
-    });
+    const containerColor = useThemeColor("containerColor");
+    const textColor = useThemeColor("primaryText");
 
     const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});
 
     return (
-        <SafeAreaView style={styles.container}>
-            <Text style={styles.text}>Expense View</Text>
-            <SearchBar placeholder='Nothing'></SearchBar>
-            
+        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
+            <View>
+                <Text style={[{color: textColor}]}>Expense View</Text>
+                <SearchBar placeholder='Search...'></SearchBar>
+            </View>
             
             <FlatList 
             data={data} 
-            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}>
-
-            </FlatList>
-
-            
+            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
+            keyExtractor={item => item.category_guid}
+            ItemSeparatorComponent={() => {
+                return (<View style={styles.itemSeperatorStyle}/>);
+            }}
+            />
         </SafeAreaView>
     );
-}
+}
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    }
+});