minor UI improvent

frontend/src/App.css

@@ -42,7 +42,7 @@ nav {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 95px;
+  width: 70px;
   height: 50px;
   position: relative;
   font-size: 1em;
@@ -128,7 +128,7 @@ sup {
 /* Media Queries for Mobile Devices */
 @media (max-width: 768px) {
   .nav-link {
-    width: 80px;
+    width: 70px;
     padding: 10px;
   }
 }

frontend/src/App.js

@@ -14,7 +14,10 @@ import {
   faCaretDown,
   faCaretLeft,
   faCaretRight,
-  faMagnifyingGlass
+  faMagnifyingGlass,
+  faHome,
+  faFilm,
+  faTv,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import HomePage from "./pages/homePage";
@@ -37,7 +40,10 @@ library.add(
   faCaretDown,
   faCaretLeft,
   faCaretRight,
-  faMagnifyingGlass
+  faMagnifyingGlass,
+  faHome,
+  faFilm,
+  faTv
 );
 
 function Navbar() {
@@ -82,7 +88,7 @@ function Navbar() {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
-            Home
+            <FontAwesomeIcon icon="fa-solid fa-house" size="lg" />
           </Link>
         </li>
         <li>
@@ -94,7 +100,7 @@ function Navbar() {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
-            <FontAwesomeIcon icon="fa-solid fa-magnifying-glass" size="lg"/>
+            <FontAwesomeIcon icon="fa-solid fa-magnifying-glass" size="lg" />
           </Link>
         </li>
         <li>
@@ -106,7 +112,7 @@ function Navbar() {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
-            Films
+            <FontAwesomeIcon icon="fa-solid fa-film" size="lg" />
           </Link>
         </li>
         <li>
@@ -118,7 +124,7 @@ function Navbar() {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
-            Tv Shows
+            <FontAwesomeIcon icon="fa-solid fa-tv" size="lg" />
           </Link>
         </li>
         <li>

frontend/src/pages/filmsPage.css

@@ -73,6 +73,6 @@
       opacity: 1;
   }
 }
-.film-player-container {
+.films-page-container {
   animation: pageLoad 1s ease;
 }

frontend/src/pages/tvShowsPage.css

@@ -25,7 +25,7 @@
       opacity: 1;
   }
 }
-.tvshows-page {
+.tvshows-page-container {
   animation: pageLoad 1s ease;
 }
 

frontend/src/pages/tvshowsPage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import apiClient from '../api/apiClient';
 import { useTvShowsContext } from '../context/TvShowsContext';
-import './tvShowsPage.css';
+import './tvshowsPage.css';
 import TvShowCard from '../components/tv/card';
 
 const TVSHOWS_PER_PAGE = 10;