Header Design & Carousel Base + About page (#64)

* moving navbar to header and getting background color

* working on the unauth header

* getting the hamburger to show on the small screen and the links to be correct color

* spacing the navigation links on expanded view

* fixing the hamburger being bumped down when trying mobile

* getting the brand name to be at the top like design

* getting the hamburger and title on same page when on iphone SE

* making sure the navbar toggler icon can be seen

* making sure nav bar close on mobile clicks

* Bb/about page carousel design (#66)

* adding the borders and positioning the text areas on the page

* figuring out some spacing on thank you & creators with theme-colors set

* getting the lin icons to space evenly and the same on all of them

* fixing the margins of the page for the whole about page

* getting the base of the carousel with image working

* card title on carousel card

* when merged the about page into header branch all the buttons broke were just beige not sure why but fixed

* changing color of svg icons

* the creators and thank you boxes are equal size now

* fixed media queries for mobile size to make sure button looked okay

* switch button color and bg for clearer on small screens and more consistency

* moving sign out button outside of menu hamburger

* fixing a change to the layout width didn't see got changed

* added about to navbar and removed button like the design

* fix button size

src/api/useAuth.tsx

@@ -22,6 +22,7 @@ export const SignInButton = ({ isSignIn = true }: SignInButtonProps) => {
 
 	return (
 		<Button
+			className="custom-button"
 			type="button"
 			onClick={() => {
 				signInWithPopup(auth, new GoogleAuthProvider())
@@ -37,7 +38,6 @@ export const SignInButton = ({ isSignIn = true }: SignInButtonProps) => {
 						);
 					});
 			}}
-			className="m-2"
 		>
 			{isSignIn ? "Sign In" : "Sign Up"}
 		</Button>
@@ -69,7 +69,6 @@ export const SignOutButton = () => {
 						);
 					});
 			}}
-			className="m-2"
 		>
 			Sign Out
 		</Button>

src/components/CreateList.tsx

