style: download btn and card style changes

src/components/ComponentToImg.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
 // import CoverImage from './CoverImage'
-
+import './CoverImage.css'
 
 
 class ComponentToImg extends React.Component {
@@ -11,6 +11,8 @@ class ComponentToImg extends React.Component {
     }
 
     render() {
+        console.log(this.props.children);
+
         return (
             <React.Fragment>
 
@@ -18,12 +20,12 @@ class ComponentToImg extends React.Component {
                     {this.props.children}
                 </div>
 
-                <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
+                {/* <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
                     Export As JPEG
-            </button>
+            </button> */}
 
                 <button onClick={() => exportComponentAsPNG(this.componentRef)}>
-                    Export As PNG
+                    Download
             </button>
             </React.Fragment>);
     }

src/components/ConfigCover.css

@@ -14,7 +14,7 @@ input{margin:4px;}
 
 .inputTitle{
     height:40px;
-    width:300px;
+    width:350px;
     border-radius:4px;
     padding-left:20px;
 }

src/components/ConfigCover.js

@@ -8,9 +8,8 @@ class ConfigCover extends React.Component {
     state = {
         title: 'How I built my first project with react',
         bgcolor: '',
-        bxshadow: '',
-        height:null,
-        width:null
+        border: ''
+       
     };
 
     render() {
@@ -21,23 +20,23 @@ class ConfigCover extends React.Component {
                     <input type="text" placeholder="Enter title here" className="inputTitle"
                         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"  className="input-sm"
                         onChange={e=>this.setState({width: e.target.value})}></input>
                         <label >height</label>
                         <input type="number"  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 })} />
 
-                    <label>box-shadow</label>
+                    <label>border</label>
                     <input type="color" defaultValue="#8c52ff"
-                        onChange={e => this.setState({ bxshadow: e.target.value })} />
+                        onChange={e => this.setState({ border: e.target.value })} />
 
 
                 </div>
@@ -47,9 +46,8 @@ class ConfigCover extends React.Component {
 
 title={this.state.title}
 bgcolor={this.state.bgcolor}
-bxshadow={this.state.bxshadow}
-height={this.state.height}
-width={this.state.width}
+border={this.state.border}
+
 
     
 />

src/components/CoverImage.css

@@ -1,38 +1,33 @@
 
-.container{
-    margin:auto;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-
-}
 .cover{
-    /* width:800px;
-    height:420px; */
     background-color: #c5a8ff;
     text-align: center;
-    position:relative;
+    justify-content: center;
+    align-items: center;
+    height:420px;
+    width:800px;
+    padding:90px;
     
 }
 
 .card{
-   height:auto;
-   width:auto;
+
    border-radius: 10px;
-   margin:50px;
    background-color: #ffffff; 
-   display:inline-block;
-   /* box-shadow: 10px 10px  #8c52ff; */
-position:relative;
    text-align: center;
    color:#676683;
-   border:none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    padding:50px;
    
+   
 }
 h1{height:auto;}
 
-
+button{background-color: #8c52ff;
+color:#ffffff;
+border:none;
+border-radius:4px;
+padding:10px;
+margin:20px;}

src/components/CoverImage.js

@@ -7,15 +7,14 @@ class CoverImage extends React.Component {
 
     render() {
         return (
-           <div className="img-fluid">
-            <div className="cover container "
-                style={{ backgroundColor:this.props.bgcolor, height: this.props.height, width: this.props.width }}>
+            <div className="cover"
+                style={{ backgroundColor:this.props.bgcolor }}>
                 <div className="card"
-                    style={{ border: `15px ${this.props.bxshadow}` }}>
+                    style={{ borderTop: `15px solid ${this.props.border}`}}>
                     <h1>{this.props.title}</h1>
                 </div>
             </div>
-            </div>
+            
             
         );
     }