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