import React, { Component } from 'react';
import './App.css';
import { css } from 'glamor';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Container } from 'semantic-ui-react';
import Nav from './components/Nav';
import Home from './views/Home';
import HouseholdsContainer from './containers/HouseholdsContainer';
import Background from './images/pexels-photo-349609.jpeg';
import Signup from './components/Signup';
import Login from './views/Login';
import { authenticate, authenticationFailure, logout } from './redux/modules/Auth/actions';
import NewHousehold from './components/NewHousehold';
import MealsContainer from './containers/MealsContainer';
import Loading from './components/Loading';
import { fetchMeals } from './redux/modules/Meals/actions';

const rules = css({
  width: '100%',
  height: 'auto',
  // position: 'fixed',
  top: 55,
  left: 0,
  minHeight: '100%',
  minWidth: '1024px',
  background: `url(${Background}) no-repeat center center fixed`,
  backgroundSize: 'cover',
  display: 'flex',
  justifyContent: 'center',
  color: '#ecf0f1',
  textShadow: '1px 1px #777',
});

class App extends Component {
  constructor(props) {
    super(props);
    props.fetchMeals();
  }

  componentDidMount() {
    const token = localStorage.getItem('token');
    const { authenticate, authenticationFailure } = this.props;
    if (token) {
      authenticate();
    } else {
      authenticationFailure();
    }
  }

  render() {
    const { loading, logout } = this.props;
    if (loading) {
      return <Loading />;
    }
    return (
      <Router>
        <div>
          <Container text>
            <Nav logout={logout} />
          </Container>
          <div {...rules}>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/households/new" component={NewHousehold} />
              <Route path="/meals" component={MealsContainer} />
              <Route path="/households" component={HouseholdsContainer} />
              <Route path="/signup" component={Signup} />
              <Route path="/login" component={Login} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

App.propTypes = {
  fetchMeals: PropTypes.func,
  authenticate: PropTypes.func,
  authenticationFailure: PropTypes.func,
  loading: PropTypes.bool,
  logout: PropTypes.func,
};

export default connect(
  state => ({
    loading: state.auth.loading,
  }),
  {
    authenticate,
    authenticationFailure,
    logout,
    fetchMeals,
  }
)(App);

@@ -81,24 +81,65 @@
 m 'glamor';%0A
+import styled  from 'styled-components';%0A
 import PropT
@@ -158,24 +158,24 @@
 rop-types';%0A
-
 import %7B con
@@ -906,16 +906,19 @@
 ions';%0A%0A
+// 
 const ru
@@ -929,16 +929,19 @@
 = css(%7B%0A
+// 
   width:
@@ -949,16 +949,19 @@
 '100%25',%0A
+// 
   height
@@ -970,16 +970,19 @@
 'auto',%0A
+// 
   // pos
@@ -997,16 +997,19 @@
 fixed',%0A
+// 
   top: 5
@@ -1011,16 +1011,19 @@
 op: 55,%0A
+// 
   left: 
@@ -1025,16 +1025,19 @@
 eft: 0,%0A
+// 
   minHei
@@ -1049,16 +1049,19 @@
 '100%25',%0A
+// 
   minWid
@@ -1074,16 +1074,19 @@
 024px',%0A
+// 
   backgr
@@ -1143,16 +1143,19 @@
 fixed%60,%0A
+// 
   backgr
@@ -1173,18 +1173,21 @@
 cover',%0A
+//
   
+ 
 display:
@@ -1195,16 +1195,19 @@
 'flex',%0A
+// 
   justif
@@ -1226,16 +1226,19 @@
 enter',%0A
+// 
   color:
@@ -1249,16 +1249,19 @@
 cf0f1',%0A
+// 
   textSh
@@ -1286,13 +1286,352 @@
 7',%0A
+// 
 %7D);%0A%0A
+const BackgroundImage = styled.div%60%0A  min-height: 100%25;%0A  min-width: 1024px;%0A  /* Set up proportionate scaling */%0A  width: 100%25;%0A  height: auto;%0A  /* Set up positioning */%0A  position: fixed;%0A  top: 0;%0A  left: 0;%0A  z-index: -1;%0A  opacity: 0.7;%0A  background: url($%7BBackground%7D) no-repeat center center fixed;%0A  background-size: cover;%0A%60%0A%0A
 clas
@@ -2103,24 +2103,70 @@
       %3Cdiv%3E%0A
+          %3CBackgroundImage%3E%3C/BackgroundImage%3E%0A
           %3CC
@@ -2235,24 +2235,24 @@
 /Container%3E%0A
+
           %3Cd
@@ -2257,19 +2257,8 @@
 %3Cdiv
- %7B...rules%7D
 %3E%0A  

Add background image