code refactor

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">
 
     <!--

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>
-
-
-
         );
-
     }
 }
 

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>);
     }
 

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;}
 

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>
-
-
-
-
         );
     }
 }

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;
 }
 
 

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>
-            
-            
         );
     }
 }

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>
     );
 
 }

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;

src/index.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 
 import App from './components/App';
 
-
 ReactDOM.render(
     <App />,
     document.querySelector('#root')