icons implemented

front-end/src/Header.css

@@ -30,18 +30,17 @@
   color: white;
 }
 
-.logo {
-  display: inline-block;
-}
-
 ul.nav-links {
   list-style: none;
-  padding: 0; /* Remove default padding */
+  padding: 5px 30px 5px 10px; /* Remove default padding */
   margin: 0; /* Remove default margin */
+  display: flex;
+  text-align: center;
 }
-.nav-item {
+
+li.nav-item {
   display: inline-block;
-  padding: 10px 15px;
+  padding: 5px 10px 0px 10px;
 }
 .nav-item a {
   color: white;
@@ -52,9 +51,14 @@ ul.nav-links {
   color: gray;
 }
 
-.logo img {
-  width: 175px;
-  vertical-align: middle;
+.icons_logo {
+  height: 70px;
+  padding: 0px 10px 0px 15px
+}
+
+.icons {
+  height: 45px;
+  padding: 10px 15px 0px 10px
 }
 
 body {

front-end/src/Header.js

@@ -1,5 +1,9 @@
 import './Header.css'
 import { Link } from 'react-router-dom'
+import logo from './Logo.png'
+import matchesicon from './MatchesIcon.png'
+import chatsicon from './ChatsIcon.png'
+import profileicon from './ProfileIcon.png'
 
 /**
  * A React component that is used for the header displayed at the top of every page of the site.
@@ -11,14 +15,17 @@ const Header = props => {
     <header className="Header-header">
       <nav className="Header-navbar">
         <ul className="nav-links">
+          <li className ='nav-item'>
+            <img className='icons_logo'src={logo}/>
+          </li>
           <li className="nav-item">
-            <Link to="/matches">Matches</Link>
+            <Link to="/matches"><img className='icons'src={matchesicon}/></Link>
           </li>
           <li className="nav-item">
-            <Link to="/chatlist">Chats</Link>
+            <Link to="/chatlist"><img className='icons'src={chatsicon}/></Link>
           </li>
           <li className="nav-item">
-            <Link to="/profile">Profile</Link>
+            <Link to="/profile"><img className='icons'src={profileicon}/></Link>
           </li>
         </ul>
       </nav>