1
0
forked from fr/deguapp

Edited: Styles on login page

This commit is contained in:
Matěj Kevin Nechodom 2024-05-08 23:22:05 +02:00
parent 652a3b56d7
commit b388736ee8
2 changed files with 36 additions and 15 deletions

2
frontend/.gitignore vendored
View File

@ -35,3 +35,5 @@ yarn-error.*
*.tsbuildinfo *.tsbuildinfo
.env .env
.vscode/

View File

@ -1,9 +1,12 @@
import { StyleSheet, TextInput, View, Text, Image } from "react-native"; import { StyleSheet, TextInput, View, Image } from "react-native";
import Text from "@components/Text";
import Link from "@components/Link";
import { LinearGradient } from "expo-linear-gradient";
import { Animated } from "react-native";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { router } from "expo-router"; import { router } from "expo-router";
import Button from "../components/Button"; import Button from "../components/Button";
import { colors } from "../components/style"; import { colors } from "../components/style";
import { useAuth } from "./context/AuthContext"; import { useAuth } from "./context/AuthContext";
function LoginPage() { function LoginPage() {
@ -23,13 +26,18 @@ function LoginPage() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<AnimatedLinearGradient
colors={[colors.dark, colors.darkSecondary]}
style={styles.gradient}
/>
<View style={styles.header}> <View style={styles.header}>
<Image <Image
source={require("../assets/deguapp_logo.png")} source={require("../assets/deguapp_logo.png")}
style={styles.logo} style={styles.logo}
/> />
<Text style={styles.h1}>Please Log In</Text>
</View> </View>
<Text style={styles.h1}>Please Log In</Text>
<View style={styles.form}> <View style={styles.form}>
<TextInput <TextInput
style={styles.input} style={styles.input}
@ -53,12 +61,6 @@ function LoginPage() {
onChangeText={(text) => setPass(text)} onChangeText={(text) => setPass(text)}
/> />
<View style={styles.btnContainer}> <View style={styles.btnContainer}>
<Button
style={styles.button}
title="Sign Up"
color={colors.charcoal}
onPress={() => router.replace("/signup")}
/>
<Button <Button
style={styles.button} style={styles.button}
title="Log In" title="Log In"
@ -66,21 +68,26 @@ function LoginPage() {
onPress={login} onPress={login}
/> />
</View> </View>
<View>
<Link href="/signup">Don't have an account?</Link>
</View>
</View> </View>
</View> </View>
); );
} }
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
width: "100%", width: "100%",
height: "100%", height: "100%",
backgroundColor: colors.dark, backgroundColor: colors.dark,
justifyContent: "center",
alignItems: "center",
}, },
form: { form: {
flex: 1, flex: 1,
alignItems: "center", alignItems: "center",
paddingTop: "10%",
width: "100%", width: "100%",
gap: 15, gap: 15,
}, },
@ -88,30 +95,42 @@ const styles = StyleSheet.create({
color: "#FFF", color: "#FFF",
fontSize: 30, fontSize: 30,
textAlign: "center", textAlign: "center",
paddingTop: "20%", paddingTop: "3%",
paddingBottom: "3%",
}, },
logo: { logo: {
width: "80%", width: "80%",
resizeMode: "contain", resizeMode: "contain",
paddingBottom: "0%",
}, },
header: { header: {
width: "100%", width: "100%",
alignItems: "center", alignItems: "center",
paddingTop: "20%", paddingTop: "10%",
}, },
input: { input: {
height: "auto", height: "auto",
width: "60%", width: "60%",
borderColor: "gray", borderColor: "gray",
borderWidth: 1, borderWidth: 1,
borderRadius: 5, borderRadius: 10,
padding: 10, padding: 13,
color: "#fff", color: "#fff",
}, },
btnContainer: { btnContainer: {
flexDirection: "row", flexDirection: "row",
gap: 5, gap: 5,
}, },
button: {
width: "40%",
},
gradient: {
position: "absolute",
left: 0,
right: 0,
top: 0,
height: "100%",
},
}); });
export default LoginPage; export default LoginPage;