forked from fr/deguapp
Edited: Styles on login page
This commit is contained in:
parent
652a3b56d7
commit
b388736ee8
2
frontend/.gitignore
vendored
2
frontend/.gitignore
vendored
@ -35,3 +35,5 @@ yarn-error.*
|
|||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
|
|
||||||
.env
|
.env
|
||||||
|
|
||||||
|
.vscode/
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user