Frontend General UI improvement

frontend/src/components/navbar/NavBar.jsx

@@ -1,5 +1,5 @@
 import Box from "@mui/material/Box";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { FaBars, FaTimes } from "react-icons/fa";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -9,27 +9,25 @@ import { defaultState } from "../../redux/slices/AuthSlice";
 import "./NavBar.scss";
 
 const NavBar = () => {
-  // const { isLoading, error } = useAuth0();
-
   // Navbar Visibility
-  const [click, setClick] = useState(false);
-  const handleClick = () => {
-    setClick(!click);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const handleMenuClick = () => {
+    setIsMenuOpen(!isMenuOpen);
   };
-  const [navVisibility, setNavVisibility] = useState(false);
+  const [isNavBarVisible, setIsNavBarVisible] = useState(false);
 
   const location = useLocation();
 
   useEffect(() => {
     const changeBackground = () => {
       if (location.pathname === "/") {
         if (window.scrollY >= 700) {
-          setNavVisibility(true);
+          setIsNavBarVisible(true);
         } else {
-          setNavVisibility(false);
+          setIsNavBarVisible(false);
         }
       } else {
-        setNavVisibility(true);
+        setIsNavBarVisible(true);
       }
     };
     changeBackground();
@@ -61,14 +59,14 @@ const NavBar = () => {
   };
 
   return (
-    <Box className={navVisibility ? "navbar_active" : "navbar"}>
+    <Box className={isNavBarVisible ? "navbar_active" : "navbar"}>
       <nav className="navbar_container">
         <Link to="/" className="navbar_logo">
           NOTEUPS
         </Link>
 
         <div className="nav_menu_container">
-          <ul className={click ? "nav_menu active" : "nav_menu"}>
+          <ul className={isMenuOpen ? "nav_menu active" : "nav_menu"}>
             <li className="nav_item">
               <Link to="/products" className="nav_links">
                 <i className="fas fa-list" /> Products
@@ -155,8 +153,8 @@ const NavBar = () => {
           )}
         </div> */}
 
-        <div className="hamburger" onClick={handleClick}>
-          {click ? (
+        <div className="hamburger" onClick={handleMenuClick}>
+          {isMenuOpen ? (
             <FaTimes className="hamburger_bars" size={20} />
           ) : (
             <FaBars className="hamburger_bars" size={20} />

frontend/src/components/navbar/NavBar.scss

@@ -55,79 +55,70 @@
   }
 }
 
-/* Tablet
-@media (min-width: 768px) and (max-width: 1024px) {
-  .navbar {
-  }
-  .navbar_container {
-  }
-  .navbar_logo {
-  }
-  .nav_menu {
-  }
-  .nav_item {
-  }
-  .nav_links {
-  }
-} */
-
 .navbar_container {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 80px;
+  height: auto;
 }
 .nav_menu {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
 }
 .nav_item {
   display: flex;
   align-items: center;
-  margin: 0 2rem;
+  margin: 0.5rem 0.5rem;
 }
 
 .login_container {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
 
   .logged_in_user {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    margin: 0 2rem;
+    justify-content: center;
+    margin: 0.5rem 0.5rem;
 
     h2 {
-      font-size: 1.5rem;
+      font-size: 0.75rem;
       font-weight: bold;
       text-decoration: none;
-      padding: 0.5rem;
+      padding: 0.25rem 0.25rem;
     }
   }
 
   .signin_button,
-  .signup_button,
-  .signout_button {
+  .signup_button {
     color: white;
     border: none;
     padding: 0.5rem 1rem;
-    margin: 0 1rem;
-    border-radius: 5px;
+    margin: 0.5rem 0.5rem;
+    border-radius: 1rem;
     font-size: 1.5rem;
-    font-weight: bold;
-    cursor: pointer;
   }
 
   .signin_button {
-    background-color: #dc15cb;
+    background-image: linear-gradient(
+      to right,
+      #00bfff,
+      #1e90ff,
+      #0000ff,
+      #4b0082
+    );
   }
+
   .signup_button {
-    background-color: #006aff;
-  }
-  .signout_button {
-    background-color: #dc15cb;
+    background-image: linear-gradient(
+      to right,
+      #e0b0ff,
+      #ff69b4,
+      #9370db,
+      #4b0082
+    );
   }
 }
 
@@ -146,8 +137,9 @@
   .navbar_container {
   }
   .navbar_logo {
-    font-size: 3rem;
+    font-size: 0.75rem;
   }
+
   .nav_menu {
     position: absolute;
     flex-direction: column;
@@ -161,63 +153,89 @@
     transition: 0.3s;
     background: rgba(0, 0, 0, 0.9);
     z-index: -1;
-  }
-  .nav_menu.active {
-    left: 0;
+    background-image: linear-gradient(
+      to right,
+      #e0b0ff,
+      #ff69b4,
+      #9370db,
+      #4b0082
+    );
+    opacity: 0.9;
+
+    &.active {
+      left: 0;
+    }
   }
 
   .nav_item {
-    padding: 1.5rem 0;
+    padding: 0.25rem 0.25rem;
   }
   .nav_links {
-    font-size: 3rem;
+    font-size: 0.75rem;
+    color: white;
   }
 
   .login_container {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    top: 0;
-    right: -100%;
-    width: 100%;
-    height: 100vh;
-    transition: 0.3s;
-    background: rgba(0, 0, 0, 0.9);
-    z-index: -1;
+  }
 
-    .signin_button,
-    .signup_button,
-    .signout_button {
-      color: white;
-      border: none;
-      padding: 0.5rem 1rem;
-      margin: 0 1rem;
-      border-radius: 5px;
-      font-size: 1.5rem;
-      font-weight: bold;
-      cursor: pointer;
-    }
+  .fas {
+    display: inline-block;
+  }
+
+  .hamburger {
+    display: block;
+    margin-right: 0.5rem;
+  }
+}
+
+@media (max-width: 560px) {
+  // The signin and signup buttons should disappear on mobile
+  .login_container {
+    display: none;
+  }
+
+  .navbar_logo {
+    font-size: 0.5rem;
+  }
+
+  .nav_links {
+    font-size: 0.5rem;
+  }
 
-    .signin_button {
-      background-color: #dc15cb;
+  .hamburger {
+    margin-right: 0.25rem;
+  }
+
+  .hamburger_bars {
+    font-size: 0.5rem;
+  }
+
+  .navbar_active {
+    .navbar_logo {
+      font-size: 0.5rem;
     }
 
-    .signup_button {
-      background-color: #006aff;
+    .nav_links {
+      font-size: 0.5rem;
     }
 
-    .signout_button {
-      background-color: #dc15cb;
+    .hamburger_bars {
+      font-size: 0.5rem;
     }
   }
 
-  .fas {
-    display: inline-block;
-  }
+  .navbar {
+    .navbar_logo {
+      font-size: 0.5rem;
+    }
 
-  .hamburger {
-    display: block;
-    margin: 0 2rem;
+    .nav_links {
+      font-size: 0.5rem;
+    }
+
+    .hamburger_bars {
+      font-size: 0.5rem;
+    }
   }
 }