fix: fix shadow issue and update elements

src/components/ComponentToImg.js

@@ -14,10 +14,10 @@ class ComponentToImg extends React.Component {
 		// eslint-disable-next-line default-case
 		switch (this.props.downloadAs) {
 			case "PNG":
-				downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button>;
+				downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef,'cover')}>Download</button>;
 				break;
 			case "JPEG":
-				downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef)}>Download</button>;
+				downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef,'cover')}>Download</button>;
 		}
 		// console.log(downloadButton);
 

src/components/ConfigCover.css

@@ -66,10 +66,19 @@ label{
 }
 input {
 	margin: 4px;
-	text-align: center;
+		background-color: #f2f2f2;
+
 }
 
+.input-title{
+	margin:5px;
+	background-color: #f2f2f2;
+}
 
+.input-author{
+		background-color: #f2f2f2;
+
+}
 
 .input-md{
 	width:100px;

src/components/ConfigCover.js

@@ -44,17 +44,17 @@ class ConfigCover extends React.Component {
 			<div className="main-container">
 				<div className="config-container card ">
 					<p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p>
-					<input
+					<textarea
 						type="text"
 						placeholder="Enter title here"
-						className="input form-control"
+						className="input-title form-control"
 						onChange={(e) => this.setState({ title: e.target.value })}
-					></input>
+					/>
 
 					<input
 						type="text"
 						placeholder="Author"
-						className="input form-control"
+						className="input-author form-control"
 						onChange={(e) => this.setState({ author: e.target.value })}
 					></input>
 
@@ -114,7 +114,7 @@ class ConfigCover extends React.Component {
 						/>
 					</div>
 
-					<div className="mx-4 my-1">
+					{/* <div className="mx-4 my-1">
 						<h6>Download As</h6>
 						<select onChange={(e) => this.setState({ download: e.target.value })}
 							className="form-control input"
@@ -122,7 +122,7 @@ class ConfigCover extends React.Component {
 							<option>PNG</option>
 							<option>JPEG</option>
 						</select>
-					</div>
+					</div> */}
 
 					<button
 						className="reset-btn mx-auto"

src/components/CoverImage.css

@@ -32,7 +32,7 @@
     padding: 40px;
     font-family: inter;
     margin: auto;
-    box-shadow: 13px 10px 36px 2px rgba(0, 0, 0, 0.22);
+    /* box-shadow: 13px 10px 36px 2px rgba(0, 0, 0, 0.22); */
 
 }