changed the categoryItem component

components/budget/categoryItem.tsx

@@ -15,14 +15,19 @@ 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 style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
+            <View style={[styles.textViewStyle]}>
+                <Text style={[styles.textViewTextStyle, {color: textColor}]}>
+                  {properties.category}
+                </Text>
             </View>
 
 
-            <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
-
+            <View style={[styles.valueViewStyle]}>
+              <Text style={[styles.valueViewTextStyle, {color: textColor}]}>
+                10/100$
+                {/* {properties.allocated_account} */}
+              </Text>
             </View>
         </CustomCard>
     );
@@ -31,23 +36,28 @@ const CategoryItem = (properties: CategoryItemProps) => {
 export default CategoryItem;
 
 const styles = StyleSheet.create({
-    colorTip: {
-      width: 20,
-      borderTopLeftRadius: 20,
-      borderBottomLeftRadius: 20,
+    colorTipStyle: {
+      width: 25,
+      borderTopLeftRadius: 10,
+      borderBottomLeftRadius: 10,
     },
-    textSection: {
-      flexDirection: "column",
-      alignContent: "space-between",
-      alignItems:"flex-start",
+    textViewStyle: {
+      paddingVertical: 5,
       paddingLeft: 10,
-      flex:1,
       alignSelf: "stretch",
-      paddingVertical: 5
     },
-    valueSection: {
-      justifyContent:"center",
-      borderTopRightRadius: 20,
-      borderBottomRightRadius: 20,
+    textViewTextStyle: {
+      fontSize: 30,
+      fontWeight: "bold",
+    },
+    valueViewStyle: {
+      alignSelf: "stretch",
+      flex: 1,
+      flexDirection: "row-reverse", 
+      alignItems: "center",
+      paddingHorizontal: 10,
+    },
+    valueViewTextStyle: {
+      fontSize: 20,
     }
   })