website: improve doc nav links UX (?)

website/src/css/custom.css

@@ -62,6 +62,15 @@ div[class^='announcementBar_'] {
   margin-bottom: 0 !important;
 }
 
+.pagination-nav__item:first-child .pagination-nav__label::before,
+.pagination-nav__item--next .pagination-nav__label::after {
+  content: '';
+}
+
+.pagination-nav__item .pagination-nav__label {
+  font-size: 1.5rem;
+}
+
 .navbar-icon:before {
   background-repeat: no-repeat;
   content: '';

website/src/theme/DocItem/index.js

@@ -80,10 +80,10 @@ export default function DocItem(props) {
                   </header>
                 )}
 
+                <DocItemFooter {...props} />
+                <br />
                 <DocContent />
               </div>
-
-              <DocItemFooter {...props} />
             </article>
             <DocPaginator previous={metadata.previous} next={metadata.next} />
             <div className="margin-top--md">

website/src/theme/DocPaginator/index.js

@@ -6,10 +6,15 @@
  */
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
+
+function DocPaginator(props) {
+  const {
+    // previous,
+    next,
+  } = props;
 
-function DocPaginator({previous, next}) {
   return (
-    <>
     <nav
       className="pagination-nav docusaurus-mt-lg"
       aria-label={translate({
@@ -18,31 +23,18 @@ function DocPaginator({previous, next}) {
         description: 'The ARIA label for the docs pagination',
       })}>
       <div className="pagination-nav__item">
-          {previous && (
-            <a className="pagination-nav__link" href={previous.permalink}>
-              <div className="pagination-nav__sublabel">
-                <Translate
-                  id="theme.docs.paginator.previous"
-                  description="The label used to navigate to the previous doc">
-                  Previous
-                </Translate>
-              </div>
-              <div className="pagination-nav__label">{previous.title}</div>
-            </a>
-          )}
-        </div>
-        <div className="pagination-nav__item pagination-nav__item--next">
         {next && (
-            <a className="pagination-nav__link" href={next.permalink}>
+          <PaginatorNavLink
-              <div className="pagination-nav__sublabel">
+            hasArrow={true}
+            {...next}
+            subLabel={
               <Translate
                 id="theme.docs.paginator.next"
                 description="The label used to navigate to the next doc">
-                  Next
+                Next page
               </Translate>
-              </div>
+            }
-              <div className="pagination-nav__label">{next.title}</div>
+          />
-            </a>
         )}
       </div>
     </nav>

website/src/theme/PaginatorNavLink/index.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
 
-function PaginatorNavLink({permalink, title, subLabel}) {
+function PaginatorNavLink({hasArrow, permalink, title, subLabel, ...rest}) {
+  console.log(rest);
   return (
-    <a className="pagination-nav__link" href={permalink}>
+    <a className={clsx('pagination-nav__link', styles.root)} href={permalink}>
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
       <div className="pagination-nav__label">{title}</div>
+      {hasArrow && <span className={styles.arrow}>→</span>}
     </a>
   );
 }

website/src/theme/PaginatorNavLink/styles.module.css

@@ -0,0 +1,13 @@
+.root {
+  position: relative;
+}
+
+.arrow {
+  font-weight: bold;
+  font-size: 2rem;
+  float: right;
+  transform: scale(2);
+  position: absolute;
+  right: 1.5rem;
+  top: 1rem;
+}