feat(v2): skin paginator component (#1033)

v2/lib/theme/Docs/index.js

@@ -33,9 +33,14 @@ export default class Docs extends React.Component {
             docsSidebars={docsSidebars}
             metadata={metadata}
           />
-          <div className={styles.docContent}>
+          <div className={styles.docContainer}>
-            {this.props.children}
+            <div className={styles.docContent}>{this.props.children}</div>
-            <DocsPaginator docsMetadatas={docsMetadatas} metadata={metadata} />
+            <div className={styles.paginatorContainer}>
+              <DocsPaginator
+                docsMetadatas={docsMetadatas}
+                metadata={metadata}
+              />
+            </div>
           </div>
         </div>
       </Layout>

v2/lib/theme/Docs/styles.css

@@ -1,13 +1,20 @@
 .mainContainer {
   display: flex;
   flex-direction: row;
-  margin-bottom: 30px;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 40px;
   justify-content: space-between;
 }
 
-.docContent {
+.docContainer {
   flex-grow: 1;
+  padding: 0 40px;
+}
+
+.docContent {
+  margin-bottom: 48px;
+}
+
+.paginatorContainer {
+  margin: 48px 0;
 }

v2/lib/theme/DocsPaginator/index.js

@@ -1,24 +1,46 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
 
+import styles from './styles.css';
+
 export default class DocsPaginator extends React.Component {
   render() {
     const {docsMetadatas, metadata} = this.props;
     return (
+      <div className={styles.paginatorContainer}>
         <div>
           {metadata.previous &&
             docsMetadatas[metadata.previous] && (
-            <Link to={docsMetadatas[metadata.previous].permalink}>
+              <Link
-              <span>← {metadata.previous_title}</span>
+                className={styles.paginatorLink}
+                to={docsMetadatas[metadata.previous].permalink}>
+                <svg className={styles.arrow} viewBox="0 0 24 24">
+                  <g>
+                    <line x1="19" y1="12" x2="5" y2="12" />
+                    <polyline points="12 19 5 12 12 5" />
+                  </g>
+                </svg>{' '}
+                <span className={styles.label}>{metadata.previous_title}</span>
               </Link>
             )}
+        </div>
+        <div className={styles.paginatorRightContainer}>
           {metadata.next &&
             docsMetadatas[metadata.next] && (
-            <Link to={docsMetadatas[metadata.next].permalink}>
+              <Link
-              <span>{metadata.next_title} →</span>
+                className={styles.paginatorLink}
+                to={docsMetadatas[metadata.next].permalink}>
+                <span className={styles.label}>{metadata.next_title}</span>{' '}
+                <svg className={styles.arrow} viewBox="0 0 24 24">
+                  <g>
+                    <line x1="5" y1="12" x2="19" y2="12" />
+                    <polyline points="12 5 19 12 12 19" />
+                  </g>
+                </svg>
               </Link>
             )}
         </div>
+      </div>
     );
   }
 }

v2/lib/theme/DocsPaginator/styles.css

@@ -0,0 +1,39 @@
+.paginatorContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.paginatorRightContainer {
+  text-align: right;
+}
+
+.paginatorLink {
+  background-color: #f2f3f5;
+  color: #000;
+  border-radius: 30px;
+  display: inline-block;
+  height: 1.5em;
+  text-decoration: none;
+  transition: 0.3s all ease-in-out;
+  padding: 12px 24px;
+}
+
+.paginatorLink:hover {
+  background-color: #00a388;
+  color: #fff;
+}
+
+.arrow {
+  fill: none;
+  height: 1.5em;
+  stroke: currentColor;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  stroke-width: 2;
+  width: 1.5em;
+}
+
+.label {
+  vertical-align: super;
+}

v2/lib/theme/Sidebar/styles.css

@@ -32,10 +32,10 @@
   display: block;
   padding: 8px 0;
   text-decoration: none;
-  transition: color .3s;
+  transition: color 0.3s;
 }
 
 .sidebarLink:hover,
 .sidebarLinkActive {
-  color: #2e8555;
+  color: #00a388;
 }