built sign in and sign up routes and components

src/bootstrap.js

@@ -2,23 +2,29 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
-import { BrowserRouter } from 'react-router-dom';
+import { Router, Switch, Route } from 'react-router-dom';
 import reducers from './reducers';
 
 const createStoreWithMiddleware = applyMiddleware()(createStore);
 
 import './style/main.scss';
 
+import history from './history';
+
 import Layout from './components/layout';
+import Signin from './components/auth/signin';
+import Signup from './components/auth/signup';
 
 function main() {
   ReactDOM.render(
     <Provider store={createStoreWithMiddleware(reducers)}>
-      <BrowserRouter>
+      <Router history={history}>
         <Layout>
-
+            <Switch>
+              <Route path='/' exact component={Signin}/>
+            </Switch>
         </Layout>
-      </BrowserRouter>
+      </Router>
     </Provider>
     , document.querySelector('.app-wrapper'));
 }

src/components/auth/signin.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class SignIn extends Component {
+    render() {
+        return (
+            <div className='sign-in'>
+                sign innn
+            </div>
+        )
+    }
+}
+
+export default SignIn;

src/components/auth/signup.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class SignUp extends Component {
+    render() {
+        return (
+            <div className='sign-up'>
+                sign uppp
+            </div>
+        )
+    }
+}
+
+export default SignUp;

src/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory({});

src/style/auth/signin.scss

@@ -0,0 +1,4 @@
+.sign-in {
+    grid-row: content-s/content-e;
+    grid-column: s/e;
+}

src/style/auth/signup.scss

@@ -0,0 +1,4 @@
+.sign-up {
+    grid-row: content-s/content-e;
+    grid-column: s/e;
+}

src/style/headernavbar.scss

@@ -1,9 +1,13 @@
 .header {
+    grid-row: header-s/header-e;
+    grid-column: 1/-1;
     display: grid;
     justify-content: center;
 }
 
 .navbar {
+    grid-row: navbar-s/navbar-e;
+    grid-column: 1/-1;
     background-color: #333;
     box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
 }

src/style/layout.scss

@@ -1,5 +1,5 @@
 .layout {
     display: grid;
-    grid-template-rows: [header-s] 50px [header-e nav-s] 50px [nav-e content-s] 1fr [content-e];
-    grid-template-columns: [s] 1fr [e];
+    grid-template-rows: [header-s] 50px [header-e navbar-s] 50px [navbar-e content-s] 1fr [content-e];
+    grid-template-columns: minmax(20px, 250px) [s] 1fr [e] minmax(20px, 250px);
 }

src/style/main.scss

@@ -14,4 +14,6 @@ html {
 
 
 @import 'layout';
-@import 'headernavbar';
+@import 'headernavbar';
+@import 'auth/signin';
+@import 'auth/signup';