5 files changed, 134 insertions, 15 deletions
diff --git a/stepped-solutions/07/frontend/components/Header.js b/stepped-solutions/07/frontend/components/Header.js
index 51de94c..5a11aa4 100755
--- a/stepped-solutions/07/frontend/components/Header.js
+++ b/stepped-solutions/07/frontend/components/Header.js
@@ -1,16 +1,60 @@
+import Link from 'next/link';
+import styled from 'styled-components';
 import Nav from './Nav';
 
+const Logo = styled.h1`
+  font-size: 4rem;
+  margin-left: 2rem;
+  position: relative;
+  z-index: 2;
+  transform: skew(-7deg);
+  a {
+    padding: 0.5rem 1rem;
+    background: ${props => props.theme.red};
+    color: white;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+  @media (max-width: 1300px) {
+    margin: 0;
+    text-align: center;
+  }
+`;
+
+const StyledHeader = styled.header`
+  .bar {
+    border-bottom: 10px solid ${props => props.theme.black};
+    display: grid;
+    grid-template-columns: auto 1fr;
+    justify-content: space-between;
+    align-items: stretch;
+    @media (max-width: 1300px) {
+      grid-template-columns: 1fr;
+      justify-content: center;
+    }
+  }
+  .sub-bar {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    border-bottom: 1px solid ${props => props.theme.lightgrey};
+  }
+`;
+
 const Header = () => (
-  <div>
+  <StyledHeader>
     <div className="bar">
-      <a href="">Sick Fits</a>
+      <Logo>
+        <Link href="/">
+          <a>Sick Fits</a>
+        </Link>
+      </Logo>
       <Nav />
     </div>
     <div className="sub-bar">
       <p>Search</p>
     </div>
     <div>Cart</div>
-  </div>
+  </StyledHeader>
 );
 
 export default Header;
diff --git a/stepped-solutions/07/frontend/components/Page.js b/stepped-solutions/07/frontend/components/Page.js
index 11bb409..a8aefa4 100755
--- a/stepped-solutions/07/frontend/components/Page.js
+++ b/stepped-solutions/07/frontend/components/Page.js
@@ -1,15 +1,39 @@
 import React, { Component } from 'react';
+import styled, { ThemeProvider, injectGlobal } from 'styled-components';
 import Header from './Header';
 import Meta from './Meta';
 
+const theme = {
+  red: '#FF0000',
+  black: '#393939',
+  grey: '#3A3A3A',
+  lightgrey: '#E1E1E1',
+  offWhite: '#EDEDED',
+  maxWidth: '1000px',
+  bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)',
+};
+
+const StyledPage = styled.div`
+  background: white;
+  color: ${props => props.theme.black};
+`;
+
+const Inner = styled.div`
+  max-width: ${props => props.theme.maxWidth};
+  margin: 0 auto;
+  padding: 2rem;
+`;
+
 class Page extends Component {
   render() {
     return (
-      <div>
-        <Meta />
-        <Header />
-        {this.props.children}
-      </div>
+      <ThemeProvider theme={theme}>
+        <StyledPage>
+          <Meta />
+          <Header />
+          <Inner>{this.props.children}</Inner>
+        </StyledPage>
+      </ThemeProvider>
     );
   }
 }
diff --git a/stepped-solutions/08/frontend/components/Nav.js b/stepped-solutions/08/frontend/components/Nav.js
index 0bd20b7..a821bc1 100755
--- a/stepped-solutions/08/frontend/components/Nav.js
+++ b/stepped-solutions/08/frontend/components/Nav.js
@@ -1,14 +1,24 @@
 import Link from 'next/link';
+import NavStyles from './styles/NavStyles';
 
 const Nav = () => (
-  <div>
+  <NavStyles>
+    <Link href="/items">
+      <a>Items</a>
+    </Link>
     <Link href="/sell">
-      <a>Sell!</a>
+      <a>Sell</a>
+    </Link>
+    <Link href="/signup">
+      <a>Signup</a>
+    </Link>
+    <Link href="/orders">
+      <a>Orders</a>
     </Link>
-    <Link href="/">
-      <a>Home!</a>
+    <Link href="/me">
+      <a>Account</a>
     </Link>
-  </div>
+  </NavStyles>
 );
 
 export default Nav;
diff --git a/stepped-solutions/08/frontend/components/Page.js b/stepped-solutions/08/frontend/components/Page.js
index 0731f9f..99f3158 100755
--- a/stepped-solutions/08/frontend/components/Page.js
+++ b/stepped-solutions/08/frontend/components/Page.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
+import styled, { ThemeProvider, injectGlobal } from 'styled-components';
 import Header from './Header';
 import Meta from './Meta';
-import styled, { ThemeProvider, injectGlobal } from 'styled-components';
 
 const theme = {
   red: '#FF0000',
@@ -24,6 +24,33 @@ const Inner = styled.div`
   padding: 2rem;
 `;
 
+injectGlobal`
+  @font-face {
+    font-family: 'radnika_next';
+    src: url('/static/radnikanext-medium-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+  }
+  html {
+    box-sizing: border-box;
+    font-size: 10px;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+  body {
+    padding: 0;
+    margin: 0;
+    font-size: 1.5rem;
+    line-height: 2;
+    font-family: 'radnika_next';
+  }
+  a {
+    text-decoration: none;
+    color: ${theme.black};
+  }
+`;
+
 class Page extends Component {
   render() {
     return (
diff --git a/stepped-solutions/09/frontend/components/Header.js b/stepped-solutions/09/frontend/components/Header.js
index b75fbc1..92b97aa 100755
--- a/stepped-solutions/09/frontend/components/Header.js
+++ b/stepped-solutions/09/frontend/components/Header.js
@@ -1,6 +1,20 @@
-import Nav from './Nav';
 import Link from 'next/link';
 import styled from 'styled-components';
+import Router from 'next/router';
+import NProgress from 'nprogress';
+import Nav from './Nav';
+
+Router.onRouteChangeStart = () => {
+  NProgress.start();
+};
+
+Router.onRouteChangeComplete = () => {
+  NProgress.done();
+};
+
+Router.onRouteChangeError = () => {
+  NProgress.done();
+};
 
 const Logo = styled.h1`
   font-size: 4rem;