laying out login screen

This commit is contained in:
Roland Osborne 2022-09-07 15:07:22 -07:00
parent ec613141d8
commit 74f5b3d54b
10 changed files with 42 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
app/mobile/images/audio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
app/mobile/images/login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@ -0,0 +1,3 @@
{
"name": "images"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
app/mobile/images/team.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -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>
);

View File

@ -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};
`