Moving styles to folder

24 files changed, 411 insertions, 284 deletions

diff --git a/backend/package-lock.json b/backend/package-lock.json
index beb8e11..ea17b4f 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -944,6 +944,11 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
@@ -3281,7 +3286,6 @@
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "dev": true,
       "requires": {
         "iconv-lite": "0.4.19"
       }
@@ -3690,6 +3694,27 @@
         "bser": "2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.16",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
+      "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
+      "requires": {
+        "core-js": "1.2.7",
+        "isomorphic-fetch": "2.2.1",
+        "loose-envify": "1.3.1",
+        "object-assign": "4.1.1",
+        "promise": "7.3.1",
+        "setimmediate": "1.0.5",
+        "ua-parser-js": "0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        }
+      }
+    },
     "fd-slicer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
@@ -6379,8 +6404,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-symbol": {
       "version": "1.0.1",
@@ -6453,7 +6477,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "dev": true,
       "requires": {
         "node-fetch": "1.7.3",
         "whatwg-fetch": "2.0.3"
@@ -6463,7 +6486,6 @@
           "version": "1.7.3",
           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
           "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-          "dev": true,
           "requires": {
             "encoding": "0.1.12",
             "is-stream": "1.1.0"
@@ -7336,8 +7358,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.11.0",
@@ -7880,7 +7901,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
       "requires": {
         "js-tokens": "3.0.2"
       }
@@ -9485,6 +9505,24 @@
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "2.0.6"
+      }
+    },
+    "prop-types": {
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
+      "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
+      "requires": {
+        "fbjs": "0.8.16",
+        "loose-envify": "1.3.1",
+        "object-assign": "4.1.1"
+      }
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -9672,6 +9710,25 @@
         }
       }
     },
+    "react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg==",
+      "requires": {
+        "fbjs": "0.8.16",
+        "loose-envify": "1.3.1",
+        "object-assign": "4.1.1",
+        "prop-types": "15.6.1"
+      }
+    },
+    "react-adopt": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.4.1.tgz",
+      "integrity": "sha1-IujAhqZMp06YKFceOMNjW+TMnLk=",
+      "requires": {
+        "react": "16.3.2"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -10571,6 +10628,11 @@
         }
       }
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+    },
     "setprototypeof": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
@@ -11737,6 +11799,11 @@
         "mime-types": "2.1.18"
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.18",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
+      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
diff --git a/backend/package.json b/backend/package.json
index 1cf7707..b5b33bc 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -14,6 +14,7 @@
     "jsonwebtoken": "8.2.1",
     "nodemailer": "^4.6.4",
     "prisma-binding": "1.5.16",
+    "react-adopt": "^0.4.1",
     "stripe": "^5.8.0"
   },
   "devDependencies": {
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 8d57c33..2481e11 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -1,119 +1,53 @@
 import React from 'react';
 import { Mutation, Query } from 'react-apollo';
-import styled from 'styled-components';
+import { adopt } from 'react-adopt';
 import TakeMyMoney from './TakeMyMoney';
 import formatMoney from '../lib/formatMoney';
 import CartItem from './CartItem';
 import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION } from '../queries/queries';
 import calcTotalPrice from '../lib/calcTotalPrice';
 import Error from './ErrorMessage';
+import CartStyles from './styles/CartStyles';
+import Supreme from './styles/Supreme';
+import CloseButton from './styles/CloseButton';
 
-const CartStyles = styled.div`
-  padding: 20px;
-  position: relative;
-  background: white;
-  position: fixed;
-  height: 100%;
-  top: 0;
-  right: 0;
-  width: 40%;
-  min-width: 500px;
-  bottom: 0;
-  transform: translateX(100%);
-  transition: all 0.3s;
-  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
-  z-index: 5;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  ${props => props.open && `transform: translateX(0);`};
-  header {
-    border-bottom: 5px solid ${props => props.theme.black};
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-  }
-  footer {
-    border-top: 10px double ${props => props.theme.black};
-    margin-top: 2rem;
-    padding-top: 2rem;
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    font-size: 3rem;
-    font-weight: 900;
-    p {
-      margin: 0;
-    }
-  }
-`;
+const Composed = adopt({
+  toggleCart: <Mutation mutation={TOGGLE_CART_MUTATION} />,
+  localState: <Query query={LOCAL_STATE_QUERY} />,
+  currentUser: <Query query={CURRENT_USER_QUERY} data-test="cart" />,
+});
 
