Merge pull request #120 from mohak852/source

Added Icons in Navbar

Author: Roshanjossey

src/components/Navbar/Navbar.css

@@ -13,17 +13,29 @@
     display: inline-block;
     color: #f2f2f2;
     text-align: center;
-    padding: 14px 16px;
+    padding: 20px 15px;
     text-decoration: none;
     font-size: 20px;
 }
 
 .topnav a:hover {
     background-color: #ddd;
     color: black;
+    border-radius: 25px;
+    border: #ddd;
+    block-size: auto;
+    display: inline;
 }
 
 .topnav a.active {
     background-color: #4CAF50;
     color: white;
 }
+
+.logo{
+    margin-top: 10px;
+    width: 60px;
+    vertical-align:middle;
+    height: 50px;
+    display: inline-block;
+}

src/components/Navbar/Navbar.jsx

@@ -1,14 +1,29 @@
 import React, { Component } from 'react';
 import './Navbar.css';
-
+import slack from './slack.svg';
+import youtube from './youtube.svg';
+import twitter  from './twitter.svg';
+import github from './github.svg';
 class Navbar extends Component {
     render() {
         return (
             <div className="topnav">
-                <a href="https://join.slack.com/t/firstcontributors/shared_invite/enQtNjkxNzQwNzA2MTMwLTVhMWJjNjg2ODRlNWZhNjIzYjgwNDIyZWYwZjhjYTQ4OTBjMWM0MmFhZDUxNzBiYzczMGNiYzcxNjkzZDZlMDM"  target="_blank" rel="noopener noreferrer">Slack</a>
-                <a href="https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ" target="_blank" rel="noopener noreferrer">YouTube</a>
-                <a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">Twitter</a>
-                <a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://join.slack.com/t/firstcontributors/shared_invite/enQtNjkxNzQwNzA2MTMwLTVhMWJjNjg2ODRlNWZhNjIzYjgwNDIyZWYwZjhjYTQ4OTBjMWM0MmFhZDUxNzBiYzczMGNiYzcxNjkzZDZlMDM"  target="_blank" rel="noopener noreferrer">
+                <img src={slack} className="logo"/>
+                <span>Slack</span>
+                </a>
+                <a href="https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ" target="_blank" rel="noopener noreferrer">
+                <img  src={youtube} className="logo"/>
+                <span>Youtube</span>    
+                </a>
+                <a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">
+                <img   src={twitter} className="logo"/>
+                <span>Twitter</span>
+                </a>
+                <a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">
+                <img  src={github} className="logo"/>
+                Github
+                </a>
             </div>
         );
     }