laying out login screen
BIN
app/mobile/images/appstore.png
Normal file
After Width: | Height: | Size: 8.2 KiB |
BIN
app/mobile/images/audio.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
app/mobile/images/avatar.png
Normal file
After Width: | Height: | Size: 7.2 KiB |
BIN
app/mobile/images/login.png
Normal file
After Width: | Height: | Size: 70 KiB |
3
app/mobile/images/package.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"name": "images"
|
||||
}
|
BIN
app/mobile/images/session.png
Normal file
After Width: | Height: | Size: 49 KiB |
BIN
app/mobile/images/solution.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
app/mobile/images/team.png
Normal file
After Width: | Height: | Size: 16 KiB |
@ -1,11 +1,18 @@
|
||||
import { Wrapper, Container } from './Login.styled';
|
||||
import Ionicons from '@expo/vector-icons/Ionicons';
|
||||
import { Text } from 'react-native';
|
||||
import { Wrapper, Container, Control, Title, Spacer, Header } from './Login.styled';
|
||||
|
||||
export function Login() {
|
||||
return (
|
||||
<Wrapper>
|
||||
<Container>
|
||||
<Text>LOGIN</Text>
|
||||
<Control>
|
||||
<Ionicons name="md-cog" size={32} color="grey" />
|
||||
</Control>
|
||||
<Title>Databag</Title>
|
||||
<Spacer>
|
||||
<Header>Login</Header>
|
||||
</Spacer>
|
||||
</Container>
|
||||
</Wrapper>
|
||||
);
|
||||
|
@ -11,4 +11,34 @@ export const Container = styled.View`
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`
|
||||
|
||||
export const Control = styled.View`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
color: ${Colors.grey};
|
||||
`
|
||||
|
||||
export const Title = styled.Text`
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
fontSize: 24px;
|
||||
color: ${Colors.grey};
|
||||
`
|
||||
|
||||
export const Spacer = styled.View`
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
export const Header = styled.Text`
|
||||
font-size: 32px;
|
||||
color: ${Colors.text};
|
||||
`
|
||||
|
||||
|