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

Navbar Design

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>
+ );
+}

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>
 );
 
 /**

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;
+}

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>

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 {

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