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({
+    const containerColor = useThemeColor("containerColor");
-        container: {
+    const textColor = useThemeColor("primaryText");
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-        text: {
-            color: "red",
-            fontSize: 40,
-        }
-    });
 
     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}>
+        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
-            <Text style={styles.text}>Expense View</Text>
+            <View>
-            <SearchBar placeholder='Nothing'></SearchBar>
+                <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}/>}>
+            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
-
+            keyExtractor={item => item.category_guid}
-            </FlatList>
+            ItemSeparatorComponent={() => {
-
+                return (<View style={styles.itemSeperatorStyle}/>);
-            
+            }}
+            />
         </SafeAreaView>
     );
 }
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    }
+});

app/(tabs)/home/index.tsx

@@ -38,26 +38,7 @@ const constructMarkedDates = (data : {[column: string]: any}) => {
 export default function Page() {
     const { colors, theme } = useTheme()
 
-    //Styles
+    
-    const styles = StyleSheet.create({
-        safeAreaViewStyle: {
-            flex: 1, 
-            backgroundColor: colors.backgroundColor
-        },
-        container: {
-            flex: 1,
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        text: {
-            color: colors.primaryText,
-            fontSize: 70,
-            fontWeight: "bold"
-        },
-        loading: {
-            color: "red",
-        }
-    });
 
     const router = useRouter();
     const [plusShow, setPlusShow] = useState(true);
@@ -91,7 +72,7 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView edges={["left", "right", "top"]} style={styles.safeAreaViewStyle}>
+        <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
             {plusShow && <Plus onPress={()=>{
                 // router.push("/(tabs)/home/addItem");
 
@@ -130,11 +111,21 @@ export default function Page() {
             }
             renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={"10,00$"}/>}
             keyExtractor={item => item.expense_guid}
-            ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
+            ItemSeparatorComponent={() => {
+                return (<View style={styles.itemSeperatorStyle}/>);
+            }}
             onScroll={handleScroll}
             scrollEventThrottle={20}
-            >
+            />             
-            </FlatList>            
         </SafeAreaView> 
     );
 }
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    }
+});

components/budget/categoryItem.tsx

@@ -1,4 +1,4 @@
-import { ColorValue, StyleSheet, View } from "react-native";
+import { ColorValue, StyleSheet, Text, View } from "react-native";
 import { useThemeColor } from "../../hooks/useThemeColor";
 import CustomCard from "../common/CustomCard";
 
@@ -15,10 +15,9 @@ const CategoryItem = (properties: CategoryItemProps) => {
 
     return (
         <CustomCard>
+            <View style={[styles.colorTip, {backgroundColor: properties.color}]}></View>
             <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
-
+                <Text style={[styles.textSection, {color: textColor}]}>{properties.category}</Text>
-
-
             </View>
 
 
@@ -32,6 +31,11 @@ const CategoryItem = (properties: CategoryItemProps) => {
 export default CategoryItem;
 
 const styles = StyleSheet.create({
+    colorTip: {
+      width: 20,
+      borderTopLeftRadius: 20,
+      borderBottomLeftRadius: 20,
+    },
     textSection: {
       flexDirection: "column",
       alignContent: "space-between",
@@ -46,4 +50,4 @@ const styles = StyleSheet.create({
       borderTopRightRadius: 20,
       borderBottomRightRadius: 20,
     }
-});
+  })