styles paginator and page info

src/client/components/elements/Nav/index.scss

@@ -80,7 +80,6 @@
   a {
     padding: base(.125) 0;
     display: flex;
-    font-weight: 600;
     text-decoration: none;
   }
 
@@ -104,6 +103,7 @@
 
       &.active {
         padding-left: base(.6);
+        font-weight: 600;
 
         svg {
           opacity: 1;

src/client/components/elements/Paginator/ClickableArrow/index.scss

@@ -2,9 +2,10 @@
 
 .clickable-arrow {
   cursor: pointer;
+  transform: rotate(-90deg);
 
   &--left {
-    transform: rotate(180deg);
+    transform: rotate(90deg);
   }
 
   &--is-disabled {

src/client/components/elements/Paginator/index.scss

@@ -2,15 +2,13 @@
 
 .paginator {
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  margin-bottom: base(1);
+  margin-bottom: $baseline;
 
   &__page {
     cursor: pointer;
 
     &--is-current {
-      @include shadow-sm;
+      background: $color-background-gray;
       color: $color-gray;
       cursor: default;
     }
@@ -23,11 +21,19 @@
   .clickable-arrow,
   &__page {
     @extend %btn-reset;
-    @extend %small;
+    width: base(2);
+    height: base(2);
+    display: flex;
+    justify-content: center;
+    align-content: center;
     outline: 0;
-    padding: base(.35) base(.45);
+    padding: base(.5);
     color: $color-dark-gray;
     line-height: 1;
+
+    &:hover:not(.clickable-arrow--is-disabled) {
+      background: $color-background-gray;
+    }
   }
 
   &__page,

src/client/components/elements/Table/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
 .table {
+  margin-bottom: $baseline;
   overflow-x: scroll;
   max-width: 100%;
 
@@ -20,7 +21,7 @@
 
   tbody {
     tr {
-      &:nth-child(1) {
+      &:nth-child(odd) {
         background: $color-background-gray;
       }
     }

src/client/components/views/collections/List/index.js

@@ -120,17 +120,28 @@ const DefaultList = (props) => {
           </Button>
         </div>
       )}
-      <Paginator
-        totalDocs={data.totalDocs}
-        limit={data.limit}
-        totalPages={data.totalPages}
-        page={data.page}
-        hasPrevPage={data.hasPrevPage}
-        hasNextPage={data.hasNextPage}
-        prevPage={data.prevPage}
-        nextPage={data.nextPage}
-        numberOfNeighbors={1}
-      />
+      <div className={`${baseClass}__page-controls`}>
+        <Paginator
+          totalDocs={data.totalDocs}
+          limit={data.limit}
+          totalPages={data.totalPages}
+          page={data.page}
+          hasPrevPage={data.hasPrevPage}
+          hasNextPage={data.hasNextPage}
+          prevPage={data.prevPage}
+          nextPage={data.nextPage}
+          numberOfNeighbors={1}
+        />
+        <div className={`${baseClass}__page-info`}>
+          {data.page}
+          -
+          {data.totalPages > 1 ? data.limit : data.totalDocs}
+          {' '}
+          of
+          {' '}
+          {data.totalDocs}
+        </div>
+      </div>
     </div>
   );
 };

src/client/components/views/collections/List/index.scss

@@ -25,23 +25,31 @@
     }
   }
 
-  &__controls {
-    margin-bottom: $baseline;
-  }
-
   .table {
     table {
       width: 100%;
     }
   }
 
+  &__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &__page-info {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
   @include mid-break {
     padding: $baseline 0;
 
     &__header,
     .list-controls,
     .table,
-    &__no-results {
+    &__no-results,
+    &__page-controls {
       padding-left: $baseline;
       padding-right: $baseline;
     }
@@ -55,5 +63,9 @@
     &__search-input {
       margin: 0;
     }
+
+    &__page-controls {
+      display: block;
+    }
   }
 }