fix(): add login page UI

src/index.js

@@ -10,6 +10,7 @@ import { ApolloProvider} from "react-apollo";
 //Components and Pages
 import App from './js/App';
 import HomepageLayout  from './landing-page/landing';
+import LoginForm from './js/pages/Login';
 
 //REQUIRED STYLES
 import './index.css';
@@ -25,12 +26,11 @@ const client = new ApolloClient({
 
 ReactDOM.render(
     <Router>
-        <Switch>
-            <Route component={HomepageLayout} exact path="/" />
-            <ApolloProvider client={client}>
-                <Route exactly path='/app' render={(props) => <App {...props} routePath="/app" />} />
-            </ApolloProvider>
-        </Switch>
+        <Route component={HomepageLayout} exact path="/" />
+        <ApolloProvider client={client}>
+            <Route exactly path='/app' render={(props) => <App {...props} routePath="/app" />} />
+        </ApolloProvider>
+        <Route component={LoginForm} path="/login" />
     </Router>
     ,app
 );

src/js/pages/Login.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react';
+
+class LoginForm extends React.Component{
+    render(){
+        return(
+            <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
+                <Grid.Column style={{ maxWidth: 450 }}>
+                <Header as='h2' color='teal' textAlign='center'>
+                     Log-in to your account
+                </Header>
+                <Form size='large'>
+                    <Segment stacked>
+                        <Form.Input fluid icon='user' iconPosition='left' placeholder='E-mail address' />
+                        <Form.Input
+                            fluid
+                            icon='lock'
+                            iconPosition='left'
+                            placeholder='Password'
+                            type='password'
+                        />
+                        <Button as={Link} to='/app/home' color='teal' fluid size='large'>
+                            Login
+                        </Button>
+                    </Segment>
+                </Form>
+                {/*<Message>
+                    New to us? <a href='/'>Sign Up</a>
+                </Message>*/}
+                </Grid.Column>
+            </Grid>
+        )
+    }
+}  
+
+
+export default LoginForm;

src/landing-page/landing.js

@@ -116,7 +116,7 @@ class DesktopContainer extends Component {
                   Home
                 </Menu.Item>
                 <Menu.Item position='right'>
-                  <Button as={Link} to='/app/home' inverted={fixed}>
+                  <Button as={Link} to='/login' inverted={fixed}>
                     Log in
                   </Button>
                   <Button as='a' inverted={fixed} primary={!fixed} style={{ marginLeft: '0.5em' }}>