diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..dddc34a --- /dev/null +++ b/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 }) => ( + +
+ +
+
+ + View on GitHub + + Terms of Service + Privacy Policy +
+
© 2019
+ +) + +export default withTheme(Footer) diff --git a/src/components/Layout.js b/src/components/Layout.js index 4e97bbe..801391f 100644 --- a/src/components/Layout.js +++ b/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 }) => ( 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}; } ` diff --git a/src/routes/Day.js b/src/routes/Day.js index 71d75f4..f90ebdc 100644 --- a/src/routes/Day.js +++ b/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 [ , , diff --git a/src/routes/Start.js b/src/routes/Start.js index 2d8ac10..2eed77e 100644 --- a/src/routes/Start.js +++ b/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 { ))} - +