changes to todo

components/pages/todos/AddChore.tsx

@@ -0,0 +1,103 @@
+import { StyleSheet } from "react-native";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  ButtonSize,
+  View,
+  Text,
+  ActionSheet,
+  TextField,
+  Dialog,
+  Slider,
+} from "react-native-ui-lib";
+import { AntDesign } from "@expo/vector-icons";
+import LinearGradient from "react-native-linear-gradient";
+import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
+
+const AddChore = () => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [points, setPoints] = useState<number>(10);
+
+  useEffect(() => {
+    console.log(points);
+  }, [points]);
+
+  return (
+    <LinearGradient
+      colors={["transparent", "#f9f8f7"]}
+      locations={[0, 0.5]}
+      style={styles.gradient}
+    >
+      <View style={styles.buttonContainer}>
+        <Button
+          marginH-25
+          size={ButtonSize.large}
+          style={styles.button}
+          onPress={() => setIsVisible(!isVisible)}
+        >
+          <AntDesign name="plus" size={24} color="white" />
+          <Text white text60R marginL-10>
+            Create new chore
+          </Text>
+        </Button>
+      </View>
+      <Dialog
+        bottom={true}
+        height={"90%"}
+        panDirection={PanningDirectionsEnum.DOWN}
+        onDismiss={() => setIsVisible(false)}
+        containerStyle={{
+          backgroundColor: "white",
+          width: "100%",
+          alignSelf: "stretch",
+          padding: 0,
+          margin: 0,
+        }}
+        visible={isVisible}
+      >
+        <TextField
+          placeholder="Add chore title"
+          placeholderTextColor="#2d2d30"
+          text60R
+          marginT-15
+        />
+        <View style={styles.divider} />
+        <View marginH-30>
+          <Slider
+            value={points}
+            onValueChange={(value) => setPoints(value)}
+            minimumValue={0}
+            step={10}
+            maximumValue={100}
+          />
+          <View row spread>
+            <Text>0</Text>
+            <Text>50</Text>
+            <Text>100</Text>
+          </View>
+        </View>
+      </Dialog>
+    </LinearGradient>
+  );
+};
+
+export default AddChore;
+
+const styles = StyleSheet.create({
+  divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
+  gradient: {
+    height: "25%",
+    position: "absolute",
+    bottom: 0,
+    width: "100%",
+  },
+  buttonContainer: {
+    position: "absolute",
+    bottom: 25,
+    width: "100%",
+  },
+  button: {
+    backgroundColor: "rgb(253, 23, 117)",
+    paddingVertical: 20,
+  },
+});

components/pages/todos/ToDoItem.tsx

@@ -5,13 +5,13 @@ import { Ionicons } from "@expo/vector-icons";
 
 const ToDoItem = (props: { item: IToDo }) => {
   return (
-    <View centerV backgroundColor="white" padding-15 paddingH-45>
-      <View centerV backgroundColor="white" row spread>
-        <Text text70>{props.item.title}</Text>
+    <View centerV backgroundColor="white" paddingV-10 paddingH-10 marginH-25 marginV-10 style={{borderRadius: 22}}>
+      <View paddingB-5 row spread>
+        <Text text70R>{props.item.title}</Text>
         <Checkbox value={props.item.done} />
       </View>
       <View centerH paddingV-5>
-        <View centerV height={1} width={"100%"} backgroundColor="#e7e7e7" centerH />
+        <View centerV height={2} width={"100%"} backgroundColor="#e7e7e7" centerH />
       </View>
       <View centerH row spread>
         {props.item.points && props.item.points > 0 ? (

components/shared/DrawerButton.tsx

@@ -12,7 +12,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
     <Button
       onPress={props.pressFunc}
       label={props.title}
-      labelStyle={{fontSize: 14}}
+      labelStyle={{ fontSize: 14 }}
       color={props.color}
       backgroundColor="white"
       iconSource={() => (
@@ -27,9 +27,24 @@ const DrawerButton = (props: IDrawerButtonProps) => {
           {props.icon}
         </View>
       )}
-      style={{ aspectRatio: 1, borderRadius: 15, marginBottom: 12, flexDirection: 'column', justifyContent: "space-between", paddingVertical: 15 }}
-    >
-    </Button>
+      style={{
+        aspectRatio: 1,
+        borderRadius: 15,
+        marginBottom: 12,
+        flexDirection: "column",
+        justifyContent: "space-between",
+        paddingVertical: 15,
+
+        // Shadow for iOS
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 10, // This will create a blurry shadow
+
+        // Shadow for Android
+        elevation: 1, 
+      }}
+    ></Button>
   );
 };