migrate styles

1 files changed, 5 insertions, 44 deletions

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>