Added Icons to Navbar

Author: mohak852

src/components/Navbar/Navbar.css

@@ -13,7 +13,7 @@
     display: inline-block;
     color: #f2f2f2;
     text-align: center;
-    padding: 14px 16px;
+    padding: 20px 15px;
     text-decoration: none;
     font-size: 20px;
 }
@@ -23,7 +23,6 @@
     color: black;
     border-radius: 25px;
     border: #ddd;
-    margin-top: 10px;
     block-size: auto;
     display: inline;
 }
@@ -35,30 +34,29 @@
 .slack{
     display: inline-block;
     vertical-align:middle;
-    flex: 1;
     margin-top: 10px;
-    width: 90px;
-    height: 50px;
-    resizeMode: 'contain';
+    width: 60px;
+    height: 40px;
 }
 .youtube{
-  vertical-align:middle;
+    vertical-align:middle;
     margin-top: 10px;
     width: 70px;
     height: 50px;
-    resizeMode: 'contain';
+    display: inline-block;
 }
 .github{
     margin-top: 10px;
     vertical-align:middle;
-    width: 50px;
+    width: 60px;
     height: 50px;
-    resizeMode: 'contain';
+    display: inline-block;
 }
 .twitter{
     margin-top: 10px;
-    width: 50px;
+    width: 60px;
     vertical-align:middle;
     height: 50px;
-    resizeMode: 'contain';
+    fill: white;
+    display: inline-block;
 } 

src/components/Navbar/Navbar.jsx

@@ -8,14 +8,22 @@ 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">
                 <img src={slack} className="slack"/>
-                <a href="https://join.slack.com/t/firstcontributors/shared_invite/enQtNjkxNzQwNzA2MTMwLTVhMWJjNjg2ODRlNWZhNjIzYjgwNDIyZWYwZjhjYTQ4OTBjMWM0MmFhZDUxNzBiYzczMGNiYzcxNjkzZDZlMDM"  target="_blank" rel="noopener noreferrer">Slack</a>
+                <span>Slack</span>
+                </a>
+                <a href="https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ" target="_blank" rel="noopener noreferrer">
                 <img  src={youtube} className="youtube"/>
-                <a href="https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ" target="_blank" rel="noopener noreferrer">YouTube</a>
+                <span>Youtube</span>    
+                </a>
+                <a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">
                 <img   src={twitter} className="twitter"/>
-                <a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">Twitter</a>
+                <span>Twitter</span>
+                </a>
+                <a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">
                 <img  src={github} className="github"/>
-                <a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">GitHub</a>
+                Github
+                </a>
             </div>
         );
     }