Skip to content

added splash screen, revamped login screen. #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nirbhaysinghnarang wants to merge 4 commits into
base: master
Choose a base branch
from
Open

added splash screen, revamped login screen. #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
be785e9
added splash screen, revamped login screen.
nirbhaysinghnarang May 28, 2022
e077a76
Minor cleanup
Archit404Error May 29, 2022
d34e028
Finished updating events frontend, new register screen.
nirbhaysinghnarang Jun 9, 2022
4c90f96
Rename detailsContainer
Archit404Error Jun 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import { createMaterialTopTabNavigator } from '@react-navigation/material-top-ta
import { Ionicons, MaterialIcons } from '@expo/vector-icons';

import HomeScreen from './CoreScreens/home';
import DetailsScreen from './Events/detailsContainer';
import SplashScreen from './CoreScreens/splashScreen';
import DetailsScreen from './Events/DetailsContainer';
import FriendScreen from './Friends/friendSuggestions';
import CreateScreen from './Events/createEvent';
import ChatScreen from './Chats/userChats';
Expand Down Expand Up @@ -281,6 +282,7 @@ export function Authentication() {
<Stack.Navigator
screenOptions={{ headerShown: false, headerBackTitleVisible: false, gestureEnabled: false }}
>
<Stack.Screen name="Splash" component={SplashScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
<Stack.Screen name="App" component={MainTab} />
Expand All @@ -302,10 +304,10 @@ function DetermineScreen() {

return (
<>
{loggedIn ?
<MainTab setLoggedIn={setLoggedIn} /> :
<Authentication />
}
{/* {loggedIn ?
Copy link
Owner

@Archit404Error Archit404Error May 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure to uncomment this before merge

<MainTab setLoggedIn={setLoggedIn} /> : */}
<Authentication />
{/* } */}
</>
)
}
Expand Down
44 changes: 27 additions & 17 deletions CoreScreens/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useContext } from 'react';
Copy link
Owner

@Archit404Error Archit404Error May 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Idk where to put this specifically but a few things about the login page that need to be fixed:

  • Login button is initially white so it's confusing for the user, and also looks kinda ugly, I think we should have the rounded button type thing we had before but the button is initially a black outline/text and then becomes orange with white text
  • Too much white space between inputs and login button
  • The yolo pill thing looks kind of ugly

import { View, Text, ActivityIndicator, KeyboardAvoidingView, TouchableOpacity, Alert } from 'react-native';
import { View, Text, ActivityIndicator, KeyboardAvoidingView, TouchableOpacity, ImageBackground } from 'react-native';
import * as Location from 'expo-location';
import { styles } from '../styles';
import { Input, Button } from 'react-native-elements/';
Expand All @@ -19,6 +19,8 @@ export default ({ navigation }) => {
const context = useContext(Context);
const [fontLoaded] = useFonts({
Fredoka: require('../assets/fonts/FredokaOne-Regular.ttf'),
OpenSans: require('../assets/fonts/OpenSans.ttf'),
OpenSansItalic: require('../assets/fonts/OpenSansItalic.ttf'),
});

const setLocation = async () => {
Expand Down Expand Up @@ -61,32 +63,40 @@ export default ({ navigation }) => {
return (
<>
<KeyboardAvoidingView behavior='padding' style={styles.loginScreenContainer}>
<LinearGradient
// Background Linear Gradient
colors={['rgba(236, 99, 94, 1)', 'rgba(245, 192, 106, 1)']}
style={{ position: 'absolute', top: 0, left: 0, width: "100%", height: "100%" }}
/>
<ImageBackground

source={{ uri: "https://news.cornell.edu/sites/default/files/styles/full_size/public/UP_2017_0630_051.jpg?itok=MzKRS1G7" }}
Copy link
Owner

@Archit404Error Archit404Error May 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is there random whitespace here? Remove and format properly

style={styles.loginScreenHeroImg} >

<View style={styles.yoloPillXL}>
<Text style={{
color: 'white',
fontFamily: 'OpenSans',
fontWeight: "800",
fontSize: 40,
}}>Login</Text>
</View>
</ImageBackground>
<View style={{ alignItems: 'center' }}>
<Text style={{ color: 'white', fontSize: 100, fontWeight: "900", fontFamily: 'Fredoka' }}>YOLO</Text>
<Input
placeholder="Username"
placeholderTextColor='rgba(255,255,255,0.6)'
placeholderTextColor='grey'
textContentType={'username'}
leftIcon={<Ionicons name="person" size={20} style={styles.loginIcon} />}
leftIcon={<Ionicons name="person" size={18} style={styles.loginIcon} />}
onChangeText={t => setUserName(t)}
inputContainerStyle={{ borderBottomColor: 'white', marginLeft: 20, marginRight: 20 }}
inputContainerStyle={{ borderBottomColor: 'grey', marginLeft: 20, marginRight: 20 }}
containerStyle={{ marginTop: 20 }}
inputStyle={{ color: 'white', fontSize: 22 }}
inputStyle={{ color: 'grey', fontSize: 18 }}
/>
<Input
placeholder="Password"
secureTextEntry
placeholderTextColor='rgba(255,255,255,0.6)'
placeholderTextColor='grey'
textContentType={'password'}
leftIcon={<Ionicons name="key-outline" size={20} style={styles.loginIcon} />}
leftIcon={<Ionicons name="key-outline" size={18} style={styles.loginIcon} />}
onChangeText={t => setPassword(t)}
inputContainerStyle={{ borderBottomColor: 'white', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'white', fontSize: 22 }}
inputContainerStyle={{ borderBottomColor: 'grey', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'grey', fontSize: 18 }}

/>
<Button
Expand Down Expand Up @@ -138,8 +148,8 @@ export default ({ navigation }) => {
password: password
});
}}>
<Text style={{ color: "white", alignSelf: 'center', marginTop: 30 }}>
Don't have an account? <Text style={{ fontWeight: "bold" }}>Sign up here!</Text>
<Text style={{ color: "grey", alignSelf: 'center', marginTop: 30 }}>
Don't have an account? <Text style={{ fontWeight: "bold", color: "grey" }}>Sign up here!</Text>
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
Expand Down
56 changes: 34 additions & 22 deletions CoreScreens/register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from "react";
import { View, Text, ActivityIndicator, KeyboardAvoidingView, TouchableOpacity, Alert } from "react-native";
import { View, Text, ActivityIndicator, KeyboardAvoidingView, TouchableOpacity, ImageBackground } from "react-native";
import { Input, Button } from "react-native-elements";
import { styles } from "../styles";
import { Ionicons } from '@expo/vector-icons';
Expand All @@ -22,6 +22,8 @@ export default ({ navigation, route }) => {

const [_] = useFonts({
Copy link
Owner

@Archit404Error Archit404Error May 29, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Idk where to leave this comment but I think you fiddling with the styles in styles.js screwed up the register page so it's not centered vertically anymore and also the icons are orange but so is the BG of register page, so make sure to fix that

Fredoka: require('../assets/fonts/FredokaOne-Regular.ttf'),
OpenSans: require('../assets/fonts/OpenSans.ttf'),
OpenSansItalic: require('../assets/fonts/OpenSansItalic.ttf'),
});

useEffect(() => {
Expand Down Expand Up @@ -50,15 +52,24 @@ export default ({ navigation, route }) => {
}, [loading]);

return (
<KeyboardAvoidingView behavior="padding" style={styles.loginScreenContainer}>
<LinearGradient
// Background Linear Gradient
colors={['rgba(236, 99, 94, 1)', 'rgba(245, 192, 106, 1)']}
style={{ position: 'absolute', top: 0, left: 0, width: "100%", height: "100%" }}
/>
<KeyboardAvoidingView behavior='padding' style={styles.loginScreenContainer}>
<ImageBackground

source={{ uri: "https://sce.cornell.edu/img/content/825-inset-full-1.jpg" }}
style={styles.loginScreenHeroImg} >

<View style={styles.yoloPillXL}>
<Text style={{
color: 'white',
fontFamily: 'OpenSans',
fontWeight: "800",
fontSize: 40,
}}>Register</Text>
</View>
</ImageBackground>
<View style={{ alignItems: 'center' }}>
<Text style={{
fontFamily: 'Fredoka',
fontFamily: 'OpenSans',
fontSize: 25,
margin: 10,
color: 'white',
Expand All @@ -68,31 +79,31 @@ export default ({ navigation, route }) => {
}}>Register</Text>
<Input
placeholder="Name"
placeholderTextColor='rgba(255,255,255,0.6)'
leftIcon={<Ionicons name="person" size={20} style={styles.loginIcon} />}
placeholderTextColor='grey'
leftIcon={<Ionicons name="person" size={18} style={styles.loginIcon} />}
value={name}
onChangeText={currName => setName(currName)}
inputContainerStyle={{ borderBottomColor: 'white', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'white', fontSize: 22 }}
inputContainerStyle={{ borderBottomColor: 'grey', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'grey', fontSize: 18 }}
/>
<Input
placeholder="Username"
placeholderTextColor='rgba(255,255,255,0.6)'
leftIcon={<Ionicons name="person-circle-outline" size={20} style={styles.loginIcon} />}
placeholderTextColor='grey'
leftIcon={<Ionicons name="person-circle-outline" size={18} style={styles.loginIcon} />}
value={username}
onChangeText={currUser => setUsername(currUser)}
inputContainerStyle={{ borderBottomColor: 'white', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'white', fontSize: 22 }}
inputContainerStyle={{ borderBottomColor: 'grey', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'grey', fontSize: 18 }}
/>
<Input
placeholder="Password"
secureTextEntry
placeholderTextColor='rgba(255,255,255,0.6)'
leftIcon={<Ionicons name="key-outline" size={20} style={styles.loginIcon} />}
placeholderTextColor='grey'
leftIcon={<Ionicons name="key-outline" size={18} style={styles.loginIcon} />}
value={password}
onChangeText={currPass => setPassword(currPass)}
inputContainerStyle={{ borderBottomColor: 'white', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'white', fontSize: 22 }}
inputContainerStyle={{ borderBottomColor: 'grey', marginLeft: 20, marginRight: 20 }}
inputStyle={{ color: 'grey', fontSize: 18 }}
/>
<Button
title={<Text style={
Expand Down Expand Up @@ -146,11 +157,12 @@ export default ({ navigation, route }) => {
<TouchableOpacity onPress={() => {
navigation.navigate("Login");
}}>
<Text style={{ color: "white", alignSelf: 'center', marginTop: 30, fontWeight: "bold" }}>
<Text style={{ color: "grey", alignSelf: 'center', marginTop: 30, fontWeight: "bold" }}>
Go back
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</KeyboardAvoidingView >

)
}
63 changes: 63 additions & 0 deletions CoreScreens/splashScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { useState, useEffect, useContext } from 'react';
import { View, Text, ActivityIndicator, KeyboardAvoidingView, TouchableOpacity, Alert, Image } from 'react-native';
import { styles } from '../styles';
import { useFonts } from 'expo-font';

export default ({ navigation }) => {

const [fontLoaded] = useFonts({
OpenSans: require('../assets/fonts/OpenSans.ttf'),
OpenSansItalic: require('../assets/fonts/OpenSansItalic.ttf'),
});
if (!fontLoaded)
return <></>;
return (
<>
<View style={styles.splashScreenContainer}>
<Image source={{ uri: 'https://c0.wallpaperflare.com/preview/470/565/195/cornell-cornell-university-the-bell-tower-building.jpg' }}
style={styles.splashScreenHeroImage} />
<View style={styles.splashScreenBottomContainer}>
<View style={styles.yoloPill}>
<Text style={{
color: 'white',
fontFamily: 'OpenSans',
fontWeight: "bold",
fontSize: 26,
}}>#YOLO</Text>
</View>
<Text style={{
color: 'black',
fontFamily: 'OpenSans',
fontWeight: "bold",
fontSize: 26,
marginTop: 10
}}>Welcome to your next week.</Text>

<Text style={{
color: 'gray',
fontFamily: 'OpenSans',
fontWeight: "bold",
fontSize: 17,
marginTop: 10
}}>Build out your calendar. Explore, visit, and discover events on your campus today!</Text>

<TouchableOpacity
style={styles.splashButton}
onPress={() => navigation.navigate("Login")}
>
<Text style={{
color: 'white',
fontFamily: 'OpenSans',
fontWeight: "bold",
fontSize: 17,
marginTop: 12.5
}}>
Get started!
</Text>
</TouchableOpacity>
</View>

</View>
</>
)
}
2 changes: 1 addition & 1 deletion Events/DetailsContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { useEffect, useState } from "react";
import Details from './EventDetails';
import Details from './eventDetails';

export default ({ navigation, route }) => {
const [id, setId] = useState("-1")
Expand Down
3 changes: 2 additions & 1 deletion Notifications/eventStats.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default ({ route }) => {
visible={modalVisible}
>

<ScrollView>
<ScrollView style={{ marginTop: 70 }}>
<TouchableOpacity onPress={() => {
setModalVisible(false);
}}>
Expand Down Expand Up @@ -141,6 +141,7 @@ export default ({ route }) => {
<TouchableOpacity
style={{ backgroundColor: 'white', width: '100%', alignItems: 'center', marginTop: 10, padding: 10 }}
onPress={() => {
console.log('pressed');
fetch("http://yolo-backend.herokuapp.com/updateEvent/", {
method: "POST",
headers: {
Expand Down
Binary file added assets/fonts/OpenSans.ttf
View file
Open in desktop
Binary file not shown.
Binary file added assets/fonts/OpenSansItalic.ttf
View file
Open in desktop
Binary file not shown.
Binary file added assets/splashBg.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,9 @@
"expo-permissions": "~13.1.0",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.6",
"firebase": "^9.6.7",
"firebase": "^9.6.11",
"g": "^2.0.1",
"package.json": "^2.0.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
Expand Down
Loading