ui tweaks

app/_layout.tsx

@@ -21,11 +21,20 @@ import {
   Toast,
   TextProps,
 } from "react-native-ui-lib";
+import functions from "@react-native-firebase/functions";
+import auth from "@react-native-firebase/auth";
+import firestore from "@react-native-firebase/firestore";
 
 SplashScreen.preventAutoHideAsync();
 
 const queryClient = new QueryClient();
 
+if (__DEV__) {
+    functions().useEmulator('localhost', 5001);
+    firestore().useEmulator("localhost", 5471);
+    auth().useEmulator("http://localhost:9099");
+}
+
 type TextStyleBase =
   | "text10"
   | "text20"

assets/svgs/FireworksOrangeIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import Svg, { G, Path, Defs, ClipPath, SvgProps } from "react-native-svg"
+
+const FireworksOrangeIcon: React.FC<SvgProps> = (props) => (
+  <Svg
+    width={props.width || 29}
+    height={props.height || 28}
+    fill="none"
+    {...props}
+  >
+    <G fill={props.color || "#F90"} clipPath="url(#a)">
+      <Path d="M14.573 4.229c.527 0 .885-1.15 1.022-2.31C15.765.468 15.152 0 14.573 0c-.58 0-1.193.467-1.023 1.92.137 1.16.495 2.309 1.023 2.309ZM14.573 22.987c-.528 0-.886 1.15-1.023 2.31-.17 1.452.443 1.92 1.023 1.92.58 0 1.193-.468 1.022-1.92-.137-1.16-.496-2.31-1.022-2.31ZM9.85 5.473c.456-.262.192-1.438-.27-2.51-.578-1.343-1.343-1.44-1.845-1.151-.503.29-.799 1.001.074 2.174.7.935 1.583 1.751 2.04 1.487ZM19.296 21.743c-.456.261-.193 1.438.268 2.51.58 1.343 1.343 1.44 1.846 1.15.502-.289.8-1.001-.074-2.173-.698-.935-1.583-1.751-2.04-1.487ZM4.95 6.845c-1.172-.873-1.884-.576-2.174-.074-.29.503-.192 1.267 1.15 1.846 1.073.461 2.249.724 2.512.269.263-.457-.554-1.343-1.489-2.041ZM25.217 18.6c-1.07-.463-2.247-.724-2.51-.27-.263.458.554 1.343 1.489 2.042 1.172.872 1.883.575 2.172.073.29-.502.193-1.266-1.15-1.845ZM5.193 13.607c0-.526-1.15-.884-2.309-1.021-1.452-.171-1.918.443-1.918 1.021 0 .581.466 1.194 1.918 1.024 1.159-.137 2.31-.496 2.31-1.024ZM26.261 12.585c-1.158.138-2.308.496-2.308 1.023 0 .527 1.15.886 2.308 1.022 1.453.172 1.92-.442 1.92-1.022 0-.58-.467-1.193-1.92-1.023ZM3.927 18.6c-1.343.579-1.44 1.343-1.15 1.845.29.502 1 .8 2.172-.073.935-.699 1.751-1.584 1.488-2.041-.262-.455-1.438-.194-2.51.269ZM25.217 8.617c1.344-.58 1.442-1.343 1.15-1.846-.288-.502-.999-.799-2.171.074-.935.698-1.752 1.584-1.489 2.04.263.456 1.44.194 2.51-.268ZM7.81 23.23c-.874 1.172-.578 1.884-.075 2.174.503.29 1.267.192 1.845-1.15.462-1.073.726-2.25.27-2.511-.457-.264-1.342.552-2.04 1.487ZM21.336 3.986c.874-1.173.578-1.884.074-2.174-.502-.29-1.267-.192-1.846 1.151-.46 1.072-.724 2.248-.268 2.51.456.264 1.342-.552 2.04-1.487ZM13.464 9.362c.398-.106.435-1.04.304-1.938-.164-1.125-.718-1.353-1.153-1.235-.436.114-.803.589-.383 1.645.337.844.838 1.636 1.232 1.528ZM15.682 17.852c-.394.107-.434 1.044-.303 1.941.164 1.125.718 1.353 1.154 1.234.435-.116.802-.59.382-1.644-.336-.844-.837-1.636-1.233-1.53ZM9.14 8.194c-.316.32-.398.91.496 1.617.71.56 1.542.996 1.829.707.29-.29-.144-1.12-.704-1.831-.705-.893-1.3-.811-1.62-.493ZM20.002 19.023c.319-.319.4-.912-.492-1.618-.712-.56-1.54-.994-1.83-.706-.289.29.145 1.12.707 1.831.704.892 1.297.811 1.615.493ZM8.38 12.79c.898.13 1.834.093 1.938-.304.107-.396-.685-.897-1.528-1.233-1.055-.42-1.527-.052-1.645.383-.117.434.11.99 1.234 1.154ZM20.767 14.427c-.898-.13-1.832-.092-1.94.303-.106.396.686.896 1.529 1.232 1.056.42 1.53.053 1.646-.382.118-.436-.11-.99-1.235-1.153ZM8.8 15.95c.842-.336 1.635-.838 1.528-1.235-.105-.393-1.042-.432-1.94-.3-1.124.162-1.352.717-1.234 1.151.116.436.59.803 1.646.385ZM20.346 11.266c-.843.338-1.634.838-1.528 1.233.106.396 1.041.434 1.94.304 1.125-.164 1.352-.72 1.235-1.153-.117-.437-.59-.804-1.647-.384ZM9.649 17.422c-.89.703-.81 1.3-.49 1.617.319.317.912.399 1.616-.493.56-.71.996-1.54.707-1.83-.291-.29-1.12.144-1.833.706ZM19.496 9.796c.892-.705.81-1.3.494-1.617-.319-.32-.914-.4-1.617.493-.563.712-.997 1.542-.707 1.83.289.29 1.118-.146 1.83-.706ZM13.45 17.862c-.394-.106-.896.685-1.232 1.529-.42 1.056-.055 1.53.383 1.645.435.118.99-.11 1.153-1.234.131-.898.091-1.834-.304-1.94ZM16.545 6.18c-.434-.119-.99.11-1.152 1.234-.131.899-.093 1.833.302 1.94.395.107.897-.686 1.233-1.528.42-1.056.055-1.529-.383-1.647ZM12.37 13.607a2.204 2.204 0 1 0 4.407.001 2.204 2.204 0 0 0-4.408 0Z" />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill={props.color || "#fff"} d="M.965 0H28.18v27.216H.965z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+)
+export default FireworksOrangeIcon

assets/svgs/GiftIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+const GiftIcon: React.FC<SvgProps> = (props) => (
+  <Svg width={props.width || 14} height={props.height || 14} fill="none" {...props}>
+    <Path
+      fill={props.color || "#46A80A"}
+      d="M6.09 12.581V8.834H1.872v-.937H6.09V4.149H1.873v8.432H6.09Zm.936 0h4.216V4.15H7.026v3.748h4.216v.937H7.026v3.747ZM.936 3.212H12.18v9.838a.469.469 0 0 1-.468.468H1.405a.468.468 0 0 1-.468-.468V3.212Z"
+    />
+    <Path
+      fill={props.color || "#46A80A"}
+      d="M.468 3.212h12.18c.312 0 .468.157.468.469 0 .312-.156.468-.468.468H.468C.156 4.15 0 3.993 0 3.681c0-.312.156-.469.468-.469Z"
+    />
+    <Path
+      fill={props.color || "#46A80A"}
+      d="M5.153 3.213a.937.937 0 1 0 0-1.874.937.937 0 0 0 0 1.874Zm0 .936a1.874 1.874 0 1 1 0-3.747 1.874 1.874 0 0 1 0 3.747Z"
+    />
+    <Path
+      fill={props.color || "#46A80A"}
+      d="M7.964 3.213a.937.937 0 1 0 0-1.874.937.937 0 0 0 0 1.874Zm0 .936a1.874 1.874 0 1 1 0-3.747 1.874 1.874 0 0 1 0 3.747Z"
+    />
+  </Svg>
+);
+export default GiftIcon;

components/pages/brain_dump/DumpItem.tsx

@@ -16,10 +16,10 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
           padding-15
           style={{ borderRadius: 20, elevation: 2 }}
         >
-          <Text text70B style={{fontSize: 17}} marginB-8>
+          <Text text70B style={{fontSize: 17, fontFamily: 'Manrope_700Bold'}} marginB-8>
             {props.item.title}
           </Text>
-          <Text text70>{props.item.description}</Text>
+          <Text text70 style={{fontSize: 15, fontFamily: "Manrope_400Regular", color: '#5c5c5c'}}>{props.item.description}</Text>
         </View>
       </TouchableWithoutFeedback>
       <MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />

components/pages/brain_dump/DumpList.tsx

@@ -19,7 +19,7 @@ const DumpList = (props: { searchText: string }) => {
         );
 
   return (
-    <View>
+    <View marginB-70>
       <FlatList
         data={filteredBrainDumps}
         keyExtractor={(item) => item.title}

components/pages/grocery/AddGroceryItem.tsx

@@ -45,8 +45,11 @@ const AddGroceryItem = () => {
           text70L
           iconSource={() => <FontAwesome6 name="add" size={18} color="white" />}
           style={styles.finishShopBtn}
+          labelStyle={styles.addBtnLbl}
           enableShadow
-          onPress={() => {setIsAddingGrocery(true)}}
+          onPress={() => {
+            setIsAddingGrocery(true);
+          }}
         />
       </View>
     </View>
@@ -89,4 +92,5 @@ const styles = StyleSheet.create({
     flex: 1,
     marginHorizontal: 3,
   },
+  addBtnLbl: { fontFamily: "Manrope_500Medium", fontSize: 17, marginLeft: 5 },
 });

components/pages/grocery/GroceryList.tsx

@@ -1,13 +1,17 @@
-import {FlatList, StyleSheet} from "react-native";
+import { FlatList, StyleSheet } from "react-native";
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {Button, Text, View} from "react-native-ui-lib";
+import { Button, Text, TouchableOpacity, View } from "react-native-ui-lib";
 import GroceryItem from "./GroceryItem";
-import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
+import {
+  GroceryCategory,
+  GroceryFrequency,
+  useGroceryContext,
+} from "@/contexts/GroceryContext";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
-import {AntDesign, MaterialIcons} from "@expo/vector-icons";
+import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import EditGroceryItem from "./EditGroceryItem";
-import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
-import {IGrocery} from "@/hooks/firebase/types/groceryData";
+import { IGrocery } from "@/hooks/firebase/types/groceryData";
 
 const GroceryList = () => {
   const {
@@ -81,20 +85,35 @@ const GroceryList = () => {
         message={"Welcome to your grocery list"}
         isWelcome={false}
       >
-        <View row spread gap-5>
+        <View row centerV>
           <View
             backgroundColor="#e2eed8"
-            padding-8
+            paddingH-5
+            paddingV-8
+            marginR-5
+            centerV
             style={{ borderRadius: 50 }}
           >
-            <Text text70BL color="#46a80a">
+            <Text
+              text70BL
+              color="#46a80a"
+              style={{ fontFamily: "Manrope_700Bold" }}
+            >
               {approvedGroceries?.length} list{" "}
               {approvedGroceries?.length === 1 ? (
-                <Text text70BL color="#46a80a">
+                <Text
+                  text70BL
+                  color="#46a80a"
+                  style={{ fontFamily: "Manrope_700Bold" }}
+                >
                   item
                 </Text>
               ) : (
-                <Text text70BL color="#46a80a">
+                <Text
+                  text70BL
+                  color="#46a80a"
+                  style={{ fontFamily: "Manrope_700Bold" }}
+                >
                   items
                 </Text>
               )}
@@ -103,19 +122,21 @@ const GroceryList = () => {
           <View
             backgroundColor="#faead2"
             padding-8
+            paddingH-12
+            marginR-15
             style={{ borderRadius: 50 }}
           >
-            <Text text70BL color="#e28800">
+            <Text
+              text70
+              style={{ fontFamily: "Manrope_700Bold" }}
+              color="#e28800"
+            >
               {pendingGroceries?.length} pending
             </Text>
           </View>
-          <Button
+          <TouchableOpacity>
-            backgroundColor="transparent"
-            paddingH-10
-            iconSource={() => (
             <MaterialIcons name="person-add-alt" size={24} color="gray" />
-            )}
+          </TouchableOpacity>
-          />
         </View>
       </HeaderTemplate>
 
@@ -167,13 +188,17 @@ const GroceryList = () => {
               renderItem={({ item }) => (
                 <GroceryItem
                   item={item}
-                  handleItemApproved={(id, changes) => updateGroceryItem({...changes, id: id})}
+                  handleItemApproved={(id, changes) =>
+                    updateGroceryItem({ ...changes, id: id })
+                  }
                 />
               )}
               keyExtractor={(item) => item.id.toString()}
             />
           )
-        : pendingVisible && <Text>No items pending approval.</Text>}
+        : pendingVisible && (
+            <Text style={styles.noItemTxt}>No items pending approval.</Text>
+          )}
 
       {/* Approved Section */}
       <View row spread marginT-40 marginB-0 centerV>
@@ -245,7 +270,9 @@ const GroceryList = () => {
                       <GroceryItem
                         key={grocery.id}
                         item={grocery}
-                        handleItemApproved={(id, changes) => updateGroceryItem({...changes, id: id})}
+                        handleItemApproved={(id, changes) =>
+                          updateGroceryItem({ ...changes, id: id })
+                        }
                       />
                     )
                   )}
@@ -254,7 +281,9 @@ const GroceryList = () => {
               keyExtractor={(category) => category}
             />
           )
-        : approvedVisible && <Text>No approved items.</Text>}
+        : approvedVisible && (
+            <Text style={styles.noItemTxt}>No approved items.</Text>
+          )}
     </View>
   );
 };
