style: added navbar and fixed styling

src/components/App.css

@@ -0,0 +1,4 @@
+.navbar{
+    color:#ffffff;
+    padding-left:40px;
+}

src/components/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ConfigCover from './ConfigCover';
-
+import Navbar from './Navbar';
 
 class App extends React.Component {
 
@@ -8,6 +8,8 @@ class App extends React.Component {
     render() {
         return (
             <div>
+                <Navbar />
+
                 <ConfigCover />
             </div>
 

src/components/ConfigCover.css

@@ -1,12 +1,20 @@
 .container{
-    margin:20px;
+    width:auto;
     display:flex;
     flex-direction: column;
     
     justify-content: center;
     align-items: center;
 }
-
+.inputData{
+    margin:60px 0px 20px 0px;
+}
 label{margin:5px;}
-.input-sm{width:60px;}
 input{margin:4px;}
+
+.inputTitle{
+    height:40px;
+    width:300px;
+    border-radius:4px;
+    padding-left:20px;
+}

src/components/ConfigCover.js

@@ -5,8 +5,6 @@ class ConfigCover extends React.Component {
 
     state = {
         title: 'How I built my first project with react',
-        height: 420,
-        width: 800,
         bgcolor: '',
         bxshadow: ''
     };
@@ -15,38 +13,37 @@ class ConfigCover extends React.Component {
         return (
             <div className="container">
 
+                <div className="inputData">
+                    <input type="text" placeholder="Enter title here" className="inputTitle"
+                        onChange={e => this.setState({ title: e.target.value })}></input>
 
-                    <input type="text" placeholder="Enter title here" 
-                    onChange={e=>this.setState({title:e.target.value})}></input>
-
-                    <div className="d-flex flex-row">
+                    {/* <div className="d-flex flex-row">
                         <label >width</label>
                         <input type="number" name="width" className="input-sm"
                         onChange={e=>this.setState({width:e.target.value})}></input>
                         <label >height</label>
                         <input type="number" name="height" className="input-sm"
                         onChange={e=>this.setState({height:e.target.value})}></input>
-                    </div>
+                    </div> */}
 
 
                     <label>Background</label>
                     <input type="color" defaultValue="#c5a8ff"
-                    onChange={e=>this.setState({bgcolor:e.target.value})}/>
+                        onChange={e => this.setState({ bgcolor: e.target.value })} />
 
                     <label>box-shadow</label>
                     <input type="color" defaultValue="#8c52ff"
-                    onChange={e=>this.setState({bxshadow:e.target.value})} />
-
+                        onChange={e => this.setState({ bxshadow: e.target.value })} />
 
 
+                </div>
 
 
                 <CoverImage
-                title={this.state.title} 
-                bgcolor={this.state.bgcolor}
-                bxshadow={this.state.bxshadow}
-                height={this.state.height}
-                width={this.state.width}
+                    title={this.state.title}
+                    bgcolor={this.state.bgcolor}
+                    bxshadow={this.state.bxshadow}
+                    
                 />
 
 

src/components/CoverImage.css

@@ -6,8 +6,8 @@
 }
 .cover{
     
-    width:auto;
-    height:auto;
+    width:800px;
+    height:420px;
     background-color: #c5a8ff;
     text-align: center;
     

src/components/Navbar.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.css';
+
+const Navbar = () => {
+
+    return <nav className="navbar bg-dark"><h4>CoverView</h4></nav>;
+
+
+
+};
+
+
+export default Navbar;

src/index.js

@@ -5,7 +5,7 @@ import App from './components/App';
 
 
 ReactDOM.render(
-    <App/>,
+    <App />,
     document.querySelector('#root')
 );