From e6a92bfff2a6311104207c0b16ea99554f0c4eaf Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Mon, 17 Jul 2023 16:26:16 +0800 Subject: [PATCH] Improved color scheme naming --- .../AnimatedContainer/AnimatedContainer.tsx | 6 ++-- src/components/Button/DrawerButton.tsx | 2 +- .../DrawerSettings/CustomDrawerContent.tsx | 16 ++++----- .../DrawerSettings/DrawerScreenSettings.tsx | 4 +-- src/routes/Activation/Activation.tsx | 4 +-- src/routes/Home/Home.tsx | 2 +- src/routes/Login/Login.tsx | 16 +++------ src/routes/Onboarding/Onboarding.tsx | 12 +++---- src/routes/Register/Register.tsx | 29 ++++++--------- src/routes/Revalidation/Revalidation.tsx | 2 +- src/routes/UserInfo/UserInfo.tsx | 9 +++-- src/styles.tsx | 35 ++++++++++--------- 12 files changed, 58 insertions(+), 79 deletions(-) diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx index 8f5960d..1bf1fd1 100644 --- a/src/components/AnimatedContainer/AnimatedContainer.tsx +++ b/src/components/AnimatedContainer/AnimatedContainer.tsx @@ -13,15 +13,15 @@ export default function AnimatedContainer(props: props) { contentContainerStyle={styles.container} from={{ borderRadius: 0, - backgroundColor: colors.orange_2, + backgroundColor: colors.primary_3, paddingTop: 4, paddingBottom: 4, marginHorizontal: "4%", - marginVertical: "5%", + marginVertical: "10%", }} animate={{ borderRadius: 15, - backgroundColor: colors.blue_2, + backgroundColor: colors.primary_3, paddingTop: 16, paddingBottom: 16, marginHorizontal: "4%", diff --git a/src/components/Button/DrawerButton.tsx b/src/components/Button/DrawerButton.tsx index 5708d6e..8f81da3 100644 --- a/src/components/Button/DrawerButton.tsx +++ b/src/components/Button/DrawerButton.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Text, Pressable, GestureResponderEvent } from "react-native"; +import { Pressable, GestureResponderEvent } from "react-native"; import styles from "../../styles"; export interface props { diff --git a/src/components/DrawerSettings/CustomDrawerContent.tsx b/src/components/DrawerSettings/CustomDrawerContent.tsx index 93821ba..bc564d4 100644 --- a/src/components/DrawerSettings/CustomDrawerContent.tsx +++ b/src/components/DrawerSettings/CustomDrawerContent.tsx @@ -36,7 +36,7 @@ export default function CustomDrawerContent(props: {}) { { dispatch(logout()); await AsyncStorage.clear(); @@ -61,7 +61,7 @@ export default function CustomDrawerContent(props: {}) { Stud-E { navigation.navigate("Home"); }} @@ -70,7 +70,7 @@ export default function CustomDrawerContent(props: {}) { Home { navigation.navigate("User Info"); }} @@ -79,7 +79,7 @@ export default function CustomDrawerContent(props: {}) { User Info { dispatch(logout()); await AsyncStorage.clear(); @@ -104,7 +104,7 @@ export default function CustomDrawerContent(props: {}) { Stud-E { navigation.navigate("Login"); }} @@ -113,7 +113,7 @@ export default function CustomDrawerContent(props: {}) { Login { navigation.navigate("Register"); }} @@ -125,7 +125,7 @@ export default function CustomDrawerContent(props: {}) { {/* Debug buttons for accessing revalidation and activation page { navigation.navigate("Revalidation"); }} @@ -133,7 +133,7 @@ export default function CustomDrawerContent(props: {}) { Revalidation { navigation.navigate("Activation"); }} diff --git a/src/components/DrawerSettings/DrawerScreenSettings.tsx b/src/components/DrawerSettings/DrawerScreenSettings.tsx index 2a3ec73..8e4ccbf 100644 --- a/src/components/DrawerSettings/DrawerScreenSettings.tsx +++ b/src/components/DrawerSettings/DrawerScreenSettings.tsx @@ -10,14 +10,14 @@ const DrawerScreenSettings: DrawerNavigationOptions = { fontSize: font_sizes.medium, }, unmountOnBlur: true, - headerStyle: { backgroundColor: colors.login_color}, + headerStyle: { backgroundColor: colors.secondary_4 }, headerTintColor: colors.text_default, drawerType: "slide", drawerLabelStyle: { color: colors.text_default, }, drawerStyle: { - backgroundColor: colors.login_color, + backgroundColor: colors.secondary_4, width: 260, }, headerRight: () => ( diff --git a/src/routes/Activation/Activation.tsx b/src/routes/Activation/Activation.tsx index dce7f24..10aab6a 100644 --- a/src/routes/Activation/Activation.tsx +++ b/src/routes/Activation/Activation.tsx @@ -53,7 +53,7 @@ export default function Activation() { marginBottom: 16, borderRadius: 4, width: "90%", - backgroundColor: colors.blue_1, + backgroundColor: colors.secondary_1, }} /> Activation @@ -61,7 +61,7 @@ export default function Activation() { {state} {uid + "\n" + token} diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 5805287..54bb245 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -95,7 +95,7 @@ export default function Home() { return ( {feedback} - diff --git a/src/routes/Login/Login.tsx b/src/routes/Login/Login.tsx index a4283cd..7c8e0e2 100644 --- a/src/routes/Login/Login.tsx +++ b/src/routes/Login/Login.tsx @@ -35,20 +35,12 @@ export default function Login() { return ( - + Student Login - + Login diff --git a/src/routes/Onboarding/Onboarding.tsx b/src/routes/Onboarding/Onboarding.tsx index fa356d7..8a91f53 100644 --- a/src/routes/Onboarding/Onboarding.tsx +++ b/src/routes/Onboarding/Onboarding.tsx @@ -4,19 +4,15 @@ import { View, Text } from "react-native"; import { useNavigation } from "@react-navigation/native"; import { Course, - CourseParams, RootDrawerParamList, Semester, - SemesterParams, YearLevel, - YearLevelParams, } from "../../interfaces/Interfaces"; import { colors } from "../../styles"; -import { AnimatePresence, MotiView } from "moti"; -import { useEffect, useState } from "react"; +import { MotiView } from "moti"; +import { useState } from "react"; import Button from "../../components/Button/Button"; import DropDownPicker from "react-native-dropdown-picker"; -import isStringEmpty from "../../components/IsStringEmpty/IsStringEmpty"; import { useQuery } from "@tanstack/react-query"; import { GetCourses, @@ -115,7 +111,7 @@ export default function Onboarding() { marginBottom: 16, borderRadius: 4, width: "90%", - backgroundColor: colors.blue_1, + backgroundColor: colors.secondary_1, }} /> @@ -221,7 +217,7 @@ export default function Onboarding() { setError(result[1]); } }} - color={colors.blue_3} + color={colors.secondary_3} > Proceed diff --git a/src/routes/Register/Register.tsx b/src/routes/Register/Register.tsx index 97c1b8c..074c8a2 100644 --- a/src/routes/Register/Register.tsx +++ b/src/routes/Register/Register.tsx @@ -34,25 +34,16 @@ export default function Register() { return ( - + Student Signup - + - + @@ -64,7 +55,7 @@ export default function Register() { @@ -76,7 +67,7 @@ export default function Register() { @@ -93,7 +84,7 @@ export default function Register() { Register diff --git a/src/routes/Revalidation/Revalidation.tsx b/src/routes/Revalidation/Revalidation.tsx index e2f099e..ce5b1dc 100644 --- a/src/routes/Revalidation/Revalidation.tsx +++ b/src/routes/Revalidation/Revalidation.tsx @@ -58,7 +58,7 @@ export default function Revalidation() { - + {state} diff --git a/src/routes/UserInfo/UserInfo.tsx b/src/routes/UserInfo/UserInfo.tsx index 18fd69f..b360170 100644 --- a/src/routes/UserInfo/UserInfo.tsx +++ b/src/routes/UserInfo/UserInfo.tsx @@ -7,9 +7,7 @@ import { NativeSyntheticEvent, TextInputChangeEventData, } from "react-native"; -import { colors } from "../../styles"; -import { useState, useEffect } from "react"; -import Button from "../../components/Button/Button"; +import { useState } from "react"; import { useNavigation } from "@react-navigation/native"; import { RootDrawerParamList, @@ -22,6 +20,7 @@ import SelectDropdown from "react-native-select-dropdown"; import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon"; import { useQuery } from "react-query"; import { UserInfo as GetUserInfo } from "../../components/Api/Api"; +import { colors } from "../../styles"; export default function UserInfo() { const UserInfo = useQuery("user", GetUserInfo, { @@ -172,13 +171,13 @@ export default function UserInfo() { color: "white", }} dropdownStyle={{ - backgroundColor: "#E3963E", + backgroundColor: colors.primary_4, }} data={subjectOptions} buttonStyle={{ width: "90%", marginLeft: 10, - backgroundColor: "#E3963E", + backgroundColor: colors.primary_4, borderRadius: 8, }} /> diff --git a/src/styles.tsx b/src/styles.tsx index 7e67bdb..4f3ddf5 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -7,20 +7,21 @@ const containerWidth = width - width * 0.08; const containerHeight = height - height * 0.01; export const colors = { - orange_1: "#FFDEAD", - orange_2: "#FFE2C1", - orange_3: "#C07624", - blue_1: "#E3963E", - blue_2: "#FFAC1C", - blue_3: "#FFAC1C", - text_default: "white", + primary_1: "#FFDEAD", + primary_2: "#FFE2C1", + primary_3: "#fdac1d", + primary_4: "#e3973f", + secondary_1: "#4C87A1", + secondary_2: "#77ACC3", + secondary_3: "#1B5D79", + secondary_4: "#0047AB", + text_default: "#FFFF", text_error: "#e32d1e", - text_success: "green", - icon_color: "white", - login_color: "#0047AB", - reg_color: "#0096FF", - head: "white", - blue_disabled: "#C07624", + text_success: "#2ecc71", + icon_color: "#FFFF", + button_1: "#0047AB", + button_2: "#0096FF", + head: "#FFFF", }; export const font_sizes = { @@ -34,7 +35,7 @@ export const font_sizes = { const styles = StyleSheet.create({ background: { - backgroundColor: colors.orange_1, + backgroundColor: colors.primary_1, height: "100%", width: "100%", }, @@ -109,7 +110,7 @@ const styles = StyleSheet.create({ }, text_input: { color: colors.text_default, - backgroundColor: colors.blue_1, + backgroundColor: colors.secondary_1, padding: 10, borderRadius: 8, width: width * 0.5, @@ -138,9 +139,9 @@ const styles = StyleSheet.create({ marginRight: 30, borderWidth: 1, color: colors.text_default, - backgroundColor: colors.blue_1, + backgroundColor: colors.primary_4, borderRadius: 8, - borderColor: "#FFAC1C", + borderColor: colors.primary_3, padding: 8, }, text: {