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,7 +4,6 @@ import Navbar from './Navbar';
 import Footer from './Footer';
 class App extends React.Component {
 
-
     render() {
         return (
             <div>
@@ -12,13 +11,8 @@ class App extends React.Component {
                 <ConfigCover />
                 <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'
 
 

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;
+.blog-cover{
-flex-direction: column;}
+    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;
@@ -25,30 +22,28 @@
    font-size:40px;
    font-weight: 600;
    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;
+button{
+    background-color: #676683;
     color:#ffffff;
     border:none;
     border-radius:4px;
     padding:10px;
     margin:auto;
     width:100px;
-text-align: center;}
+    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");
 }
 
 

src/components/CoverImage.js

@@ -3,8 +3,6 @@ import './CoverImage.css';
 
 class CoverImage extends React.Component {
 
-
-
     render() {
         return (
             <div className={` cover ${this.props.pattern} `}
@@ -16,8 +14,6 @@ class CoverImage extends React.Component {
                     </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 logo from '../assets/icons/favicon.png';
-import githubIcon from '../assets/github.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')