days display as jauges

components/add_depense.js

 
 
 const add_depenses_styles = StyleSheet.create({
+    
     overlay: {
         height: "100%",
         width: "100%",
         position: 'absolute',
+        // display:"flex",
+        // justifyContent: "center",
+        // elevation:10,
     },
     
     button_add: {
         borderWidth: 1,
+        borderRadius: 25,
         padding: 10,
         backgroundColor: "#FFFFFF",
         elevation:5,
+        width: "100%",
+        height: "100%",
+        justifyContent: 'center',
+        alignItems: 'center',
+        
     },
     button_add_parent: {
         position: 'absolute',
         bottom: 10,
         right: 10,
+        width:50,
+        height:50,
     }
 });

components/depense_edit/depense_form.js

         display: 'flex',
         flexDirection: 'column',
         justifyContent: "space-between",
-        borderWidth: 1,
+        // borderWidth: 5,
+        // borderRadius: 5,
     },
     form_entry :{
         display: 'flex',
     input :{
         width: "50%",
         borderWidth: 1,
+        // borderRadius: 5,
+
         textAlign: 'center',
     },
     button_add: {
         borderWidth: 1,
+        // borderRadius: 5,
         padding: 10,
         margin: 1,
     },

components/depenses_list.js

 
 
     return(
-    <SafeAreaView >
+    <View>
+    <SafeAreaView>
             {content}
-    </SafeAreaView >
+    </SafeAreaView>
+    </View>
     )
 }
 

components/list/day_list.js

 import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
 import DepenseListEntry from '../depense_list_entry';
 import { strLPad } from '../../utils/util';
+import { LinearGradient } from 'expo-linear-gradient';
 
 export default function DayList(props)
 {
         )
         total += depense.value;
     });
-    
+    let scale = Math.min(1, total/props.dailyObjective)
+
 
     let result = props.dailyObjective - total 
     let text_color = "#000000";
 
     return (
         <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}, isCurrentday ? day_list_styles.current_day_container : null]}>
+            <LinearGradient
+                colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFF','#FFFFFF', '#FFFFFF']}
+                locations={[scale, scale+0.05, 1]}
+                end={{x:1,y:0}}
+                style={day_list_styles.background}
+            />
             <Pressable 
                 style={day_list_styles.day_list_entry}
                 onPress={() => {onToggleDepenses(!showDepenses)}}>
 const day_list_styles = StyleSheet.create({
     day_list_container: {
         // borderWidth: 1,
-        margin: 1,
-        marginTop: 15,
-        elevation: 5,
+        // margin: 1,
+        // marginTop: 5,
+        // marginBottom: 15,
+        // elevation: 5,
         
     },
     current_day_container: {
     day_list_day: {
         fontWeight: '900',
         margin: 4,
+    },
+    background: {
+        position: 'absolute',
+        width: '100%',
+        height: "100%",
     }
 });