u-fit/frontend/components/page.js

import React from 'react'
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'
import Header from './header'
import Meta from './meta'

const theme = {
  lightred: '#f0b0b0',
  red: '#f03535',
  black: '#393939',
  grey: '#7f8c8d',
  lightgrey: '#95a5a5',
  lighterblue: '#d6e4f0',
  lightblue: '#b0d3f0',
  blue: '#4482c3',
  darkblue: '#285680',
  darkerblue: '#204567',
  offWhite: '#EDEDED',
  maxWidth: '1000px',
  bs: '0 12px 24px 0 rgba(0,0,0,0.09)',
  bsSmall: '0 5px 10px 0 rgba(0,0,0,0.19)'
}

const StyledPage = styled.div`
  background: white;
  color: ${props => props.theme.black};
`

const Inner = styled.div`
  max-width: ${props => props.theme.maxWidth};
  margin: 0 auto;
  padding: 2rem;
`

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'roboto';
    src: url('/static/Roboto-Thin.woff2');
  }
  @font-face {
    font-family: 'roboto_mono';
    src: url('/static/RobotoMono-Thin.woff2');
  }
  @font-face {
    font-family: 'roboto_black';
    src: url('/static/Roboto-Black.woff2');
  }
  
  html {
    box-sizing: border-box;
    font-size: 12px;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body {
    padding: 0;
    margin: 0;
    font-size: 1.5rem;
    line-height: 2;
    font-family: 'roboto', sans-serif;
  }

  h1 {
    font-family: 'roboto_black';
  }

  h2, h3, h4, h5, h6 {
  }

  button {
    font-family: 'roboto_black';
    background: ${props => props.theme.darkblue};
    color: ${props => props.theme.lighterblue};
    border: 1px solid ${props => props.theme.darkerblue};
    padding: 0.3em 1.8em;
    cursor: pointer;
    box-shadow: ${props => props.theme.bsSmall};
  }

  input,
  textarea {
    font-family: 'roboto';
    border: 1px solid ${props => props.theme.lightgrey};
    padding: 6px;
    margin: 0 8px;
  }

  pre {
    font-family: 'roboto_mono';
  }
`

class Page extends React.Component {
  render () {
    return (
      <ThemeProvider theme={theme}>
        <StyledPage>
          <Meta />
          <GlobalStyle />
          <Header />
          <Inner>{this.props.children}</Inner>
        </StyledPage>
      </ThemeProvider>
    )
  }
}

export default Page