Merge pull request #377 from developmentseed/update/pagination-styles

Update pagination button styles

Author: LanesGood

src/components/button.js

@@ -47,9 +47,18 @@ const ButtonStyles = css.global`
   .button.primary {
     color: #ffffff;
     background: ${theme.colors.primaryColor};
-    border: none;
+    border: 2px solid transparent;
+    box-shadow: 2px 2px #ffffff, 4px 4px ${theme.colors.primaryColor};
+  }
+  .button.secondary {
+    color: ${theme.colors.primaryColor};
+    background: ${theme.colors.primaryLite};
     box-shadow: 2px 2px #ffffff, 4px 4px ${theme.colors.primaryColor};
   }
+  .button.flat {
+    box-shadow: none;
+    position: relative;
+  }
 
   .borderless {
     border: none;
@@ -164,6 +173,7 @@ export default function Button({
 }) {
   let classes = [`button`, variant, className]
   if (disabled) classes.push('disabled')
+  if (flat) classes.push('flat')
   let classNames = classes.join(' ')
   if (type === 'submit') {
     return (
@@ -181,16 +191,16 @@ export default function Button({
         <style jsx>{ButtonStyles}</style>
         <style jsx>{`
           .button {
-            box-shadow: ${flat && 'none'};
-            position: relative;
+            min-width: 1.75rem;
+            min-height: 1.75rem;
           }
           .button::after {
             content: '';
-            position: absolute;
+            position: ${useIcon && 'absolute'};
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
+            width: ${useIcon && '100%'};
+            height: ${useIcon && '100%'};
             mask: ${useIcon
               ? `url(${join(URL, `/static/icon-${useIcon}.svg`)})`
               : 'none'};
@@ -218,16 +228,16 @@ export default function Button({
         <style jsx>{ButtonStyles}</style>
         <style jsx>{`
           .button {
-            box-shadow: ${flat && 'none'};
-            position: relative;
+            min-width: 1.75rem;
+            min-height: 1.75rem;
           }
           .button::after {
             content: '';
-            position: absolute;
+            position: ${useIcon && 'absolute'};
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
+            width: ${useIcon && '100%'};
+            height: ${useIcon && '100%'};
             mask: ${useIcon
               ? `url(${join(URL, `/static/icon-${useIcon}.svg`)})`
               : 'none'};
@@ -253,18 +263,16 @@ export default function Button({
       <style jsx>{ButtonStyles}</style>
       <style jsx>{`
         .button {
-          box-shadow: ${flat && 'none'};
-          position: relative;
           min-width: 1.75rem;
           min-height: 1.75rem;
         }
         .button::after {
           content: '';
-          position: absolute;
+          position: ${useIcon && 'absolute'};
           top: 0;
           left: 0;
-          width: 100%;
-          height: 100%;
+          width: ${useIcon && '100%'};
+          height: ${useIcon && '100%'};
           mask: ${useIcon
             ? `url(${join(URL, `/static/icon-${useIcon}.svg`)})`
             : 'none'};

src/components/pagination.js

@@ -75,6 +75,7 @@ function Pagination({ pagination, setPage, 'data-cy': dataCy }) {
             onClick={() => setPage(page)}
             key={`page-${page}`}
             disabled={page === '...'}
+            variant={currentPage === page ? 'primary' : 'secondary'}
             data-cy={`page-${page}-button`}
             className='small'
             flat