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;
|
||||
return (
|
||||
<Pressable
|
||||
style={[styles.button, { backgroundColor: color }]}
|
||||
style={({ pressed }) => [
|
||||
{
|
||||
backgroundColor: pressed
|
||||
? "rgb(210, 230, 255 )"
|
||||
: color
|
||||
? color
|
||||
: "black",
|
||||
},
|
||||
styles.button,
|
||||
]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={styles.text}>{title}</Text>
|
||||
@ -21,7 +30,6 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 32,
|
||||
borderRadius: 4,
|
||||
elevation: 3,
|
||||
backgroundColor: "black",
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
|
@ -1,5 +1,6 @@
|
||||
export const colors = {
|
||||
gold: "#FFD700ff",
|
||||
gold: "#ffa500",
|
||||
brown: "#8B4513ff",
|
||||
green: "#228B22ff",
|
||||
charcoal: "#2C3E50ff",
|
||||
|
@ -4,6 +4,7 @@ import {
|
||||
TextInput,
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
} from "react-native";
|
||||
import Button from "../components/Button";
|
||||
import { colors } from "../components/style";
|
||||
@ -11,7 +12,15 @@ import { colors } from "../components/style";
|
||||
export function LoginForm() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.header}>Please Log In</Text>
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
source={require("../assets/deguapp_logo.png")}
|
||||
style={styles.logo}
|
||||
/>
|
||||
<Text style={styles.h1}>Please Log In</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.form}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your email"
|
||||
@ -30,8 +39,19 @@ export function LoginForm() {
|
||||
returnKeyType="done"
|
||||
/>
|
||||
<View style={styles.btnContainer}>
|
||||
<Button style={styles.button} title="Sign Up" color={colors.charcoal} />
|
||||
<Button style={styles.button} title="Log In" color={colors.green} />
|
||||
<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>
|
||||
);
|
||||
@ -39,16 +59,31 @@ export function LoginForm() {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: colors.dark,
|
||||
flex: 1,
|
||||
gap: 15,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
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: {
|
||||
color: "#FFF",
|
||||
fontSize: 22,
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
@ -58,9 +93,8 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
button: {},
|
||||
btnContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
gap: 5,
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user