Merge pull request #167 from agiledev-students-spring2024/compat

icons implemented
agiledev-students-spring2024 · Apr 29, 2024 · 83b3910 · 83b3910
2 parents 3c5d05b + 566fc07
commit 83b3910
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/front-end/src/Header.css b/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 {

diff --git a/front-end/src/Header.js b/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>