From acb4f068439d7326d74e7e013341c405f653620d Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 1 Oct 2020 16:41:14 -0400
Subject: [PATCH 1/5] refact: rename the outer element of PageNavigation

---
 src/components/PageNavigation/index.tsx  | 4 ++--
 src/components/PageNavigation/styles.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PageNavigation/index.tsx b/src/components/PageNavigation/index.tsx
index 8d6769d..fd14a83 100644
--- a/src/components/PageNavigation/index.tsx
+++ b/src/components/PageNavigation/index.tsx
@@ -13,7 +13,7 @@ interface IPageContentProps {
 
 export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
   return (
-    <SC.Content>
+    <SC.PageNavigationWrapper>
       {previous ? (
         <SC.PageContent>
           <SC.Text>Previous</SC.Text>
@@ -40,6 +40,6 @@ export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
       ) : (
         <div> </div>
       )}
-    </SC.Content>
+    </SC.PageNavigationWrapper>
   )
 }
diff --git a/src/components/PageNavigation/styles.tsx b/src/components/PageNavigation/styles.tsx
index 321917c..df8f1c8 100644
--- a/src/components/PageNavigation/styles.tsx
+++ b/src/components/PageNavigation/styles.tsx
@@ -3,7 +3,7 @@ import { Link } from "gatsby"
 import fontFamily from "../../design/typography"
 import ArrowRight from "../../icons/arrow-right.svg"
 
-export const Content = styled.div`
+export const PageNavigationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-content: center;

From aa623ae9656c12046a697ebc78ff01893fa33297 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 1 Oct 2020 16:43:48 -0400
Subject: [PATCH 2/5] style: auto-format page navigation

---
 src/components/PageNavigation/index.tsx |  8 ++------
 src/templates/resourcePage.tsx          | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/PageNavigation/index.tsx b/src/components/PageNavigation/index.tsx
index fd14a83..c9b4371 100644
--- a/src/components/PageNavigation/index.tsx
+++ b/src/components/PageNavigation/index.tsx
@@ -19,9 +19,7 @@ export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
           <SC.Text>Previous</SC.Text>
           <SC.NavLink to={`/resources/${previous.relativePath}`}>
             <SC.PreviousArrow />
-            <SC.PageTitle>
-              {previous.title}
-            </SC.PageTitle>
+            <SC.PageTitle>{previous.title}</SC.PageTitle>
           </SC.NavLink>
         </SC.PageContent>
       ) : (
@@ -31,9 +29,7 @@ export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
         <SC.PageContent>
           <SC.Text>Next</SC.Text>
           <SC.NavLink to={`/resources/${next.relativePath}`}>
-            <SC.PageTitle>
-              {next.title}
-            </SC.PageTitle>
+            <SC.PageTitle>{next.title}</SC.PageTitle>
             <SC.NextArrow />
           </SC.NavLink>
         </SC.PageContent>
diff --git a/src/templates/resourcePage.tsx b/src/templates/resourcePage.tsx
index 4552f67..fb3831d 100644
--- a/src/templates/resourcePage.tsx
+++ b/src/templates/resourcePage.tsx
@@ -33,15 +33,18 @@ const ResourcePage: FC<any> = ({ data }) => {
       toc.length
   )
 
-  const pages = sortWith([
-    descend((f: any) => {
-      if (f.node.relativePath.includes("intro")) {
-        return 1;
-      }
+  const pages = sortWith(
+    [
+      descend((f: any) => {
+        if (f.node.relativePath.includes("intro")) {
+          return 1
+        }
 
-      return -1;
-    })
-  ], data.allFile.edges)
+        return -1
+      }),
+    ],
+    data.allFile.edges
+  )
   const currentIndex = pages.findIndex(
     (x: any) => x.node.relativePath === relativePath
   )

From ebf29008fa3c769dd53de64bcf4d7f2f7af04e14 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 1 Oct 2020 16:44:47 -0400
Subject: [PATCH 3/5] style: clean up artifact

---
 src/components/PageNavigation/styles.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PageNavigation/styles.tsx b/src/components/PageNavigation/styles.tsx
index df8f1c8..b838a00 100644
--- a/src/components/PageNavigation/styles.tsx
+++ b/src/components/PageNavigation/styles.tsx
@@ -7,7 +7,6 @@ export const PageNavigationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-content: center;
-}
 `
 
 export const Text = styled.p`

From c3f9388b6bba685b74190d12519bd295044ad756 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 1 Oct 2020 16:45:40 -0400
Subject: [PATCH 4/5] ui: add margin above page navigation

---
 src/components/PageNavigation/styles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PageNavigation/styles.tsx b/src/components/PageNavigation/styles.tsx
index b838a00..5ecc87f 100644
--- a/src/components/PageNavigation/styles.tsx
+++ b/src/components/PageNavigation/styles.tsx
@@ -4,6 +4,7 @@ import fontFamily from "../../design/typography"
 import ArrowRight from "../../icons/arrow-right.svg"
 
 export const PageNavigationWrapper = styled.div`
