ui/js/page/channel/view.jsx

@@ -77,6 +77,12 @@ class ChannelPage extends React.PureComponent {
           <ReactPaginate
             pageCount={totalPages}
             pageRangeDisplayed={2}
+            previousLabel="‹"
+            nextLabel="›"
+            activeClassName="pagination__item--selected"
+            pageClassName="pagination__item"
+            previousClassName="pagination__item pagination__item--previous"
+            nextClassName="pagination__item pagination__item--next"
             marginPagesDisplayed={2}
             onPageChange={e => this.changePage(e.selected + 1)}
             initialPage={parseInt(page - 1)}

ui/scss/component/_pagination.scss

@@ -1,18 +1,32 @@
-ul.pagination {
-  display: inline-block;
+@import "../global";
+
+.pagination {
+  display: block;
   padding: 0;
-  margin: 0;
+  margin: 0 auto;
+  text-align: center;
 }
 
-ul.pagination li {
-  display: inline;
-  float: left;
-  padding: 8px 16px;
-}
-
-ul.pagination li:not(.selected) {
-  background: white;
-  a {
-    cursor: hand;
+.pagination__item {
+  display: inline-block;
+  line-height: $spacing-vertical * 1.5;
+  height: $spacing-vertical * 1.5;
+  border-radius: 2px;
+  &:not(.pagination__item--selected):hover {
+    background: rgba(0, 0, 0, 0.2);
+    > a { cursor: hand }
+  }
+  > a {
+    display: inline-block;
+    padding: 0 $spacing-vertical * 2 / 3;
   }
 }
+
+.pagination__item--previous, .pagination__item--next {
+  font-size: 1.2em;
+}
+
+.pagination__item--selected {
+  color: white;
+  background: $color-primary;
+}