Edited: Styles on login page, styles on sign up page

frontend/app/login.js

@@ -69,7 +69,9 @@ function LoginPage() {
 					/>
 				</View>
 				<View>
-					<Link href="/signup">Don't have an account?</Link>
+					<Link href="/signup" style={styles.signup}>
+						Don't have an account?
+					</Link>
 				</View>
 			</View>
 		</View>
@@ -106,7 +108,7 @@ const styles = StyleSheet.create({
 	header: {
 		width: "100%",
 		alignItems: "center",
-		paddingTop: "10%",
+		paddingTop: "20%",
 	},
 	input: {
 		height: "auto",
@@ -131,6 +133,12 @@ const styles = StyleSheet.create({
 		top: 0,
 		height: "100%",
 	},
+	signup: {
+		textDecorationLine: "underline",
+		fontSize: 14,
+		marginTop: 10,
+		fontStyle: "italic",
+	},
 });
 
 export default LoginPage;

frontend/app/signup.js

@@ -3,6 +3,8 @@ import { useState } from "react";
 import Button from "../components/Button";
 import { colors } from "../components/style";
 import { Link, router } from "expo-router";
+import { LinearGradient } from "expo-linear-gradient";
+import { Animated } from "react-native";
 
 import { useAuth } from "./context/AuthContext";
 
@@ -35,6 +37,10 @@ function SignupPage() {
 
 	return (
 		<View style={styles.container}>
+			<AnimatedLinearGradient
+				colors={[colors.dark, colors.darkSecondary]}
+				style={styles.gradient}
+			/>
 			<View style={styles.header}>
 				<Image
 					source={require("../assets/deguapp_logo.png")}
@@ -88,7 +94,7 @@ function SignupPage() {
 					color={colors.gold}
 					onPress={signin}
 				/>
-				<Link href="/login" style={styles.a}>
+				<Link href="/login" style={styles.login}>
 					Already have an account? Log In!
 				</Link>
 			</View>
@@ -96,16 +102,20 @@ function SignupPage() {
 	);
 }
 
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
 const styles = StyleSheet.create({
 	container: {
 		width: "100%",
 		height: "100%",
 		backgroundColor: colors.dark,
+		justifyContent: "center",
+		alignItems: "center",
+		maxHeight: "100%",
 	},
 	form: {
 		flex: 1,
 		alignItems: "center",
-		paddingTop: "10%",
 		width: "100%",
 		gap: 15,
 	},
@@ -113,36 +123,38 @@ const styles = StyleSheet.create({
 		color: "#FFF",
 		fontSize: 30,
 		textAlign: "center",
-		paddingTop: "20%",
+		paddingTop: "3%",
-	},
+		paddingBottom: "3%",
-	a: {
-		color: "#FFF",
-		fontSize: 12,
-		fontStyle: "italic",
-		textDecorationLine: "underline",
 	},
 	logo: {
 		width: "80%",
 		resizeMode: "contain",
+		marginTop: "15%",
 	},
 	header: {
 		width: "100%",
 		alignItems: "center",
-		paddingTop: "20%",
 	},
 	input: {
 		height: "auto",
 		width: "60%",
 		borderColor: "gray",
 		borderWidth: 1,
-		borderRadius: 5,
+		borderRadius: 10,
-		padding: 10,
+		padding: 13,
 		color: "#fff",
 	},
 	btnContainer: {
 		flexDirection: "row",
 		gap: 5,
 	},
+	login: {
+		color: "#FFF",
+		fontStyle: "italic",
+		textDecorationLine: "underline",
+		fontSize: 14,
+		marginTop: 10,
+	},
 });
 
 export default SignupPage;

frontend/components/style.js

@@ -7,4 +7,5 @@ export const colors = {
 	black: "#020405ff",
 	dark: "#010409",
 	darkSecondary: "#0D1117",
+	white: "#FFFFFF",
 };