Merge pull request #84 from the-collab-lab/km-design-navbar

Navbar Design
the-collab-lab · Apr 6, 2024 · 29bbb0c · 29bbb0c
2 parents 3698bec + ebb9ac4
commit 29bbb0c
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 88 deletions.
diff --git a/public/svg-icons.jsx b/public/svg-icons.jsx
@@ -0,0 +1,19 @@
+export function LogoIcon() {
+	return (
+		<svg
+			height="20px"
+			width="20px"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 290.873 290.873"
+			xmlSpace="preserve"
+			fill="currentColor"
+			transform="scale(-1 1)"
+			stroke="#fdeecd"
+		>
+			<path d="M44.268 139.532L44.268 79.35 44.268 41.049 93.507 90.294z" />
+			<path d="M0 73.384L32.334 41.049 32.334 73.384z" />
+			<path d="M149.583 249.824L113.508 213.748 149.583 181.843z" />
+			<path d="M103.066 202.799L47.216 153.823 160.968 48.77 290.873 48.77z" />
+		</svg>
+	);
+}
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -30,9 +30,20 @@ export const SignInButton = () => (
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
+	<Button
+		type="button"
+		onClick={() => auth.signOut()}
+		sx={{
+			color: '#fdeecd',
+			backgroundColor: '#003780',
+			border: '1px solid #fdeecd',
+			fontSize: '1rem',
+			padding: '2px',
+			margin: '0 5px',
+		}}
+	>
 		Sign Out
-	</button>
+	</Button>
 );
 
 /**

diff --git a/src/components/NavBar.css b/src/components/NavBar.css
@@ -0,0 +1,17 @@
+.nav-link {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-decoration: none;
+}
+
+.nav-link .nav-button {
+	color: #fdeecd;
+	display: 'block';
+	font-size: 1.2rem;
+	letter-spacing: 1px;
+}
+
+.nav-link .nav-button:hover {
+	text-decoration: underline;
+}
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
+import './NavBar.css';
+import { LogoIcon } from '../../public/svg-icons.jsx';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import Button from '@mui/material/Button';
 import { NavLink } from 'react-router-dom';
-import SvgIcon from '@mui/material/SvgIcon';
 import BottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import HomeIcon from '@mui/icons-material/Home';
@@ -29,119 +30,76 @@ export function NavBar() {
 	return (
 		<AppBar
 			position="static"
-			sx={{ backgroundColor: '#003780', color: '#fdeecd', mb: '20px' }}
+			sx={{
+				backgroundColor: (theme) =>
+					theme.palette.mode === 'dark' ? '#003780' : '#003780',
+				border: (theme) =>
+					theme.palette.mode === 'dark' ? '1px solid #f8f9fa' : undefined,
+				color: '#fdeecd',
+				mb: '20px',
+			}}
 		>
 			<Container maxWidth="xl" className="nav-bar">
 				<Toolbar variant="dense" disableGutters>
 					{/*Logo and app name for medium or larger screens*/}
-					<SvgIcon
-						sx={{
-							fontSize: '20px',
-							display: { xs: 'none', md: 'flex' },
-							mr: 1,
-						}}
-					>
-						<svg
-							height="200px"
-							width="200px"
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 290.87 290.87"
-							xmlSpace="preserve"
-							fill="#000"
-							transform="scale(-1 1)"
-							stroke="#000"
-							strokeWidth={0.00290873}
-						>
-							<g fill="#010002">
-								<path d="M44.268 139.532L44.268 79.35 44.268 41.049 93.507 90.294z" />
-								<path d="M0 73.384L32.334 41.049 32.334 73.384z" />
-								<path d="M149.583 249.824L113.508 213.748 149.583 181.843z" />
-								<path d="M103.066 202.799L47.216 153.823 160.968 48.77 290.873 48.77z" />
-							</g>
-						</svg>
-					</SvgIcon>
+					<LogoIcon />
 					<Typography
 						variant="h6"
 						noWrap
 						component="a"
-						href="#app-bar-with-responsive-menu"
+						href="/"
 						sx={{
 							mr: 2,
+							ml: 1,
 							display: { xs: 'none', md: 'flex' },
-							fontFamily: 'monospace',
+							fontFamily: 'Newsreader',
 							fontWeight: 700,
+							fontStyle: 'italic',
 							letterSpacing: '.3rem',
 							color: '#FDEECD',
 							textDecoration: 'none',
 						}}
+						className="nav-app-name"
 					>
