fix: minor ui changes and update readme

README.md

@@ -12,9 +12,9 @@
 
  <p align="center">🛠 Create awesome cover images for your blog posts quickly.</p>
 <p align="center">
-<kbd>
+
-<img src="https://user-images.githubusercontent.com/47467468/91587246-1f5eb500-e974-11ea-8455-9cc8b6c990c3.gif" height="auto" width="800px"  margin="20px">
+<img src="https://user-images.githubusercontent.com/47467468/138584874-34311571-5fc7-40db-93f2-759edb68635d.png" height="auto" width="800px"  margin="20px">
-</kbd>
+
 </p>
 </p>
  

public/index.html

@@ -12,7 +12,7 @@
   <meta property="twitter:title" content="CoverView">
   <meta property="twitter:description" content="Create an awesome cover image for your next blog post ">
   <meta property="twitter:image"
-    content="https://user-images.githubusercontent.com/47467468/90899463-94b30e80-e3e5-11ea-8256-b87b73a0042e.png">
+    content="https://user-images.githubusercontent.com/47467468/138584874-34311571-5fc7-40db-93f2-759edb68635d.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.css

@@ -6,11 +6,11 @@ body,
 .navbar {
   color: #ffffff;
   padding-left: 40px;
-  background-color: #6272a4;
+  background-color: #54436B;
-  padding: 5px 5px 5px 35px;
+  padding: 10px 10px 10px 35px;
 
 }
-.outerContainer {
+.content {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -21,19 +21,18 @@ body,
   margin-right: 10px;
 }
 
-a {
+a:hover{
-  color: inherit;
+  text-decoration: none;
 }
-a i:hover {
+
-  color: #f2f2f2;
+.star-btn{
-}
+    background-color: #262626;
-footer {
+    padding:5px 10px 5px 10px;
-  height: 40px;
+    color:#ffffff;
-  text-align: center;
+    border-radius:5px;
-  background-color: #ffffff;
+    font-weight:600;
-  padding: 10px;
+    margin-left:auto;
-  font-size: 14px;
+    margin-right:10px;
-  border-top: 1px solid #cccccc;
 }
 
 @media screen and (max-width: 600px) {

src/components/App.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import ConfigCover from './ConfigCover';
 import Navbar from './Navbar';
-import Footer from './Footer';
 class App extends React.Component {
 
     render() {
         return (
-            <div className="outerContainer">
+            <div className="content">
                 <Navbar />
                 <ConfigCover />
-                <Footer />
 
             </div>
         );

src/components/ConfigCover.css

@@ -3,27 +3,29 @@ body {
 }
 
 .main-container {	
-	/* width: auto;
-	justify-content: center;
-	align-items: center;  */
 	display: flex;
 	flex-direction: row;
 }
 .tagline {
 	max-width: 300px;
+	font-weight: 600;
+	font-size: 18px;
 }
-.inputData {
+.config-container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	padding:35px;
+	width: 600px;
+	background-color: #ffffff;
+	margin-right:10px;
+	justify-items: center;
+	justify-content: center;
+	
 }
 .card{
-    border-radius: 8px;
     text-align: center;
     color:#676683;
-	margin:10px 10px 10px 20px;
-	box-shadow: 6px  #e6e6e6;
 	
 }
 
@@ -41,11 +43,14 @@ details{
 	justify-content: center;
 	align-items: center;
 
+	
 }
 
 summary{
 	align-items: center;
 	justify-content: center;
+	  list-style: none;
+
 
 }
 summary:focus{
@@ -116,9 +121,7 @@ input {
 }
 
 .reset-btn {
-	background-color: #00e68a;
+	margin-top: 20px;
-	margin-top: 10px;
-	box-shadow: 4px 4px #676683;
 	font-size: 18px;
 	padding:6px;
 
@@ -129,6 +132,7 @@ input {
 		display: flex;
 		flex-direction: column;
 	}
+	.config-container{width:auto;}
 	.blog-cover{margin:0px;}
 	.card{margin:10px;}	
 	

src/components/ConfigCover.js

@@ -50,9 +50,8 @@ class ConfigCover extends React.Component {
 	render() {
 		return (
 			<div className="main-container">
-				<div className="inputData card">
+				<div className="config-container card ">
-					<h1>CoverView</h1>
+					<p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p> 
-					<p className="tagline">🛠 Creating cover images for your blogs is now super easy</p>
 					<input
 						type="text"
 						placeholder="Enter title here"

src/components/CoverImage.css

@@ -52,7 +52,8 @@ h1{
 }
 
 button{
-    background-color: #676683;
+  background-color:  #634f7d;
+font-weight: 600;
     color:#ffffff;
     border:none;
     border-radius:4px;
@@ -63,8 +64,8 @@ button{
     box-shadow: 4px 4px #cccccc;
 
 }
-button:active{   
+button:hover{   
-     transform:scale(1.1);
+     background-color: #54466b;
 }
 
 @media screen and (max-width:600px){

src/components/CoverImage.js

@@ -35,7 +35,7 @@ class CoverImage extends React.Component {
 				</div>
 				<div className="meta" style={{ backgroundColor: borderColor }}>
 					<i className={`devicon-${icon.value}-plain dev-icon`}></i>
-					<span className="author">A blog by  ⚡ {author}</span></div>
+					<span className="author">A blog by  <span role="img" aria-label="bolt">⚡</span> {author}</span></div>
 			</div>
 		);
 	}

src/components/Navbar.js

@@ -4,12 +4,13 @@ import logo from '../assets/icons/favicon.png';
 const Navbar = () => {
 
     return (
-        <nav className="navbar bg-dark shadow">
+        <nav className="navbar">
 
             <h4><img src={logo} alt="logo" className="logo"></img>CoverView</h4>
-            <a href="https://github.com/rutikwankhade/CoverView">
+            <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noopener  noreferrer" class="star-btn"><span role="img" aria-label="star">⭐</span> Star on Github</a>
-            <i className="devicon-github-plain mr-3"></i>
+
-            </a>
+            
+       
         </nav>);
 
 

src/components/RandomTheme.css

@@ -15,6 +15,9 @@
     transform: rotate(360deg);
     transition: all 0.2s ease-out;
 }
+.random-btn:hover{
+    border-color:  #66ff99;
+}
 .bi-shuffle{
     height: 25px;
     width: 25px;