Pagination updates (#776)

* Move pagination above helpful component

* Update logic to override prev/next arrows

* Make text larger

* Improve color for border in dark mode

Author: sfc-gh-jgarcia

components/navigation/arrowLink.module.css

@@ -1,9 +1,9 @@
 .Container {
-  @apply flex flex-wrap flex-col md:flex-row md:flex-nowrap items-center justify-between mt-20 gap-4;
+  @apply flex flex-wrap flex-col md:flex-row md:flex-nowrap items-center justify-between mt-16 mb-8 gap-4;
 }
 
 .Link {
-  @apply overflow-hidden border-none text-base tracking-tight font-sans font-normal text-gray-90 leading-7 hover:opacity-70 flex items-center transition-all;
+  @apply overflow-hidden border-none text-base md:text-lg tracking-tight font-sans font-normal text-gray-90 leading-7 hover:opacity-70 flex items-center transition-all;
 }
 
 .Truncate {
@@ -15,7 +15,7 @@
 }
 
 .NextLink {
-  @apply mt-8 sm:mt-0;
+  @apply mt-0 sm:mt-0;
 }
 
 .Icon {

components/utilities/helpful.module.css

@@ -3,17 +3,10 @@
 }
 
 .Title {
-  @apply font-bold text-lg mb-0 tracking-tight;
+  @apply font-bold text-base mb-0 tracking-tight;
   @apply text-gray-90 !important;
 }
 
-:global(.dark) .Title,
-:global(.dark) .ImproveTitle,
-:global(.dark) .ImproveText,
-:global(.dark) .Label {
-  @apply text-white !important;
-}
-
 .CtaContainer {
   @apply flex flex-row items-center pt-4 md:pt-0;
 }
@@ -27,20 +20,11 @@
   @apply ml-6;
 }
 
-:global(.dark) .Button {
-  @apply bg-gray-80;
-  @apply text-white !important;
-}
-
 .Icon {
   @apply text-base mr-2;
   @apply text-gray-50 !important;
 }
 
-:global(.dark) .Icon {
-  @apply text-gray-90;
-}
-
 /* How can we improve this page form step */
 .ImproveTitle {
   @apply font-bold text-lg tracking-tight my-0;
@@ -60,10 +44,6 @@
   @apply w-4 h-4 mr-2 checked:bg-gray-90 appearance-none border border-gray-90 rounded-sm outline-0 cursor-pointer;
 }
 
-:global(.dark) .Input {
-  @apply checked:bg-white border-white;
-}
-
 .Label {
   @apply font-sans;
   @apply text-gray-90 !important;
@@ -79,9 +59,33 @@
 }
 
 .FormContainer {
-  @apply flex flex-col md:flex-row items-start md:items-center mt-16;
+  @apply flex flex-col md:flex-row items-start md:items-center pt-8 mt-8 md:pt-12 md:mt-12 border-t border-t-gray-30;
 }
 
 .Form {
   @apply flex-1;
 }
+
+:global(.dark) .Title,
+:global(.dark) .ImproveTitle,
+:global(.dark) .ImproveText,
+:global(.dark) .Label {
+  @apply text-white !important;
+}
+
+:global(.dark) .Button {
+  @apply bg-gray-80;
+  @apply text-white !important;
+}
+
+:global(.dark) .Icon {
+  @apply text-gray-90;
+}
+
+:global(.dark) .Input {
+  @apply checked:bg-white border-white;
+}
+
+:global(.dark) .FormContainer {
+  @apply border-gray-90;
+}

components/utilities/psa.module.css

@@ -1,5 +1,5 @@
 .Container {
-  @apply flex items-center flex-wrap py-8 mt-16 border-t border-b border-t-gray-30 border-b-gray-30;
+  @apply flex items-center flex-wrap;
 }
 
 :global(.dark) .Container {

pages/[...slug].js

@@ -255,11 +255,11 @@ export default function Article({
               <FloatingNav slug={slug} menu={menu} version={version} />
               <div className={classNames("content", styles.ContentContainer)}>
                 <MDXRemote {...source} components={components} />
+                {arrowContainer}
+                <Psa />
                 <Helpful slug={slug} sourcefile={suggestEditURL} />
               </div>
             </article>
-            <Psa />
-            {arrowContainer}
           </section>
           <Footer />
         </section>
@@ -334,6 +334,28 @@ export async function getStaticProps(context) {
 
     const { current, prev, next } = getPreviousNextFromMenu(menu, location);
 
+    // Determine which previous/next links we should be using, the override option coming from the markdown file (if it exists),
+    // or the one that gets generated automatically above by calling getPreviousNextFromMenu
+    let prevMenuItem;
+    if (data.previousLink && data.previousTitle) {
+      prevMenuItem = {
+        name: data.previousTitle,
+        url: data.previousLink,
+      };
+    } else {
+      prevMenuItem = prev;
+    }
+
+    let nextMenuItem;
+    if (data.nextLink && data.nextTitle) {
+      nextMenuItem = {
+        name: data.nextTitle,
+        url: data.nextLink,
+      };
+    } else {
+      nextMenuItem = next;
+    }
+
     props["menu"] = menu;
     props["gdpr_data"] = gdpr_data;
     props["data"] = data;
@@ -347,8 +369,8 @@ export async function getStaticProps(context) {
           isVersioned: !!current.isVersioned,
         }
       : null;
-    props["nextMenuItem"] = next ? { name: next.name, url: next.url } : null;
-    props["prevMenuItem"] = prev ? { name: prev.name, url: prev.url } : null;
+    props["prevMenuItem"] = prevMenuItem ? prevMenuItem : null;
+    props["nextMenuItem"] = nextMenuItem ? nextMenuItem : null;
   }
 
   return {