From b50d6f0a85b24994d029d120927eccb6a975fd1b Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Thu, 20 Aug 2020 17:36:30 +0530
Subject: [PATCH] feat : added dev icons

---
 public/index.html              |  1 +
 src/components/ConfigCover.css |  1 +
 src/components/ConfigCover.js  | 26 +++++++++++++++++++++++++-
 src/components/CoverImage.css  | 24 ++++++++++++++++++++----
 src/components/CoverImage.js   |  6 ++++--
 5 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6b6bdd5..a7512df 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,7 @@
     />
     <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">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
 
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css
index d20adc8..2ebdd8f 100644
--- a/src/components/ConfigCover.css
+++ b/src/components/ConfigCover.css
@@ -60,6 +60,7 @@ input[type=number]{
 	margin-top: 10px;
 	box-shadow: 4px 4px #676683;
 	font-size: 18px;
+	padding:6px;
 
 }
 
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index 573712d..efa4c9b 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -14,7 +14,8 @@ const defaultSettings = {
 	foregroundColor: "#ffffff",
 	textColor: "#676683",
 	opacity: 1,
-	author: 'Rutik Wankhade'
+	author: 'Rutik Wankhade',
+	icon: 'react'
 };
 
 class ConfigCover extends React.Component {
@@ -121,6 +122,29 @@ class ConfigCover extends React.Component {
 						<option>sun</option>
 					</select>
 
+						<label>Dev Icon</label>
+						<select onChange={(e) => this.setState({ icon: e.target.value })} className="form-control" value={this.state.icon}>
+							<option>None</option>
+							<option>javascript</option>
+							<option>react</option>
+							<option>angularjs</option>
+							<option>vuejs</option>
+							<option>typescript</option>
+							<option>nodejs</option>
+							<option>mongodb</option>
+							<option>docker</option>
+							<option>html5</option>
+							<option>css3</option>
+							<option>sass</option>
+							<option>git</option>
+							<option>github</option>
+							<option>visualstudio</option>
+							<option>cplusplus</option>
+							<option>java</option>
+							<option>android</option>
+						</select>
+					
+
 					<div className="d-flex flex-row mt-2">
 						<label>Download As</label>
 						<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md ml-2" value={this.state.download}>
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index d52d5de..a291b98 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -21,7 +21,8 @@
    padding:50px;
    font-size:35px;
    font-weight: 600;
-   border:none;   
+   border:none;  
+   vertical-align: middle; 
 }
 
 .card{
@@ -32,15 +33,24 @@
     margin:10px;
     /* border:1px solid #676683; */
 }
-
+i{
+    font-size: 32px;
+    float:left;
+    margin-left:2vw;
+}
 .author{
+    float:right;
+    margin-right:3vw;
+}
+.meta{
     float:bottom;
     background-color: #676683;
     color:#ffffff;
-    height:40px;
+    height:42px;
     padding :4px;
-    text-align:center;
     font-weight: 500;
+    vertical-align: middle;
+    
 }
 
 h1{
@@ -71,5 +81,11 @@ button{
         padding:2.5vw 3vw 2.5vw 3vw;
         font-size: 1.2rem;
     }
+    
+    .meta{
+        height:5vh;
+        font-size: 2vh;
+    }
+    i{font-size:3.5vh;}
    
 }
\ No newline at end of file
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index b2130e3..3261d23 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -17,7 +17,7 @@ class CoverImage extends React.Component {
 	}
 
 	render() {
-		const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author } = this.props;
+		const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author,icon } = this.props;
 		const styleToApply = {
 			borderTop: `${borderSize}px ${borderType} ${borderColor}`,
 			backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
@@ -33,7 +33,9 @@ class CoverImage extends React.Component {
 
 					</div>
 				</div>
-				<div className="author" style={{ backgroundColor: borderColor }}>A blog by {author}</div>
+				<div className="meta" style={{ backgroundColor: borderColor }}>
+					<i className={`devicon-${icon}-plain icon`}></i>
+					<span className="author">A blog by  ⚡ {author}</span></div>
 			</div>
 		);
 	}