From 31998612d687a29282e3ff0a0e35014d8405b14f Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Mon, 17 Aug 2020 14:13:39 +0530
Subject: [PATCH] code refactor

---
 public/index.html                  |   2 +-
 src/assets/{ => icons}/favicon.png | Bin
 src/assets/{ => icons}/github.png  | Bin
 src/components/App.js              |   8 +------
 src/components/ComponentToImg.js   |   3 +--
 src/components/ConfigCover.css     |   9 +++++---
 src/components/ConfigCover.js      |  13 +-----------
 src/components/CoverImage.css      |  33 ++++++++++++-----------------
 src/components/CoverImage.js       |  16 ++++++--------
 src/components/Footer.js           |   5 +++--
 src/components/Navbar.js           |   5 ++---
 src/index.js                       |   1 -
 12 files changed, 35 insertions(+), 60 deletions(-)
 rename src/assets/{ => icons}/favicon.png (100%)
 rename src/assets/{ => icons}/github.png (100%)

diff --git a/public/index.html b/public/index.html
index 00692a5..6b6bdd5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,7 @@
       name="description"
       content="Create an awesome cover image for your next blog post "
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="./favicon.png" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
 
     <!--
diff --git a/src/assets/favicon.png b/src/assets/icons/favicon.png
similarity index 100%
rename from src/assets/favicon.png
rename to src/assets/icons/favicon.png
diff --git a/src/assets/github.png b/src/assets/icons/github.png
similarity index 100%
rename from src/assets/github.png
rename to src/assets/icons/github.png
diff --git a/src/components/App.js b/src/components/App.js
index f607b71..3852e96 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,21 +4,15 @@ import Navbar from './Navbar';
 import Footer from './Footer';
 class App extends React.Component {
 
-
     render() {
         return (
             <div>
                 <Navbar />
                 <ConfigCover />
-                <Footer/>
-                
+                <Footer />
 
             </div>
-
-
-
         );
-
     }
 }
 
diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index 9116978..b81b38c 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
-// import CoverImage from './CoverImage'
 import './CoverImage.css'
 
 
@@ -26,7 +25,7 @@ class ComponentToImg extends React.Component {
 
                 <button onClick={() => exportComponentAsPNG(this.componentRef)}>
                     Download
-            </button>
+                </button>
             </React.Fragment>);
     }
 
diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css
index 22f3447..e0e5c66 100644
--- a/src/components/ConfigCover.css
+++ b/src/components/ConfigCover.css
@@ -1,3 +1,5 @@
+body{background-color: #f2f2f2;}
+
 .main-container{
     width:auto;
     justify-content: center;
@@ -6,15 +8,16 @@
     flex-direction: row;
 }
 
-body{background-color: #f2f2f2;}
 .inputData{
     display:flex;
     flex-direction: column;
     align-items: center;
     padding:15px;
 }
-.blog-cover{display: flex;
-flex-direction: column;}
+.blog-cover{
+    display: flex;
+    flex-direction: column;
+}
 label{margin:5px;}
 input{margin:4px;}
 
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index a8d9500..6cbfe51 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -25,7 +25,6 @@ class ConfigCover extends React.Component {
                         onChange={e => this.setState({ title: e.target.value })}></input>
 
 
-
                     <div>
                         <label>Background</label>
                         <input type="color" defaultValue="#00ff99"
@@ -35,6 +34,7 @@ class ConfigCover extends React.Component {
                         <input type="color" defaultValue="#8c52ff"
                             onChange={e => this.setState({ border: e.target.value })} />
                     </div>
+
                     <label>Background Pattern</label>
                     <select onChange={e => this.setState({ pattern: e.target.value })}
                         className="form-control">
@@ -68,22 +68,11 @@ class ConfigCover extends React.Component {
                             border={this.state.border}
                             pattern={this.state.pattern}
 
-
-
                         />
                     </ComponentToImg>
 
                 </div>
-
-
-
-
-
             </div>
-
-
-
-
         );
     }
 }
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index 52611e0..4d101f7 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -8,12 +8,9 @@
     width:800px;
     padding:90px;
     margin:30px 0px 15px 0px;
-
-    
 }
 
 .title-card{
-
    border-radius: 2px 2px 20px 20px;
    background-color: #ffffff; 
    text-align: center;
@@ -24,31 +21,29 @@
    padding:50px;
    font-size:40px;
    font-weight: 600;
-   border:none;
-   
+   border:none;   
 }
-.card{margin:20px;
+
+.card{
+    margin:20px;
     border-radius: 8px;
     text-align: center;
     color:#676683;
     padding:50px 25px 50px 25px;
     border:4px solid #676683;
 }
+
 h1{height:auto;}
 
-button{background-color: #676683;
-color:#ffffff;
-border:none;
-border-radius:4px;
-padding:10px;
-margin:auto;
-width:100px;
-text-align: center;}
-
-
-.pattern1{
-    background-color: #DFDBE5;
-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg fill='%239C92AC' fill-opacity='0.82'%3E%3Cpath d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' opacity='.5'%3E%3C/path%3E%3Cpath d='M15 15h50l-5 5H20v40l-5 5V15zm0 50h50V15L80 0v80H0l15-15zm32.07-32.07l3.54-3.54A15 15 0 0 1 29.4 50.6l3.53-3.53a10 10 0 1 0 14.14-14.14zM32.93 47.07a10 10 0 1 1 14.14-14.14L32.93 47.07z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+button{
+    background-color: #676683;
+    color:#ffffff;
+    border:none;
+    border-radius:4px;
+    padding:10px;
+    margin:auto;
+    width:100px;
+    text-align: center;
 }
 
 
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index 8a95593..4e46ee4 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -3,21 +3,17 @@ import './CoverImage.css';
 
 class CoverImage extends React.Component {
 
-
-
     render() {
         return (
             <div className={` cover ${this.props.pattern} `}
-                style={{ backgroundColor:this.props.bgcolor }}>
-                    <div className={`${this.props.pattern}`}>
-                <div className="title-card"
-                    style={{ borderTop: `18px solid ${this.props.border}`}}>
-                    <p>{this.props.title}</p>
-                </div>
+                style={{ backgroundColor: this.props.bgcolor }}>
+                <div className={`${this.props.pattern}`}>
+                    <div className="title-card"
+                        style={{ borderTop: `18px solid ${this.props.border}` }}>
+                        <p>{this.props.title}</p>
+                    </div>
                 </div>
             </div>
-            
-            
         );
     }
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 64bcc78..4c7d0d8 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -3,8 +3,9 @@ import './App.css';
 
 const Footer = () => {
     return (
-        <footer>Made with &#10084; By <a href="https://rutikw.now.sh">Rutik Wankhade</a></footer>
-
+        <footer>
+            Made with &#10084; By <a href="https://rutikw.now.sh">Rutik Wankhade</a>
+        </footer>
     );
 
 }
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 12956bd..69ab7b9 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
-import logo from '../assets/favicon.png';
-import githubIcon from '../assets/github.png';
+import logo from '../assets/icons/favicon.png';
+import githubIcon from '../assets/icons/github.png';
 const Navbar = () => {
 
     return (
@@ -17,5 +17,4 @@ const Navbar = () => {
 
 };
 
-
 export default Navbar;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index b8ec135..60a2b33 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 
 import App from './components/App';
 
-
 ReactDOM.render(
     <App />,
     document.querySelector('#root')