Merge pull request #361 from the-programmers-hangout/ui-tweak-page-navigation

ui: tweak page navigation

src/components/PageNavigation/index.tsx

@@ -13,33 +13,25 @@ interface IPageContentProps {
 
 export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
   return (
-    <SC.Content>
-      {previous ? (
-        <SC.PageContent>
+    <SC.PageNavigationWrapper>
+      {previous && (
+        <SC.PreviousPage>
           <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>
-      ) : (
-        <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.PageTitle>{next.title}</SC.PageTitle>
             <SC.NextArrow />
           </SC.NavLink>
-        </SC.PageContent>
-      ) : (
-        <div> </div>
+        </SC.NextPage>
       )}
-    </SC.Content>
+    </SC.PageNavigationWrapper>
   )
 }

src/components/PageNavigation/styles.tsx

@@ -3,11 +3,11 @@ 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`
+  margin-top: 64px;
   display: flex;
   justify-content: space-between;
   align-content: center;
-}
 `
 
 export const Text = styled.p`
@@ -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;
   }

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
   )