chore: componentize footer

src/components/Footer.js

@@ -0,0 +1,55 @@
+import React from "react"
+import { Link } from "gatsby"
+import { css } from "@emotion/core"
+import styled from "@emotion/styled"
+import { withTheme } from "emotion-theming"
+
+import Logo from "components/Logo"
+
+const FooterBlock = styled.footer`
+  margin-top: 120px;
+  padding: 30px 0px;
+  text-align: center;
+  color: ${props => props.theme.colors.secondary};
+`
+const linkStyles = css`
+  cursor: pointer;
+  text-decoration: none;
+  margin: 10px;
+`
+const FooterLink = styled(Link)`
+  ${linkStyles}
+  color: ${props => props.theme.colors.secondary};
+  &:hover {
+    color: ${props => props.theme.colors.tertiary};
+  }
+  `
+const FooterAnchor = styled.a`
+  ${linkStyles}
+  color: ${props => props.theme.colors.secondary};
+  &:hover {
+    color: ${props => props.theme.colors.tertiary};
+  }
+`
+
+const Footer = ({ theme }) => (
+  <FooterBlock>
+    <div>
+      <Logo color={theme.colors.secondary} />
+    </div>
+    <div>
+      <FooterAnchor
+        href="https://github.com/gillkyle/sol-journal"
+        rel="target noopener"
+        target="_blank"
+      >
+        View on GitHub
+      </FooterAnchor>
+      <FooterLink to="terms">Terms of Service</FooterLink>
+      <FooterLink to="privacy">Privacy Policy</FooterLink>
+    </div>
+    <div>&copy; 2019</div>
+  </FooterBlock>
+)
+
+export default withTheme(Footer)

src/components/Layout.js

@@ -3,7 +3,6 @@ import { Helmet } from "react-helmet"
 import { Global, css } from "@emotion/core"
 import styled from "@emotion/styled"
 
-import { SimpleNavbar } from "components/Navbar"
 import { withTheme } from "emotion-theming"
 
 const Layout = ({ children, theme }) => (
@@ -12,9 +11,9 @@ const Layout = ({ children, theme }) => (
     <Global
       styles={css`
         * {
-          /* transition: 0.2s border-color ease-in-out, 0.2s fill ease-in-out,
+          transition: 0.2s border-color ease-in-out, 0.2s fill ease-in-out,
             0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out,
-            0.2s color ease-in-out; */
+            0.2s color ease-in-out;
           overflow: -moz-scrollbars-none;
         }
         *::-webkit-scrollbar {

src/components/elements.js

@@ -34,23 +34,24 @@ export const Input = styled.input`
 
 export const Button = styled.button`
   display: inline;
-  background-color: ${props => props.colors.primary};
+  color: ${props => props.colors.primary};
+  background-color: ${props => props.colors.button};
+  border-color: ${props => props.colors.quarternary};
   padding: 12px 50px;
   min-height: 45px;
   border-radius: 5px;
   border: 0px solid;
-  border-color: ${props => props.colors.quarternary};
-  color: ${props => props.colors.quarternary};
+  font-family: Montserrat;
   font-size: ${props => SIZES[props.fontSize || "normal"]};
   font-weight: 700;
   outline: none;
   &:hover {
     cursor: pointer;
-    background-color: ${props => props.colors.secondary};
+    background-color: ${props => props.colors.hover};
+    box-shadow: 0 0 0 3px ${props => props.colors.bodyBackground},
+      0 0 0 5px ${props => props.colors.button};
   }
   &:focus {
-    box-shadow: 0 0 0 3px ${props => props.colors.bodyBackground},
-      0 0 0 5px ${props => props.colors.secondary};
   }
 `
 

src/routes/Day.js

@@ -116,9 +116,7 @@ class Day extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // Typical usage (don't forget to compare props):
     if (this.props.uri !== prevProps.uri) {
-      console.log("here we go")
       const [
         ,
         ,

src/routes/Start.js

@@ -6,9 +6,9 @@ import { withTheme } from "emotion-theming"
 
 import { SIZES } from "styles/constants"
 import { Button, P } from "components/elements"
-import { todayUrl } from "utils/date"
 import Icon from "components/Icon"
-import Logo from "components/Logo"
+import Footer from "components/Footer"
+import { todayUrl } from "utils/date"
 
 const StartGrid = styled.div`
   margin-top: 30px;
@@ -39,21 +39,6 @@ const FeatureTitle = styled.div`
 const FeatureDescription = styled.div`
   color: ${props => props.theme.colors.secondary};
 `
-const Footer = styled.footer`
-  margin-top: 120px;
-  padding: 30px 0px;
-  text-align: center;
-  color: ${props => props.theme.colors.secondary};
-`
-const FooterLink = styled(Link)`
-  cursor: pointer;
-  color: ${props => props.theme.colors.secondary};
-  text-decoration: none;
-  margin: 10px;
-  &:hover {
-    color: ${props => props.theme.colors.tertiary};
-  }
-`
 
 const features = [
   {
@@ -107,7 +92,7 @@ class Start extends Component {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            margin: "30 auto",
+            marginTop: 30,
             maxHeight: 350,
           }}
         >
@@ -181,17 +166,7 @@ class Start extends Component {
             </FeatureRow>
           ))}
         </FeatureGrid>
-        <Footer>
-          <div>
-            <Logo color={theme.colors.logo} />
-          </div>
-          <div>
-            <FooterLink>View on GitHub</FooterLink>
-            <FooterLink to="terms">Terms of Service</FooterLink>
-            <FooterLink to="privacy">Privacy Policy</FooterLink>
-          </div>
-          <div>&copy; 2019</div>
-        </Footer>
+        <Footer />
       </StartGrid>
     )
   }

src/routes/Welcome.js

@@ -5,6 +5,7 @@ import { withTheme } from "emotion-theming"
 
 import { Button, P } from "components/elements"
 import Logo from "components/Logo"
+import Footer from "components/Footer"
 import { todayUrl } from "utils/date"
 
 const WelcomeGrid = styled.div`
@@ -13,21 +14,6 @@ const WelcomeGrid = styled.div`
   color: ${props => props.theme.colors.primary};
   height: 100%;
 `
-const Footer = styled.footer`
-  margin-top: 120px;
-  padding: 30px 0px;
-  text-align: center;
-  color: ${props => props.theme.colors.secondary};
-`
-const FooterLink = styled(Link)`
-  cursor: pointer;
-  color: ${props => props.theme.colors.secondary};
-  text-decoration: none;
-  margin: 10px;
-  &:hover {
-    color: ${props => props.theme.colors.tertiary};
-  }
-`
 
 class Welcome extends Component {
   render() {
@@ -42,17 +28,7 @@ class Welcome extends Component {
         <Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
           <Button colors={theme.colors}>Write about today</Button>
         </Link>
-        <Footer>
-          <div>
-            <Logo color={theme.colors.logo} />
-          </div>
-          <div>
-            <FooterLink>View on GitHub</FooterLink>
-            <FooterLink to="terms">Terms of Service</FooterLink>
-            <FooterLink to="privacy">Privacy Policy</FooterLink>
-          </div>
-          <div>&copy; 2019</div>
-        </Footer>
+        <Footer />
       </WelcomeGrid>
     )
   }