-						SwiftShop
+						Swift Shop
 					</Typography>
 					{user && (
 						<>
 							{/* nav links for larger screens */}
 							<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-								<NavLink to="/" className="Nav-link">
-									<Button sx={{ my: 2, color: '#FDEECD', display: 'block' }}>
-										Home
-									</Button>
+								<NavLink to="/" className="nav-link">
+									<Button className="nav-button">Home</Button>
 								</NavLink>
-								<NavLink to="/list" className="Nav-link">
-									<Button sx={{ my: 2, color: '#FDEECD', display: 'block' }}>
-										List
-									</Button>
+								<NavLink to="/list" className="nav-link">
+									<Button className="nav-button">List</Button>
 								</NavLink>
-								<NavLink to="/about" className="Nav-link">
-									<Button sx={{ my: 2, color: '#FDEECD', display: 'block' }}>
-										About
-									</Button>
+								<NavLink to="/about" className="nav-link">
+									<Button className="nav-button">About</Button>
 								</NavLink>
 							</Box>
 
 							{/* app logo for small screens */}
-							<SvgIcon
-								sx={{
-									fontSize: '20px',
-									display: { xs: 'flex', md: 'none' },
-									mr: 1,
-								}}
-							>
-								<svg
-									height="200px"
-									width="200px"
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 290.87 290.87"
-									xmlSpace="preserve"
-									fill="#000"
-									transform="scale(-1 1)"
-									stroke="#000"
-									strokeWidth={0.00290873}
-								>
-									<g fill="#010002">
-										<path d="M44.268 139.532L44.268 79.35 44.268 41.049 93.507 90.294z" />
-										<path d="M0 73.384L32.334 41.049 32.334 73.384z" />
-										<path d="M149.583 249.824L113.508 213.748 149.583 181.843z" />
-										<path d="M103.066 202.799L47.216 153.823 160.968 48.77 290.873 48.77z" />
-									</g>
-								</svg>
-							</SvgIcon>
+
 							<Typography
 								variant="h5"
 								noWrap
 								component="a"
-								href="#app-bar-with-responsive-menu"
+								href="/"
 								sx={{
 									mr: 2,
+									ml: 1,
 									display: { xs: 'flex', md: 'none' },
 									flexGrow: 1,
-									fontFamily: 'monospace',
+									fontFamily: 'Newsreader',
+									fontStyle: 'italic',
 									fontWeight: 700,
 									letterSpacing: '.3rem',
 									color: 'inherit',
 									textDecoration: 'none',
+									fontSize: '1.2rem',
 								}}
 							>
-								SwiftShop
+								Swift Shop
 							</Typography>
 							<Box
 								sx={{
@@ -168,8 +126,8 @@ export function NavBar() {
 						}}
 					>
 						{!!user && (
-							<Typography>
-								Signed in as {user.displayName} <SignOutButton />
+							<Typography sx={{ fontSize: '1.2rem' }}>
+								Signed in as <b>{user.displayName}</b> <SignOutButton />
 							</Typography>
 						)}
 					</Box>
@@ -178,6 +136,7 @@ export function NavBar() {
 						color="inherit"
 						aria-label="toggle theme"
 						edge="end"
+						sx={{ display: { xs: 'none', sm: 'none', md: 'flex' } }}
 					>
 						{mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
 					</IconButton>

diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -25,9 +25,8 @@
 .Layout-header {
 	background-color: var(--color-bg);
 	text-align: center;
-	margin: 0.2rem;
 	/* padding: 0.2rem; */
-	background-image: radial-gradient(#f8f9fa 0%, #fdeecd 60%);
+	background: radial-gradient(#f8f9fa 0%, #fdeecd 60%);
 	color: #003780;
 	display: flex;
 	flex-direction: row;
@@ -47,6 +46,7 @@
 	font-size: 7rem;
 	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
 	margin: 0;
+	z-index: 1;
 }
 
 .shop-header {
@@ -58,6 +58,7 @@
 	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
 	text-align: center;
 	margin: 0;
+	z-index: 1;
 }
 
 .Layout-main {

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,22 +1,52 @@
 import { Outlet } from 'react-router-dom';
-import SvgIcon from '@mui/material/SvgIcon';
-
+import { useThemeContext } from '../components/ThemeContext';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import { IconButton, Grid } from '@mui/material';
 import './Layout.css';
-// import { auth } from '../api/config.js';
-// import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
 import { NavBar } from '../components';
 
 export function Layout() {
+	const { toggleColorMode, mode } = useThemeContext();
 	return (
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
-					<img src="/img/SwiftShopBird.png" alt="" />
-					<h1>
-						<p className="swift-header">Swift</p>
-						<p className="shop-header">shop</p>
-					</h1>
-
+					<Grid container>
+						<Grid item xs={1}>
+							{' '}
+						</Grid>
+						<Grid
+							item
+							xs={10}
+							sx={{ display: 'flex', justifyContent: 'center' }}
+						>
+							<img src="/img/SwiftShopBird.png" alt="" />
+							<h1>
+								<p className="swift-header">Swift</p>
+								<p className="shop-header">shop</p>
+							</h1>
+						</Grid>
+						<Grid
+							item
+							xs={1}
+							sx={{ display: 'flex', justifyContent: 'center' }}
+						>
+							<IconButton
+								onClick={toggleColorMode}
+								color="inherit"
+								aria-label="toggle theme"
+								edge="end"
+								sx={{
+									display: { sm: 'flex', md: 'none' },
+									alignSelf: 'start',
+									justifySelf: 'end',
+								}}
+							>
+								{mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+							</IconButton>
+						</Grid>
+					</Grid>
 					{/* For use later
 					<svg viewBox="0 0 500 500" >
 						<path