From 6daab5e176382954d2229d8a9251ae819572a29e Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 11 Jul 2018 14:57:57 -0400
Subject: more stepped

---
 .../frontend/components/Pagination.js              | 27 +++-------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

(limited to 'finished-application/frontend/components/Pagination.js')

diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js
index b77f8f6..f684840 100644
--- a/finished-application/frontend/components/Pagination.js
+++ b/finished-application/frontend/components/Pagination.js
@@ -6,6 +6,9 @@ import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import Head from 'next/head';
 import { perPage } from '../config';
+import PaginationStyles from './styles/PaginationStyles';
+
+
 
 const PAGINATION_QUERY = gql`
   query itemsConnection($skip: Int = 0, $first: Int = 4) {
@@ -17,30 +20,6 @@ const PAGINATION_QUERY = gql`
   }
 `;
 
-const PaginationStyles = styled.div`
-  text-align: center;
-  display: inline-grid;
-  grid-template-columns: repeat(4, auto);
-  align-items: stretch;
-  justify-content: center;
-  align-content: center;
-  margin: 2rem 0;
-  border: 1px solid ${props => props.theme.lightgrey};
-  border-radius: 10px;
-  & > * {
-    margin: 0;
-    padding: 15px 30px;
-    border-right: 1px solid ${props => props.theme.lightgrey};
-    &:last-child {
-      border-right: 0;
-    }
-  }
-  a[aria-disabled='true'] {
-    color: grey;
-    pointer-events: none;
-  }
-`;
-
 const Pagination = props => (
   <Query query={PAGINATION_QUERY}>
     {({ data, loading, error }) => {
-- 
cgit v1.3