Skip to content

Commit

Permalink
fix: dropdown component, margins and buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@in-mai-space
in-mai-space committed Mar 1, 2024
1 parent b092764 commit a1f016a
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 89 deletions.
14 changes: 8 additions & 6 deletions frontend/sac-mobile/app/(auth)/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,20 +56,20 @@ const Login = () => {
<SafeAreaView className="bg-neutral-500 h-[100%]" edges={['top']}>
<View className="flex-1">
<View className="px-[8%] pb-[10%]">
<Wordmark textColor="white" />
<View className="pt-[10%] pb-[5%]">
<View className="pt-[1%]"><Wordmark textColor="white" /></View>

Check failure on line 59 in frontend/sac-mobile/app/(auth)/login.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

Replace `<Wordmark·textColor="white"·/>` with `⏎························<Wordmark·textColor="white"·/>⏎····················`
<View className="pt-[10%] pb-[6.5%]">
<Header

Check warning on line 61 in frontend/sac-mobile/app/(auth)/login.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

Empty components are self-closing
text="Let's go"
fontSize="45"
color="white"
></Header>
</View>
<Text className="text-white pt-[2%] text-lg leading-5">
<Text className="text-white pt-[3%] text-lg leading-5">
Discover, follow, and join all the clubs & events
Northeastern has to offer
</Text>
</View>
<View className="bg-white pt-[10%] pb-[2%] flex-1 pt-[12%] rounded-tl-3xl rounded-tr-3xl px-[8%]">
<View className="bg-white pt-[13.5%] pb-[2%] flex-1 rounded-tl-3xl rounded-tr-3xl px-[8%]">
<View>
<Controller
control={control}
Expand Down Expand Up @@ -114,22 +114,24 @@ const Login = () => {
<Text>Forgot password?</Text>
</View>

<View className="flex-row justify-around">
<View className="flex-row justify-between">
<Button
backgroundColor="white"
title="Sign up"
borderColor="gray"
fullWidth={false}
onPress={() => router.push('/(auth)/register')}
/>
<Button
title="Login"
color="white"
borderColor="gray"
backgroundColor="gray"
fullWidth={false}
onPress={handleSubmit(onSubmit)}
/>
</View>
<View className="mt-[5%] flex-row justify-center">
<View className="mt-[9%] flex-row justify-center">
<Text className="font-bold">Not a student?</Text>
<Text> Continue as a guest.</Text>
</View>
Expand Down
113 changes: 47 additions & 66 deletions frontend/sac-mobile/app/(auth)/register.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Controller, useForm } from 'react-hook-form';
import {
Alert,
ScrollView,
ScrollViewBase,

Check failure on line 6 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

'ScrollViewBase' is defined but never used
StyleSheet,

Check failure on line 7 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

'StyleSheet' is defined but never used
Text,
TextInput,

Check failure on line 9 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

'TextInput' is defined but never used
Expand All @@ -20,21 +21,34 @@ import { DropdownComponent } from '@/components/dropdown';
import Header from '@/components/header';
import Input from '@/components/input';

// list of items for dropdown menu
type Item = {
label: string,

Check failure on line 26 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

Replace `,` with `;`
value: string,

Check failure on line 27 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

Replace `,` with `;`
}

Check failure on line 28 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

Insert `;`

// list of graduation year
const graduationYear = () => {
var year = new Date().getFullYear();
const graduationYear: Item[] = [];

Check warning on line 33 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

'graduationYear' is already declared in the upper scope on line 31 column 7
for (let i = 0; i < 5; i++) {
graduationYear.push({
label: String(year + i),
value: String(year + i)
});
}
return graduationYear;
}

Check failure on line 41 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

Insert `;`

type RegisterFormData = {
firstName: string;
lastName: string;
email: string;
password: string;
passwordConfirm: string;
id: string;
};

const graduationYear = [
{ label: '2024', value: '2024' },
{ label: '2025', value: '2025' },
{ label: '2026', value: '2026' },
{ label: '2027', value: '2027' },
{ label: '2028', value: '2028' }
];

const registerSchema = z.object({
firstName: z
.string()
Expand Down Expand Up @@ -70,28 +84,28 @@ const Register = () => {
};

return (
<ScrollView className="scroll-smooth">
<SafeAreaView
edges={['top']}
style={styles.container}
className="bg-neutral-500"
>
<View className="px-[8%] pb-[10%]">
<View className="px-[8%] pb-[9%]">
<Wordmark
textColor="white"
button={true}
func={() => router.push('/(auth)/login')}
title="Login"
/>
<View className="pt-[10%] pb-[5%]">
<View className="pt-[9%] pb-[6%]">
<Header text="Sign up" fontSize="45" color="white"></Header>

Check warning on line 100 in frontend/sac-mobile/app/(auth)/register.tsx

View workflow job for this annotation

GitHub Actions / Lint (18.x) 

Empty components are self-closing
</View>
<Text style={styles.description}>
<Text className="text-lg text-white">
Discover, follow, and join all the clubs & events
Northeastern has to offer
</Text>
</View>
<View style={styles.lowerContainer}>
<View className="w-full mb-4">
<View className="bg-white px-[8%] pt-[13%] rounded-t-3xl">
<View className="w-full mb-7">
<Controller
control={control}
render={({ field: { onChange, value } }) => (
Expand All @@ -112,7 +126,7 @@ const Register = () => {
)}
</View>

<View className="w-full mb-4">
<View className="w-full mb-7">
<Controller
control={control}
render={({ field: { onChange, value } }) => (
Expand All @@ -131,7 +145,7 @@ const Register = () => {
{errors.lastName && <Text>{errors.lastName.message}</Text>}
</View>

<View className="w-full mb-4">
<View className="w-full mb-7">
<Controller
control={control}
render={({ field: { onChange, value } }) => (
Expand All @@ -150,7 +164,7 @@ const Register = () => {
{errors.email && <Text>{errors.email.message}</Text>}
</View>

<View className="w-full mb-4">
<View className="w-full mb-7">
<Controller
control={control}
render={({ field: { onChange, value } }) => (
Expand All @@ -163,13 +177,21 @@ const Register = () => {
onSubmitEditing={handleSubmit(onSubmit)}
/>
)}
name="password"
name="id"
rules={{ required: 'Password is required' }}
/>
{errors.password && <Text>{errors.password.message}</Text>}
</View>

<View className="w-full mb-4">
<View className="mb-6">
<DropdownComponent
title="Intended Graduation Year"
item={graduationYear()}
placeholder="Select Year"
/>
</View>

<View className="w-full mb-7">
<Controller
control={control}
render={({ field: { onChange, value } }) => (
Expand All @@ -189,78 +211,37 @@ const Register = () => {
{errors.password && <Text>{errors.password.message}</Text>}
</View>

<View className="w-full mb-4">
<View className="w-full mb-7">
<Controller
control={control}
render={({ field: { onChange, value } }) => (
<Input
title="Password Confirmation"
autoCorrect={false}
placeholder="Password"
placeholder="Confirm your password"
onChangeText={onChange}
value={value}
onSubmitEditing={handleSubmit(onSubmit)}
secureTextEntry={true}
/>
)}
name="password"
name="passwordConfirm"
rules={{ required: 'Password is required' }}
/>
{errors.password && <Text>{errors.password.message}</Text>}
</View>

<View>
<DropdownComponent
title="Intended Graduation Year"
item={graduationYear}
placeholder="Select Year"
/>
</View>
<View style={styles.submit}>
<View className="pt-[2%] pb-[25%]">
<Button
title="Submit"
fullWidth={true}
color="white"
onPress={handleSubmit(onSubmit)}
/>
</View>
</View>
</SafeAreaView>
</ScrollView>
);
};

export default Register;

const styles = StyleSheet.create({
container: {
flex: 1
},
lowerContainer: {
backgroundColor: 'white',
borderRadius: 20,
flex: 1,
padding: '8%'
},
description: {
fontSize: 20,
color: 'white'
},
wordmarkButton: {
flexDirection: 'row',
justifyContent: 'space-evenly'
},
wordmark: {
flex: 1
},
button: {
flexDirection: 'row',
justifyContent: 'flex-end',
height: '50%'
},
submit: {
flexDirection: 'row',
justifyContent: 'center'
},
header: {
marginTop: '9%'
}
});
2 changes: 1 addition & 1 deletion frontend/sac-mobile/app/(auth)/welcome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const styles = StyleSheet.create({
},
description: {
height: '15%',
fontSize: 23
fontSize: 24
},
button: {
height: '5%'
Expand Down
16 changes: 8 additions & 8 deletions frontend/sac-mobile/components/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ type ButtonProps = {
color?: string;
onPress?: () => void;
borderColor?: string;
fullWidth?: boolean;
};

const Button = (props: ButtonProps) => {
Expand All @@ -14,28 +15,27 @@ const Button = (props: ButtonProps) => {
backgroundColor: props.backgroundColor || 'gray',
fontSize: 24,
fontWeight: 'bold',
borderRadius: 15,
width: '47.5%',
borderColor: 'black'
borderRadius: 14,
width: props.fullWidth ? '100%' : '47.5%',
borderColor: 'black',
},
title: {
color: props.color || 'black',
textAlign: 'center'
textAlign: 'center',
},
border: {
borderWidth: 1,
borderRadius: 15,
borderColor: props.borderColor || 'gray'
borderColor: props.borderColor || 'gray',
}
});

return (
<Pressable onPress={props.onPress} style={styles.button}>
<View
className="border-1 rounded-xl pt-[10%]"
className="border-1 rounded-xl pt-4 pb-4"
style={styles.border}
>
<Text className="pb-[10%] px-[5%]" style={styles.title}>
<Text className="px-[5%]" style={styles.title}>
{props.title}
</Text>
</View>
Expand Down
Loading

0 comments on commit a1f016a

Please sign in to comment.