From 5e751005a0e3021c0cbd650b591ff9d7e062e5af Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Tue, 8 Oct 2024 16:15:12 -0400 Subject: [PATCH 01/19] moving navbar to header and getting background color --- src/components/AuthenticatedNavBar.tsx | 26 -------------- src/components/NavBar.scss | 5 ++- .../authenticated/AuthenticatedNavBar.tsx | 13 ++++--- .../unauthenticated/UnauthenticatedNavBar.tsx | 11 +++--- src/index.tsx | 2 -- src/styles/global.scss | 1 + src/views/Layout.scss | 34 ++++++++---------- src/views/Layout.tsx | 35 +++++++++---------- 8 files changed, 51 insertions(+), 76 deletions(-) delete mode 100644 src/components/AuthenticatedNavBar.tsx diff --git a/src/components/AuthenticatedNavBar.tsx b/src/components/AuthenticatedNavBar.tsx deleted file mode 100644 index 7589821..0000000 --- a/src/components/AuthenticatedNavBar.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { NavLink } from "react-router-dom"; -import { SignOutButton } from "../api"; - -import "./AuthenticatedNavBar.scss"; - -export function AuthenticatedNavBar() { - return ( - - ); -} diff --git a/src/components/NavBar.scss b/src/components/NavBar.scss index d99d2f6..92e21a4 100644 --- a/src/components/NavBar.scss +++ b/src/components/NavBar.scss @@ -1,5 +1,7 @@ +@import "../styles/variables.scss"; + .Nav { - background-color: var(--color-bg); + background-color: $primary-blue; border-top: 1px solid var(--color-border); bottom: 0; display: flex; @@ -9,6 +11,7 @@ place-content: center; position: fixed; width: 100%; + height: 8rem; &__container { display: flex; diff --git a/src/components/authenticated/AuthenticatedNavBar.tsx b/src/components/authenticated/AuthenticatedNavBar.tsx index 8fcb2ad..44d7b0a 100644 --- a/src/components/authenticated/AuthenticatedNavBar.tsx +++ b/src/components/authenticated/AuthenticatedNavBar.tsx @@ -9,21 +9,24 @@ import "../NavBar.scss"; export function AuthenticatedNavBar() { return ( - - - - + + + + GrocerEase + + Home Manage List + ); diff --git a/src/components/unauthenticated/UnauthenticatedNavBar.tsx b/src/components/unauthenticated/UnauthenticatedNavBar.tsx index e64eaf2..d378720 100644 --- a/src/components/unauthenticated/UnauthenticatedNavBar.tsx +++ b/src/components/unauthenticated/UnauthenticatedNavBar.tsx @@ -8,15 +8,18 @@ import "../NavBar.scss"; export function UnauthenticatedNavBar() { return ( - - - + + + + GrocerEase + + Home About diff --git a/src/index.tsx b/src/index.tsx index 0c0a469..29013d7 100644 --- a/src/index.tsx +++ b/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( diff --git a/src/styles/global.scss b/src/styles/global.scss index 605cd45..3dbaf46 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,4 +1,5 @@ @import "../styles/variables.scss"; +@import "~bootstrap/scss/bootstrap"; body { font-family: "Nunito", sans-serif; diff --git a/src/views/Layout.scss b/src/views/Layout.scss index de8cbbd..4d1e9ca 100644 --- a/src/views/Layout.scss +++ b/src/views/Layout.scss @@ -11,26 +11,22 @@ display: flex; flex-direction: column; height: 100dvh; -} -.Layout > * { - padding-inline: min(5dvw, 3.2rem); -} + > *:not(header) { + padding-inline: min(5dvw, 3.2rem); + } -.Layout-header { - background-color: var(--color-bg); - padding-bottom: 0.5rem; - padding-top: max(env(safe-area-inset-top), 1rem); - text-align: center; -} - -.Layout-header > h1 { - margin: 0; -} + &-header { + background-color: var(--color-bg); + padding-bottom: max(env(safe-area-inset-top), 1rem); + // text-align: center; + } -.Layout-main { - margin: 0 auto; - padding-block: 0; - padding-block-end: 6.26rem; - width: min(72ch, 100%); + &-main { + margin: 0 auto; + padding-block: 0; + padding-block-end: 6.26rem; + width: min(72ch, 100%); + height: 100dvh; + } } diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx index 164e758..ef7aef1 100644 --- a/src/views/Layout.tsx +++ b/src/views/Layout.tsx @@ -13,25 +13,22 @@ interface Props { export function Layout({ user }: Props) { const navigate = useNavigate(); return ( - <> -
-
-

GrocerEase

-
-
- {user && ( - - )} - -
+
+
{user ? : } -
- + +
+ {user && ( + + )} + +
+
); } From 96b9194238880a8d38a13236a024b444a12cbc2f Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Tue, 8 Oct 2024 17:23:26 -0400 Subject: [PATCH 02/19] working on the unauth header --- src/components/NavBar.scss | 36 ++++++++++++------ .../unauthenticated/UnauthenticatedNavBar.tsx | 38 ++++++++++++------- src/views/Layout.scss | 1 - 3 files changed, 48 insertions(+), 27 deletions(-) diff --git a/src/components/NavBar.scss b/src/components/NavBar.scss index 92e21a4..5ca212e 100644 --- a/src/components/NavBar.scss +++ b/src/components/NavBar.scss @@ -1,28 +1,26 @@ @import "../styles/variables.scss"; -.Nav { +.custom-Nav { background-color: $primary-blue; - border-top: 1px solid var(--color-border); - bottom: 0; + padding: 0 1rem; display: flex; flex-direction: row; - padding-bottom: max(env(safe-area-inset-bottom), 1rem); - padding-top: 1rem; - place-content: center; position: fixed; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + height: 7rem; width: 100%; - height: 8rem; &__container { display: flex; - flex-direction: row; - justify-content: space-evenly; - width: min(72ch, 100%); + justify-content: space-between; + align-items: center; + // width: 100%; + height: 7rem; } &__link { - --color-text: var(--color-accent); - color: var(--color-text); + color: $primary-beige; font-size: 1.4em; flex: 0 1 auto; line-height: 1; @@ -35,4 +33,18 @@ text-underline-offset: 0.1em; } } + + &__brand { + font-size: 3rem !important; + font-weight: bolder; + color: $secondary-blue !important; + padding: 1rem 1rem; + background-color: $primary-beige; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + text-align: center; + width: 20rem; + + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); + } } diff --git a/src/components/unauthenticated/UnauthenticatedNavBar.tsx b/src/components/unauthenticated/UnauthenticatedNavBar.tsx index d378720..544c4b9 100644 --- a/src/components/unauthenticated/UnauthenticatedNavBar.tsx +++ b/src/components/unauthenticated/UnauthenticatedNavBar.tsx @@ -8,22 +8,32 @@ import "../NavBar.scss"; export function UnauthenticatedNavBar() { return ( - - - + + + GrocerEase - - Home - - - About - + + + + ); diff --git a/src/views/Layout.scss b/src/views/Layout.scss index 4d1e9ca..e944b80 100644 --- a/src/views/Layout.scss +++ b/src/views/Layout.scss @@ -17,7 +17,6 @@ } &-header { - background-color: var(--color-bg); padding-bottom: max(env(safe-area-inset-top), 1rem); // text-align: center; } From 442f48a76834512a796eff7a0ae558e7e5021d7c Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Wed, 9 Oct 2024 02:47:31 -0400 Subject: [PATCH 03/19] getting the hamburger to show on the small screen and the links to be correct color --- src/components/NavBar.scss | 66 ++++++++----------- .../authenticated/AuthenticatedNavBar.tsx | 29 ++++---- .../unauthenticated/UnauthenticatedNavBar.tsx | 40 +++++------ src/views/Layout.scss | 5 +- 4 files changed, 60 insertions(+), 80 deletions(-) diff --git a/src/components/NavBar.scss b/src/components/NavBar.scss index 5ca212e..409a860 100644 --- a/src/components/NavBar.scss +++ b/src/components/NavBar.scss @@ -1,50 +1,40 @@ @import "../styles/variables.scss"; -.custom-Nav { +.navbar { background-color: $primary-blue; - padding: 0 1rem; - display: flex; - flex-direction: row; - position: fixed; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; - height: 7rem; - width: 100%; +} - &__container { - display: flex; - justify-content: space-between; - align-items: center; - // width: 100%; - height: 7rem; - } +.navbar-brand { + font-size: 3rem !important; + font-weight: bolder; + color: $secondary-blue !important; + padding: 1rem 1rem; + background-color: $primary-beige; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + text-align: center; + width: 20rem; - &__link { - color: $primary-beige; - font-size: 1.4em; - flex: 0 1 auto; - line-height: 1; - padding: 0.8rem; - text-align: center; - text-underline-offset: 0.1em; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); +} +.navbar .nav-link { + color: $primary-beige; + font-weight: bolder; + font-size: 1.4em; + flex: 0 1 auto; + 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; - } + &.active { + text-decoration: underline; + color: $primary-beige !important; } - &__brand { - font-size: 3rem !important; - font-weight: bolder; - color: $secondary-blue !important; - padding: 1rem 1rem; - background-color: $primary-beige; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - text-align: center; - width: 20rem; - - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); + &:hover { + color: $secondary-blue; } } diff --git a/src/components/authenticated/AuthenticatedNavBar.tsx b/src/components/authenticated/AuthenticatedNavBar.tsx index 44d7b0a..d421ff6 100644 --- a/src/components/authenticated/AuthenticatedNavBar.tsx +++ b/src/components/authenticated/AuthenticatedNavBar.tsx @@ -9,24 +9,23 @@ import "../NavBar.scss"; export function AuthenticatedNavBar() { return ( - - + + GrocerEase - - Home - - - - Manage List - - + + + + ); diff --git a/src/components/unauthenticated/UnauthenticatedNavBar.tsx b/src/components/unauthenticated/UnauthenticatedNavBar.tsx index 544c4b9..931ed1a 100644 --- a/src/components/unauthenticated/UnauthenticatedNavBar.tsx +++ b/src/components/unauthenticated/UnauthenticatedNavBar.tsx @@ -8,32 +8,24 @@ import "../NavBar.scss"; export function UnauthenticatedNavBar() { return ( - - - + + + GrocerEase - - - - + + + + + + ); diff --git a/src/views/Layout.scss b/src/views/Layout.scss index e944b80..734a6a5 100644 --- a/src/views/Layout.scss +++ b/src/views/Layout.scss @@ -17,15 +17,14 @@ } &-header { - padding-bottom: max(env(safe-area-inset-top), 1rem); // text-align: center; } &-main { - margin: 0 auto; + margin: 1rem auto; padding-block: 0; padding-block-end: 6.26rem; - width: min(72ch, 100%); + width: auto; height: 100dvh; } } From 82e62dcbef2d4e3af9ab2c70f4d7b4705f7f15b1 Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Wed, 9 Oct 2024 03:16:33 -0400 Subject: [PATCH 04/19] spacing the navigation links on expanded view --- src/components/NavBar.scss | 18 +++++++++++++++++- .../authenticated/AuthenticatedNavBar.tsx | 4 ++-- .../unauthenticated/UnauthenticatedNavBar.tsx | 4 ++-- src/views/Layout.scss | 8 ++------ 4 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/NavBar.scss b/src/components/NavBar.scss index 409a860..4140b27 100644 --- a/src/components/NavBar.scss +++ b/src/components/NavBar.scss @@ -19,10 +19,11 @@ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } + .navbar .nav-link { color: $primary-beige; font-weight: bolder; - font-size: 1.4em; + font-size: 1.5em; flex: 0 1 auto; line-height: 1; padding: 0.8rem; @@ -38,3 +39,18 @@ color: $secondary-blue; } } + +.navbar button { + background-color: $secondary-blue; + color: $primary-beige; + font-weight: bolder; + border-color: $secondary-blue; + font-size: 1.3em; + + &:hover { + background-color: $primary-beige; + color: $secondary-blue; + font-weight: bolder; + border-color: $secondary-blue; + } +} diff --git a/src/components/authenticated/AuthenticatedNavBar.tsx b/src/components/authenticated/AuthenticatedNavBar.tsx index d421ff6..57bdf26 100644 --- a/src/components/authenticated/AuthenticatedNavBar.tsx +++ b/src/components/authenticated/AuthenticatedNavBar.tsx @@ -9,14 +9,14 @@ import "../NavBar.scss"; export function AuthenticatedNavBar() { return ( - + GrocerEase -