From 27e470152ec0800fcd53f7a551cbd2c1be2c7720 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Sat, 9 Apr 2022 09:39:45 +0530
Subject: [PATCH] fix: fix shadow issue and update elements

---
 src/components/ComponentToImg.js |  4 ++--
 src/components/ConfigCover.css   | 11 ++++++++++-
 src/components/ConfigCover.js    | 12 ++++++------
 src/components/CoverImage.css    |  2 +-
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index 5c09dc5..5d5250f 100644
--- a/src/components/ComponentToImg.js
+++ b/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);
 
diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css
index 6b99430..27fe610 100644
--- a/src/components/ConfigCover.css
+++ b/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;
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index 5c96ff3..88549a6 100644
--- a/src/components/ConfigCover.js
+++ b/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"
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index a393a11..7c6c732 100644
--- a/src/components/CoverImage.css
+++ b/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); */
 
 }