diff --git a/assets/bottom-tab-home-inactive.svg b/assets/bottom-tab-home-inactive.svg new file mode 100644 index 00000000..89c9455e --- /dev/null +++ b/assets/bottom-tab-home-inactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/bottom-tab-home.svg b/assets/bottom-tab-home.svg index 6eaf5174..050a8fe4 100644 --- a/assets/bottom-tab-home.svg +++ b/assets/bottom-tab-home.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/bottom-tab-settings-gear-inactive.svg b/assets/bottom-tab-settings-gear-inactive.svg new file mode 100644 index 00000000..19f20a36 --- /dev/null +++ b/assets/bottom-tab-settings-gear-inactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/bottom-tab-settings-gear.svg b/assets/bottom-tab-settings-gear.svg index ed5ed3a2..62fe5812 100644 --- a/assets/bottom-tab-settings-gear.svg +++ b/assets/bottom-tab-settings-gear.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/bottom-tab-updates-bell-inactive.svg b/assets/bottom-tab-updates-bell-inactive.svg new file mode 100644 index 00000000..4d5e15b9 --- /dev/null +++ b/assets/bottom-tab-updates-bell-inactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/bottom-tab-updates-bell.svg b/assets/bottom-tab-updates-bell.svg index ab869bfd..8e364969 100644 --- a/assets/bottom-tab-updates-bell.svg +++ b/assets/bottom-tab-updates-bell.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/grey-circle-back-arrow.svg b/assets/grey-circle-back-arrow.svg new file mode 100644 index 00000000..0f57a9f4 --- /dev/null +++ b/assets/grey-circle-back-arrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/red-left-caret.svg b/assets/red-left-caret.svg new file mode 100644 index 00000000..34b872e7 --- /dev/null +++ b/assets/red-left-caret.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/red-share-button.svg b/assets/red-share-button.svg new file mode 100644 index 00000000..d14dfae8 --- /dev/null +++ b/assets/red-share-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Components/BackButtons/BackButtons.tsx b/src/Components/BackButtons/BackButtons.tsx new file mode 100644 index 00000000..8f1e31cf --- /dev/null +++ b/src/Components/BackButtons/BackButtons.tsx @@ -0,0 +1,30 @@ +import { router } from 'expo-router'; +import { Text, TouchableOpacity } from 'react-native'; + +import styles from './styles'; +import CircleBackButton from '../../../assets/grey-circle-back-arrow.svg'; +import BackArrow from '../../../assets/red-left-caret.svg'; + +interface backButtonProps { + backText: string; +} + +export function BackButtonText({ backText }: backButtonProps) { + return ( + router.back()} + style={styles.backButtonContainer} + > + + {backText} + + ); +} + +export function BackButtonNoText() { + return ( + router.back()}> + + + ); +} diff --git a/src/Components/BackButtons/styles.ts b/src/Components/BackButtons/styles.ts new file mode 100644 index 00000000..0e772697 --- /dev/null +++ b/src/Components/BackButtons/styles.ts @@ -0,0 +1,22 @@ +import { StyleSheet } from 'react-native'; + +import { colors } from '../../styles/colors'; + +export default StyleSheet.create({ + backButtonContainer: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + columnGap: 10, + }, + headerText: { + color: colors.midRed, + textAlign: 'center', + fontSize: 12, + fontStyle: 'normal', + fontWeight: '400', + lineHeight: 24, + letterSpacing: -0.264, + }, +}); diff --git a/src/Components/CasesHeader/CasesHeader.tsx b/src/Components/CasesHeader/CasesHeader.tsx deleted file mode 100644 index c377c85f..00000000 --- a/src/Components/CasesHeader/CasesHeader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Image } from 'react-native'; - -export default function CasesHeader() { - return ( - - ); -} diff --git a/src/Components/HeaderComponents/HeaderComponents.tsx b/src/Components/HeaderComponents/HeaderComponents.tsx new file mode 100644 index 00000000..fcc76d25 --- /dev/null +++ b/src/Components/HeaderComponents/HeaderComponents.tsx @@ -0,0 +1,32 @@ +import { View, Image } from 'react-native'; + +import styles from './styles'; + +export function HeaderImage() { + return ( + + ); +} + +export function LeftAlignedHeader() { + return ( + + + + ); +} + +export function LeftAlignedHeaderLine() { + return ( + + + + ); +} + +export function EmptyHeader() { + return ; +} diff --git a/src/Components/HeaderComponents/styles.tsx b/src/Components/HeaderComponents/styles.tsx new file mode 100644 index 00000000..0f6a9c05 --- /dev/null +++ b/src/Components/HeaderComponents/styles.tsx @@ -0,0 +1,34 @@ +import { StyleSheet } from 'react-native'; + +import { colors } from '../../styles/colors'; + +export default StyleSheet.create({ + fullHeaderContainer: { + width: '92%', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + paddingTop: 14, + paddingBottom: 14, + }, + bottomLine: { + borderBottomWidth: 1, + borderBottomColor: colors.midGrey, + }, + headerText: { + color: colors.midRed, + textAlign: 'center', + fontSize: 12, + fontStyle: 'normal', + fontWeight: '400', + lineHeight: 24, + letterSpacing: -0.264, + }, + backButtonContainer: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + columnGap: 10, + }, +}); diff --git a/src/Components/TabBarItem/TabBarItem.tsx b/src/Components/TabBarItem/TabBarItem.tsx new file mode 100644 index 00000000..9c551ddc --- /dev/null +++ b/src/Components/TabBarItem/TabBarItem.tsx @@ -0,0 +1,46 @@ +import { View, Text } from 'react-native'; + +import { colors } from '../../styles/colors'; + +interface TabBarItemProps { + icon: React.ReactNode; + label: string; + focused: boolean; +} + +//Inline styling required --> can't make a styles.ts in this directory otherwise it'll make a new bottom tab idk why +export default function TabBarItem({ icon, label, focused }: TabBarItemProps) { + return ( + + + {icon} + + {label} + + + + ); +} diff --git a/src/app/(Authentication)/Login/Email/index.tsx b/src/app/(Authentication)/Login/Email/index.tsx index 0901cc2a..7530da2c 100644 --- a/src/app/(Authentication)/Login/Email/index.tsx +++ b/src/app/(Authentication)/Login/Email/index.tsx @@ -31,9 +31,6 @@ export default function LoginScreen() { return ( - router.back()}> - Back - Please enter your email address. diff --git a/src/app/(Authentication)/Login/Password/index.tsx b/src/app/(Authentication)/Login/Password/index.tsx index 2f1258b9..77e61d90 100644 --- a/src/app/(Authentication)/Login/Password/index.tsx +++ b/src/app/(Authentication)/Login/Password/index.tsx @@ -35,9 +35,6 @@ export default function LoginScreen() { return ( - router.back()}> - Back - Please enter your password. diff --git a/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx b/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx index 62a53d3a..325d29ac 100644 --- a/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx +++ b/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx @@ -45,12 +45,6 @@ export default function OTPEmailInput() { return ( - router.back()} - > - Back - Please enter the email you used to create your account. diff --git a/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx b/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx index 6383c5cc..125f09af 100644 --- a/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx +++ b/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx @@ -64,14 +64,6 @@ export default function SignUpScreen() { return ( - - router.back()} - > - Back - - Create a new password. diff --git a/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx b/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx index 9d7745b2..572418e4 100644 --- a/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx +++ b/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx @@ -50,11 +50,6 @@ export default function OTPFlow() { return ( - - router.back()}> - Back - - Enter verification code. diff --git a/src/app/(Authentication)/SignUp/Address/index.tsx b/src/app/(Authentication)/SignUp/Address/index.tsx index 68097129..823d402c 100644 --- a/src/app/(Authentication)/SignUp/Address/index.tsx +++ b/src/app/(Authentication)/SignUp/Address/index.tsx @@ -66,7 +66,6 @@ export default function SignUpScreen() { return ( - Last, enter your address. diff --git a/src/app/(Authentication)/SignUp/Email/index.tsx b/src/app/(Authentication)/SignUp/Email/index.tsx index e100976f..80748571 100644 --- a/src/app/(Authentication)/SignUp/Email/index.tsx +++ b/src/app/(Authentication)/SignUp/Email/index.tsx @@ -58,14 +58,6 @@ export default function SignUpScreen() { return ( - - router.back()} - > - Back - - Create your account. - - router.back()} - > - Back - - Next, make a password. diff --git a/src/app/(Authentication)/Welcome/index.tsx b/src/app/(Authentication)/Welcome/index.tsx index 73d6c787..7fc6829c 100644 --- a/src/app/(Authentication)/Welcome/index.tsx +++ b/src/app/(Authentication)/Welcome/index.tsx @@ -9,11 +9,6 @@ function WelcomeScreen() { return ( - - Welcome to the Impact Fund! diff --git a/src/app/(Authentication)/_layout.tsx b/src/app/(Authentication)/_layout.tsx index 54f10f4f..cbe705d0 100644 --- a/src/app/(Authentication)/_layout.tsx +++ b/src/app/(Authentication)/_layout.tsx @@ -1,6 +1,84 @@ import { Stack } from 'expo-router'; import React from 'react'; -export default function AuthLayout() { - return ; +import { BackButtonNoText } from '../../Components/BackButtons/BackButtons'; +import { + LeftAlignedHeader, + EmptyHeader, +} from '../../Components/HeaderComponents/HeaderComponents'; +import { CaseContextProvider } from '../../context/CaseContext'; + +export default function CasesLayout() { + return ( + + + , + }} + /> + , + headerTitle: () => , + }} + /> + , + headerTitle: () => , + }} + /> + , + headerTitle: () => , + }} + /> + , + headerTitle: () => , + }} + /> + , + }} + /> + , + headerTitle: () => , + }} + /> + , + headerTitle: () => , + }} + /> + , + }} + /> + + + ); } diff --git a/src/app/(BottomTabNavigation)/AllCases/_layout.tsx b/src/app/(BottomTabNavigation)/AllCases/_layout.tsx index 5403a039..5e796beb 100644 --- a/src/app/(BottomTabNavigation)/AllCases/_layout.tsx +++ b/src/app/(BottomTabNavigation)/AllCases/_layout.tsx @@ -1,7 +1,15 @@ import { Stack } from 'expo-router'; import React from 'react'; -import CasesHeader from '../../../Components/CasesHeader/CasesHeader'; +import { + BackButtonNoText, + BackButtonText, +} from '../../../Components/BackButtons/BackButtons'; +import { + LeftAlignedHeaderLine, + HeaderImage, + EmptyHeader, +} from '../../../Components/HeaderComponents/HeaderComponents'; import { CaseContextProvider } from '../../../context/CaseContext'; export default function CasesLayout() { @@ -11,84 +19,97 @@ export default function CasesLayout() { screenOptions={{ headerShown: true, headerBackTitleVisible: false, + headerShadowVisible: false, }} > , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> , + headerLeft: () => , + headerTitle: () => , }} /> diff --git a/src/app/(BottomTabNavigation)/AllCases/index.tsx b/src/app/(BottomTabNavigation)/AllCases/index.tsx index 192e398b..0e1051e8 100644 --- a/src/app/(BottomTabNavigation)/AllCases/index.tsx +++ b/src/app/(BottomTabNavigation)/AllCases/index.tsx @@ -1,6 +1,6 @@ import * as Linking from 'expo-linking'; import { router } from 'expo-router'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useState, useEffect } from 'react'; import { FlatList, Text, View, TouchableOpacity } from 'react-native'; import styles from './styles'; @@ -15,7 +15,6 @@ import { } from '../../../supabase/pushNotifications'; import 'react-native-url-polyfill/auto'; - enum linkingEvents { ADD_CASE = 'addCase', NOTIFICATION = 'notification', diff --git a/src/app/(BottomTabNavigation)/AllCases/styles.ts b/src/app/(BottomTabNavigation)/AllCases/styles.ts index 2c02c93b..aee62768 100644 --- a/src/app/(BottomTabNavigation)/AllCases/styles.ts +++ b/src/app/(BottomTabNavigation)/AllCases/styles.ts @@ -15,7 +15,7 @@ export default StyleSheet.create({ }, innerScroll: { rowGap: 20, - paddingTop: 50, + paddingTop: 39, paddingBottom: 20, }, headerContainer: { diff --git a/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx b/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx index 73a697ee..d647e4cf 100644 --- a/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx +++ b/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx @@ -5,7 +5,6 @@ import { Text, TouchableOpacity, View } from 'react-native'; import styles from './styles'; import WhiteTrash from '../../../../../assets/white-trash.svg'; import X from '../../../../../assets/x.svg'; -import CasesHeader from '../../../../Components/CasesHeader/CasesHeader'; import { useSession } from '../../../../context/AuthContext'; function DeleteAccountScreen() { const { signOut, deleteCurrentUser, session } = useSession(); @@ -20,10 +19,6 @@ function DeleteAccountScreen() { return ( - - - - Delete account? diff --git a/src/app/(BottomTabNavigation)/Profile/EditAddress/index.tsx b/src/app/(BottomTabNavigation)/Profile/EditAddress/index.tsx index c37d38c7..e2ec2383 100644 --- a/src/app/(BottomTabNavigation)/Profile/EditAddress/index.tsx +++ b/src/app/(BottomTabNavigation)/Profile/EditAddress/index.tsx @@ -61,12 +61,6 @@ function EditNameScreen() { return ( - router.push('/Profile/')} - > - Back - Edit account details diff --git a/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx b/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx index ee2fd980..8bde2897 100644 --- a/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx +++ b/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx @@ -17,12 +17,6 @@ function EditNameScreen() { return ( - router.push('/Profile/')} - > - Back - Edit account details diff --git a/src/app/(BottomTabNavigation)/Profile/ResetConfirm/index.tsx b/src/app/(BottomTabNavigation)/Profile/ResetConfirm/index.tsx index d99ba39b..b9eecec7 100644 --- a/src/app/(BottomTabNavigation)/Profile/ResetConfirm/index.tsx +++ b/src/app/(BottomTabNavigation)/Profile/ResetConfirm/index.tsx @@ -31,13 +31,6 @@ export default function ResetConfirm() { return ( - router.back()} - > - Back - - Reset Password diff --git a/src/app/(BottomTabNavigation)/Profile/_layout.tsx b/src/app/(BottomTabNavigation)/Profile/_layout.tsx index 8a565c81..a92d7900 100644 --- a/src/app/(BottomTabNavigation)/Profile/_layout.tsx +++ b/src/app/(BottomTabNavigation)/Profile/_layout.tsx @@ -1,6 +1,63 @@ import { Stack } from 'expo-router'; import React from 'react'; +import { BackButtonNoText } from '../../../Components/BackButtons/BackButtons'; +import { + EmptyHeader, + LeftAlignedHeader, + LeftAlignedHeaderLine, +} from '../../../Components/HeaderComponents/HeaderComponents'; + export default function ProfileLayout() { - return ; + return ( + + , + }} + /> + , + headerTitle: () => , + }} + /> + , + headerTitle: () => , + }} + /> + , + headerTitle: () => , + }} + /> + , + headerBackVisible: false, + }} + /> + , + headerBackVisible: false, + }} + /> + + ); } diff --git a/src/app/(BottomTabNavigation)/Profile/index.tsx b/src/app/(BottomTabNavigation)/Profile/index.tsx index 0809a89d..6ed0c4c7 100644 --- a/src/app/(BottomTabNavigation)/Profile/index.tsx +++ b/src/app/(BottomTabNavigation)/Profile/index.tsx @@ -12,7 +12,6 @@ import RedTrash from '../../../../assets/red-trash.svg'; import Reset from '../../../../assets/reset.svg'; import SignOut from '../../../../assets/sign-out.svg'; import WhiteRightCarrot from '../../../../assets/white-right-carrot.svg'; -import CasesHeader from '../../../Components/CasesHeader/CasesHeader'; import { useSession } from '../../../context/AuthContext'; import globalStyles from '../../../styles/global'; @@ -28,10 +27,6 @@ function ProfileScreen() { return ( - - - - Settings diff --git a/src/app/(BottomTabNavigation)/Profile/styles.ts b/src/app/(BottomTabNavigation)/Profile/styles.ts index c1df17fa..601cb3ba 100644 --- a/src/app/(BottomTabNavigation)/Profile/styles.ts +++ b/src/app/(BottomTabNavigation)/Profile/styles.ts @@ -12,17 +12,6 @@ export default StyleSheet.create({ width: '84%', alignItems: 'center', }, - - headerContainer: { - marginTop: 63, - width: '100%', - }, - headerLine: { - borderBottom: 'solid', - borderBottomColor: colors.midGrey, - borderBottomWidth: 0.5, - marginTop: 8, - }, titleText: { fontSize: 32, fontWeight: '800', diff --git a/src/app/(BottomTabNavigation)/_layout.tsx b/src/app/(BottomTabNavigation)/_layout.tsx index 0632f810..b2055c13 100644 --- a/src/app/(BottomTabNavigation)/_layout.tsx +++ b/src/app/(BottomTabNavigation)/_layout.tsx @@ -1,10 +1,13 @@ import { Tabs } from 'expo-router/tabs'; import React from 'react'; +import GreyHomeIcon from '../../../assets/bottom-tab-home-inactive.svg'; import RedHomeIcon from '../../../assets/bottom-tab-home.svg'; +import GreyGearIcon from '../../../assets/bottom-tab-settings-gear-inactive.svg'; import RedGearIcon from '../../../assets/bottom-tab-settings-gear.svg'; +import GreyBellIcon from '../../../assets/bottom-tab-updates-bell-inactive.svg'; import RedBellIcon from '../../../assets/bottom-tab-updates-bell.svg'; -import { colors } from '../../styles/colors'; +import TabBarItem from '../../Components/TabBarItem/TabBarItem'; export default function AppLayout() { return ( @@ -13,56 +16,44 @@ export default function AppLayout() { headerShown: false, tabBarStyle: { height: 90, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', }, + tabBarShowLabel: false, }} > , - tabBarLabelStyle: { - fontSize: 9, - fontStyle: 'normal', - fontWeight: '600', - lineHeight: 21, - color: colors.midRed, - }, - tabBarActiveTintColor: colors.black, + tabBarIcon: ({ focused }) => ( + : } + label="Cases" + focused={focused} + /> + ), }} /> , - tabBarLabelStyle: { - fontSize: 9, - fontStyle: 'normal', - fontWeight: '600', - lineHeight: 21, - color: colors.midRed, - }, + tabBarIcon: ({ focused }) => ( + : } + label="Updates" + focused={focused} + /> + ), }} /> , - tabBarLabelStyle: { - fontSize: 9, - fontStyle: 'normal', - fontWeight: '600', - lineHeight: 21, - color: colors.midRed, - }, + tabBarIcon: ({ focused }) => ( + : } + label="Profile" + focused={focused} + /> + ), }} />