style and add the Canvas component to App component

src/App.css

@@ -1,24 +1,22 @@
 .App {
-  text-align: center;
+  display: flex;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.canvas {
+  display: flex;
+  height: 100%;
+  width: 80%;
+  align-items: center;
+  justify-content: center;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.text-editor {
+  border: none;
+  padding: 20px 20px;
+  transition: background .3s ease-in;
+  width: 90%;
 }
+.text-editor:focus,
+.text-editor:hover {
+    background: #fff;
+}

src/App.js

@@ -1,18 +1,24 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import Canvas from './components/Canvas';
 import './App.css';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fontFamily: 'Montserrat',
+      fontSize: '34px',
+      fontWeight: 'SemiBold',
+      textColor: '#9B51E0',
+      backgroundColor: '#F8F3F3',
+    };
+  }
+
   render() {
     return (
       <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <Canvas {...this.state} />
       </div>
     );
   }

src/index.css

@@ -2,4 +2,11 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  height: 100%;
 }
+html,
+body,
+#root,
+.App {
+  height: 100%;
+}