From 416a6dc92a1016fc49b2432dec8b60b3adf39fb5 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Sun, 30 Aug 2020 22:36:14 +0530
Subject: [PATCH] fix: layout fix and removed warnings

---
 src/components/App.css           | 15 ++++++---------
 src/components/App.js            |  2 +-
 src/components/ChevronDown.js    |  4 ++--
 src/components/ComponentToImg.js |  5 ++---
 src/components/ConfigCover.css   |  8 ++++----
 src/components/ConfigCover.js    | 10 +++++-----
 src/components/CoverImage.css    |  2 ++
 src/components/Navbar.js         |  2 +-
 8 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/App.css b/src/components/App.css
index 058f712..2b4ef1a 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -8,22 +8,19 @@ body,
   padding-left: 40px;
   background-color: #6272a4;
   padding: 5px 5px 5px 35px;
-  font-family: segoe ui;
+
 }
-.navbar h4 {
-    margin-bottom: 0;
+.outerContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 .logo {
   height: 30px;
   width: 30px;
   margin-right: 10px;
 }
-.outerContainer {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-}
+
 a {
   color: inherit;
 }
diff --git a/src/components/App.js b/src/components/App.js
index c68db3e..3915746 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -6,7 +6,7 @@ class App extends React.Component {
 
     render() {
         return (
-            <div className={"outerContainer"}>
+            <div className="outerContainer">
                 <Navbar />
                 <ConfigCover />
                 <Footer />
diff --git a/src/components/ChevronDown.js b/src/components/ChevronDown.js
index d71c236..b856a3e 100644
--- a/src/components/ChevronDown.js
+++ b/src/components/ChevronDown.js
@@ -3,8 +3,8 @@ import './ConfigCover.css';
 
 const ChevronDown = () => {
     return (
-        <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-chevron-down" fill="currentColor" stroke-width="10" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+        <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-chevron-down" fill="currentColor" strokeWidth="10" xmlns="http://www.w3.org/2000/svg">
+            <path fillRule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
         </svg>
     );
 }
diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index 9804b39..5c09dc5 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -9,7 +9,7 @@ class ComponentToImg extends React.Component {
 	}
 
 	render() {
-		console.log(this.props.children);
+		// console.log(this.props.children);
 		let downloadButton;
 		// eslint-disable-next-line default-case
 		switch (this.props.downloadAs) {
@@ -19,12 +19,11 @@ class ComponentToImg extends React.Component {
 			case "JPEG":
 				downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef)}>Download</button>;
 		}
-		console.log(downloadButton);
+		// console.log(downloadButton);
 
 		return (
 			<React.Fragment>
 				<div ref={this.componentRef}>{this.props.children}</div>
-				{/* <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button> */}
 				{downloadButton}
 			</React.Fragment>
 		);
diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css
index 4fb8893..814b42e 100644
--- a/src/components/ConfigCover.css
+++ b/src/components/ConfigCover.css
@@ -8,7 +8,6 @@ body {
 	align-items: center;  */
 	display: flex;
 	flex-direction: row;
-	align-items: center;
 }
 .tagline {
 	max-width: 300px;
@@ -23,8 +22,9 @@ body {
     border-radius: 8px;
     text-align: center;
     color:#676683;
-    margin:10px 10px 10px 20px;
-    /* border:1px solid #676683; */
+	margin:10px 10px 10px 20px;
+	box-shadow: 6px  #e6e6e6;
+
 }
 
 details{
@@ -85,7 +85,7 @@ svg {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	width: 100%;
+	margin: 60px;
 	}
 label{
 	margin: 5px;
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index eb004fa..dbcd60d 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -60,8 +60,8 @@ class ConfigCover extends React.Component {
 					<details>
 						<summary>
 							<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-droplet-half icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-								<path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
-								<path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z" />
+								<path fillRule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
+								<path fillRule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z" />
 							</svg>
 
 							<label>Colors</label>
@@ -140,7 +140,7 @@ class ConfigCover extends React.Component {
 					<details>
 						<summary>
 							<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-back icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-								<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z" />
+								<path fillRule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z" />
 							</svg>
 							<label>Background Pattern</label>
 							<ChevronDown />
@@ -172,8 +172,8 @@ class ConfigCover extends React.Component {
 					<details>
 						<summary>
 							<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-code-square icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-								<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
-								<path fill-rule="evenodd" d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z" />
+								<path fillRule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
+								<path fillRule="evenodd" d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z" />
 							</svg>
 							<label>Dev Icon</label>
 							<ChevronDown />
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index 1fc5b26..c718b29 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -7,6 +7,8 @@
     height:380px;
     width:800px;
     padding:90px;
+    border-radius:2px;
+    
 
 }
 
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 32815c5..e8601d9 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -4,7 +4,7 @@ import logo from '../assets/icons/favicon.png';
 const Navbar = () => {
 
     return (
-        <nav className="navbar bg-dark">
+        <nav className="navbar bg-dark shadow">
 
             <h4><img src={logo} alt="logo" className="logo"></img>CoverView</h4>
             <a href="https://github.com/rutikwankhade/CoverView">