Improved color scheme naming

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%",

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 {

src/components/DrawerSettings/CustomDrawerContent.tsx

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

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: () => (

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,
           }}
         />
         <Text style={styles.text_white_large}>Activation</Text>
@@ -61,7 +61,7 @@ export default function Activation() {
         <ActivityIndicator
           animating={loading}
           size={96}
-          color={colors.blue_1}
+          color={colors.secondary_1}
         />
         <Text style={styles.text_white_medium}>{state}</Text>
         <Text style={styles.text_white_tiny}>{uid + "\n" + token}</Text>

src/routes/Home/Home.tsx

@@ -95,7 +95,7 @@ export default function Home() {
       return (
         <AnimatedContainer>
           <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>
           </Button>
         </AnimatedContainer>

src/routes/Login/Login.tsx

@@ -40,15 +40,7 @@ export default function Login() {
           <Text style={styles.text_white_large}>Student Login</Text>
         </View>
         <View style={{ paddingVertical: 8 }} />
-        <View
+        <View style={styles.padding} />
-          style={{
-            paddingVertical: 4,
-            marginBottom: 16,
-            borderRadius: 4,
-            width: "90%",
-            backgroundColor: colors.head,
-          }}
-        />
         <TextInput
           style={styles.text_input}
           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>
         </Button>
         <Button
           onPress={() => navigation.navigate("Register")}
-          color={colors.reg_color}
+          color={colors.button_2}
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>

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 { MotiView } from "moti";
-import { useEffect, useState } from "react";
+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,
           }}
         />
         <View style={{ paddingVertical: 4 }} />
@@ -221,7 +217,7 @@ export default function Onboarding() {
                 setError(result[1]);
               }
             }}
-            color={colors.blue_3}
+            color={colors.secondary_3}
           >
             <Text style={styles.text_white_small}>Proceed</Text>
           </Button>

src/routes/Register/Register.tsx

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

src/routes/Revalidation/Revalidation.tsx

@@ -58,7 +58,7 @@ export default function Revalidation() {
     <View style={styles.background}>
       <AnimatedContainer>
         <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>
       </AnimatedContainer>
     </View>

src/routes/UserInfo/UserInfo.tsx

@@ -7,9 +7,7 @@ import {
   NativeSyntheticEvent,
   TextInputChangeEventData,
 } 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 {
   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,
               }}
             />

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",
+  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_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 = {
@@ -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: {