From b8965dcf383f6b430ec649a93d3def87e246c64c Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 26 May 2019 20:19:16 -0700
Subject: [PATCH] feat(v2): use new pagination nav CSS (#1520)

---
 .../src/theme/BlogListPaginator/index.js      | 20 +++++++++------
 .../src/theme/BlogPostPaginator/index.js      | 22 ++++++++++------
 .../src/theme/DocPaginator/index.js           | 25 +++++++++++--------
 3 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/packages/docusaurus-plugin-content-blog/src/theme/BlogListPaginator/index.js b/packages/docusaurus-plugin-content-blog/src/theme/BlogListPaginator/index.js
index 536f6a5025..356f13c1a3 100644
--- a/packages/docusaurus-plugin-content-blog/src/theme/BlogListPaginator/index.js
+++ b/packages/docusaurus-plugin-content-blog/src/theme/BlogListPaginator/index.js
@@ -13,22 +13,26 @@ function BlogListPaginator(props) {
   const {previousPage, nextPage} = metadata;
 
   return (
-    <div className="row">
-      <div className="col col--6">
+    <nav className="pagination-nav">
+      <div className="pagination-nav__item">
         {previousPage && (
-          <Link className="button button--secondary" to={previousPage}>
-            Newer entries
+          <Link className="pagination-nav__link" to={previousPage}>
+            <h4 className="pagination-nav__link--label">
+              &laquo; Newer Entries
+            </h4>
           </Link>
         )}
       </div>
-      <div className="col col--6 text--right">
+      <div className="pagination-nav__item pagination-nav__item-next">
         {nextPage && (
-          <Link className="button button--secondary" to={nextPage}>
-            Older entries
+          <Link className="pagination-nav__link" to={nextPage}>
+            <h4 className="pagination-nav__link--label">
+              Older Entries &raquo;
+            </h4>
           </Link>
         )}
       </div>
-    </div>
+    </nav>
   );
 }
 
diff --git a/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPaginator/index.js b/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPaginator/index.js
index 56643ab322..f11c49087a 100644
--- a/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPaginator/index.js
+++ b/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPaginator/index.js
@@ -12,22 +12,28 @@ function BlogPostPaginator(props) {
   const {nextItem, prevItem} = props;
 
   return (
-    <div className="row">
-      <div className="col col--6">
+    <nav className="pagination-nav">
+      <div className="pagination-nav__item">
         {prevItem && (
-          <Link className="button button--secondary" to={prevItem.permalink}>
-            {prevItem.title}
+          <Link className="pagination-nav__link" to={prevItem.permalink}>
+            <h5 className="pagination-nav__link--sublabel">Previous Post</h5>
+            <h4 className="pagination-nav__link--label">
+              &laquo; {prevItem.title}
+            </h4>
           </Link>
         )}
       </div>
-      <div className="col col--6 text--right">
+      <div className="pagination-nav__item pagination-nav__item--next">
         {nextItem && (
-          <Link className="button button--secondary" to={nextItem.permalink}>
-            {nextItem.title}
+          <Link className="pagination-nav__link" to={nextItem.permalink}>
+            <h5 className="pagination-nav__link--sublabel">Next Post</h5>
+            <h4 className="pagination-nav__link--label">
+              {nextItem.title} &raquo;
+            </h4>
           </Link>
         )}
       </div>
-    </div>
+    </nav>
   );
 }
 
diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocPaginator/index.js b/packages/docusaurus-plugin-content-docs/src/theme/DocPaginator/index.js
index a3525007c3..cb23e79bd7 100644
--- a/packages/docusaurus-plugin-content-docs/src/theme/DocPaginator/index.js
+++ b/packages/docusaurus-plugin-content-docs/src/theme/DocPaginator/index.js
@@ -15,29 +15,32 @@ function DocPaginator(props) {
   } = props;
 
   return (
-    <div className="row">
-      <div className="col col--6">
+    <nav className="pagination-nav">
+      <div className="pagination-nav__item">
         {metadata.previous && docs[metadata.previous] && (
           <Link
-            className="button button--secondary"
+            className="pagination-nav__link"
             to={docs[metadata.previous].permalink}>
-            <i className="fas fa-arrow-left" />
-            &nbsp;&nbsp;
-            {metadata.previous_title}
+            <h5 className="pagination-nav__link--sublabel">Previous</h5>
+            <h4 className="pagination-nav__link--label">
+              &laquo; {metadata.previous_title}
+            </h4>
           </Link>
         )}
       </div>
-      <div className="col col--6 text--right">
+      <div className="pagination-nav__item pagination-nav__item--next">
         {metadata.next && docs[metadata.next] && (
           <Link
-            className="button button--secondary"
+            className="pagination-nav__link"
             to={docs[metadata.next].permalink}>
-            {metadata.next_title}&nbsp;&nbsp;
-            <i className="fas fa-arrow-right" />
+            <h5 className="pagination-nav__link--sublabel">Next</h5>
+            <h4 className="pagination-nav__link--label">
+              {metadata.next_title} &raquo;
+            </h4>
           </Link>
         )}
       </div>
-    </div>
+    </nav>
   );
 }