migrate styles

8 files changed, 93 insertions, 50 deletions

diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 2481e11..dbc3e9e 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -10,6 +10,7 @@ import Error from './ErrorMessage';
 import CartStyles from './styles/CartStyles';
 import Supreme from './styles/Supreme';
 import CloseButton from './styles/CloseButton';
+import SickButton from './styles/SickButton';
 
 const Composed = adopt({
   toggleCart: <Mutation mutation={TOGGLE_CART_MUTATION} />,
@@ -41,7 +42,7 @@ const Cart = () => (
           <footer>
             <p>{formatMoney(calcTotalPrice(me.cart))}</p>
             <TakeMyMoney>
-              <button>Checkout</button>
+              <SickButton>Checkout</SickButton>
             </TakeMyMoney>
           </footer>
         </CartStyles>
diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js
index 5da8d2a..d65f51d 100644
--- a/frontend/components/ErrorMessage.js
+++ b/frontend/components/ErrorMessage.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
-const StyledError = styled.div`
+const ErrorStyles = styled.div`
   padding: 2rem;
   background: white;
   margin: 2rem 0;
@@ -22,12 +22,12 @@ const DisplayError = ({ error, refetch }) => {
   if (!error || !error.message) return null;
   if (error.networkError && error.networkError.result && error.networkError.result.errors.length) {
     return error.networkError.result.errors.map((error, i) => (
-      <StyledError key={i}>
+      <ErrorStyles key={i}>
         <p data-test="graphql-error">
           <strong>Shoot!</strong>
           {error.message.replace('GraphQL error: ', '')}
         </p>
-      </StyledError>
+      </ErrorStyles>
     ));
   }
   return (
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 1289de1..9489f5d 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Pagination from './Pagination';
 import Item from './Item';
+import LoadingItem from './LoadingItem';
 import { perPage } from '../config';
 import { ALL_ITEMS_QUERY } from '../queries/queries';
 
@@ -43,7 +44,15 @@ class ItemList extends React.Component {
           fetchPolicy={fetchPolicy}
         >
           {({ data, error, loading }) => {
-            if (loading) return null;
+            if (loading) {
+              return (
+                <Items>
+                  {Array.from({ length: 4 })
+                    .map((x, id) => ({ id }))
+                    .map(x => <LoadingItem key={x.id} />)}
+                </Items>
+              );
+            }
             if (error) return <div>Error</div>;
             return <Items>{data.items.map(item => <Item key={item.id} item={item} />)}</Items>;
           }}
diff --git a/frontend/components/LoadingItem.js b/frontend/components/LoadingItem.js
new file mode 100644
index 0000000..5ba78d8
--- /dev/null
+++ b/frontend/components/LoadingItem.js
@@ -0,0 +1,28 @@
+import React from 'react';
+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 ItemStyles from './styles/ItemStyles';
+import PriceTag from './styles/PriceTag';
+
+class LoadingItem extends React.Component {
+  render() {
+    return (
+      <ItemStyles>
+        <img
+          src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+          alt="Loading..."
+        />>
+        <Title>
+          <a>Loading...</a>
+        </Title>
+        <p>Please Wait</p>
+      </ItemStyles>
+    );
+  }
+}
+
+export default LoadingItem;
diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js
index d663b98..501852f 100644
--- a/frontend/components/OrderList.js
+++ b/frontend/components/OrderList.js
@@ -1,56 +1,17 @@
 import React from 'react';
 import { Query } from 'react-apollo';
-import { format, formatDistance } from 'date-fns';
+import { formatDistance } from 'date-fns';
 import Link from 'next/link';
-import { USER_ORDERS_QUERY } from '../queries/queries';
 import styled from 'styled-components';
+import { USER_ORDERS_QUERY } from '../queries/queries';
 import formatMoney from '../lib/formatMoney';
+import OrderItemStyles from './styles/OrderItemStyles';
 
 const OrderUl = styled.ul`
   display: grid;
   grid-gap: 4rem;
   grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
 `;
-const OrderListItem = styled.li`
-  box-shadow: ${props => props.theme.bs};
-  list-style: none;
-  padding: 2rem;
-  border: 1px solid ${props => props.theme.offWhite};
-  h2 {
-    border-bottom: 2px solid red;
-    margin-top: 0;
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-  }
-
-  .images {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    margin-top: 1rem;
-    img {
-      height: 200px;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-  .order-meta {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-    display: grid;
-    grid-gap: 1rem;
-    text-align: center;
-    & > * {
-      margin: 0;
-      background: rgba(0, 0, 0, 0.03);
-      padding: 1rem 0;
-    }
-    strong {
-      display: block;
-      margin-bottom: 1rem;
-    }
-  }
-`;
 
 class OrderList extends React.Component {
   render() {
@@ -65,7 +26,7 @@ class OrderList extends React.Component {
               <h2>You have {orders.length} Orders</h2>
               <OrderUl>
                 {orders.map(order => (
-                  <OrderListItem key={order.id}>
+                  <OrderItemStyles key={order.id}>
                     <Link
                       href={{
                         pathname: '/order',
@@ -98,7 +59,7 @@ class OrderList extends React.Component {
                         </div>
                       </a>
                     </Link>
-                  </OrderListItem>
+                  </OrderItemStyles>
                 ))}
               </OrderUl>
             </div>
diff --git a/frontend/components/Page.js b/frontend/components/Page.js
index 7ec585d..c6601f6 100644
--- a/frontend/components/Page.js
+++ b/frontend/components/Page.js
@@ -28,7 +28,6 @@ injectGlobal`
    margin: 0;
    font-size: 1.5rem;
    line-height: 2;
-   background: red;
   }
   *, *:before, *:after {
     box-sizing: inherit;
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 85aaeb5..b9ed409 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -44,6 +44,7 @@ const glow = keyframes`
     box-shadow: 0 0 10px 1px yellow;
   }
 `;
+
 const SearchStyles = styled.div`
   position: relative;
   input {
diff --git a/frontend/components/styles/OrderItemStyles.js b/frontend/components/styles/OrderItemStyles.js
new file mode 100644
index 0000000..292c75d
--- /dev/null
+++ b/frontend/components/styles/OrderItemStyles.js
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const OrderItemStyles = styled.li`
+  box-shadow: ${props => props.theme.bs};
+  list-style: none;
+  padding: 2rem;
+  border: 1px solid ${props => props.theme.offWhite};
+  h2 {
+    border-bottom: 2px solid red;
+    margin-top: 0;
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .images {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    margin-top: 1rem;
+    img {
+      height: 200px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+  .order-meta {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
+    display: grid;
+    grid-gap: 1rem;
+    text-align: center;
+    & > * {
+      margin: 0;
+      background: rgba(0, 0, 0, 0.03);
+      padding: 1rem 0;
+    }
+    strong {
+      display: block;
+      margin-bottom: 1rem;
+    }
+  }
+`;
+
+export default OrderItemStyles;