mirror of
https://github.com/urosran/cally.git
synced 2025-07-15 01:35:22 +00:00
ui tweaks
This commit is contained in:
ivic00
@ -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"
|
||||
|
||||
BIN
assets/images/child-picture.png
Normal file
BIN
assets/images/child-picture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/child1-picture.png
Normal file
BIN
assets/images/child1-picture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
21
assets/svgs/FireworksOrangeIcon.tsx
Normal file
21
assets/svgs/FireworksOrangeIcon.tsx
Normal file
@ -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
|
||||
23
assets/svgs/GiftIcon.tsx
Normal file
23
assets/svgs/GiftIcon.tsx
Normal file
@ -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;
|
||||
@ -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} />
|
||||
|
||||
@ -19,7 +19,7 @@ const DumpList = (props: { searchText: string }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View marginB-70>
|
||||
<FlatList
|
||||
data={filteredBrainDumps}
|
||||
keyExtractor={(item) => item.title}
|
||||
|
||||
@ -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 },
|
||||
});
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import { FlatList, StyleSheet } from "react-native";
|
||||
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 EditGroceryItem from "./EditGroceryItem";
|
||||
@ -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
|
||||
backgroundColor="transparent"
|
||||
paddingH-10
|
||||
iconSource={() => (
|
||||
<TouchableOpacity>
|
||||
<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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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" />
|
||||
<Text marginL-5 text70>
|
||||
<FireworksOrangeIcon />
|
||||
<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 color={"#868686"}>{maxPoints}</Text>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
|
||||
</View>
|
||||
<View centerV centerH>
|
||||
{children}
|
||||
|
||||
@ -14,6 +14,7 @@ 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 { 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
|
||||
paddingH-10
|
||||
paddingV-15
|
||||
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) {
|
||||
@ -74,6 +77,8 @@ 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 });
|
||||
}}
|
||||
@ -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
|
||||
height={25}
|
||||
width={25}
|
||||
backgroundColor="red"
|
||||
style={{ borderRadius: 50 }}
|
||||
<ImageBackground
|
||||
source={require("../../../assets/images/child-picture.png")}
|
||||
style={{
|
||||
height: 28,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 22,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<Dialog
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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>
|
||||
<Text text70>Points earned this week</Text>
|
||||
<View row spread marginT-35 marginB-20>
|
||||
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
|
||||
Points earned this week
|
||||
</Text>
|
||||
<View row>
|
||||
<View style={styles.pfpSmall} backgroundColor="#05a8b6" />
|
||||
<View style={styles.pfpSmall} backgroundColor="#ebd825" />
|
||||
<View
|
||||
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.pfpBig} backgroundColor="#05a8b6" />
|
||||
<View width={"100%"} centerV centerH>
|
||||
<Text> x/y chores completed</Text>
|
||||
<View style={styles.card} marginB-20 row spread centerV>
|
||||
<View
|
||||
style={styles.pfpBig}
|
||||
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.pfpBig} backgroundColor="#ebd825" />
|
||||
<View width={"100%"} centerV centerH>
|
||||
<Text> x/y chores completed</Text>
|
||||
<View style={styles.card} row spread centerV>
|
||||
<View
|
||||
style={styles.pfpBig}
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
<Text text50R>Your To Dos Progress Report</Text>
|
||||
<View>
|
||||
<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>
|
||||
<Text text70>Points Earned This Week</Text>
|
||||
<View row spread marginT-15 marginB-8>
|
||||
<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" />
|
||||
<Text text70 marginL-5>
|
||||
<FireworksOrangeIcon color="#8005eb" />
|
||||
<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>5000</Text>
|
||||
<Text style={{ fontSize: 13, color: "#858585" }}>0</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;
|
||||
|
||||
@ -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: 65,
|
||||
height: headerHeight,
|
||||
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>
|
||||
);
|
||||
|
||||
@ -20,9 +20,9 @@ const PointsSlider = (props: {
|
||||
maximumValue={100}
|
||||
/>
|
||||
<View row spread>
|
||||
<Text>0</Text>
|
||||
<Text>50</Text>
|
||||
<Text>100</Text>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>50</Text>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>100</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ marginLeft: "auto" }}>
|
||||
|
||||
Reference in New Issue
Block a user