laying out login screen

app/mobile/images/package.json

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

app/mobile/src/access/login/Login.jsx

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

app/mobile/src/access/login/Login.styled.jsx

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