gridHeader and layout

package.json

@@ -9,7 +9,6 @@
     "html-react-parser": "^0.9.1",
     "json-format-highlight": "^1.0.1",
     "react": "^16.8.6",
-    "react-contenteditable": "^3.3.1",
     "react-dom": "^16.8.6",
     "react-json-view": "^1.19.1",
     "react-qr-svg": "^2.2.1",
@@ -36,4 +35,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/App/components/gridHeader/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import './gridHeader.css'
+
+class GridHeader extends React.Component {
+  render() {
+    return (
+      <div>
+        <p>{this.props.text}</p>
+      </div>
+    )
+  }
+}
+
+export default GridHeader

src/App/components/header/header.css

@@ -1,9 +1,17 @@
 .header {
   display: flex;
-  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  padding-left: 2%;
+  align-items: center;
+  background-color: #333
 }
 
 .header__logo,
 .header__gear {
-  float: left;
+}
+
+.header__gear {
+  font-size: 25px;
+  color: whitesmoke
 }

src/App/components/header/index.js

@@ -13,10 +13,8 @@ class Header extends React.Component {
   render() {
     return (
       <div className="header">
-        <Container fixed>
-          <div className="header__logo">QR Converter</div>
-          <div className="header__gear">A</div>
-        </Container>
+        <div className="header__gear">QR Converter</div>
+        <div className="header__logo"></div>
       </div>
     )
   }

src/App/components/qr/qr.css

@@ -5,11 +5,11 @@
   justify-content: center;
 }
 .qr__element {
-  width: 100px;
-  height: 100px;
+  width: 200px;
+  height: 200px;
   max-width: 100%;
   max-height: 100%;
-  padding: 7px;
+  padding: 6px;
   border-radius:4px;
   background-color: #fff;
 }

src/App/components/save/save.css

@@ -1,7 +1,6 @@
 .save {
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
   grid-area: save;
 }

src/App/components/search/search.css

@@ -1,9 +1,6 @@
 .search {
-  margin-top: 5px;
-  padding: 5px 10px;
-  display: flex;
-  width: 100%;
-  max-width: 200px;
+  padding: 10px;
+  background-color: #333;
 }
 
 .search .input--checkbox {

src/App/components/textInput/index.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import ContentEditable from 'react-contenteditable'
 import './textInput.css'
 
 class TextInput extends React.Component {
@@ -22,14 +21,9 @@ class TextInput extends React.Component {
   render() {
 
     return (
-      <ContentEditable
-        tabIndex={0}
+      <textarea
         className="textInput"
-        innerRef={this.textInputRef}
-        html={this.props.value}
-        disabled={false}
         onChange={this.handleChange}
-        tagName='code'
       />
     )
   }

src/App/components/textInput/textInput.css

@@ -3,4 +3,8 @@
   width: 100%;
   height: 100%;
   padding: 25px;
+  resize: none;
+  background-color: transparent;
+  border-color: transparent;
+  color: white;
 }

src/App/index.js

@@ -8,6 +8,7 @@ import Header from './components/header'
 import Search from './components/search'
 import './App.css'
 import Store, { QRS } from 'App/store'
+import GridHeader from './components/gridHeader'
 
 class App extends React.Component {
   constructor(props) {
@@ -85,15 +86,19 @@ class App extends React.Component {
           </aside>
           <main className="app__main">
             <div className="app__textInput">
+              <GridHeader text="Input data" />
               <TextInput value={this.state.text} onChange={this.handleText} placeholder="Write something" />
             </div>
             <div className="app__textOutput">
+              <GridHeader text="Formatted data" />
               <TextOutput value={this.state.text} placeholder="..." />
             </div>
             <div className="app__qr">
+              <GridHeader text="Result QR" />
               <QR value={this.state.text}></QR>
             </div>
             <div className="app__save">
+              <GridHeader text="Options" />
               <Save onSubmit={this.handleSubmit} />
             </div>
           </main>