fixed the budget element and implemented onPress

components/budget/budgetHeader.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
-import TextInputBar from "../common/TextInputBar";
 import { useTheme } from "../../app/contexts/ThemeContext";
+import TextInputBar from "../common/TextInputBar";
 
 type BudgetHeaderProperties = {
     selectedPage: string,
@@ -34,7 +34,7 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
                 }}
             />
         </View>
-        <TextInputBar placeholder='Search...'></TextInputBar>
+        <TextInputBar style={styles.searchBarStyle} placeholder='Search...'></TextInputBar>
     </>);
 }
 
@@ -81,4 +81,8 @@ const styles = StyleSheet.create({
         marginBottom: 20,
         marginTop: 10,
     },
+    searchBarStyle: {
+        marginBottom: 20,
+        marginHorizontal: 10,
+    }
 });

components/budget/categoryItem.tsx

@@ -1,4 +1,5 @@
 import { ColorValue, StyleSheet, Text, View } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
 import { useTheme } from "../../app/contexts/ThemeContext";
 import CustomCard from "../common/CustomCard";
 
@@ -8,6 +9,7 @@ export type CategoryItemProps = {
     allocated_amount: number,
     total_expenses: number,
     category_guid: string, 
+    onPress?: () => void,
 }
 
 const CategoryItem = (properties: CategoryItemProps) => {
@@ -17,40 +19,46 @@ const CategoryItem = (properties: CategoryItemProps) => {
     const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;
 
     return (
-        <CustomCard> 
-            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
-            <View style={[styles.textViewStyle]}>
-                <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
-                  {properties.category}
-                </Text>
-                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
-                  {subText}
-                </Text>
-            </View>
-        </CustomCard>
+        <TouchableOpacity onPress={properties.onPress}>
+            <CustomCard style={styles.customCardStyle}> 
+                <View style={[styles.colorTipStyle, {backgroundColor: "blue"}]}/>
+                <View style={[styles.textViewStyle]}>
+                    <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
+                        {properties.category}
+                    </Text>
+                    <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
+                        {subText}
+                    </Text>
+                </View>
+            </CustomCard>
+        </TouchableOpacity>
     );
 };
 
 export default CategoryItem;
 
 const styles = StyleSheet.create({
+    customCardStyle: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
     colorTipStyle: {
-      width: 25,
-      borderTopLeftRadius: 10,
-      borderBottomLeftRadius: 10,
+        width: 25,
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
     },
     textViewStyle: {
-      flex: 2,
-      flexDirection: "column",
-      paddingVertical: 5,
-      paddingHorizontal: 10,
-      alignSelf: "stretch",
+        flex: 2,
+        flexDirection: "column",
+        paddingVertical: 5,
+        paddingHorizontal: 10,
+        alignSelf: "stretch",
     },
     categoryNameStyle: {
-      fontSize: 30,
-      fontWeight: "bold",
+        fontSize: 30,
+        fontWeight: "bold",
     },
     subTextStyle: {
-      fontSize: 17.5,
+        fontSize: 17.5,
     }
-  })
+});