update it

webui/src/components/Base/Layout.js

@@ -53,8 +53,6 @@ Layout.Container = ({visible, children}) => visible ? (
 Layout.Content = styled.div`
   width: 100%;
   height: 100%;
-  
-  background: ${p => p.background ? p.background : `white`};
 `;
 
 export default Layout;

webui/src/components/Shared/Blank.js

@@ -9,7 +9,7 @@ const Wrapper = styled.div`
   position: relative;
   display: block;
 
-  padding-top : 4rem;
+  margin-top : 6rem;
 `  
 
 const CircleIcon = styled.div`

webui/src/components/Subscriber/Search.js

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
   align-items: center;
 
   width: 700px;
-  margin: 0 auto;
+  margin: 2rem auto 1rem auto;
 
   background: white;
   color: ${oc.gray[6]};
@@ -28,6 +28,7 @@ const Wrapper = styled.div`
   `}
 
   ${media.mobile`
+    margin: 0rem auto;
     width: 100%;
   `}
 `;

webui/src/containers/App.js

@@ -34,6 +34,12 @@ class App extends Component {
       view
     } = this.props;
 
+    if (view === "subscriber") {
+      document.body.style.backgroundColor = "#e9ecef";
+    } else {
+      document.body.style.backgroundColor = "white";
+    }
+
     return (
       <Layout>
         <Layout.Container visible={view === "subscriber"}>

webui/src/containers/SubscriberContainer.js

@@ -11,18 +11,6 @@ import { media } from 'helpers/style-utils';
 
 import { Subscriber, Spinner, FloatingButton, Blank } from 'components';
 
-const Wrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  padding: 2rem 0rem;
-
-  background: #e9ecef;
-
-  ${media.mobile`
-     padding: 0rem;
-  `}
-`
-
 class SubscriberContainer extends Component {
   state = {
     search: ''
@@ -30,6 +18,7 @@ class SubscriberContainer extends Component {
 
   componentWillMount() {
     const { subscribers, dispatch } = this.props
+
     if (subscribers.needsFetch) {
       dispatch(subscribers.fetch)
     }
@@ -95,7 +84,7 @@ class SubscriberContainer extends Component {
     } = data;
 
     return (
-      <Wrapper>
+      <Layout.Content>
         {length !== 0 && <Subscriber.Search 
           onChange={handleSearchChange}
           value={search}
@@ -115,7 +104,7 @@ class SubscriberContainer extends Component {
           onTitle={handleAdd}
           />
         <FloatingButton onClick={handleAdd}/>
-      </Wrapper>
+      </Layout.Content>
     )
   }
 }