+  margin-top: 64px;
   display: flex;
   justify-content: space-between;
   align-content: center;

From 2924cfcbefbdc634d99fa0b951fae319ca90ccd7 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 1 Oct 2020 16:55:12 -0400
Subject: [PATCH 5/5] refact: clean up page navigation styles

---
 src/components/PageNavigation/index.tsx  | 16 ++++++----------
 src/components/PageNavigation/styles.tsx | 23 ++++++++++++-----------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/components/PageNavigation/index.tsx b/src/components/PageNavigation/index.tsx
index c9b4371..d3d6505 100644
--- a/src/components/PageNavigation/index.tsx
+++ b/src/components/PageNavigation/index.tsx
@@ -14,27 +14,23 @@ interface IPageContentProps {
 export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
   return (
     <SC.PageNavigationWrapper>
-      {previous ? (
-        <SC.PageContent>
+      {previous && (
+        <SC.PreviousPage>
           <SC.Text>Previous</SC.Text>
           <SC.NavLink to={`/resources/${previous.relativePath}`}>
             <SC.PreviousArrow />
             <SC.PageTitle>{previous.title}</SC.PageTitle>
           </SC.NavLink>
-        </SC.PageContent>
-      ) : (
-        <div> </div>
+        </SC.PreviousPage>
       )}
-      {next ? (
-        <SC.PageContent>
+      {next && (
+        <SC.NextPage>
           <SC.Text>Next</SC.Text>
           <SC.NavLink to={`/resources/${next.relativePath}`}>
             <SC.PageTitle>{next.title}</SC.PageTitle>
             <SC.NextArrow />
           </SC.NavLink>
-        </SC.PageContent>
-      ) : (
-        <div> </div>
+        </SC.NextPage>
       )}
     </SC.PageNavigationWrapper>
   )
diff --git a/src/components/PageNavigation/styles.tsx b/src/components/PageNavigation/styles.tsx
index 5ecc87f..fa61535 100644
--- a/src/components/PageNavigation/styles.tsx
+++ b/src/components/PageNavigation/styles.tsx
@@ -20,11 +20,6 @@ export const Text = styled.p`
 export const NavLink = styled(Link)`
   display: flex;
   text-decoration: none;
-  text-align: right;
-
-  & > svg ~ p {
-    text-align: left;
-  }
 
   &:hover,
   &:focus {
@@ -37,14 +32,18 @@ export const PageContent = styled.div`
   width: 200px;
   display: flex;
   flex-direction: column;
+`
 
-  &:last-of-type {
-    align-items: flex-end;
-  }
+export const PreviousPage = styled(PageContent)`
+  margin-right: auto;
+`
 
-  & > div {
-    display: flex;
-    justify-content: start;
+export const NextPage = styled(PageContent)`
+  margin-left: auto;
+
+  ${Text},
+  ${NavLink} {
+    text-align: right;
   }
 `
 
@@ -58,6 +57,7 @@ export const PageTitle = styled(Text)`
 
 export const NextArrow = styled(ArrowRight)`
   width: 8px;
+
   path {
     fill: #ff74a2;
   }
@@ -66,6 +66,7 @@ export const NextArrow = styled(ArrowRight)`
 export const PreviousArrow = styled(ArrowRight)`
   width: 8px;
   transform: rotate(180deg);
+
   path {
     fill: #feac71;
   }