added focus, ui changes

This commit is contained in:
ivic00
2024-10-17 19:57:41 +02:00
parent e4eb67fba7
commit d2b46ad977
14 changed files with 729 additions and 476 deletions

View File

@ -9,6 +9,7 @@ import { AuthContextProvider } from "@/contexts/AuthContext";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
import ArrowRightIcon from "@/assets/svgs/ArrowRightIcon";
const pageIndex = {
main: 0,
@ -20,71 +21,83 @@ const pageIndex = {
const SettingsPage = () => {
const [selectedPage, setSelectedPage] = useState<number>(0);
return (
<View flexG>
{selectedPage == 0 && (
<View flexG centerH marginH-30 marginT-30>
<Button
backgroundColor="white"
style={styles.mainBtn}
label="Manage My Profile"
labelStyle={styles.label}
color="#07b8c7"
iconSource={() => (
<ProfileIcon style={{marginRight: 10}} color="#07b9c8" />
)}
onPress={() => setSelectedPage(pageIndex.user)}
/>
<Button
backgroundColor="white"
style={styles.mainBtn}
label="Calendar Settings"
labelStyle={styles.label}
color="#fd1775"
iconSource={() => (
<CalendarIcon style={{marginRight: 10}}/>
)}
onPress={() => {
setSelectedPage(pageIndex.calendar);
}}
/>
<Button
backgroundColor="white"
style={styles.mainBtn}
label="To-Do Reward Settings"
labelStyle={styles.label}
color="#ff9900"
iconSource={() => (
<View flexG>
{selectedPage == 0 && (
<View flexG centerH marginH-30 marginT-30>
<Button
backgroundColor="white"
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<ProfileIcon style={{ marginRight: 10 }} color="#07b9c8" />
<Text style={styles.label} color="#07b8c7">
Manage My Profile
</Text>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
onPress={() => setSelectedPage(pageIndex.user)}
/>
<Button
backgroundColor="white"
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<CalendarIcon style={{ marginRight: 10 }} />
<Text style={styles.label} color="#fd1775">
Calendar Settings
</Text>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
onPress={() => {
setSelectedPage(pageIndex.calendar);
}}
/>
<Button
backgroundColor="white"
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<Octicons
name="gear"
size={24}
color="#ff9900"
style={{ marginRight: 10 }}
/>
)}
onPress={() => setSelectedPage(pageIndex.chore)}
/>
<Button
backgroundColor="white"
style={styles.mainBtn}
label="Cally Privacy Policy"
labelStyle={styles.label}
iconSource={() => (
<PrivacyPolicyIcon style={{marginRight: 10}}/>
)}
color="#6c645b"
/>
</View>
)}
{selectedPage == pageIndex.calendar && (
<CalendarSettingsPage setSelectedPage={setSelectedPage} />
)}
{selectedPage == pageIndex.chore && (
<ChoreRewardSettings setSelectedPage={setSelectedPage} />
)}
{selectedPage == pageIndex.user && (
<UserSettings setSelectedPage={setSelectedPage} />
)}
</View>
<Text style={styles.label} color="#ff9900">
To-Do Reward Settings
</Text>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
onPress={() => setSelectedPage(pageIndex.chore)}
/>
<Button
backgroundColor="white"
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<PrivacyPolicyIcon style={{ marginRight: 10 }} />
<Text style={styles.label} color="#6c645b">
Cally Privacy Policy
</Text>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
/>
</View>
)}
{selectedPage == pageIndex.calendar && (
<CalendarSettingsPage setSelectedPage={setSelectedPage} />
)}
{selectedPage == pageIndex.chore && (
<ChoreRewardSettings setSelectedPage={setSelectedPage} />
)}
{selectedPage == pageIndex.user && (
<UserSettings setSelectedPage={setSelectedPage} />
)}
</View>
);
};
@ -92,14 +105,14 @@ export default SettingsPage;
const styles = StyleSheet.create({
mainBtn: {
width: "100%",
width: 311,
justifyContent: "flex-start",
marginBottom: 20,
height: 60,
height: 57.61,
},
label:{
label: {
fontFamily: "Poppins_400Regular",
fontSize: 14.71,
textAlignVertical: 'center'
}
textAlignVertical: "center",
},
});