Merge pull request #49 from the-collab-lab/it-style-navbar

Add Style to Navbar and Page Not Found

src/components/NotFoundPage.css

@@ -0,0 +1,31 @@
+.not-found-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+	width: 100%;
+}
+
+.not-found-heading {
+	font-size: 4.5em;
+	margin-bottom: 0;
+}
+
+.not-found-page-nav-link {
+	--color-text: var(--color-cobalt-blue);
+	color: var(--color-text);
+	font-size: 1.4em;
+	flex: 0 1 auto;
+	line-height: 1;
+	padding: 0.8rem;
+	text-align: center;
+	text-underline-offset: 0.1em;
+	text-decoration: none;
+	opacity: 0.7;
+}
+
+.not-found-page-nav-link:hover {
+	opacity: 1;
+	text-decoration: underline;
+}

src/components/NotFoundPage.jsx

@@ -1,12 +1,22 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
+import './NotFoundPage.css';
 
 export default function NotFoundPage() {
 	return (
-		<div>
-			<h1>404</h1>
+		<div className="not-found-container">
+			<h1 className="not-found-heading">404</h1>
 			<p>Oops! The page you are looking for does not exist.</p>
-			<Link to="/">Go to Home Page</Link>
+			<NavLink to="/" className="not-found-page-nav-link">
+				<div>
+					<FontAwesomeIcon icon={faHouse} className="nav-icon" />
+					<div>Go to Home Page</div>
+				</div>
+			</NavLink>
 		</div>
 	);
 }

src/index.jsx

@@ -1,6 +1,5 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Theme } from '@radix-ui/themes';
 import { App } from './App';
 
 import '@radix-ui/themes/styles.css';

src/views/Layout.css

@@ -41,7 +41,7 @@
 	align-items: center;
 	justify-content: flex-end;
 	position: fixed;
-	bottom: 6.18rem;
+	bottom: 8.18em;
 	left: 0;
 	padding: 0.4em 0.4em;
 }
@@ -96,17 +96,23 @@ path {
 
 .Nav-link {
 	--color-text: var(--color-accent);
-
 	color: var(--color-text);
-	font-size: 1.4em;
+	font-size: 0.85em;
 	flex: 0 1 auto;
 	line-height: 1;
 	padding: 0.8rem;
 	text-align: center;
 	text-underline-offset: 0.1em;
+	text-decoration: none;
 }
 
 .Nav-link.active {
-	text-decoration-thickness: 0.22em;
-	text-underline-offset: 0.1em;
+	text-decoration: underline;
+	text-decoration-thickness: 0.2em;
+	text-underline-offset: 0.2em;
+}
+
+.nav-icon {
+	font-size: 1.5em;
+	margin-bottom: 0.2em;
 }

src/views/Layout.jsx

@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSquareGithub } from '@fortawesome/free-brands-svg-icons';
 import StackedLogo from '../assets/StackedLogo.jsx';
 import CollabLabLogo from '../assets/CollabLabLogo.jsx';
+import { faHouse, faList, faUserPen } from '@fortawesome/free-solid-svg-icons';
 
 export function Layout() {
 	const { user } = useAuth();
@@ -44,13 +45,24 @@ export function Layout() {
 				<nav className="Nav">
 					<div className="Nav-container">
 						<NavLink to="/" className="Nav-link">
-							Home
+							<div>
+								<FontAwesomeIcon icon={faHouse} className="nav-icon" />
+								<div>Home</div>
+							</div>
 						</NavLink>
+
 						<NavLink to="/list" className="Nav-link">
-							List
+							<div>
+								<FontAwesomeIcon icon={faList} className="nav-icon" />
+								<div>List</div>
+							</div>
 						</NavLink>
+
 						<NavLink to="/manage-list" className="Nav-link">
-							Manage List
+							<div>
+								<FontAwesomeIcon icon={faUserPen} className="nav-icon" />
+								<div>Manage </div>
+							</div>
 						</NavLink>
 					</div>
 				</nav>