Only shows bg image for login/logout routes (#234)

frontend/components/App/App.jsx

@@ -11,6 +11,7 @@ export class App extends Component {
   static propTypes = {
     children: PropTypes.element,
     dispatch: PropTypes.func,
+    showBackgroundImage: PropTypes.bool,
     user: PropTypes.object,
   };
 
@@ -29,11 +30,11 @@ export class App extends Component {
   }
 
   render () {
-    const { children } = this.props;
+    const { children, showBackgroundImage } = this.props;
 
     return (
       <StyleRoot>
-        <Style rules={globalStyles} />
+        <Style rules={globalStyles(showBackgroundImage)} />
         {children}
         <Footer />
       </StyleRoot>
@@ -42,9 +43,13 @@ export class App extends Component {
 }
 
 const mapStateToProps = (state) => {
+  const { showBackgroundImage } = state.app;
   const { user } = state.auth;
 
-  return { user };
+  return {
+    showBackgroundImage,
+    user,
+  };
 };
 
 export default connect(mapStateToProps)(App);

frontend/components/App/App.tests.jsx

@@ -24,7 +24,7 @@ describe('App - component', () => {
     const spy = spyOn(authActions, 'fetchCurrentUser').andCall(() => {
       return { type: 'LOAD_USER_ACTION' };
     });
-    const store = { auth: {} };
+    const store = { app: {}, auth: {} };
     const mockStore = helpers.reduxMockStore(store);
     const application = helpers.connectedComponent(ConnectedApp, { mockStore });
 
@@ -39,6 +39,7 @@ describe('App - component', () => {
       return { type: 'LOAD_USER_ACTION' };
     });
     const store = {
+      app: {},
       auth: {
         user: {
           id: 1,
@@ -59,7 +60,7 @@ describe('App - component', () => {
     const spy = spyOn(authActions, 'fetchCurrentUser').andCall(() => {
       return { type: 'LOAD_USER_ACTION' };
     });
-    const store = { auth: {} };
+    const store = { app: {}, auth: {} };
     const mockStore = helpers.reduxMockStore(store);
     const application = helpers.connectedComponent(ConnectedApp, { mockStore });
 

frontend/components/LoginRoutes/LoginRoutes.jsx

@@ -1,11 +1,26 @@
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
 import componentStyles from './styles';
+import { hideBackgroundImage, showBackgroundImage } from '../../redux/nodes/app/actions';
 
 export class LoginRoutes extends Component {
   static propTypes = {
     children: PropTypes.element,
+    dispatch: PropTypes.func,
   };
 
+  componentWillMount () {
+    const { dispatch } = this.props;
+
+    dispatch(showBackgroundImage);
+  }
+
+  componentWillUnmount () {
+    const { dispatch } = this.props;
+
+    dispatch(hideBackgroundImage);
+  }
+
   render () {
     const { containerStyles } = componentStyles;
     const { children } = this.props;
@@ -19,4 +34,4 @@ export class LoginRoutes extends Component {
   }
 }
 
-export default LoginRoutes;
+export default connect()(LoginRoutes);

frontend/redux/nodes/app/actions.js

@@ -0,0 +1,9 @@
+export const SHOW_BACKGROUND_IMAGE = 'SHOW_BACKGROUND_IMAGE';
+export const HIDE_BACKGROUND_IMAGE = 'HIDE_BACKGROUND_IMAGE';
+
+export const showBackgroundImage = {
+  type: SHOW_BACKGROUND_IMAGE,
+};
+export const hideBackgroundImage = {
+  type: HIDE_BACKGROUND_IMAGE,
+};

frontend/redux/nodes/app/reducer.js

@@ -1,5 +1,24 @@
-const reducer = (state = {}) => {
-  return state;
+import { HIDE_BACKGROUND_IMAGE, SHOW_BACKGROUND_IMAGE } from './actions';
+
+const initialState = {
+  showBackgroundImage: false,
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case HIDE_BACKGROUND_IMAGE:
+      return {
+        ...state,
+        showBackgroundImage: false,
+      };
+    case SHOW_BACKGROUND_IMAGE:
+      return {
+        ...state,
+        showBackgroundImage: true,
+      };
+    default:
+      return state;
+  }
 };
 
 export default reducer;

frontend/styles/global.js

@@ -8,24 +8,30 @@ const { none } = padding;
 const defaultMargin = marginLonghand(none);
 const defaultPadding = paddingLonghand(none);
 
-export default {
-  ...normalize,
-  html: {
-    position: 'relative',
-    minHeight: '100%',
-  },
-  body: {
-    background: 'url("/assets/images/background.png") center center',
-    backgroundSize: 'cover',
-    color: color.textUltradark,
-    ...defaultMargin,
-    ...defaultPadding,
-    fontFamily: 'Oxygen, sans-serif',
-    fontSize: font.base,
-    lineHeight: 1.6,
-    margin: '0 0 94px',
-  },
-  'h1, h2, h3': {
-    lineHeight: 1.2,
-  },
+export default (showBackgroundImage) => {
+  const background = showBackgroundImage
+    ? 'url("/assets/images/background.png") center center'
+    : color.bgMedium;
+
+  return {
+    ...normalize,
+    html: {
+      position: 'relative',
+      minHeight: '100%',
+    },
+    body: {
+      background,
+      backgroundSize: 'cover',
+      color: color.textUltradark,
+      ...defaultMargin,
+      ...defaultPadding,
+      fontFamily: 'Oxygen, sans-serif',
+      fontSize: font.base,
+      lineHeight: 1.6,
+      margin: '0 0 94px',
+    },
+    'h1, h2, h3': {
+      lineHeight: 1.2,
+    },
+  };
 };