keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved color scheme naming

Browse source
This commit is contained in:
Keannu Bernasol 2023-07-17 16:26:16 +08:00
parent a96fe668a8
commit e6a92bfff2
12 changed files with 58 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/AnimatedContainer/AnimatedContainer.tsx
View file

@ -13,15 +13,15 @@ export default function AnimatedContainer(props: props) {
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
from={{ from={{
borderRadius: 0, borderRadius: 0,
backgroundColor: colors.orange_2, backgroundColor: colors.primary_3,
paddingTop: 4, paddingTop: 4,
paddingBottom: 4, paddingBottom: 4,
marginHorizontal: "4%", marginHorizontal: "4%",
marginVertical: "5%", marginVertical: "10%",
}} }}
animate={{ animate={{
borderRadius: 15, borderRadius: 15,
backgroundColor: colors.blue_2, backgroundColor: colors.primary_3,
paddingTop: 16, paddingTop: 16,
paddingBottom: 16, paddingBottom: 16,
marginHorizontal: "4%", marginHorizontal: "4%",

2
src/components/Button/DrawerButton.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react"; import * as React from "react";
import { Text, Pressable, GestureResponderEvent } from "react-native"; import { Pressable, GestureResponderEvent } from "react-native";
import styles from "../../styles"; import styles from "../../styles";
export interface props { export interface props {

16
src/components/DrawerSettings/CustomDrawerContent.tsx
View file

@ -36,7 +36,7 @@ export default function CustomDrawerContent(props: {}) {
</View> </View>
<DrawerButton <DrawerButton
color={colors.blue_2} color={colors.secondary_3}
onPress={async () => { onPress={async () => {
dispatch(logout()); dispatch(logout());
await AsyncStorage.clear(); await AsyncStorage.clear();
@ -61,7 +61,7 @@ export default function CustomDrawerContent(props: {}) {
<Text style={styles.text_white_medium}>Stud-E</Text> <Text style={styles.text_white_medium}>Stud-E</Text>
</View> </View>
<DrawerButton <DrawerButton
color={colors.blue_3} color={colors.secondary_2}
onPress={() => { onPress={() => {
navigation.navigate("Home"); navigation.navigate("Home");
}} }}
@ -70,7 +70,7 @@ export default function CustomDrawerContent(props: {}) {
<Text style={styles.text_white_medium}>Home</Text> <Text style={styles.text_white_medium}>Home</Text>
</DrawerButton> </DrawerButton>
<DrawerButton <DrawerButton
color={colors.blue_2} color={colors.secondary_2}
onPress={() => { onPress={() => {
navigation.navigate("User Info"); navigation.navigate("User Info");
}} }}
@ -79,7 +79,7 @@ export default function CustomDrawerContent(props: {}) {
<Text style={styles.text_white_medium}>User Info</Text> <Text style={styles.text_white_medium}>User Info</Text>
</DrawerButton> </DrawerButton>
<DrawerButton <DrawerButton
color={colors.blue_2} color={colors.secondary_3}
onPress={async () => { onPress={async () => {
dispatch(logout()); dispatch(logout());
await AsyncStorage.clear(); await AsyncStorage.clear();
@ -104,7 +104,7 @@ export default function CustomDrawerContent(props: {}) {
<Text style={styles.text_white_medium}>Stud-E</Text> <Text style={styles.text_white_medium}>Stud-E</Text>
</View> </View>
<DrawerButton <DrawerButton
color={colors.blue_2} color={colors.secondary_2}
onPress={() => { onPress={() => {
navigation.navigate("Login"); navigation.navigate("Login");
}} }}
@ -113,7 +113,7 @@ export default function CustomDrawerContent(props: {}) {
<Text style={styles.text_white_medium}>Login</Text> <Text style={styles.text_white_medium}>Login</Text>
</DrawerButton> </DrawerButton>
<DrawerButton <DrawerButton
color={colors.blue_2} color={colors.secondary_2}
onPress={() => { onPress={() => {
navigation.navigate("Register"); navigation.navigate("Register");
}} }}
@ -125,7 +125,7 @@ export default function CustomDrawerContent(props: {}) {
{/* {/*
Debug buttons for accessing revalidation and activation page Debug buttons for accessing revalidation and activation page
<DrawerButton <DrawerButton
color={colors.blue_2} color={colors.secondary_2}
onPress={() => { onPress={() => {
navigation.navigate("Revalidation"); navigation.navigate("Revalidation");
}} }}
@ -133,7 +133,7 @@ export default function CustomDrawerContent(props: {}) {
<Text style={styles.text_white_medium}>Revalidation</Text> <Text style={styles.text_white_medium}>Revalidation</Text>
</DrawerButton> </DrawerButton>
<DrawerButton <DrawerButton
color={colors.blue_2} color={colors.secondary_2}
onPress={() => { onPress={() => {
navigation.navigate("Activation"); navigation.navigate("Activation");
}} }}

4
src/components/DrawerSettings/DrawerScreenSettings.tsx
View file

@ -10,14 +10,14 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
fontSize: font_sizes.medium, fontSize: font_sizes.medium,
}, },
unmountOnBlur: true, unmountOnBlur: true,
headerStyle: { backgroundColor: colors.login_color}, headerStyle: { backgroundColor: colors.secondary_4 },
headerTintColor: colors.text_default, headerTintColor: colors.text_default,
drawerType: "slide", drawerType: "slide",
drawerLabelStyle: { drawerLabelStyle: {
color: colors.text_default, color: colors.text_default,
}, },
drawerStyle: { drawerStyle: {
backgroundColor: colors.login_color, backgroundColor: colors.secondary_4,
width: 260, width: 260,
}, },
headerRight: () => ( headerRight: () => (

4
src/routes/Activation/Activation.tsx
View file

@ -53,7 +53,7 @@ export default function Activation() {
marginBottom: 16, marginBottom: 16,
borderRadius: 4, borderRadius: 4,
width: "90%", width: "90%",
backgroundColor: colors.blue_1, backgroundColor: colors.secondary_1,
}} }}
/> />
<Text style={styles.text_white_large}>Activation</Text> <Text style={styles.text_white_large}>Activation</Text>
@ -61,7 +61,7 @@ export default function Activation() {
<ActivityIndicator <ActivityIndicator
animating={loading} animating={loading}
size={96} size={96}
color={colors.blue_1} color={colors.secondary_1}
/> />
<Text style={styles.text_white_medium}>{state}</Text> <Text style={styles.text_white_medium}>{state}</Text>
<Text style={styles.text_white_tiny}>{uid + "\n" + token}</Text> <Text style={styles.text_white_tiny}>{uid + "\n" + token}</Text>

2
src/routes/Home/Home.tsx
View file

@ -95,7 +95,7 @@ export default function Home() {
return ( return (
<AnimatedContainer> <AnimatedContainer>
<Text style={styles.text_white_medium}>{feedback}</Text> <Text style={styles.text_white_medium}>{feedback}</Text>
<Button onPress={() => requestLocation()} color={colors.blue_3}> <Button onPress={() => requestLocation()} color={colors.secondary_3}>
<Text style={styles.text_white_small}>Allow Access</Text> <Text style={styles.text_white_small}>Allow Access</Text>
</Button> </Button>
</AnimatedContainer> </AnimatedContainer>

16
src/routes/Login/Login.tsx
View file

@ -35,20 +35,12 @@ export default function Login() {
return ( return (
<View style={styles.background}> <View style={styles.background}>
<AnimatedContainer> <AnimatedContainer>
<View style={styles.flex_row}> <View style={styles.flex_row}>
<LoginIcon size={32} /> <LoginIcon size={32} />
<Text style={styles.text_white_large}>Student Login</Text> <Text style={styles.text_white_large}>Student Login</Text>
</View> </View>
<View style={{ paddingVertical: 8 }} /> <View style={{ paddingVertical: 8 }} />
<View <View style={styles.padding} />
style={{
paddingVertical: 4,
marginBottom: 16,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<TextInput <TextInput
style={styles.text_input} style={styles.text_input}
placeholder="Username" placeholder="Username"
@ -109,13 +101,13 @@ export default function Login() {
} }
}); });
}} }}
color={colors.login_color} color={colors.button_1}
> >
<Text style={styles.text_white_small}>Login</Text> <Text style={styles.text_white_small}>Login</Text>
</Button> </Button>
<Button <Button
onPress={() => navigation.navigate("Register")} onPress={() => navigation.navigate("Register")}
color={colors.reg_color} color={colors.button_2}
> >
<Text style={styles.text_white_small}>Register</Text> <Text style={styles.text_white_small}>Register</Text>
</Button> </Button>

12
src/routes/Onboarding/Onboarding.tsx
View file

@ -4,19 +4,15 @@ import { View, Text } from "react-native";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { import {
Course, Course,
CourseParams,
RootDrawerParamList, RootDrawerParamList,
Semester, Semester,
SemesterParams,
YearLevel, YearLevel,
YearLevelParams,
} from "../../interfaces/Interfaces"; } from "../../interfaces/Interfaces";
import { colors } from "../../styles"; import { colors } from "../../styles";
import { AnimatePresence, MotiView } from "moti"; import { MotiView } from "moti";
import { useEffect, useState } from "react"; import { useState } from "react";
import Button from "../../components/Button/Button"; import Button from "../../components/Button/Button";
import DropDownPicker from "react-native-dropdown-picker"; import DropDownPicker from "react-native-dropdown-picker";
import isStringEmpty from "../../components/IsStringEmpty/IsStringEmpty";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { import {
GetCourses, GetCourses,
@ -115,7 +111,7 @@ export default function Onboarding() {
marginBottom: 16, marginBottom: 16,
borderRadius: 4, borderRadius: 4,
width: "90%", width: "90%",
backgroundColor: colors.blue_1, backgroundColor: colors.secondary_1,
}} }}
/> />
<View style={{ paddingVertical: 4 }} /> <View style={{ paddingVertical: 4 }} />
@ -221,7 +217,7 @@ export default function Onboarding() {
setError(result[1]); setError(result[1]);
} }
}} }}
color={colors.blue_3} color={colors.secondary_3}
> >
<Text style={styles.text_white_small}>Proceed</Text> <Text style={styles.text_white_small}>Proceed</Text>
</Button> </Button>

29
src/routes/Register/Register.tsx
View file

@ -34,25 +34,16 @@ export default function Register() {
return ( return (
<View style={styles.background}> <View style={styles.background}>
<AnimatedContainer> <AnimatedContainer>
<View style={styles.flex_row}> <View style={styles.flex_row}>
<SignupIcon size={32} /> <SignupIcon size={32} />
<Text style={styles.text_white_large}>Student Signup</Text> <Text style={styles.text_white_large}>Student Signup</Text>
<View style={{ paddingVertical: 8, }} /> <View style={{ paddingVertical: 8 }} />
</View> </View>
<View <View style={styles.padding} />
style={{
paddingVertical: 4,
marginBottom: 16,
marginTop: 8,
borderRadius: 4,
width: "90%",
backgroundColor: colors.head,
}}
/>
<TextInput <TextInput
style={styles.text_input} style={styles.text_input}
placeholder="First Name" placeholder="First Name"
placeholderTextColor="white" placeholderTextColor={colors.text_default}
value={user.first_name} value={user.first_name}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
@ -64,7 +55,7 @@ export default function Register() {
<TextInput <TextInput
style={styles.text_input} style={styles.text_input}
placeholder="Last Name" placeholder="Last Name"
placeholderTextColor="white" placeholderTextColor={colors.text_default}
value={user.last_name} value={user.last_name}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
@ -76,7 +67,7 @@ export default function Register() {
<TextInput <TextInput
style={styles.text_input} style={styles.text_input}
placeholder="USTP ID Number" placeholder="USTP ID Number"
placeholderTextColor="white" placeholderTextColor={colors.text_default}
value={user.student_id_number} value={user.student_id_number}
onChange={( onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData> e: NativeSyntheticEvent<TextInputChangeEventData>
@ -93,7 +84,7 @@ export default function Register() {
<TextInput <TextInput
style={styles.text_input} style={styles.text_input}
placeholder="Username" placeholder="Username"
placeholderTextColor="white" placeholderTextColor={colors.text_default}
autoCapitalize={"none"} autoCapitalize={"none"}
value={user.username} value={user.username}
onChange={( onChange={(
@ -106,7 +97,7 @@ export default function Register() {
<TextInput <TextInput
style={styles.text_input} style={styles.text_input}
placeholder="Email" placeholder="Email"
placeholderTextColor="white" placeholderTextColor={colors.text_default}
autoCapitalize={"none"} autoCapitalize={"none"}
value={user.email} value={user.email}
onChange={( onChange={(
@ -119,7 +110,7 @@ export default function Register() {
<TextInput <TextInput
style={styles.text_input} style={styles.text_input}
placeholder="Password" placeholder="Password"
placeholderTextColor="white" placeholderTextColor={colors.text_default}
secureTextEntry={true} secureTextEntry={true}
value={user.password} value={user.password}
onChange={( onChange={(
@ -167,7 +158,7 @@ export default function Register() {
{ {
} }
}} }}
color={colors.reg_color} color={colors.button_2}
> >
<Text style={styles.text_white_small}>Register</Text> <Text style={styles.text_white_small}>Register</Text>
</Button> </Button>

2
src/routes/Revalidation/Revalidation.tsx
View file

@ -58,7 +58,7 @@ export default function Revalidation() {
<View style={styles.background}> <View style={styles.background}>
<AnimatedContainer> <AnimatedContainer>
<View style={{ paddingVertical: 8 }} /> <View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.blue_1} /> <ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>{state}</Text> <Text style={styles.text_white_medium}>{state}</Text>
</AnimatedContainer> </AnimatedContainer>
</View> </View>

9
src/routes/UserInfo/UserInfo.tsx
View file

@ -7,9 +7,7 @@ import {
NativeSyntheticEvent, NativeSyntheticEvent,
TextInputChangeEventData, TextInputChangeEventData,
} from "react-native"; } from "react-native";
import { colors } from "../../styles"; import { useState } from "react";
import { useState, useEffect } from "react";
import Button from "../../components/Button/Button";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { import {
RootDrawerParamList, RootDrawerParamList,
@ -22,6 +20,7 @@ import SelectDropdown from "react-native-select-dropdown";
import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon"; import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { UserInfo as GetUserInfo } from "../../components/Api/Api"; import { UserInfo as GetUserInfo } from "../../components/Api/Api";
import { colors } from "../../styles";
export default function UserInfo() { export default function UserInfo() {
const UserInfo = useQuery("user", GetUserInfo, { const UserInfo = useQuery("user", GetUserInfo, {
@ -172,13 +171,13 @@ export default function UserInfo() {
color: "white", color: "white",
}} }}
dropdownStyle={{ dropdownStyle={{
backgroundColor: "#E3963E", backgroundColor: colors.primary_4,
}} }}
data={subjectOptions} data={subjectOptions}
buttonStyle={{ buttonStyle={{
width: "90%", width: "90%",
marginLeft: 10, marginLeft: 10,
backgroundColor: "#E3963E", backgroundColor: colors.primary_4,
borderRadius: 8, borderRadius: 8,
}} }}
/> />

35
src/styles.tsx
View file

@ -7,20 +7,21 @@ const containerWidth = width - width * 0.08;
const containerHeight = height - height * 0.01; const containerHeight = height - height * 0.01;
export const colors = { export const colors = {
orange_1: "#FFDEAD", primary_1: "#FFDEAD",
orange_2: "#FFE2C1", primary_2: "#FFE2C1",
orange_3: "#C07624", primary_3: "#fdac1d",
blue_1: "#E3963E", primary_4: "#e3973f",
blue_2: "#FFAC1C", secondary_1: "#4C87A1",
blue_3: "#FFAC1C", secondary_2: "#77ACC3",
text_default: "white", secondary_3: "#1B5D79",
secondary_4: "#0047AB",
text_default: "#FFFF",
text_error: "#e32d1e", text_error: "#e32d1e",
text_success: "green", text_success: "#2ecc71",
icon_color: "white", icon_color: "#FFFF",
login_color: "#0047AB", button_1: "#0047AB",
reg_color: "#0096FF", button_2: "#0096FF",
head: "white", head: "#FFFF",
blue_disabled: "#C07624",
}; };
export const font_sizes = { export const font_sizes = {
@ -34,7 +35,7 @@ export const font_sizes = {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
backgroundColor: colors.orange_1, backgroundColor: colors.primary_1,
height: "100%", height: "100%",
width: "100%", width: "100%",
}, },
@ -109,7 +110,7 @@ const styles = StyleSheet.create({
}, },
text_input: { text_input: {
color: colors.text_default, color: colors.text_default,
backgroundColor: colors.blue_1, backgroundColor: colors.secondary_1,
padding: 10, padding: 10,
borderRadius: 8, borderRadius: 8,
width: width * 0.5, width: width * 0.5,
@ -138,9 +139,9 @@ const styles = StyleSheet.create({
marginRight: 30, marginRight: 30,
borderWidth: 1, borderWidth: 1,
color: colors.text_default, color: colors.text_default,
backgroundColor: colors.blue_1, backgroundColor: colors.primary_4,
borderRadius: 8, borderRadius: 8,
borderColor: "#FFAC1C", borderColor: colors.primary_3,
padding: 8, padding: 8,
}, },
text: { text: {