@@ -64,7 +64,11 @@ export function CreateList({ user, setListPath }: Props) {
 					/>
 					<br />
 					<div className="custom-button-wrapper">
-						<Button aria-label="Create new shopping list" type="submit">
+						<Button
+							className="custom-button"
+							aria-label="Create new shopping list"
+							type="submit"
+						>
 							Create List
 						</Button>
 					</div>

src/components/FilterListInput.tsx

@@ -36,7 +36,9 @@ export function FilterListInput({
 					aria-label="Filter items in the list"
 					placeholder="Search items..."
 				/>
-				<Button onClick={handleClear}>x</Button>
+				<Button className="custom-button" onClick={handleClear}>
+					x
+				</Button>
 			</InputGroup>
 		</Form>
 	);

src/components/ListItem.tsx

@@ -134,7 +134,9 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 			{item.name}{" "}
 			<span>
 				{getUrgencyStatus(item)}
-				<Button onClick={() => deleteItemHandler()}>Delete Item</Button>
+				<Button className="custom-button" onClick={() => deleteItemHandler()}>
+					Delete Item
+				</Button>
 			</span>
 		</div>
 	);

src/components/NavBar.scss

@@ -1,35 +1,56 @@
-.Nav {
-	background-color: var(--color-bg);
-	border-top: 1px solid var(--color-border);
-	bottom: 0;
-	display: flex;
-	flex-direction: row;
-	padding-bottom: max(env(safe-area-inset-bottom), 1rem);
-	padding-top: 1rem;
-	place-content: center;
-	position: fixed;
-	width: 100%;
-
-	&__container {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-evenly;
-		width: min(72ch, 100%);
+@import "../styles/variables.scss";
+
+.navbar {
+	.navbar-brand {
+		font-size: 3.5rem !important;
+
+		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+
+		@media (max-width: 430px) {
+			font-size: 3rem !important;
+		}
+		@media (max-width: 375px) {
+			font-size: 2.5rem !important;
+		}
 	}
 
-	&__link {
-		--color-text: var(--color-accent);
-		color: var(--color-text);
-		font-size: 1.4em;
-		flex: 0 1 auto;
+	.nav-link {
+		color: $primary-beige;
+		font-size: 1.5rem;
 		line-height: 1;
-		padding: 0.8rem;
-		text-align: center;
-		text-underline-offset: 0.1em;
 
 		&.active {
-			text-decoration-thickness: 0.22em;
-			text-underline-offset: 0.1em;
+			text-decoration: underline;
+			color: $primary-beige !important;
+			text-underline-offset: 0.3em;
+		}
+
+		&:hover {
+			color: $secondary-blue;
 		}
 	}
+
+	.navbar .navbar-toggler {
+		background-color: $primary-beige;
+	}
+}
+
+.navbar button {
+	background-color: $primary-beige;
+	color: $secondary-blue;
+	font-weight: bold;
+	border: none;
+
+	@media (hover: hover) {
+		background-color: $secondary-blue;
+		color: $primary-beige;
+	}
+
+	@media (min-width: 431px) {
+		font-size: 1.5rem;
+		text-align: center;
+		border: none;
+		padding: 0.5rem;
+		width: 11rem;
+	}
 }

src/components/SingleList.tsx

@@ -19,7 +19,9 @@ export function SingleList({ name, path, setListPath }: Props) {
 
 	return (
 		<li className="SingleList">
-			<Button onClick={handleClick}>{name}</Button>
+			<Button className="custom-button" onClick={handleClick}>
+				{name}
+			</Button>
 		</li>
 	);
 }

src/components/authenticated/AuthenticatedNavBar.tsx

@@ -9,21 +9,40 @@ import "../NavBar.scss";
 
 export function AuthenticatedNavBar() {
 	return (
-		<Navbar expand="lg" fixed="bottom" className="Nav">
-			<Container className="d-flex justify-content-around Nav_container">
+		<Navbar
+			collapseOnSelect
+			expand="md"
+			className="bg-secondary rounded-bottom-3 pt-0"
+		>
+			<Container className="align-items-center justify-content-evenly">
+				<Navbar.Brand className="bg-primary rounded-bottom-3 text-center mb-3 px-3 text-dark fw-bolder shadow">
+					GrocerEase
+				</Navbar.Brand>
+				<Navbar.Toggle aria-controls="basic-navbar-nav" />
+				<Navbar.Collapse>
+					<Nav className="flex-grow-1 justify-content-evenly align-items-center fw-bolder p-1 text-center">
+						<Nav.Link as={NavLink} to="/" aria-label="Home" eventKey={"1"}>
+							Home
+						</Nav.Link>
+						<Nav.Link
+							as={NavLink}
+							to="/manage-list"
+							aria-label="Manage List"
+							eventKey={"2"}
+						>
+							Manage List
+						</Nav.Link>
+						<Nav.Link
+							as={NavLink}
+							to="/about"
+							aria-label="About"
+							eventKey={"3"}
+						>
+							About
+						</Nav.Link>
+					</Nav>
+				</Navbar.Collapse>
 				<SignOutButton />
-				<Nav.Link as={NavLink} to="/" className="Nav__link" aria-label="Home">
-					Home
-				</Nav.Link>
-
-				<Nav.Link
-					as={NavLink}
-					to="/manage-list"
-					className="Nav__link"
-					aria-label="Manage List"
-				>
-					Manage List
-				</Nav.Link>
 			</Container>
 		</Navbar>
 	);

src/components/forms/AddItemForm.tsx

@@ -180,12 +180,18 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 						Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
 					</label>
 				</fieldset>
-				<Button type="submit" aria-label="Add item to shopping list">
+				<Button
+					className="custom-button"
+					type="submit"
+					aria-label="Add item to shopping list"
+				>
 					Submit Item
 				</Button>
 			</Form>
 			<h4>Let&apos;s go look at your list!</h4>
-			<Button onClick={navigateToListPage}>{"View List"}</Button>
+			<Button className="custom-button" onClick={navigateToListPage}>
+				{"View List"}
+			</Button>
 		</section>
 	);
 }

src/components/forms/ItemQuantityForm.tsx

@@ -57,11 +57,17 @@ export function ItemQuantityForm({
 			/>
 			{edit ? (
 				<span>
-					<Button onClick={updateItemQuantity}>Save!</Button>{" "}
-					<Button onClick={toggleEdit}>Cancel!</Button>
+					<Button className="custom-button" onClick={updateItemQuantity}>
+						Save!
+					</Button>{" "}
+					<Button className="custom-button" onClick={toggleEdit}>
+						Cancel!
+					</Button>
 				</span>
 			) : (
-				<Button onClick={toggleEdit}>Edit!</Button>
+				<Button className="custom-button" onClick={toggleEdit}>
+					Edit!
+				</Button>
 			)}
 		</>
 	);

src/components/forms/ShareListForm.tsx

@@ -57,7 +57,11 @@ const ShareListForm = ({ listPath }: Props) => {
 					aria-label="Enter the user email address to share list"
 					aria-required
 				/>
-				<Button type="submit" aria-label="submits form to share shopping list">
+				<Button
+					className="custom-button"
+					type="submit"
+					aria-label="submits form to share shopping list"
+				>
 					Invite User
 				</Button>
 			</InputGroup>

src/components/unauthenticated/UnauthenticatedNavBar.tsx

@@ -8,19 +8,31 @@ import "../NavBar.scss";
 
 export function UnauthenticatedNavBar() {
 	return (
-		<Navbar expand="lg" fixed="bottom" className="Nav">
-			<Container className="d-flex justify-content-around Nav-container">
-				<Nav.Link as={NavLink} to="/" className="Nav-link" aria-label="Home">
-					Home
-				</Nav.Link>
-				<Nav.Link
-					as={NavLink}
-					to="/about"
-					className="Nav-link"
-					aria-label="About"
-				>
-					About
-				</Nav.Link>
+		<Navbar
+			collapseOnSelect
+			expand="md"
+			className="bg-secondary rounded-bottom-3 pt-0"
+		>
+			<Container>
+				<Navbar.Brand className="bg-primary rounded-bottom-3 text-center mb-3 px-3 text-dark fw-bolder shadow">
+					GrocerEase
+				</Navbar.Brand>
+				<Navbar.Toggle aria-controls="basic-navbar-nav" />
+				<Navbar.Collapse id="basic-navbar-nav">
+					<Nav className="flex-grow-1 justify-content-evenly align-items-center fw-bolder p-1 text-center">
+						<Nav.Link as={NavLink} to="/" aria-label="Home" eventKey={"1"}>
+							Home
+						</Nav.Link>
+						<Nav.Link
+							as={NavLink}
+							to="/about"
+							aria-label="About"
+							eventKey={"2"}
+						>
+							About
+						</Nav.Link>
+					</Nav>
+				</Navbar.Collapse>
 			</Container>
 		</Navbar>
 	);

src/declarations.d.ts

@@ -0,0 +1,30 @@
+// Declare modules for image types
+declare module "*.png" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.jpg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.jpeg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.gif" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.svg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.webp" {
+	const value: string;
+	export default value;
+}

src/index.tsx

@@ -3,10 +3,8 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
 import { App } from "./App";
 
-import "bootstrap/dist/css/bootstrap.min.css";
 import "./styles/global.scss";
 
-
 const root = createRoot(document.getElementById("root") as HTMLElement);
 root.render(
 	<StrictMode>

src/styles/_variables.scss

@@ -2,4 +2,5 @@
 $primary-beige: #f1e6cc;
 $primary-blue: #3f6476;
 $secondary-blue: #001f3f;
+$tertiary-blue: #356481;
 $light-blue: #356481;