refact: clean up page navigation styles

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>
   )

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;
   }