Skip to content

Commit 88a56cf

Browse files
adammottsadammotts
committed
Sign Up/In Backgrounds
1 parent a364b1a commit 88a56cf

File tree

16 files changed

+84
-43
lines changed

16 files changed

+84
-43
lines changed

‎frontend/app/forgot-password.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState } from 'react';
22
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
3-
import { SafeAreaView } from 'react-native-safe-area-context';
43
import { useRouter } from 'expo-router';
54
import { Ionicons } from '@expo/vector-icons';
65
import { SignUpFlowInput } from '@/components/signup/SignUpFlowInput';
@@ -24,7 +23,7 @@ export default function ForgotPassword() {
2423
};
2524

2625
return (
27-
<SafeAreaView style={styles.safeAreaView}>
26+
<View style={styles.safeAreaView}>
2827
<View style={styles.container}>
2928
<View style={styles.header}>
3029
<TouchableOpacity style={styles.backButton} onPress={handleBack}>
@@ -58,7 +57,7 @@ export default function ForgotPassword() {
5857
</View>
5958
</View>
6059
</View>
61-
</SafeAreaView>
60+
</View>
6261
);
6362
}
6463

‎frontend/app/login.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState } from 'react';
22
import { Alert, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
3-
import { SafeAreaView } from 'react-native-safe-area-context';
43
import { useRouter } from 'expo-router';
54
import { useAuth } from '@/context/AuthContext';
65
import { Image } from 'expo-image';
@@ -134,14 +133,6 @@ const styles = StyleSheet.create({
134133
paddingBottom: 25,
135134
justifyContent: 'flex-start',
136135
},
137-
headerWaves: {
138-
position: 'absolute',
139-
top: 0,
140-
left: 0,
141-
right: 0,
142-
height: 150,
143-
opacity: 0.95,
144-
},
145136
logoContainer: {
146137
alignItems: 'center',
147138
marginBottom: 0,

‎frontend/app/signup/_layout.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import React from 'react';
2-
import { Stack, usePathname } from 'expo-router';
3-
import { SafeAreaView } from 'react-native-safe-area-context';
2+
import { Stack } from 'expo-router';
43
import { SignUpProvider } from '@/context/SignUpContext';
5-
import { StyleSheet } from 'react-native';
4+
import { StyleSheet, View } from 'react-native';
65
import { Colors } from '@/constants/Colors';
7-
import { SignUpProgress } from '@/components/signup/SignUpProgress';
86

97
export default function SignUpLayout() {
10-
const pathname = usePathname();
11-
const isIndexPage = pathname === '/signup';
12-
138
return (
149
<SignUpProvider>
15-
<SafeAreaView style={styles.safeAreaView}>
16-
{!isIndexPage && <SignUpProgress />}
10+
<View style={styles.safeAreaView}>
1711
<Stack
1812
screenOptions={{
1913
headerShown: false,
@@ -26,7 +20,7 @@ export default function SignUpLayout() {
2620
<Stack.Screen name="qualifications" />
2721
<Stack.Screen name="volunteer-days" />
2822
</Stack>
29-
</SafeAreaView>
23+
</View>
3024
</SignUpProvider>
3125
);
3226
}

‎frontend/app/signup/birthday.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ import DateTimePicker from '@react-native-community/datetimepicker';
44
import { useSignUp } from '@/context/SignUpContext';
55
import { Colors } from '@/constants/Colors';
66
import { Fonts } from '@/constants/Fonts';
7-
import { router } from 'expo-router';
7+
import { Image } from 'expo-image';
8+
import { router, usePathname } from 'expo-router';
89
import { SignUpFlowButton } from '@/components/signup/SignUpFlowButton';
10+
import { SignUpProgress } from '@/components/signup/SignUpProgress';
911

1012
function SignUpBirthday() {
13+
const pathname = usePathname();
14+
const isIndexPage = pathname === '/signup';
1115
const { data, setData, setCurrentStep, errors, setError, clearErrors } =
1216
useSignUp();
1317

@@ -62,6 +66,13 @@ function SignUpBirthday() {
6266

6367
return (
6468
<View style={styles.container}>
69+
<Image
70+
source={require('@/assets/images/birthday.png')}
71+
style={StyleSheet.absoluteFill}
72+
contentFit="cover"
73+
pointerEvents="none"
74+
/>
75+
{!isIndexPage && <SignUpProgress />}
6576
<View style={styles.header}>
6677
<Text style={styles.title}>When is your birthday?</Text>
6778
</View>
@@ -98,10 +109,11 @@ const styles = StyleSheet.create({
98109
container: {
99110
flex: 1,
100111
backgroundColor: Colors.light.white,
101-
paddingTop: 25,
112+
paddingTop: 75,
102113
paddingBottom: 100,
103114
},
104115
header: {
116+
marginTop: 50,
105117
marginBottom: 32,
106118
},
107119
title: {
@@ -123,10 +135,9 @@ const styles = StyleSheet.create({
123135
},
124136
fixedButtonContainer: {
125137
position: 'absolute',
126-
bottom: 0,
138+
bottom: 20,
127139
left: 0,
128140
right: 0,
129141
padding: 20,
130-
backgroundColor: Colors.light.white,
131142
},
132143
});

‎frontend/app/signup/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ const styles = StyleSheet.create({
150150
flex: 1,
151151
backgroundColor: Colors.light.transparent,
152152
paddingHorizontal: 50,
153-
paddingTop: '15%',
153+
paddingTop: '20%',
154154
paddingBottom: 25,
155155
justifyContent: 'flex-start',
156156
},

‎frontend/app/signup/personal.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React, { useEffect, useState } from 'react';
22
import { View, Text, StyleSheet } from 'react-native';
3+
import { Image } from 'expo-image';
34
import { useSignUp } from '@/context/SignUpContext';
4-
import { useRouter } from 'expo-router';
5+
import { usePathname, useRouter } from 'expo-router';
56
import { Colors } from '@/constants/Colors';
67
import { Fonts } from '@/constants/Fonts';
78
import { SignUpFlowButton } from '@/components/signup/SignUpFlowButton';
89
import { SignUpFlowInput } from '@/components/signup/SignUpFlowInput';
10+
import { SignUpProgress } from '@/components/signup/SignUpProgress';
911

1012
function SignUpPersonal() {
13+
const pathname = usePathname();
14+
const isIndexPage = pathname === '/signup';
1115
const { data, setData, setCurrentStep, errors, setError, clearErrors } =
1216
useSignUp();
1317
const router = useRouter();
@@ -46,6 +50,13 @@ function SignUpPersonal() {
4650

4751
return (
4852
<View style={styles.container}>
53+
<Image
54+
source={require('@/assets/images/personal.png')}
55+
style={StyleSheet.absoluteFill}
56+
contentFit="cover"
57+
pointerEvents="none"
58+
/>
59+
{!isIndexPage && <SignUpProgress />}
4960
<View style={styles.header}>
5061
<Text style={styles.title}>What is your name?</Text>
5162
</View>
@@ -107,11 +118,11 @@ const styles = StyleSheet.create({
107118
container: {
108119
flex: 1,
109120
backgroundColor: Colors.light.white,
110-
paddingHorizontal: 50,
111121
paddingTop: 75,
112122
paddingBottom: 100,
113123
},
114124
header: {
125+
marginTop: 50,
115126
marginBottom: 32,
116127
},
117128
title: {
@@ -123,6 +134,7 @@ const styles = StyleSheet.create({
123134
},
124135
form: {
125136
gap: 20,
137+
paddingHorizontal: 50,
126138
},
127139
inputGroup: {
128140
gap: 8,
@@ -134,11 +146,10 @@ const styles = StyleSheet.create({
134146
},
135147
fixedButtonContainer: {
136148
position: 'absolute',
137-
bottom: 0,
149+
bottom: 20,
138150
left: 0,
139151
right: 0,
140152
padding: 20,
141-
backgroundColor: Colors.light.white,
142153
},
143154
continueButton: {
144155
width: '85%',

‎frontend/app/signup/preferences.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@ import {
77
ScrollView,
88
} from 'react-native';
99
import { useSignUp } from '@/context/SignUpContext';
10-
import { useRouter } from 'expo-router';
10+
import { usePathname, useRouter } from 'expo-router';
1111
import { Colors } from '@/constants/Colors';
1212
import { Fonts } from '@/constants/Fonts';
13+
import { Image } from 'expo-image';
1314
import { SignUpFlowButton } from '@/components/signup/SignUpFlowButton';
1415
import { EventType } from '@/types/api/volunteer';
1516
import { Ionicons } from '@expo/vector-icons';
17+
import { SignUpProgress } from '@/components/signup/SignUpProgress';
1618

1719
function SignUpPreferences() {
20+
const pathname = usePathname();
21+
const isIndexPage = pathname === '/signup';
1822
const { data, setData, setCurrentStep } = useSignUp();
1923
const router = useRouter();
2024

@@ -51,6 +55,13 @@ function SignUpPreferences() {
5155

5256
return (
5357
<View style={styles.container}>
58+
<Image
59+
source={require('@/assets/images/preferences.png')}
60+
style={StyleSheet.absoluteFill}
61+
contentFit="cover"
62+
pointerEvents="none"
63+
/>
64+
{!isIndexPage && <SignUpProgress />}
5465
<View style={styles.header}>
5566
<Text style={styles.title}>
5667
What cause(s) are most passionate about?
@@ -116,11 +127,11 @@ const styles = StyleSheet.create({
116127
container: {
117128
flex: 1,
118129
backgroundColor: Colors.light.white,
119-
paddingHorizontal: 20,
120130
paddingTop: 75,
121131
paddingBottom: 100,
122132
},
123133
header: {
134+
marginTop: 50,
124135
marginBottom: 32,
125136
alignItems: 'center',
126137
},
@@ -179,10 +190,9 @@ const styles = StyleSheet.create({
179190
},
180191
fixedButtonContainer: {
181192
position: 'absolute',
182-
bottom: 0,
193+
bottom: 20,
183194
left: 0,
184195
right: 0,
185196
padding: 20,
186-
backgroundColor: Colors.light.white,
187197
},
188198
});

‎frontend/app/signup/qualifications.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@ import {
77
ScrollView,
88
} from 'react-native';
99
import { useSignUp } from '@/context/SignUpContext';
10-
import { useRouter } from 'expo-router';
10+
import { usePathname, useRouter } from 'expo-router';
1111
import { Colors } from '@/constants/Colors';
1212
import { Fonts } from '@/constants/Fonts';
13+
import { Image } from 'expo-image';
1314
import { SignUpFlowButton } from '@/components/signup/SignUpFlowButton';
1415
import { Qualification } from '@/types/api/volunteer';
1516
import { Ionicons } from '@expo/vector-icons';
17+
import { SignUpProgress } from '@/components/signup/SignUpProgress';
1618

1719
function SignUpQualifications() {
20+
const pathname = usePathname();
21+
const isIndexPage = pathname === '/signup';
1822
const { data, setData, setCurrentStep } = useSignUp();
1923
const router = useRouter();
2024

@@ -56,6 +60,13 @@ function SignUpQualifications() {
5660

5761
return (
5862
<View style={styles.container}>
63+
<Image
64+
source={require('@/assets/images/qualifications.png')}
65+
style={StyleSheet.absoluteFill}
66+
contentFit="cover"
67+
pointerEvents="none"
68+
/>
69+
{!isIndexPage && <SignUpProgress />}
5970
<View style={styles.header}>
6071
<Text style={styles.title}>What qualifications do you have?</Text>
6172
</View>
@@ -119,13 +130,14 @@ const styles = StyleSheet.create({
119130
container: {
120131
flex: 1,
121132
backgroundColor: Colors.light.white,
122-
paddingHorizontal: 20,
123133
paddingTop: 75,
124134
paddingBottom: 100,
125135
},
126136
header: {
137+
marginTop: 50,
127138
marginBottom: 32,
128139
alignItems: 'center',
140+
paddingHorizontal: 20,
129141
},
130142
title: {
131143
fontSize: 24,
@@ -145,6 +157,7 @@ const styles = StyleSheet.create({
145157
flexWrap: 'wrap',
146158
justifyContent: 'center',
147159
gap: 8,
160+
paddingHorizontal: 20,
148161
},
149162
qualificationButton: {
150163
backgroundColor: Colors.light.white,
@@ -176,10 +189,9 @@ const styles = StyleSheet.create({
176189
},
177190
fixedButtonContainer: {
178191
position: 'absolute',
179-
bottom: 0,
192+
bottom: 20,
180193
left: 0,
181194
right: 0,
182195
padding: 20,
183-
backgroundColor: Colors.light.white,
184196
},
185197
});

‎frontend/app/signup/volunteer-days.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,15 @@ import {
99
import { useSignUp } from '@/context/SignUpContext';
1010
import { Colors } from '@/constants/Colors';
1111
import { Fonts } from '@/constants/Fonts';
12+
import { Image } from 'expo-image';
1213
import { SignUpFlowButton } from '@/components/signup/SignUpFlowButton';
1314
import { DayOfWeek } from '@/types/api/volunteer';
15+
import { usePathname } from 'expo-router';
16+
import { SignUpProgress } from '@/components/signup/SignUpProgress';
1417

1518
function SignUpVolunteerDays() {
19+
const pathname = usePathname();
20+
const isIndexPage = pathname === '/signup';
1621
const { data, setData, setCurrentStep, submitSignUp } = useSignUp();
1722

1823
const [selectedDays, setSelectedDays] = useState<DayOfWeek[]>(
@@ -58,6 +63,13 @@ function SignUpVolunteerDays() {
5863

5964
return (
6065
<View style={styles.container}>
66+
<Image
67+
source={require('@/assets/images/volunteer-days.png')}
68+
style={StyleSheet.absoluteFill}
69+
contentFit="cover"
70+
pointerEvents="none"
71+
/>
72+
{!isIndexPage && <SignUpProgress />}
6173
<View style={styles.header}>
6274
<Text style={styles.title}>
6375
What day(s) do you prefer to volunteer?
@@ -112,8 +124,10 @@ const styles = StyleSheet.create({
112124
paddingBottom: 100,
113125
},
114126
header: {
127+
marginTop: 50,
115128
marginBottom: 32,
116129
alignItems: 'center',
130+
marginHorizontal: 40,
117131
},
118132
title: {
119133
fontSize: 24,
@@ -158,10 +172,9 @@ const styles = StyleSheet.create({
158172
},
159173
fixedButtonContainer: {
160174
position: 'absolute',
161-
bottom: 0,
175+
bottom: 20,
162176
left: 0,
163177
right: 0,
164178
padding: 20,
165-
backgroundColor: Colors.light.white,
166179
},
167180
});

‎frontend/assets/images/birthday.png‎

22.4 KB
Loading

0 commit comments

Comments
 (0)