component: add Layout component

src/App.css

@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

src/App.js

@@ -1,18 +1,15 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+
-import './App.css';
+import Layout from "./components/Layout/Layout";
+
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
+      <div>
-        <header className="App-header">
+        <Layout>
-          <img src={logo} className="App-logo" alt="logo" />
+          Test
-          <h1 className="App-title">Welcome to React</h1>
+        </Layout>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
       </div>
     );
   }

src/components/Layout/Layout.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Aux from "../../hoc/Auxiliary";
+
+const layout = (props) => (
+    <Aux>
+        <div>Toolbar, SideDrawer, Backdrop</div>
+        <main>
+            {props.children}
+        </main>
+    </Aux>
+)
+
+export default layout;

src/hoc/Auxiliary.js

@@ -0,0 +1,3 @@
+const aux = (props) => props.children
+
+export default aux;

src/index.css

@@ -1,5 +1,5 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: "Open Sans", sans-serif;
 }