ui: first pass on redesign (#228)

src/components/Footer/index.tsx

@@ -1,19 +1,17 @@
 import React, { FC } from "react"
 import packageJson from "../../../package.json"
-import { Container } from "../Container"
+import { Link } from "../Link"
 import * as SC from "./styles"
 
 export const Footer: FC = () => {
   return (
     <SC.FooterWrapper>
-      <Container>
-        <p>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a> - Source on{" "}
-          <a href={packageJson.repository.url}>GitHub</a>
-        </p>
-      </Container>
+      <p>
+        © {new Date().getFullYear()}, Built with
+        {` `}
+        <Link to="https://www.gatsbyjs.org">Gatsby</Link> - Source on{" "}
+        <Link to={packageJson.repository.url}>GitHub</Link>
+      </p>
     </SC.FooterWrapper>
   )
 }

src/components/Footer/styles.tsx

@@ -1,20 +1,34 @@
 import styled from "styled-components"
 
 export const FooterWrapper = styled.footer`
-  margin-top: 128px;
+  margin-top: 64px;
 
   & a {
     display: inline;
-    color: #0090d8;
     font-weight: 700;
-    border-bottom: 2px solid;
+    color: #fff;
+    color: ${props => props.theme.main.foreground};
+    font-weight: 700;
     text-decoration: none;
-    transition: color 0.3s;
+    position: relative;
+
+    &::after {
+      position: absolute;
+      left: 0;
+      right: 0;
+      content: "";
+      display: block;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%);
+    }
 
     &:hover,
     &:focus {
-      color: #5dbbea;
-      transition: none;
+      background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
   }
 `