Set app background color in single place

src/client/components/main_layout/InfoHeader.js

@@ -16,7 +16,6 @@ const styles = theme => ({
     paddingTop: theme.spacing(1),
     paddingLeft: theme.spacing(1.5),
     paddingRight: theme.spacing(1.5),
-    backgroundColor: '#bdbdbd',
     [theme.breakpoints.down('sm')]: {
       marginTop: 56,
     },

src/client/containers/SemanticPortal.js

@@ -64,7 +64,7 @@ const styles = theme => ({
   },
   mainContainer: {
     height: 'auto',
-    backgroundColor: '#bdbdbd',
+    // backgroundColor: '#bdbdbd',
     padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       marginTop: 56, // app bar
@@ -77,7 +77,7 @@ const styles = theme => ({
   },
   perspectiveContainerHeaderExpanded: {
     height: 'auto',
-    backgroundColor: '#bdbdbd',
+    // backgroundColor: '#bdbdbd',
     padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       marginTop: 256, // app bar + header
@@ -90,7 +90,7 @@ const styles = theme => ({
   },
   perspectiveContainer: {
     height: 'auto',
-    backgroundColor: '#bdbdbd',
+    // backgroundColor: '#bdbdbd',
     padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       marginTop: 133, // app bar + header
@@ -103,7 +103,7 @@ const styles = theme => ({
   },
   instancePageContainerHeaderExpanded: {
     height: 'auto',
-    backgroundColor: '#bdbdbd',
+    // backgroundColor: '#bdbdbd',
     padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       marginTop: 296,
@@ -116,7 +116,7 @@ const styles = theme => ({
   },
   instancePageContainer: {
     height: 'auto',
-    backgroundColor: '#bdbdbd',
+    // backgroundColor: '#bdbdbd',
     padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       marginTop: 173,

src/client/index.html

@@ -18,6 +18,7 @@
     }
     #root, #app {
       height: 100%;
+      background-color: #bdbdbd;
     }
     a, a:visited, a:hover, a:active {
       color: inherit;