Login screen design done
This commit is contained in:
parent
8bff13f98f
commit
bd5f7388b8
BIN
frontend/assets/deguapp_logo.png
Normal file
BIN
frontend/assets/deguapp_logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
@ -5,7 +5,16 @@ export default function Button(props) {
|
|||||||
const { onPress, title = "Save", color = "black" } = props;
|
const { onPress, title = "Save", color = "black" } = props;
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
style={[styles.button, { backgroundColor: color }]}
|
style={({ pressed }) => [
|
||||||
|
{
|
||||||
|
backgroundColor: pressed
|
||||||
|
? "rgb(210, 230, 255 )"
|
||||||
|
: color
|
||||||
|
? color
|
||||||
|
: "black",
|
||||||
|
},
|
||||||
|
styles.button,
|
||||||
|
]}
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
>
|
>
|
||||||
<Text style={styles.text}>{title}</Text>
|
<Text style={styles.text}>{title}</Text>
|
||||||
@ -21,7 +30,6 @@ const styles = StyleSheet.create({
|
|||||||
paddingHorizontal: 32,
|
paddingHorizontal: 32,
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
elevation: 3,
|
elevation: 3,
|
||||||
backgroundColor: "black",
|
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
export const colors = {
|
export const colors = {
|
||||||
gold: "#FFD700ff",
|
gold: "#FFD700ff",
|
||||||
|
gold: "#ffa500",
|
||||||
brown: "#8B4513ff",
|
brown: "#8B4513ff",
|
||||||
green: "#228B22ff",
|
green: "#228B22ff",
|
||||||
charcoal: "#2C3E50ff",
|
charcoal: "#2C3E50ff",
|
||||||
|
@ -4,6 +4,7 @@ import {
|
|||||||
TextInput,
|
TextInput,
|
||||||
View,
|
View,
|
||||||
Text,
|
Text,
|
||||||
|
Image,
|
||||||
} from "react-native";
|
} from "react-native";
|
||||||
import Button from "../components/Button";
|
import Button from "../components/Button";
|
||||||
import { colors } from "../components/style";
|
import { colors } from "../components/style";
|
||||||
@ -11,27 +12,46 @@ import { colors } from "../components/style";
|
|||||||
export function LoginForm() {
|
export function LoginForm() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text style={styles.header}>Please Log In</Text>
|
<View style={styles.header}>
|
||||||
<TextInput
|
<Image
|
||||||
style={styles.input}
|
source={require("../assets/deguapp_logo.png")}
|
||||||
placeholder="Enter your email"
|
style={styles.logo}
|
||||||
autoCapitalize="none"
|
/>
|
||||||
autoCompleteType="email"
|
<Text style={styles.h1}>Please Log In</Text>
|
||||||
textContentType="emailAddress"
|
</View>
|
||||||
keyboardType="email-address"
|
|
||||||
placeholderTextColor={"#aaaaaa"}
|
<View style={styles.form}>
|
||||||
returnKeyType="next"
|
<TextInput
|
||||||
/>
|
style={styles.input}
|
||||||
<TextInput
|
placeholder="Enter your email"
|
||||||
style={styles.input}
|
autoCapitalize="none"
|
||||||
secureTextEntry={true}
|
autoCompleteType="email"
|
||||||
placeholder="Enter your password"
|
textContentType="emailAddress"
|
||||||
placeholderTextColor={"#aaaaaa"}
|
keyboardType="email-address"
|
||||||
returnKeyType="done"
|
placeholderTextColor={"#aaaaaa"}
|
||||||
/>
|
returnKeyType="next"
|
||||||
<View style={styles.btnContainer}>
|
/>
|
||||||
<Button style={styles.button} title="Sign Up" color={colors.charcoal} />
|
<TextInput
|
||||||
<Button style={styles.button} title="Log In" color={colors.green} />
|
style={styles.input}
|
||||||
|
secureTextEntry={true}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
placeholderTextColor={"#aaaaaa"}
|
||||||
|
returnKeyType="done"
|
||||||
|
/>
|
||||||
|
<View style={styles.btnContainer}>
|
||||||
|
<Button
|
||||||
|
style={styles.button}
|
||||||
|
title="Sign Up"
|
||||||
|
color={colors.charcoal}
|
||||||
|
onPress={() => alert("Signed In")}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
style={styles.button}
|
||||||
|
title="Log In"
|
||||||
|
color={colors.gold}
|
||||||
|
onPress={() => alert("Logged In")}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
@ -39,16 +59,31 @@ export function LoginForm() {
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
backgroundColor: colors.dark,
|
|
||||||
flex: 1,
|
|
||||||
gap: 15,
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
backgroundColor: colors.dark,
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: "center",
|
||||||
|
paddingTop: "10%",
|
||||||
|
width: "100%",
|
||||||
|
gap: 15,
|
||||||
|
},
|
||||||
|
h1: {
|
||||||
|
color: "#FFF",
|
||||||
|
fontSize: 30,
|
||||||
|
textAlign: "center",
|
||||||
|
paddingTop: "20%",
|
||||||
|
},
|
||||||
|
logo: {
|
||||||
|
width: "80%",
|
||||||
|
resizeMode: "contain",
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
color: "#FFF",
|
width: "100%",
|
||||||
fontSize: 22,
|
alignItems: "center",
|
||||||
|
paddingTop: "20%",
|
||||||
},
|
},
|
||||||
input: {
|
input: {
|
||||||
height: "auto",
|
height: "auto",
|
||||||
@ -58,9 +93,8 @@ const styles = StyleSheet.create({
|
|||||||
borderRadius: 5,
|
borderRadius: 5,
|
||||||
padding: 10,
|
padding: 10,
|
||||||
},
|
},
|
||||||
button: {},
|
|
||||||
btnContainer: {
|
btnContainer: {
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
gap: 10,
|
gap: 5,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user