@@ -263,6 +292,10 @@ const styles = StyleSheet.create({
   dropIcon: {
     marginHorizontal: 10,
   },
+  noItemTxt: {
+    fontFamily: "Manrope_400Regular",
+    fontSize: 14,
+  },
 });
 
 export default GroceryList;

components/pages/grocery/GroceryWrapper.tsx

@@ -19,7 +19,7 @@ const GroceryWrapper = () => {
   }, [isAddingGrocery]);
 
   return (
-    <View height={"100%"}>
+    <View height={"100%"} paddingT-15 paddingH-15>
       <View height={"100%"}>
         <ScrollView
           ref={scrollViewRef} // Assign the ref to the ScrollView
@@ -29,9 +29,9 @@ const GroceryWrapper = () => {
             <GroceryList />
           </View>
         </ScrollView>
-      </View>
       {!isAddingGrocery && <AddGroceryItem />}
       </View>
+    </View>
   );
 };
 

components/pages/todos/ProgressCard.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Fontisto } from "@expo/vector-icons";
 import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
 import { useToDosContext } from "@/contexts/ToDosContext";
+import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
 
 const ProgressCard = ({children}: {children?: React.ReactNode}) => {
   const { maxPoints } = useToDosContext();
@@ -14,8 +15,8 @@ const ProgressCard = ({children}: {children?: React.ReactNode}) => {
       style={{ borderRadius: 22 }}
     >
       <View row centerV>
-        <Fontisto name="day-sunny" size={30} color="#ff9900" />
+        <FireworksOrangeIcon />
-        <Text marginL-5 text70>
+        <Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
           You have earned XX points this week!{" "}
         </Text>
       </View>
@@ -30,8 +31,8 @@ const ProgressCard = ({children}: {children?: React.ReactNode}) => {
         }}
       />
       <View row spread>
-        <Text color={"#868686"}>0</Text>
+        <Text style={{fontSize: 13, color: '#858585'}}>0</Text>
-        <Text color={"#868686"}>{maxPoints}</Text>
+        <Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
       </View>
       <View centerV centerH>
         {children}

components/pages/todos/ToDoItem.tsx

@@ -13,7 +13,8 @@ import React, { useEffect, useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import { Ionicons } from "@expo/vector-icons";
 import PointsSlider from "@/components/shared/PointsSlider";
-import {IToDo} from "@/hooks/firebase/types/todoData";
+import { IToDo } from "@/hooks/firebase/types/todoData";
+import { ImageBackground } from "react-native";
 
 const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
   const { updateToDo } = useToDosContext();
@@ -33,8 +34,8 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
   return (
     <View
       centerV
-      paddingV-10
+      paddingV-15
-      paddingH-10
+      paddingH-15
       marginV-10
       style={{
         borderRadius: 22,
@@ -42,12 +43,14 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         opacity: props.item.done ? 0.3 : 1,
       }}
     >
-      <View paddingB-5 row spread>
+      <View paddingB-8 row spread>
         {!editing ? (
           <Text
-            text70R
+            text70
             style={{
               textDecorationLine: props.item.done ? "line-through" : "none",
+              fontFamily: "Manrope_600SemiBold",
+              fontSize: 18,
             }}
             onPress={() => {
               if (props.isSettings) {
@@ -62,7 +65,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
             value={props.item.title}
             text70R
             onChangeText={(text) => {
-              updateToDo({id: props.item.id, title: text });
+              updateToDo({ id: props.item.id, title: text });
             }}
             onSubmitEditing={() => {
               setEditing(false);
@@ -74,8 +77,10 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         )}
         <Checkbox
           value={props.item.done}
+          containerStyle={{borderWidth: 1, borderRadius: 50, borderColor: 'gray', height: 28, width: 28}}
+          color="#fd1575"
           onValueChange={(value) => {
-            updateToDo({id: props.item.id, done: !props.item.done });
+            updateToDo({ id: props.item.id, done: !props.item.done });
           }}
         />
       </View>
@@ -90,7 +95,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
           centerH
         />
       </View>
-      <View centerH row spread>
+      <View centerV centerH marginT-8 row spread>
         {props.item.points && props.item.points > 0 ? (
           <TouchableOpacity
             onPress={() => {
@@ -99,19 +104,24 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
               }
             }}
           >
-            <View centerV row>
+            <View centerV row gap-3>
               <Ionicons name="gift-outline" size={20} color="#46a80a" />
-              <Text color="#46a80a">{props.item.points} points</Text>
+              <Text color="#46a80a" style={{ fontSize: 16 }}>
+                {props.item.points} points
+              </Text>
             </View>
           </TouchableOpacity>
         ) : (
           <View />
         )}
-        <View
+        <ImageBackground
-          height={25}
+          source={require("../../../assets/images/child-picture.png")}
-          width={25}
+          style={{
-          backgroundColor="red"
+            height: 28,
-          style={{ borderRadius: 50 }}
+            aspectRatio: 1,
+            borderRadius: 22,
+            overflow: "hidden",
+          }}
         />
       </View>
       <Dialog
@@ -150,9 +160,9 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
                 size={ButtonSize.large}
                 label="Save points"
                 backgroundColor="#fd1775"
-                style={{height: 60, width: 150}}
+                style={{ height: 60, width: 150 }}
                 onPress={() => {
-                  updateToDo({id: props.item.id, points: points });
+                  updateToDo({ id: props.item.id, points: points });
                   setPointsModalVisible(false);
                 }}
               />

components/pages/todos/ToDosPage.tsx

@@ -16,7 +16,7 @@ const ToDosPage = () => {
   const { profileData } = useAuthContext();
   const pageLink = (
     <TouchableOpacity onPress={() => setPageIndex(1)}>
-      <Text color="#ea156d">View family progress</Text>
+      <Text color="#ea156d" style={{fontSize: 14}}>View family progress</Text>
     </TouchableOpacity>
   );
   return (

components/pages/todos/family-chores/FamilyChoresProgress.tsx

@@ -1,6 +1,6 @@
 import { View, Text } from "react-native-ui-lib";
 import React from "react";
-import { StyleSheet } from "react-native";
+import { ImageBackground, StyleSheet } from "react-native";
 import FamilyChart from "./FamilyChart";
 import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
 
@@ -12,34 +12,116 @@ const FamilyChoresProgress = ({
   return (
     <View marginT-20 marginH-5>
       <TouchableOpacity onPress={() => setPageIndex(0)}>
-        <Text>Back to ToDos</Text>
+        <Text style={{ fontFamily: "Manrope_200", fontSize: 12 }}>Back to ToDos</Text>
       </TouchableOpacity>
       <View centerH>
-        <Text text50R>Family Chores Progress Report</Text>
+        <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 19 }}>
+          Family Chores Progress Report
+        </Text>
       </View>
-      <View row spread marginT-25 marginB-20>
+      <View row spread marginT-35 marginB-20>
-        <Text text70>Points earned this week</Text>
+        <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
+          Points earned this week
+        </Text>
         <View row>
-          <View style={styles.pfpSmall} backgroundColor="#05a8b6" />
+          <View
-          <View style={styles.pfpSmall} backgroundColor="#ebd825" />
+            style={styles.pfpSmall}
+            backgroundColor="#05a8b6"
+            center
+            children={
+              <ImageBackground
+                source={require("../../../../assets/images/child1-picture.png")}
+                style={{
+                  height: 25,
+                  aspectRatio: 1,
+                  borderRadius: 22,
+                  overflow: "hidden",
+                }}
+              />
+            }
+          />
+          <View
+            style={styles.pfpSmall}
+            backgroundColor="#ebd825"
+            center
+            children={
+              <ImageBackground
+                source={require("../../../../assets/images/child-picture.png")}
+                style={{
+                  height: 25,
+                  aspectRatio: 1,
+                  borderRadius: 22,
+                  overflow: "hidden",
+                }}
+              />
+            }
+          />
         </View>
       </View>
       <View style={styles.card} paddingL-10>
         <FamilyChart />
       </View>
-      <Text text70 marginV-20>
+      <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }} marginV-20>
         Chore Tracker
       </Text>
-      <View style={styles.card} marginB-20 row spread>
+      <View style={styles.card} marginB-20 row spread centerV>
-        <View style={styles.pfpBig} backgroundColor="#05a8b6" />
+        <View
-        <View width={"100%"} centerV centerH>
+          style={styles.pfpBig}
-          <Text> x/y chores completed</Text>
+          backgroundColor="#05a8b6"
+          center
+          children={
+            <ImageBackground
+              source={require("../../../../assets/images/child1-picture.png")}
+              style={{
+                height: 45,
+                aspectRatio: 1,
+                borderRadius: 22,
+                overflow: "hidden",
+              }}
+            />
+          }
+        />
+        <Text
+          color="#858585"
+          style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
+        >
+          Emily
+        </Text>
+        <View centerV>
+          <Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
+            {" "}
+            x/y chores completed
+          </Text>
         </View>
       </View>
-      <View style={styles.card} row spread>
+      <View style={styles.card} row spread centerV>
-        <View style={styles.pfpBig} backgroundColor="#ebd825" />
+        <View
-        <View width={"100%"} centerV centerH>
+          style={styles.pfpBig}
-          <Text> x/y chores completed</Text>
+          backgroundColor="#ebd825"
+          center
+          children={
+            <ImageBackground
+              source={require("../../../../assets/images/child-picture.png")}
+              style={{
+                height: 45,
+                aspectRatio: 1,
+                borderRadius: 22,
+                overflow: "hidden",
+              }}
+            />
+          }
+        />
+        <Text
+          color="#858585"
+          style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
+        >
+          Austin
+        </Text>
+        <View row centerV centerH>
+          <Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
+            {" "}
+            x/y chores completed
+          </Text>
         </View>
       </View>
     </View>

components/pages/todos/user-chores/UserChoresProgress.tsx

@@ -6,15 +6,16 @@ import {
   ButtonSize,
   Modal,
   Dialog,
+  TouchableOpacity,
 } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { StyleSheet } from "react-native";
-import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
 import UserChart from "./UserChart";
 import ProgressCard from "../ProgressCard";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import { ScrollView } from "react-native-gesture-handler";
 import { PanViewDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
+import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
 
 const UserChoresProgress = ({
   setPageIndex,
@@ -29,29 +30,41 @@ const UserChoresProgress = ({
         showsHorizontalScrollIndicator={false}
       >
         <TouchableOpacity onPress={() => setPageIndex(0)}>
-          <Text>Back to ToDos</Text>
+          <Text style={{ fontSize: 14 }}>Back to ToDos</Text>
         </TouchableOpacity>
-        <View centerH>
+        <View>
-          <Text text50R>Your To Dos Progress Report</Text>
+          <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 20 }}>
+            Your To Do's Progress Report
+          </Text>
         </View>
         <View row spread marginT-25 marginB-5>
-          <Text text70>Daily Goal</Text>
+          <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
+            Daily Goal
+          </Text>
         </View>
         <ProgressCard />
-        <View row spread marginT-10 marginB-5>
+        <View row spread marginT-15 marginB-8>
-          <Text text70>Points Earned This Week</Text>
+          <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
+            Points Earned This Week
+          </Text>
         </View>
         <View style={styles.card} paddingL-10>
           <UserChart />
         </View>
         <View row spread marginT-20 marginB-8 centerV>
-          <Text text70>Total Reward Points</Text>
+          <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
+            Total Reward Points
+          </Text>
           <Button
             size={ButtonSize.small}
             label="Spend my points"
             color="#50be0c"
             backgroundColor="#ebf2e4"
             onPress={() => setModalVisible(true)}
+            labelStyle={{
+              fontSize: 13,
+              fontFamily: "Manrope_400Regular",
+            }}
             iconSource={() => (
               <AntDesign
                 name="gift"
@@ -64,8 +77,12 @@ const UserChoresProgress = ({
         </View>
         <View style={styles.card}>
           <View row centerV>
-            <Ionicons name="flower-outline" size={30} color="#8005eb" />
+            <FireworksOrangeIcon color="#8005eb" />
-            <Text text70 marginL-5>
+            <Text
+              marginL-8
+              text70
+              style={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
+            >
               You have 1200 points saved!
             </Text>
           </View>
@@ -80,8 +97,8 @@ const UserChoresProgress = ({
             }}
           />
           <View row spread>
-            <Text>0</Text>
+            <Text style={{ fontSize: 13, color: "#858585" }}>0</Text>
-            <Text>5000</Text>
+            <Text style={{ fontSize: 13, color: "#858585" }}>5000</Text>
           </View>
         </View>
       </ScrollView>
@@ -90,7 +107,7 @@ const UserChoresProgress = ({
         onDismiss={() => setModalVisible(false)}
         children={
           <View style={styles.card} paddingH-35 paddingT-35>
-            <Text text60 center marginB-35>
+            <Text text60 center marginB-35 style={{fontFamily: 'Manrope_600SemiBold'}}>
               How would you like to spend your points?
             </Text>
             <Button
@@ -99,6 +116,7 @@ const UserChoresProgress = ({
               marginB-15
               backgroundColor="#05a8b6"
               size={ButtonSize.large}
+              labelStyle={styles.bigButtonText}
             />
             <Button
               label="Extra Screen Time - 100 pts"
@@ -106,6 +124,7 @@ const UserChoresProgress = ({
               marginB-15
               backgroundColor="#ea156c"
               size={ButtonSize.large}
+              labelStyle={styles.bigButtonText}
             />
             <Button
               label="Movie Night - 50 pts"
@@ -113,6 +132,7 @@ const UserChoresProgress = ({
               marginB-15
               backgroundColor="#7305d4"
               size={ButtonSize.large}
+              labelStyle={styles.bigButtonText}
             />
             <Button
               label="Ice Cream Treat - 25 pts"
@@ -120,9 +140,12 @@ const UserChoresProgress = ({
               marginB-15
               backgroundColor="#e28800"
               size={ButtonSize.large}
+              labelStyle={styles.bigButtonText}
             />
             <TouchableOpacity onPress={() => setModalVisible(false)}>
-                <Text text70 center color="#999999">Go back to my to dos</Text>
+              <Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}} >
+                Go back to my to dos
+              </Text>
             </TouchableOpacity>
           </View>
         }
@@ -147,6 +170,9 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     padding: 20,
   },
+  bigButtonText:{
+    fontFamily: 'Manrope_400Regular'
+  }
 });
 
 export default UserChoresProgress;

components/shared/HeaderTemplate.tsx

@@ -10,27 +10,29 @@ const HeaderTemplate = (props: {
   link?: React.ReactNode;
 }) => {
   const { user, profileData } = useAuthContext();
+
+  const headerHeight:number = 80;
   return (
     <View row centerV marginV-15>
       <ImageBackground
       source={require("../../assets/images/profile-picture.png")}
         style={{
-          width: 65,
+          height: headerHeight,
-          height: 65,
+          aspectRatio: 1,
           borderRadius: 22,
           overflow: "hidden",
           marginRight: 20,
         }}
       />
-      <View>
+      <View gap-3>
         {props.isWelcome && (
-          <Text text70L>Welcome, {profileData?.firstName}!</Text>
+          <Text text70L style={{fontSize: 17, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text>
         )}
-        <Text text70B style={{ fontSize: 17 }}>
+        <Text text70B style={{ fontSize: 18, fontFamily: "Manrope_700Bold" }}>
           {props.message}
         </Text>
         {props.children && <View>{props.children}</View>}
-        {props.link && <View>{props.link}</View>}
+        {props.link && <View marginT-8>{props.link}</View>}
       </View>
     </View>
   );

components/shared/PointsSlider.tsx

@@ -20,9 +20,9 @@ const PointsSlider = (props: {
           maximumValue={100}
         />
         <View row spread>
-          <Text>0</Text>
+          <Text style={{fontSize: 13, color: '#858585'}}>0</Text>
-          <Text>50</Text>
+          <Text style={{fontSize: 13, color: '#858585'}}>50</Text>
-          <Text>100</Text>
+          <Text style={{fontSize: 13, color: '#858585'}}>100</Text>
         </View>
       </View>
       <View style={{ marginLeft: "auto" }}>