Skip to content

Commit

Permalink
Merge pull request #17 from DeveloperMindset123/onboarding-screen
Browse files Browse the repository at this point in the history 
Onboarding screen current working changes merged
  • Loading branch information
@DeveloperMindset123
DeveloperMindset123 authored Sep 22, 2024
2 parents 5859502 + 9e14b4e commit 36dbec3
Show file tree
Hide file tree
Showing 10 changed files with 221 additions and 210 deletions.
1 change: 1 addition & 0 deletions app.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ module.exports = {
backgroundColor: '#ffffff',
},
// Add your custom intent filters here for Deep Linking
softwareKeyboardLayoutMode: 'pan',
intentFilters: [
{
action: 'VIEW',
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"expo": "51.0.28",
"expo-device": "~6.0.2",
"expo-font": "~12.0.10",
"expo-image": "~1.12.13",
"expo-linking": "^6.3.1",
Expand Down
2 changes: 0 additions & 2 deletions src/app/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,6 @@ function RootLayoutNav() {
title: 'Modal',
presentation: 'modal',
animation: 'fade_from_bottom',

/** You have the ability to add left and right header JSX/TSX component here fx.: a Pressable Icon component or a Close Icon module*/
headerRight: () => <ThemeToggle />,
headerLeft: () => null,
}}
Expand Down
37 changes: 4 additions & 33 deletions src/app/authenticationMiddleware.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@ import getWindowDimensions from '@/lib/utils/getWindowDimension';
// @see https://reactnative.dev/docs/animations
const authenticationMiddleware: React.FC = () => {
const { width, height } = getWindowDimensions();
/*const [loaded, error] = useFonts({
PlaypenBold: require('src/assets/fonts/playpenBold.ttf'),
PlaypenRegular: require('src/assets/fonts/PlaypenSans-Regular.ttf'),
}); */

const handleImagePosition = () => {
if (width > 600) {
return {
Expand All @@ -30,9 +25,6 @@ const authenticationMiddleware: React.FC = () => {
}
};

/*if (!loaded && !error) {
return null;
} */
const retrievedStyling = handleImagePosition();
return (
<View className="flex-1 bg-black text-white justify-center">
Expand All @@ -47,20 +39,10 @@ const authenticationMiddleware: React.FC = () => {
/>
</Svg>
</View>
<Text
style={{
fontFamily: 'playpenBold',
}}
className="text-white mx-auto justify-center items-center mt-12 text-4xl"
>
<Text className="text-white mx-auto justify-center items-center mt-12 text-4xl font-serif">
Class Scheduler
</Text>
<Text
style={{
fontFamily: 'playpenRegular',
}}
className="text-white mx-3 mt-3 text-center text-base"
>
<Text className="text-white mx-3 mt-3 text-center text-base font-sans">
Welcome to CCNY Class Schedule Pro, your go-to app for managing class schedules, course
information and more at CCNY!
</Text>
Expand All @@ -70,29 +52,18 @@ const authenticationMiddleware: React.FC = () => {
router.push('/signin');
}}
>
<Text
style={{
fontFamily: 'playpenRegular',
}}
className="text-center text-black text-xl"
>
<Text className="text-center text-black text-xl font-normal">
Sign In{'\t'}
<AntDesign name="login" size={24} color="black" />
</Text>
</TouchableOpacity>
<TouchableOpacity
className="bg-white w-full h-12 justify-center rounded-full items-center mx-auto mt-2 active:bg-gray-100 active:opacity-30"
onPress={() => {
// TODO : Implement this screen
router.push('/signup');
}}
>
<Text
style={{
fontFamily: 'playpenRegular',
}}
className="text-center text-black text-xl"
>
<Text className="text-center text-black text-xl font-normal">
Sign Up {'\b'}
<AntDesign name="user" size={24} color="black" />
</Text>
Expand Down
32 changes: 8 additions & 24 deletions src/app/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Svg, { Path } from 'react-native-svg';
import getWindowDimensions from '@/lib/utils/getWindowDimension';

type FadeInViewProps = PropsWithChildren<{ style: ViewStyle }>;

// TODO : ! https://blog.logrocket.com/react-native-push-notifications-complete-guide/ --> notification system guide
const FadeInView: React.FC<FadeInViewProps> = (props) => {
const fadeAnim = useRef(new Animated.Value(0)).current; // opacity initial : 0
useEffect(() => {
Expand Down Expand Up @@ -36,19 +38,16 @@ const Landing: React.FC = () => {
width: 0,
height: 0,
});
/*const [loaded, error] = useFonts({
Sofadi: require('src/assets/fonts/SofadiOne-Regular.ttf'),
}); */

const { width, height } = getWindowDimensions();
useEffect(() => {
if (width > 600) {
setCurrentImageStyling('w-[600px] h-[600px] justify-center object-none m-auto mt-1');
setTitleFont(
'flex text-white font-Pacifico font-bold text-8xl items-center justify-center mx-auto mt-6'
'flex text-white font-Pacifico font-bold text-8xl items-center justify-center mx-auto mt-6 font-mono'
);
setSecondaryTextFont(
'mx-auto flex items-center justify-center text-white text-4xl leading-8 mt-4'
'mx-auto flex items-center justify-center text-white text-4xl leading-8 mt-4 font-sans'
);
// ipads and tablets
setSvgDimensions({
Expand All @@ -58,22 +57,21 @@ const Landing: React.FC = () => {
} else {
setCurrentImageStyling('w-80 h-80 justify-center object-none object-center m-auto mt-1');
setTitleFont(
'flex text-white font-Pacifico font-bold text-5xl items-center justify-center mx-auto mt-6'
'flex text-white font-Pacifico font-bold text-5xl items-center justify-center mx-auto mt-6 font-mono'
);
if (height > 700) {
// large phones
setSecondaryTextFont(
'mx-auto flex items-center justify-center text-white text-3xl leading-8 mt-4'
'mx-auto flex items-center justify-center text-white text-3xl leading-8 mt-4 font-sans'
);
setSvgDimensions({
width: 45,
height: 45,
});
} else {
setSecondaryTextFont(
'mx-auto flex items-center justify-center text-white text-2xl leading-8 mt-4'
'mx-auto flex items-center justify-center text-white text-2xl leading-8 mt-4 font-sans'
);
// small/mid-sized phones
setSvgDimensions({
width: 35,
height: 35,
Expand All @@ -83,10 +81,6 @@ const Landing: React.FC = () => {
}, [width, height]);
const imagePath = require('src/assets/images/Landing-Screen-Image-Updated.png');

/* if (!loaded && !error) {
return null;
} */

return (
<View className="flex-1 bg-black text-white">
<FadeInView
Expand All @@ -102,22 +96,12 @@ const Landing: React.FC = () => {
height={40}
/>
<Text
style={{
fontFamily: 'sofadi',
}}
// TODO : Convert to a function call
className={titleFont}
>
CCNY
</Text>
<Text
style={{
fontFamily: 'sofadi',
}}
className={secondaryTextFont}
>
Class Schedule Manager
</Text>
<Text className={secondaryTextFont}>Class Schedule Manager</Text>
</FadeInView>
<TouchableOpacity className="flex-1 justify-center items-center">
<Link
Expand Down
169 changes: 18 additions & 151 deletions src/app/signup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,169 +1,36 @@
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Keyboard } from 'react-native';
import Svg from 'react-native-svg';
import React from 'react';
import { Text, KeyboardAvoidingView, ScrollView, Platform } from 'react-native';
import { SignupIcon } from '@/lib/utils/getSvgs';
import { TouchableOpacity } from '@/components/core/button';
import { router } from 'expo-router';
import getWindowDimensions from '@/lib/utils/getWindowDimension';
import { SignupButton } from '@/components/core/signupButton';
import { TextInputComponent } from '@/components/core/textInputComponent';
import { getSignupStyles } from '@/components/core/textInputComponent/getSignupStyles';

const signup: React.FC = () => {
// TODO : Convert the types
const [titleFontStyling, setTitleFontStyling] = useState<string>('');
const [secondaryTextStyling, setSecondaryTextStyling] = useState<string>('');
const [imagePositionStyling, setImagePositionStyling] = useState<string>('');
const [emailInput, setEmailInput] = useState<string | any>('');
const [emailInputStyling, setEmailInputStyling] = useState<string | any>('');
const [passwordInput, setPasswordInput] = useState<string | any>('');
const [buttonStyling, setButtonStyling] = useState<string>('');
// same styling for confirm password
const [passwordInputStyling, setPasswordInputStyling] = useState<string>('');
const [confirmPasswordInput, setConfirmPasswordInput] = useState<string | any>('');
const { width, height } = getWindowDimensions();

// TODO : Continue this implementation
useEffect(() => {
if (width > 600 && height > 700) {
// ipad styling
setTitleFontStyling('mt-14 text-white text-[55px]');
setImagePositionStyling('-top-[48px] items-center justify-center mx-auto bg-transparent');
setSecondaryTextStyling('text-white text-[35px] text-center px-14');
setPasswordInputStyling(
'bg-[#2f2f2f] text-[#94a3b8] h-[40px] m-[12px] border-spacing-1 text-2xl p-[10px] rounded-full pl-10'
);
setEmailInputStyling(
'bg-[#2f2f2f] text-[#94a3b8] h-[40px] m-[12px] border-spacing-1 text-2xl p-[10px] rounded-full pl-10 mt-5'
);
setButtonStyling(
'bg-white w-[700px] h-[60px] justify-center rounded-full items-center mx-auto mt-7 active:bg-gray-100 active:opacity-30'
);
} else {
if (height > 700) {
// larger phones
setTitleFontStyling('text-white text-3xl mt-8');
setImagePositionStyling('-top-[40px] items-center justify-center mx-auto mb-5');
setSecondaryTextStyling('text-white mt-2 text-lg text-center px-8');
setPasswordInputStyling(
'bg-[#2f2f2f] text-[#94a3b8] h-[40px] m-[12px] border-spacing-1 text-lg p-[10px] rounded-full pl-10'
);
setEmailInputStyling(
'bg-[#2f2f2f] text-[#94a3b8] h-[40px] m-[12px] border-spacing-1 text-lg p-[10px] rounded-full pl-10 mt-8'
);
setButtonStyling(
'bg-white w-96 h-12 justify-center rounded-full items-center mx-auto mt-6 active:bg-gray-100 active:opacity-30'
);
} else {
setTitleFontStyling('text-white text-2xl mt-6');
setImagePositionStyling('-top-2 items-center justify-center mx-auto');
setSecondaryTextStyling('text-white mt-1 text-md text-center px-10');
setPasswordInputStyling(
'bg-[#2f2f2f] text-[#94a3b8] h-[38px] m-[12px] border-spacing-1 text-md rounded-full pl-10'
);
setEmailInputStyling(
'bg-[#2f2f2f] text-[#94a3b8] h-[40px] m-[12px] border-spacing-1 text-md rounded-full pl-10 mt-6'
);
setButtonStyling(
'bg-white w-80 h-12 justify-center rounded-full items-center mx-auto mt-4 active:bg-gray-100 active:opacity-30'
);
}
}
}, [width, height]);

// width can be static
const { titleFontStyling, secondaryTextStyling } = getSignupStyles();
let inputBoxWidth = width * 0.9;

// height needs to be adjusted based on different screen sizes
let inputBoxHeight = height * 0.07;

return (
<View className="flex-1 bg-black text-white justify-center items-center">
<View className={imagePositionStyling}>
<ScrollView className="flex-1 bg-black text-white overflow-auto">
<KeyboardAvoidingView
className="items-center justify-center mx-auto mt-3"
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={100}
>
<SignupIcon
style={{
width: width * 0.45,
height: height * 0.25,
}}
/>

<Text
style={{
fontFamily: 'playpenLight',
}}
className={titleFontStyling}
>
Join CCNY Schedule Pro!
</Text>
<Text
style={{
fontFamily: 'playpenExtraLight',
}}
className={secondaryTextStyling}
>
Explore and manage class schedules efficiently
</Text>
{/**TODO : Implement a map to iteraete and implement the inputs as needed, abstract it or make it dynamic */}
<TextInput
style={{
width: inputBoxWidth,
height: inputBoxHeight,
}}
className={emailInputStyling}
onChange={setEmailInput}
placeholder="Enter Your Email"
value={emailInput}
placeholderTextColor="black"
keyboardType="default"
autoCapitalize="none"
></TextInput>
<TextInput
style={{
width: inputBoxWidth,
height: inputBoxHeight,
}}
className={passwordInputStyling}
onChange={setPasswordInput}
placeholder="Enter Your Password"
placeholderTextColor="black"
value={passwordInput}
autoCapitalize="none"
secureTextEntry={true}
blurOnSubmit={false}
keyboardType="default"
onSubmitEditing={() => Keyboard.dismiss()}
></TextInput>
<TextInput
style={{
width: inputBoxWidth,
height: inputBoxHeight,
}}
autoCapitalize="none"
className={passwordInputStyling}
onChange={setConfirmPasswordInput}
placeholder="Confirm Your Password"
placeholderTextColor="black"
value={confirmPasswordInput}
blurOnSubmit={false}
secureTextEntry={true}
keyboardType="default"
onSubmitEditing={() => Keyboard.dismiss()}
></TextInput>
<TouchableOpacity
className={buttonStyling}
onPress={() => {
// TODO : Implement this screen
router.push('/onboardingGetStarted');
}}
>
<Text
style={{
fontFamily: 'playpenLight',
}}
className="text-center text-black text-xl"
>
Sign Up {'\b'}
</Text>
</TouchableOpacity>
</View>
</View>
<Text className={titleFontStyling}>Join CCNY Schedule Pro!</Text>
<Text className={secondaryTextStyling}>Explore and manage class schedules efficiently</Text>
</KeyboardAvoidingView>
<TextInputComponent />
<SignupButton width={inputBoxWidth} height={inputBoxHeight} route="/onboardingGetStarted" />
</ScrollView>
);
};

Expand Down
Loading

0 comments on commit 36dbec3

Please sign in to comment.