use pagination svg icons

chingu-voyage6 · Jul 3, 2018 · 83acd1e · 83acd1e
1 parent c799bef
commit 83acd1e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/src/layouts/components/Icon.js b/src/layouts/components/Icon.js
@@ -17,8 +17,8 @@ const Icon = props => (
     width={props.size}
     height={props.size}
     color={props.color}
-    preserveAspectRatio="xMidYMid meet"
-  >
+    className={props.className}
+    preserveAspectRatio="xMidYMid meet">
     <path d={props.icon} />
   </StyledIcon>
 )
@@ -27,7 +27,8 @@ Icon.propTypes = {
   icon: PropTypes.string.isRequired,
   color: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   size: PropTypes.number,
-  viewbox: PropTypes.string
+  viewbox: PropTypes.string,
+  className: PropTypes.string
 }
 
 Icon.defaultProps = {

diff --git a/src/layouts/components/Pagination.js b/src/layouts/components/Pagination.js
@@ -3,20 +3,33 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
 import { media } from '../../theme/globalStyle'
+import { ICONS } from '../../theme/constants'
+import Icon from './Icon'
+
+const PaginationIcon = styled(Icon)`
+  ${media.tablet`
+    width: 24px;
+    height: 24px;
+  `};
+`
 
 const PaginationButton = styled.button`
   border: 1px solid ${props => props.theme.primary.light};
   color: ${props => props.color || props.theme.primary.light};
-  background: ${props => props.background || 'lightgrey'};
+  background: ${props => props.background};
   font-size: 1.2rem;
   min-width: 3rem;
   min-height: 3rem;
+  padding: 1px 8px;
   cursor: pointer;
   outline: none;
   transition: all 0.2s;
   &:hover {
-    color: ${props => props.background || 'lightgrey'};
+    color: ${props => props.background};
     background: ${props => props.color || props.theme.primary.light};
+    svg path {
+      fill: ${props => props.theme.white};
+    }
   }
   &:active {
     outline: none;
@@ -29,14 +42,29 @@ const PaginationButton = styled.button`
     min-width: 2rem;
     min-height: 2rem;
   `};
+  ${media.phone`
+  padding: 1px 6px;
+  `};
 `
 const ButtonRight = PaginationButton.extend`
+  display: flex;
+  align-items: center;
   border-radius: 0px 4px 4px 0px;
+  padding: 2px 6px;
+  ${media.phone`
+    padding: 0 6px;
+  `};
 `
 const ButtonLeft = PaginationButton.extend`
+  display: flex;
+  align-items: center;
   border-radius: 4px 0px 0px 4px;
+  padding: 2px 6px;
+  ${media.phone`
+    padding: 0 6px;
+  `};
 `
-//⏪⏩
+
 const PaginationContainer = styled.div`
   display: flex;
   max-width: 200px;
@@ -51,8 +79,7 @@ const Pagination = props => {
       key={k.toString()}
       background={props.background}
       color={props.color}
-      onClick={() => goPage(k)}
-    >
+      onClick={() => goPage(k)}>
       {k + 1}
     </PaginationButton>
   ))
@@ -66,17 +93,23 @@ const Pagination = props => {
       <ButtonLeft
         background={props.background}
         color={props.color}
-        onClick={goPrevious}
-      >
-        {props.backward || '⏪'}
+        onClick={goPrevious}>
+        <PaginationIcon
+          icon={ICONS.LEFT_ARROW}
+          color={({ theme }) => theme.primary.light}
+          size={30}
+        />
       </ButtonLeft>
       {numButtons}
       <ButtonRight
         background={props.background}
         color={props.color}
-        onClick={goNext}
-      >
-        {props.forward || '⏩'}
+        onClick={goNext}>
+        <PaginationIcon
+          icon={ICONS.RIGHT_ARROW}
+          color={({ theme }) => theme.primary.light}
+          size={30}
+        />
       </ButtonRight>
     </PaginationContainer>
   )

diff --git a/src/theme/constants.js b/src/theme/constants.js
@@ -141,5 +141,9 @@ export const ICONS = {
 
   LIBRARY: `M32 
     30v-2h-2v-12h2v-2h-6v2h2v12h-6v-12h2v-2h-6v2h2v12h-6v-12h2v-2h-6v2h2v12h-6v-12h2v-2h-6v2h2v12h-2v2h-2v2h34v-2h-2z 
-    M16 0h2l16 10v2h-34v-2l16-10z`
+    M16 0h2l16 10v2h-34v-2l16-10z`,
+
+  LEFT_ARROW: `M18 5v10l10-10v22l-10-10v10l-11-11z`,
+
+  RIGHT_ARROW: `M16 27v-10l-10 10v-22l10 10v-10l11 11z`
 }