Skip to content

B
beasy-mobile
Commit 47c55f9f by G
Options

Make this look like AC wanted without using a background image as the white part.

parent c63c3e72
Showing with 44 additions and 42 deletions
src/screens/UserLoginScreen.tsx
import Button from "@components/Button"; import Button from "@components/Button";
import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
import Input from "@components/Input"; import Input from "@components/Input";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea"; import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
import Box from "@components/bases/Box"; import Box from "@components/bases/Box";
import Text from "@components/bases/Text"; import Text from "@components/bases/Text";
import { Fontisto } from "@expo/vector-icons"; import { Fontisto } from "@expo/vector-icons";
import { containers } from "@styles/Commons"; import { containers } from "@styles/Commons";
import { KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, View } from "react-native"; import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
const UserLoginScreen = () => { const UserLoginScreen = () => {
return ( return (
<BackgroundGreenWhiteContentArea> <BackgroundDefault>
<SafeAreaView style={{ flex: 1 }}> <View style={containers.containerFull}>
<Box <Box style={{ height: "20%" }} p={"l"} paddingTop={"x64"}>
px={"m"} <Box
justifyContent={"space-between"} px={"m"}
flexDirection={"row"} justifyContent={"space-between"}
alignItems={"center"} flexDirection={"row"}
> alignItems={"center"}
<Fontisto name="close-a" size={12} color="black" /> >
<Fontisto name="close-a" size={12} color="black" />
<TouchableOpacity> <TouchableOpacity>
<Text>Mot de passe oublie ?</Text> <Text>Mot de passe oublie ?</Text>
</TouchableOpacity> </TouchableOpacity>
</Box>
</Box> </Box>
<Box <ContainerBorderTopCurved>
style={[containers.containerFull]} <Box p={"l"} style={{ height: "70%" }} paddingTop={"x100"}>
p={"xl"} <KeyboardAvoidingView
paddingTop={"x240"} behavior={Platform.OS === "ios" ? "height" : "height"}
flexDirection={"column"} style={{ flex: 1 }}
justifyContent={"space-between"} >
> <View>
<KeyboardAvoidingView <Box mb={"x64"}>
behavior={Platform.OS === "ios" ? "height" : "height"} <Text fontSize={40} fontWeight={"bold"}>
style={{ flex: 1 }} Connexion
> </Text>
<View> <Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
<Box mb={"x100"}> </Box>
<Text fontSize={40} fontWeight={"bold"}>
Connexion
</Text>
<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
</Box>
<Box gap={"m"}> <Box gap={"m"}>
<Input label="Email" /> <Input label="Email" />
<Input label="Mot de passe" secureTextEntry={true} /> <Input label="Mot de passe" secureTextEntry={true} />
</Box> </Box>
</View> </View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
<Box mt={"xl"}> </Box>
<Box style={{ height: "20%" }} p={"s"}>
<Button <Button
variant={"full"} variant={"full"}
textVariants={"primary"} textVariants={"primary"}
...@@ -62,9 +61,12 @@ const UserLoginScreen = () => { ...@@ -62,9 +61,12 @@ const UserLoginScreen = () => {
onPress={() => {}} onPress={() => {}}
/> />
</Box> </Box>
</Box> </ContainerBorderTopCurved>
</SafeAreaView> </View>
</BackgroundGreenWhiteContentArea> {/* <SafeAreaView style={containers.containerFlexUno}> */}
{/* </SafeAreaView> */}
</BackgroundDefault>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment