Adjusting layout & background on views

src/components/Footer/index.scss

@@ -5,6 +5,7 @@
   justify-items: center;
   align-items: center;
   border: solid 0.5px $border;
+  background-color: white;
 }
 
 @media only screen and (max-width: $(screenXs)px) {

src/components/Header/component/Layout.jsx

@@ -29,6 +29,7 @@ const styles = theme => ({
     borderBottom: `solid 2px ${border}`,
     alignItems: 'center',
     height: '52px',
+    backgroundColor: 'white',
   },
   logo: {
     padding: `${sm} ${md}`,

src/components/Stepper/index.jsx

@@ -164,6 +164,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
 const styles = {
   root: {
     flex: '1 1 auto',
+    backgroundColor: 'transparent',
   },
 }
 

src/components/layout/Page/index.scss

@@ -1,10 +1,8 @@
 .page {
   display: flex;
   flex: 1 0 auto;
-  width: 100%;
   flex-direction: column;
   padding: $xl;
-  background-color: #F2F2F8;
 }
 
 .center {

src/components/layout/PageFrame/index.scss

@@ -2,6 +2,5 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
-  background-color: white;
   max-width: 100%;
 }

src/index.scss

@@ -13,7 +13,8 @@ body {
   color:  $fontColor;
   font-family: 'Roboto Mono', monospace; 
   font-size: $mediumFontSize;
-  margin: 0;  
+  margin: 0;
+  background-color: $background;
 }
 
 body>div:first-child {