Merge pull request #53 from the-collab-lab/km-refactor-header

Refactored header, fixed mobile navigation and added background image for main section
the-collab-lab · Mar 31, 2024 · 6f1a9c1 · 6f1a9c1
2 parents a065465 + b283fb0
commit 6f1a9c1
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 48 deletions.
diff --git a/public/img/SwiftShopBird.png b/public/img/SwiftShopBird.png
diff --git a/public/img/main-background-image.png b/public/img/main-background-image.png
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -4,31 +4,22 @@ import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/icons-material/Menu';
 import Container from '@mui/material/Container';
 import Button from '@mui/material/Button';
-import MenuItem from '@mui/material/MenuItem';
 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 RestoreIcon from '@mui/icons-material/Restore';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import ArchiveIcon from '@mui/icons-material/Archive';
+import HomeIcon from '@mui/icons-material/Home';
+import ChecklistIcon from '@mui/icons-material/Checklist';
+import InfoIcon from '@mui/icons-material/Info';
 import Paper from '@mui/material/Paper';
 
 export function NavBar() {
 	const { user } = useAuth();
-	const [anchorElNav, setAnchorElNav] = useState(null);
 
-	const handleCloseNavMenu = () => {
-		setAnchorElNav(null);
-	};
-
-	const [value, setValue] = React.useState('/');
+	const [value, setValue] = useState('/');
 
 	return (
 		<AppBar
@@ -84,26 +75,17 @@ export function NavBar() {
 					{/* nav links for larger screens */}
 					<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
 						<NavLink to="/" className="Nav-link">
-							<Button
-								onClick={handleCloseNavMenu}
-								sx={{ my: 2, color: 'white', display: 'block' }}
-							>
+							<Button sx={{ my: 2, color: 'white', display: 'block' }}>
 								Home
 							</Button>
 						</NavLink>
 						<NavLink to="/list" className="Nav-link">
-							<Button
-								onClick={handleCloseNavMenu}
-								sx={{ my: 2, color: 'white', display: 'block' }}
-							>
+							<Button sx={{ my: 2, color: 'white', display: 'block' }}>
 								List
 							</Button>
 						</NavLink>
 						<NavLink to="/manage-list" className="Nav-link">
-							<Button
-								onClick={handleCloseNavMenu}
-								sx={{ my: 2, color: 'white', display: 'block' }}
-							>
+							<Button sx={{ my: 2, color: 'white', display: 'block' }}>
 								Manage List
 							</Button>
 						</NavLink>
@@ -201,6 +183,9 @@ export function NavBar() {
 					bottom: 0,
 					left: 0,
 					right: 0,
+					zIndex: 1,
+					backgroundColor: '#003780',
+					color: '#fdeecd',
 				}}
 				elevation={3}
 			>
@@ -210,25 +195,32 @@ export function NavBar() {
 					onChange={(event, newValue) => {
 						setValue(newValue);
 					}}
-					sx={{ width: '100%' }}
+					sx={{
+						width: '100%',
+						backgroundColor: '#003780',
+						color: '#fdeecd',
+					}}
 				>
 					<BottomNavigationAction
 						label="Home"
-						icon={<RestoreIcon />}
+						icon={<HomeIcon fontSize="large" />}
 						component={NavLink}
 						to="/"
+						sx={{ color: '#fdeecd' }}
 					/>
 					<BottomNavigationAction
 						label="List"
-						icon={<FavoriteIcon />}
+						icon={<ChecklistIcon fontSize="large" />}
 						component={NavLink}
 						to="/list"
+						sx={{ color: '#fdeecd' }}
 					/>
 					<BottomNavigationAction
 						label="About"
-						icon={<ArchiveIcon />}
+						icon={<InfoIcon fontSize="large" />}
 						component={NavLink}
 						to="/manage-list"
+						sx={{ color: '#fdeecd' }}
 					/>
 				</BottomNavigation>
 			</Paper>

diff --git a/src/index.css b/src/index.css
@@ -55,10 +55,23 @@ html {
 }
 
 body {
-	background-color: var(--color-bg);
+	background-image: url('/img/main-background-image.png');
+	background-size: 65%;
+	background-position-y: top;
 	color: var(--color-text);
-	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
-		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+	font-family:
+		-apple-system,
+		BlinkMacSystemFont,
+		avenir next,
+		avenir,
+		segoe ui,
+		helvetica neue,
+		helvetica,
+		Ubuntu,
+		roboto,
+		noto,
+		arial,
+		sans-serif;
 	font-size: 1.8rem;
 	line-height: 1.4;
 	margin: 0;
@@ -75,7 +88,12 @@ code {
 	border-radius: 4px;
 	color: var(--color-text);
 	display: inline-block;
-	font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+	font-family:
+		Menlo,
+		Consolas,
+		Monaco,
+		Liberation Mono,
+		Lucida Console,
 		monospace;
 	font-size: 0.9em;
 	padding: 0.15em 0.15em;

diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -15,6 +15,10 @@
 
 .Layout > * {
 	padding-inline: min(5dvw, 3.2rem);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
 }
 
 .Layout-header {
@@ -24,33 +28,70 @@
 	padding: 0;
 	text-align: center;
 	margin: 0;
-	padding: 15rem;
-	background-color: #fdeecd;
+	padding: 1rem;
+	background-image: radial-gradient(#f8f9fa 0%, #fdeecd 60%);
 	color: #003780;
-	background-image: url('/public/img/header-img.png');
+	/* background-image: url('/public/img/header-img.png');
 	background-position: center;
 	background-size: 30%;
-	background-repeat: no-repeat;
+	background-repeat: no-repeat; */
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
 }
 
-/* .Layout-header > h1 {
-	margin: 0;
-	padding:100px;
-	background-color: #FDEECD;
-	color: #003780;
-	background-image:url("/public/img/header-img.png");
-	background-position: center;
-	background-size: 30%;
-	background-repeat: no-repeat;
+.Layout-header img {
+	width: 20%;
+}
 
-} */
+.Layout-header h1 {
+	display: flex;
+	flex-direction: column;
+}
+
+.swift-header {
+	font-family: 'Spectral', Georgia, 'Times New Roman', Times, serif;
+	font-weight: 700;
+	font-style: italic;
+	letter-spacing: 0.2rem;
+	font-size: 12rem;
+	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
+}
+
+.shop-header {
+	text-transform: uppercase;
+	font-family: 'Spectral', Georgia, 'Times New Roman', Times, serif;
+	font-weight: 400;
+	letter-spacing: 2rem;
+	font-size: 4rem;
+	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
+}
 
 .Layout-main {
 	margin: 0 auto;
 	padding-block: 0;
 	padding-block-end: 6.26rem;
 	width: min(72ch, 100%);
 }
+
+@media (600px < width < 900px) {
+	.Layout-header img {
+		width: 40%;
+	}
+}
+
+@media (width < 600px) {
+	.Layout-header img {
+		width: 45%;
+	}
+	.swift-header {
+		font-size: 6rem;
+	}
+	.shop-header {
+		font-size: 2rem;
+	}
+}
 /* 
 .Nav {
 	background-color: var(--color-bg);

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,4 +1,5 @@
 import { Outlet, NavLink } from 'react-router-dom';
+import SvgIcon from '@mui/material/SvgIcon';
 
 import './Layout.css';
 // import { auth } from '../api/config.js';
@@ -18,8 +19,36 @@ export function Layout() {
 
 	return (
 		<>
+			<head>
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+				<link
+					href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
+					rel="stylesheet"
+				/>
+			</head>
 			<div className="Layout">
-				<header className="Layout-header"></header>
+				<header className="Layout-header">
+					<img src="/img/SwiftShopBird.png" alt="" />
+					<h1>
+						<span className="swift-header">Swift</span>
+						<span className="shop-header">shop</span>
+					</h1>
+
+					{/* For use later
+					<svg viewBox="0 0 500 500" >
+						<path
+							id="curve"
+							d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97"
+							fill='transparent'
+						/>
+						<text width={500}>
+							<textPath xlinkHref="#curve" className='shop-header'>
+								shop
+							</textPath>
+						</text>
+					</svg> */}
+				</header>
 				<NavBar />
 				<main className="Layout-main">
 					<Outlet />