Fix: gradient background on signup page; Added: color for text in button, on index page added new button and greeting

frontend/app/(app)/(tabs)/index.js

@@ -2,7 +2,7 @@ import { StyleSheet, Text, View } from "react-native";
 import Button from "@components/Button";
 import { colors } from "@components/style";
 import { useAuth } from "@context/AuthContext";
-import Link from "@components/Link";
+import { router } from "expo-router";
 
 export default function Index() {
 	const { onLogout, authState } = useAuth();
@@ -10,8 +10,19 @@ export default function Index() {
 
 	return (
 		<View style={styles.container}>
-			<Text style={styles.h1}>Welcome {user.username}</Text>
-			<Link href="/beer">Go to BEER</Link>
+			<Text style={styles.h1}>Welcome {user.username}!</Text>
+			<Text style={styles.h2}>We hope, you're enjoying your beer.</Text>
+			<View style={styles.button}>
+				<Button
+					style={styles.button}
+					title="Add beer!"
+					color={colors.gold}
+					textColor={colors.white}
+					onPress={() => {
+						router.push("/beer");
+					}}
+				></Button>
+			</View>
 		</View>
 	);
 }
@@ -27,4 +38,16 @@ const styles = StyleSheet.create({
 		textAlign: "center",
 		paddingTop: "20%",
 	},
+	h2: {
+		color: "#FFF",
+		fontSize: 20,
+		textAlign: "center",
+		paddingTop: "1%",
+	},
+	button: {
+		color: colors.charcoal,
+		fontSize: 30,
+		textAlign: "center",
+		paddingTop: "2%",
+	},
 });

frontend/app/login.js

@@ -83,7 +83,6 @@ const styles = StyleSheet.create({
 	container: {
 		width: "100%",
 		height: "100%",
-		backgroundColor: colors.dark,
 		justifyContent: "center",
 		alignItems: "center",
 	},

frontend/app/signup.js

@@ -155,6 +155,13 @@ const styles = StyleSheet.create({
 		fontSize: 14,
 		marginTop: 10,
 	},
+	gradient: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		top: 0,
+		height: "100%",
+	},
 });
 
 export default SignupPage;

frontend/components/Button.js

@@ -2,7 +2,12 @@ import React from "react";
 import { Text, StyleSheet, Pressable } from "react-native";
 
 export default function Button(props) {
-	const { onPress, title = "Button", color = "black" } = props;
+	const {
+		onPress,
+		title = "Button",
+		color = "black",
+		textColor = "white",
+	} = props;
 	return (
 		<Pressable
 			style={({ pressed }) => [
@@ -17,7 +22,7 @@ export default function Button(props) {
 			]}
 			onPress={onPress}
 		>
-			<Text style={styles.text}>{title}</Text>
+			<Text style={[styles.text, { color: textColor }]}>{title}</Text>
 		</Pressable>
 	);
 }
@@ -36,6 +41,6 @@ const styles = StyleSheet.create({
 		lineHeight: 21,
 		fontWeight: "bold",
 		letterSpacing: 0.25,
-		color: "white",
+		//color: textColor,
 	},
 });