Fix gradient, splash screens

components/pages/todos/AddChore.tsx

@@ -1,64 +1,56 @@
-import { StyleSheet } from "react-native";
-import React, { useState } from "react";
-import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
-import { AntDesign } from "@expo/vector-icons";
+import {StyleSheet} from "react-native";
+import React, {useState} from "react";
+import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
+import {AntDesign} from "@expo/vector-icons";
 import LinearGradient from "react-native-linear-gradient";
 import AddChoreDialog from "./AddChoreDialog";
 
 const AddChore = () => {
+    const [isVisible, setIsVisible] = useState<boolean>(false);
 
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-
-  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)}
+    return (
+        <LinearGradient
+            colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
+            locations={[0, 0.5, 1]}
+            style={styles.gradient}
         >
-          <AntDesign name="plus" size={24} color="white" />
-          <Text white text60R marginL-10>
-            Add To Do
-          </Text>
-        </Button>
-      </View>
-      <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
-    </LinearGradient>
-  );
+            <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 to do
+                    </Text>
+                </Button>
+            </View>
+            <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
+        </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,
-  },
-  topBtn: {
-    backgroundColor: "white",
-    color: "#05a8b6",
-  },
-  rotateSwitch: {
-    marginLeft: 35,
-    marginBottom: 10,
-    marginTop: 25,
-  },
-});
+    gradient: {
+        height: 150,
+        position: "absolute",
+        bottom: 0,
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    buttonContainer: {
+        width: "100%",
+        alignItems: "center",
+    },
+    button: {
+        backgroundColor: "rgb(253, 23, 117)",
+        paddingVertical: 15,
+        paddingHorizontal: 30,
+        borderRadius: 30,
+    },
+});

components/pages/todos/ToDosPage.tsx

@@ -1,79 +1,83 @@
-import { View, Text, Button, ButtonSize } from "react-native-ui-lib";
-import React, { useState } from "react";
+import {Button, Text, View} from "react-native-ui-lib";
+import React, {useState} from "react";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import AddChore from "./AddChore";
 import ProgressCard from "./ProgressCard";
 import ToDosList from "./ToDosList";
-import { Dimensions, ScrollView } from "react-native";
-import { StyleSheet } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
-import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
+import {Dimensions, ScrollView, StyleSheet} from "react-native";
+import {TouchableOpacity} from "react-native-gesture-handler";
+import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
 import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
 import UserChoresProgress from "./user-chores/UserChoresProgress";
 
 const ToDosPage = () => {
-  const [pageIndex, setPageIndex] = useState<number>(0);
-  const { profileData } = useAuthContext();
-  const { width, height } = Dimensions.get("screen");
-  const pageLink = (
-    <TouchableOpacity onPress={() => setPageIndex(1)}>
-      <Text color="#ea156d" style={{ fontSize: 14 }}>
-        View family progress
-      </Text>
-    </TouchableOpacity>
-  );
-  return (
-    <View paddingH-25 backgroundColor="#f9f8f7" height={"100%"} width={width}>
-      {pageIndex == 0 && (
-        <View>
-          <ScrollView
-            showsVerticalScrollIndicator={false}
-            showsHorizontalScrollIndicator={false}
-          >
-            <View>
-              <HeaderTemplate
-                message="Here are your To Do's"
-                isWelcome={true}
-                link={profileData?.userType == ProfileType.PARENT && pageLink}
-              />
-              {profileData?.userType == ProfileType.CHILD && (
-                <View marginB-25>
-                  <ProgressCard
-                    children={
-                      <Button
-                        backgroundColor="transparent"
-                        onPress={() => setPageIndex(2)}
-                      >
-                        <Text
-                          style={{
-                            textDecorationLine: "underline",
-                            color: "#05a8b6",
-                          }}
+    const [pageIndex, setPageIndex] = useState<number>(0);
+    const {profileData} = useAuthContext();
+    const {width, height} = Dimensions.get("screen");
+    const pageLink = (
+        <TouchableOpacity onPress={() => setPageIndex(1)}>
+            <Text color="#ea156d" style={{fontSize: 14}}>
+                View family progress
+            </Text>
+        </TouchableOpacity>
+    );
+    return (
+        <>
+            <View paddingH-25 backgroundColor="#f9f8f7" height={"100%"} width={width}>
+                {pageIndex == 0 && (
+                    <View>
+                        <ScrollView
+                            showsVerticalScrollIndicator={false}
+                            showsHorizontalScrollIndicator={false}
                         >
-                          View your full progress report here
-                        </Text>
-                      </Button>
-                    }
-                  />
-                </View>
-              )}
-              <ToDosList />
+                            <View>
+                                <HeaderTemplate
+                                    message="Here are your To Do's"
+                                    isWelcome={true}
+                                    link={profileData?.userType == ProfileType.PARENT && pageLink}
+                                />
+                                {profileData?.userType == ProfileType.CHILD && (
+                                    <View marginB-25>
+                                        <ProgressCard
+                                            children={
+                                                <Button
+                                                    backgroundColor="transparent"
+                                                    onPress={() => setPageIndex(2)}
+                                                >
+                                                    <Text
+                                                        style={{
+                                                            textDecorationLine: "underline",
+                                                            color: "#05a8b6",
+                                                        }}
+                                                    >
+                                                        View your full progress report here
+                                                    </Text>
+                                                </Button>
+                                            }
+                                        />
+                                    </View>
+                                )}
+                                <ToDosList/>
+                            </View>
+                        </ScrollView>
+                    </View>
+                )}
+                {pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex}/>}
+                {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex}/>}
             </View>
-          </ScrollView>
-          {profileData?.userType == ProfileType.PARENT && <AddChore />}
-        </View>
-      )}
-      {pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex} />}
-      {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
-    </View>
-  );
+            {
+                profileData?.userType == ProfileType.PARENT && <AddChore/>
+            }
+        </>
+    )
+        ;
 };
 
 const styles = StyleSheet.create({
-  linkBtn: {
-    backgroundColor: "transparent",
-    padding: 0,
-  },
+    linkBtn: {
+        backgroundColor: "transparent",
+        padding: 0,
+    },
 });
 
 export default ToDosPage;