changed the categoryItem component

app/(tabs)/stats/index.tsx

@@ -37,7 +37,7 @@ export default function Page() {
         }}>Init Database</Text>
 
         <Text style={styles.text} onPress={() => {
-            addCategory("Expense Category", "green", "expense").then(() => {
+            addCategory("Category", "green", "expense").then(() => {
                 const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
                 executeQuery(getCategoryQuery).then((result) => {
                     if("rows" in result[0]) {
@@ -49,7 +49,7 @@ export default function Page() {
         }}>Add new Category Expense</Text>
 
         <Text style={styles.text} onPress={() => {
-            addCategory("Savings Category", "yellow", "saving").then(() => {
+            addCategory("Category", "yellow", "saving").then(() => {
                 const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
                 executeQuery(getCategoryQuery).then((result) => {
                     if("rows" in result[0]) {

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,
     }
   })

components/common/CustomCard.tsx

@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "stretch",
     alignContent: "space-between",
-    borderRadius: 20,
+    borderRadius: 10,
     marginHorizontal: 10,
   },
   boxShadow: {},