-const CartUl = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: scroll;
-`;
+const Cart = () => (
+  <Composed>
+    {({ toggleCart, localState, currentUser }) => {
+      const { data: { me }, error, loading } = currentUser;
+      if (loading) return <p>Loading...</p>;
+      if (error) return <Error error={error} />;
+      if (!me) return <p>Please Sign In!</p>;
+      return (
+        <CartStyles open={localState.data.cartOpen}>
+          <header>
+            <CloseButton title="close" onClick={toggleCart}>
+              &times;
+            </CloseButton>
 
-const Supreme = styled.h3`
-  background: ${props => props.theme.red};
-  color: white;
-  display: inline-block;
-  padding: 4px 5px;
-  transform: skew(-3deg);
-  margin: 0;
-  font-size: 4rem;
-`;
+            <Supreme>{me.name}'s Cart.</Supreme>
+            <p>
+              You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart.
+            </p>
+          </header>
 
-const CloseButton = styled.button`
-  background: black;
-  color: white;
-  font-size: 3rem;
-  border: 0;
-  position: absolute;
-  z-index: 2;
-  right: 0;
-`;
-
-// TODO: use react-adopt to compose these
-const Cart = props => (
-  <Mutation mutation={TOGGLE_CART_MUTATION}>
-    {toggle => (
-      <Query query={LOCAL_STATE_QUERY}>
-        {({ data }) => (
-          <Query query={CURRENT_USER_QUERY} data-test="cart">
-            {({ data: { me }, error, loading }) => {
-              if (loading) return <p>Loading...</p>;
-              if (error) return <Error error={error} />;
-              if (!me) return <p>Please Sign In!</p>;
-              return (
-                <CartStyles open={data.cartOpen}>
-                  <header>
-                    <CloseButton title="close" onClick={toggle}>
-                      &times;
-                    </CloseButton>
-
-                    <Supreme>{me.name}'s Cart.</Supreme>
-                    <p>
-                      You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart.
-                    </p>
-                  </header>
-
-                  <CartUl>
-                    {me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}
-                  </CartUl>
-                  <footer>
-                    <p>{formatMoney(calcTotalPrice(me.cart))}</p>
-                    <TakeMyMoney>
-                      <button>Checkout</button>
-                    </TakeMyMoney>
-                  </footer>
-                </CartStyles>
-              );
-            }}
-          </Query>
-        )}
-      </Query>
-    )}
-  </Mutation>
+          <ul>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</ul>
+          <footer>
+            <p>{formatMoney(calcTotalPrice(me.cart))}</p>
+            <TakeMyMoney>
+              <button>Checkout</button>
+            </TakeMyMoney>
+          </footer>
+        </CartStyles>
+      );
+    }}
+  </Composed>
 );
 
 export default Cart;
diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js
index 1cc4e47..525ed22 100644
--- a/frontend/components/CartCount.js
+++ b/frontend/components/CartCount.js
@@ -44,7 +44,13 @@ const AnimationStyles = styled.span`
 const CartCount = ({ count }) => (
   <AnimationStyles>
     <TransitionGroup>
-      <CSSTransition unmountOnExit className="count" classNames="count" key={count} timeout={{ enter: 400, exit: 400 }}>
+      <CSSTransition
+        unmountOnExit
+        className="count"
+        classNames="count"
+        key={count}
+        timeout={{ enter: 400, exit: 400 }}
+      >
         <Dot>{count}</Dot>
       </CSSTransition>
     </TransitionGroup>
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 87d24c4..d6b339e 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -1,63 +1,14 @@
 import React from 'react';
-import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import Link from 'next/link';
 import Title from './styles/Title';
 import AddToCart from './AddToCart';
 import DeleteItem from './DeleteItem';
 import formatMoney from '../lib/formatMoney';
-import PropTypes from 'prop-types';
-
-const Item = styled.div`
-  background: white;
-  border: 1px solid ${props => props.theme.offWhite};
-  box-shadow: ${props => props.theme.bs};
-  position: relative;
-  display: grid;
-  align-content: start;
-  grid-auto-rows: fit-content;
-  img {
-    width: 100%;
-    height: 400px;
-    object-fit: cover;
-  }
-  p {
-    font-size: 14px;
-    line-height: 2;
-    font-weight: 600;
-    padding: 0 3rem;
-    font-size: 1.5rem;
-  }
-  .buttonList {
-    display: grid;
-    border-top: 1px solid ${props => props.theme.lightgrey};
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    grid-gap: 1px;
-    background: ${props => props.theme.lightgrey};
-    align-self: end;
-    & > * {
-      background: white;
-      border: 0;
-      font-size: 1rem;
-      padding: 1rem;
-    }
-  }
-`;
-
-const PriceTag = styled.span`
-  background: ${props => props.theme.red};
-  transform: rotate(3deg);
-  color: white;
-  font-weight: 600;
-  padding: 5px;
-  line-height: 1;
-  font-size: 3rem;
-  display: inline-block;
-  position: absolute;
-  top: -3px;
-  right: -3px;
-`;
+import ItemStyles from './styles/ItemStyles';
+import PriceTag from './styles/PriceTag';
 
-class ItemComponent extends React.Component {
+class Item extends React.Component {
   static propTypes = {
     item: PropTypes.object.isRequired,
   };
@@ -65,7 +16,7 @@ class ItemComponent extends React.Component {
   render() {
     const item = this.props.item;
     return (
-      <Item key={item.id}>
+      <ItemStyles key={item.id}>
         {item.image && <img src={item.image} alt={item.title} />}
         <Title>
           <Link
@@ -94,9 +45,9 @@ class ItemComponent extends React.Component {
           <AddToCart id={item.id} />
           <DeleteItem id={item.id} />
         </div>
-      </Item>
+      </ItemStyles>
     );
   }
 }
 
-export default ItemComponent;
+export default Item;
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 5768b6b..1289de1 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -24,7 +24,6 @@ class ItemList extends React.Component {
     page: PropTypes.number.isRequired,
   };
   static getDerivedStateFromProps(nextProps, state) {
-    console.log(nextProps);
     return { refetch: state.page !== nextProps.page };
   }
   state = {
diff --git a/frontend/components/Meta.js b/frontend/components/Meta.js
index bee5a69..fe9c29f 100644
--- a/frontend/components/Meta.js
+++ b/frontend/components/Meta.js
@@ -1,21 +1,14 @@
 import React from 'react';
 import Head from 'next/head';
-import { injectGlobal } from 'styled-components';
 
 const Meta = () => (
   <div>
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      {injectGlobal`
-          html {
-            background: white;
-          }
-        `}
       <meta charSet="utf-8" />
       <link rel="shortcut icon" href="/static/favicon.png" />
       <link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
-
-      <title>Sick Fits</title>
+      <title>Sick Fits!</title>
     </Head>
   </div>
 );
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 1e39762..89a7c4c 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -7,73 +7,14 @@ import CartCount from './CartCount';
 import Signout from './Signout';
 import { ApolloConsumer } from 'react-apollo';
 
-const StyledNav = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  justify-self: end;
-  font-size: 2rem;
-  a,
-  button {
-    padding: 1rem 3rem;
-    display: flex;
-    align-items: center;
-    position: relative;
-    text-transform: uppercase;
-    font-weight: 900;
-    font-size: 1em;
-    background: none;
-    border: 0;
-    cursor: pointer;
-    @media (max-width: 700px) {
-      font-size: 10px;
-      padding: 0 10px;
-    }
-    &:before {
-      content: '';
-      width: 2px;
-      background: ${props => props.theme.lightgrey};
-      height: 100%;
-      left: 0;
-      position: absolute;
-      transform: skew(-20deg);
-      top: 0;
-      bottom: 0;
-    }
-    &:after {
-      height: 2px;
-      background: red;
-      content: '';
-      width: 0;
-      position: absolute;
-      transform: translateX(-50%);
-      transition: width 0.4s;
-      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
-      left: 50%;
-      margin-top: 2rem;
-    }
-    &:hover,
-    &:focus {
-      outline: none;
-      &:after {
-        width: calc(100% - 60px);
-      }
-    }
-  }
-  @media (max-width: 1300px) {
-    border-top: 1px solid ${props => props.theme.lightgrey};
-    width: 100%;
-    justify-content: center;
-    font-size: 1.5rem;
-  }
-`;
+import NavStyles from './styles/NavStyles';
 
 class Nav extends React.Component {
   render() {
     return (
       <Query query={CURRENT_USER_QUERY}>
         {({ data: { me } }) => (
-          <StyledNav data-test="nav">
+          <NavStyles data-test="nav">
             <Link href="/items">
               <a>Shop</a>
             </Link>
@@ -109,7 +50,7 @@ class Nav extends React.Component {
                 </ApolloConsumer>
               </Fragment>
             )}
-          </StyledNav>
+          </NavStyles>
         )}
       </Query>
     );
diff --git a/frontend/components/Order.js b/frontend/components/Order.js
index 0a71b18..0e0aa5f 100644
--- a/frontend/components/Order.js
+++ b/frontend/components/Order.js
@@ -3,47 +3,10 @@ import { Query } from 'react-apollo';
 import { format } from 'date-fns';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { SINGLE_ORDER_QUERY } from '../queries/queries';
 import formatMoney from '../lib/formatMoney';
-import Dump from './Dump';
 import Error from './ErrorMessage';
-
-const OrderStyles = styled.div`
-  max-width: 1000px;
-  margin: 0 auto;
-  border: 1px solid ${props => props.theme.offWhite};
-  box-shadow: ${props => props.theme.bs};
-  padding: 2rem;
-  border-top: 10px solid red;
-  & > p {
-    display: grid;
-    grid-template-columns: 1fr 5fr;
-    margin: 0;
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    span {
-      padding: 1rem;
-      &:first-child {
-        font-weight: 900;
-        text-align: right;
-      }
-    }
-  }
-  .order-item {
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    display: grid;
-    grid-template-columns: 300px 1fr;
-    align-items: center;
-    grid-gap: 2rem;
-    margin: 2rem 0;
-    padding-bottom: 2rem;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-`;
+import OrderStyles from './styles/OrderStyles';
 
 class Order extends Component {
   static propTypes = {
diff --git a/frontend/components/styles/CartStyles.js b/frontend/components/styles/CartStyles.js
new file mode 100644
index 0000000..d5ee93a
--- /dev/null
+++ b/frontend/components/styles/CartStyles.js
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+const CartStyles = styled.div`
+  padding: 20px;
+  position: relative;
+  background: white;
+  position: fixed;
+  height: 100%;
+  top: 0;
+  right: 0;
+  width: 40%;
+  min-width: 500px;
+  bottom: 0;
+  transform: translateX(100%);
+  transition: all 0.3s;
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  z-index: 5;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  ${props => props.open && `transform: translateX(0);`};
+  header {
+    border-bottom: 5px solid ${props => props.theme.black};
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+  }
+  footer {
+    border-top: 10px double ${props => props.theme.black};
+    margin-top: 2rem;
+    padding-top: 2rem;
+    display: grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    font-size: 3rem;
+    font-weight: 900;
+    p {
+      margin: 0;
+    }
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: scroll;
+  }
+`;
+
+export default CartStyles;
diff --git a/frontend/components/styles/CloseButton.js b/frontend/components/styles/CloseButton.js
new file mode 100644
index 0000000..69fd55c
--- /dev/null
+++ b/frontend/components/styles/CloseButton.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const CloseButton = styled.button`
+  background: black;
+  color: white;
+  font-size: 3rem;
+  border: 0;
+  position: absolute;
+  z-index: 2;
+  right: 0;
+`;
+
+export default CloseButton;
diff --git a/frontend/components/styles/ItemStyles.js b/frontend/components/styles/ItemStyles.js
new file mode 100644
index 0000000..8ae0836
--- /dev/null
+++ b/frontend/components/styles/ItemStyles.js
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const Item = styled.div`
+  background: white;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  position: relative;
+  display: grid;
+  align-content: start;
+  grid-auto-rows: fit-content;
+  img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+  }
+  p {
+    font-size: 14px;
+    line-height: 2;
+    font-weight: 600;
+    padding: 0 3rem;
+    font-size: 1.5rem;
+  }
+  .buttonList {
+    display: grid;
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-gap: 1px;
+    background: ${props => props.theme.lightgrey};
+    align-self: end;
+    & > * {
+      background: white;
+      border: 0;
+      font-size: 1rem;
+      padding: 1rem;
+    }
+  }
+`;
+
+export default Item;
diff --git a/frontend/components/styles/NavStyles.js b/frontend/components/styles/NavStyles.js
new file mode 100644
index 0000000..41523df
--- /dev/null
+++ b/frontend/components/styles/NavStyles.js
@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+const NavStyles = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-self: end;
+  font-size: 2rem;
+  a,
+  button {
+    padding: 1rem 3rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-transform: uppercase;
+    font-weight: 900;
+    font-size: 1em;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    @media (max-width: 700px) {
+      font-size: 10px;
+      padding: 0 10px;
+    }
+    &:before {
+      content: '';
+      width: 2px;
+      background: ${props => props.theme.lightgrey};
+      height: 100%;
+      left: 0;
+      position: absolute;
+      transform: skew(-20deg);
+      top: 0;
+      bottom: 0;
+    }
+    &:after {
+      height: 2px;
+      background: red;
+      content: '';
+      width: 0;
+      position: absolute;
+      transform: translateX(-50%);
+      transition: width 0.4s;
+      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
+      left: 50%;
+      margin-top: 2rem;
+    }
+    &:hover,
+    &:focus {
+      outline: none;
+      &:after {
+        width: calc(100% - 60px);
+      }
+    }
+  }
+  @media (max-width: 1300px) {
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    width: 100%;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+`;
+
+export default NavStyles;
diff --git a/frontend/components/styles/OrderStyles.js b/frontend/components/styles/OrderStyles.js
new file mode 100644
index 0000000..4a2d804
--- /dev/null
+++ b/frontend/components/styles/OrderStyles.js
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const OrderStyles = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  padding: 2rem;
+  border-top: 10px solid red;
+  & > p {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    margin: 0;
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    span {
+      padding: 1rem;
+      &:first-child {
+        font-weight: 900;
+        text-align: right;
+      }
+    }
+  }
+  .order-item {
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    align-items: center;
+    grid-gap: 2rem;
+    margin: 2rem 0;
+    padding-bottom: 2rem;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+`;
+export default OrderStyles;
diff --git a/frontend/components/styles/PriceTag.js b/frontend/components/styles/PriceTag.js
new file mode 100644
index 0000000..9116681
--- /dev/null
+++ b/frontend/components/styles/PriceTag.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const PriceTag = styled.span`
+  background: ${props => props.theme.red};
+  transform: rotate(3deg);
+  color: white;
+  font-weight: 600;
+  padding: 5px;
+  line-height: 1;
+  font-size: 3rem;
+  display: inline-block;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+`;
+
+export default PriceTag;
diff --git a/frontend/components/styles/Supreme.js b/frontend/components/styles/Supreme.js
new file mode 100644
index 0000000..d946ccd
--- /dev/null
+++ b/frontend/components/styles/Supreme.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Supreme = styled.h3`
+  background: ${props => props.theme.red};
+  color: white;
+  display: inline-block;
+  padding: 4px 5px;
+  transform: skew(-3deg);
+  margin: 0;
+  font-size: 4rem;
+`;
+
+export default Supreme;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index aa3b4b4..292592d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10094,6 +10094,14 @@
         "prop-types": "15.6.1"
       }
     },
+    "react-adopt": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.4.1.tgz",
+      "integrity": "sha1-IujAhqZMp06YKFceOMNjW+TMnLk=",
+      "requires": {
+        "react": "16.3.2"
+      }
+    },
     "react-apollo": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.1.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 429fe83..5c1d911 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "nprogress": "^0.2.0",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
+    "react-adopt": "^0.4.1",
     "react-apollo": "^2.1.4",
     "react-dom": "^16.3.2",
     "react-stripe-checkout": "^2.6.3",
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
new file mode 100644
index 0000000..5cedb5a
--- /dev/null
+++ b/frontend/pages/_app.js
@@ -0,0 +1,33 @@
+import App, { Container } from 'next/app';
+import React from 'react';
+import { withRouter } from 'next/router';
+
+// Next.js wraps each Page in an <App></App> component. This is handy for when you want to persist anything from page to page, or just access a component that is 1 level higher than each page.
+
+// This code is taken right from the Next.js docs, and then we add the Router to the page props, which is why we need a custom _app.js
+
+class MyApp extends App {
+  static async getInitialProps({ Component, router, ctx }) {
+    let pageProps = {};
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx);
+    }
+
+    // surface the router on each page
+    pageProps.router = router;
+
+    return { pageProps };
+  }
+
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <Container>
+        <Component {...pageProps} />
+      </Container>
+    );
+  }
+}
+
+export default withRouter(MyApp);
diff --git a/frontend/pages/add.js b/frontend/pages/add.js
index eb0dd1d..bbe89d6 100644
--- a/frontend/pages/add.js
+++ b/frontend/pages/add.js
@@ -1,4 +1,3 @@
-import { Component } from 'react';
 import Page from '../components/Page';
 import withData from '../lib/withData';
 import CreateItem from '../components/CreateItem';
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index d4625c5..d7996d9 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -4,7 +4,7 @@ import Page from '../components/Page';
 import withData from '../lib/withData';
 
 const Home = props => {
-  const page = parseInt(props.url.query.page) || 1;
+  const page = parseInt(props.router.query.page) || 1;
   return (
     <Page>
       <Items page={page} />
@@ -13,7 +13,7 @@ const Home = props => {
 };
 
 Home.propTypes = {
-  url: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
 };
 
 export default withData(Home);
diff --git a/frontend/pages/order.js b/frontend/pages/order.js
index 82ddea9..d206990 100644
--- a/frontend/pages/order.js
+++ b/frontend/pages/order.js
@@ -5,7 +5,7 @@ import Order from '../components/Order';
 
 const OrderPage = props => (
   <Page>
-    <Order id={props.url.query.id} />
+    <Order id={props.router.query.id} />
   </Page>
 );
 
diff --git a/frontend/pages/reset.js b/frontend/pages/reset.js
index 899ebbc..2b4008a 100644
--- a/frontend/pages/reset.js
+++ b/frontend/pages/reset.js
@@ -5,7 +5,7 @@ import Reset from '../components/Reset';
 const ResetPage = props => (
   <Page>
     <h2>So you wanna reset your password?</h2>
-    <Reset resetToken={props.url.query.resetToken} />
+    <Reset resetToken={props.router.query.resetToken} />
   </Page>
 );
 
diff --git a/frontend/pages/update.js b/frontend/pages/update.js
index b30cd1c..f5fbc43 100644
--- a/frontend/pages/update.js
+++ b/frontend/pages/update.js
@@ -9,7 +9,7 @@ class Home extends Component {
     return (
       <Page>
         <PleaseSignIn>
-          <UpdateItem id={this.props.url.query.id} />
+          <UpdateItem id={this.props.router.query.id} />
         </PleaseSignIn>
       </Page>
     );