From 368c4305703c08d067e718177f86059e8bb7c975 Mon Sep 17 00:00:00 2001
From: Anirban Ghosh <anirbanghosh060@gmail.com>
Date: Sun, 20 Oct 2024 09:48:28 +0530
Subject: [PATCH 1/2] Made changes

---
 frontend/src/components/Navbar.jsx | 188 ++++++++++-------------------
 frontend/src/components/Tabs.jsx   |  15 ++-
 frontend/src/pages/Login/Login.jsx |   4 -
 3 files changed, 75 insertions(+), 132 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index a4ebc93c..a163ad1c 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useRef } from "react";
 import ProfileInfo from "./Cards/ProfileInfo";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation, Link } from "react-router-dom";
 import SearchBar from "./SearchBar/SearchBar";
 import { toast } from "react-hot-toast";
-import { Link } from "react-router-dom";
 import gsap from "gsap/all";
 import { SlideTabsExample } from "./Tabs";
 
@@ -19,84 +18,17 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => {
   const signupButtonRef = useRef(null);
 
   useEffect(() => {
-    gsap.fromTo(
-      logoRef.current,
-      {
-        y: -20,
-        opacity: 0,
-        scale: 0.8,
-      },
-      {
-        duration: 1,
-        y: 0,
-        opacity: 1,
-        scale: 1,
-        ease: "power3.out",
-      }
-    );
-
-    gsap.fromTo(
-      searchBarRef.current,
-      {
-        x: 50,
-        opacity: 0,
-      },
-      {
-        duration: 1,
-        x: 0,
-        opacity: 1,
-        ease: "power3.out",
-        delay: 0.5,
-      }
-    );
-
-    gsap.fromTo(
-      profileRef.current,
-      {
-        opacity: 0,
-        scale: 0.8,
-      },
-      {
-        duration: 1,
-        opacity: 1,
-        scale: 1,
-        ease: "power3.out",
-        delay: 1,
-      }
-    );
-
+    // GSAP animations
+    gsap.fromTo(logoRef.current, { y: -20, opacity: 0, scale: 0.8 }, { duration: 1, y: 0, opacity: 1, scale: 1, ease: "power3.out" });
+    gsap.fromTo(searchBarRef.current, { x: 50, opacity: 0 }, { duration: 1, x: 0, opacity: 1, ease: "power3.out", delay: 0.5 });
+    gsap.fromTo(profileRef.current, { opacity: 0, scale: 0.8 }, { duration: 1, opacity: 1, scale: 1, ease: "power3.out", delay: 1 });
+    
+    // Animating login/signup buttons
     if (loginButtonRef.current) {
-      gsap.fromTo(
-        loginButtonRef.current,
-        {
-          opacity: 0,
-          y: 20,
-        },
-        {
-          duration: 1,
-          opacity: 1,
-          y: 0,
-          ease: "bounce.out",
-          delay: 1.7,
-        }
-      );
+      gsap.fromTo(loginButtonRef.current, { opacity: 0, y: 20 }, { duration: 1, opacity: 1, y: 0, ease: "bounce.out", delay: 1.7 });
     }
-
     if (signupButtonRef.current) {
-      gsap.fromTo(
-        signupButtonRef.current,
-        {
-          opacity: 0,
-          y: 20,
-        },
-        {
-          duration: 1,
-          opacity: 1,
-          y: 0,
-          ease: "bounce.out",
-          delay: 1.5,
-        }
-      );
+      gsap.fromTo(signupButtonRef.current, { opacity: 0, y: 20 }, { duration: 1, opacity: 1, y: 0, ease: "bounce.out", delay: 1.5 });
     }
   }, []);
 
@@ -123,57 +55,63 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => {
   const hideSearchBarPaths = ["/", "/my-profile", "/about"];
 
   return (
-    <div className="bg-white border-b-2 border-black rounded-[1.2rem] flex items-center justify-between px-4 py-2 drop-shadow-md">
-      <Link to={userInfo ? "/dashboard" : "/"}>
-        <div ref={logoRef} className="flex items-center p-1">
-          <img src="/logo.png" className="h-10" alt="logo" />
+    <div className="fixed bg-neutral-200 top-0 left-0 w-full  z-50">
+      <div className=" backdrop-blur-lg rounded-[1.2rem] flex items-center justify-between px-4 py-2 drop-shadow-md mx-4 mt-4">
+        {/* Logo */}
+        <Link to={userInfo ? "/dashboard" : "/"}>
+          <div ref={logoRef} className="flex items-center p-1">
+            <img src="/logo.png" className="h-10" alt="logo" />
           <h2 className="text-2xl font-medium ml-[-12px] text-[#2B2B2B] mt-2">
-            cribbie
-          </h2>
-        </div>
-      </Link>
-      <SlideTabsExample />
-      {userInfo && !hideSearchBarPaths.includes(location.pathname) && (
-        <div
-          ref={searchBarRef}
-          className="hidden md:flex flex-grow justify-center mr-20"
-        >
-          <SearchBar
-            value={searchQuery}
-            onChange={({ target }) => {
-              setSearchQuery(target.value);
-              onSearchNote(target.value);
-            }}
-            onClearSearch={onClearSearch}
-          />
-        </div>
-      )}
+              cribbie
+            </h2>
+          </div>
+        </Link>
+
+     
+
+        {/* Tabs */}
+        <SlideTabsExample />
+
+        {/* Search bar (hidden on specific paths) */}
+        {userInfo && !hideSearchBarPaths.includes(location.pathname) && (
+          <div ref={searchBarRef} className="hidden md:flex flex-grow justify-center mx-6">
+            <SearchBar
+              value={searchQuery}
+              onChange={({ target }) => {
+                setSearchQuery(target.value);
+                onSearchNote(target.value);
+              }}
+              onClearSearch={onClearSearch}
+            />
+          </div>
+        )}
 
-      {userInfo ? (
-        <div ref={profileRef}>
-          <ProfileInfo userInfo={userInfo} onLogout={onLogout} />
-        </div>
-      ) : (
-        location.pathname !== "/login" &&
-        location.pathname !== "/signup" && (
-          <div className="flex justify-evenly items-center p-2 w-[20%]">
-            <button
-              ref={signupButtonRef}
-              onClick={() => navigate("/signup")}
-              className="text-zinc-200 bg-black rounded-md p-2 transition hover:text-black hover:bg-zinc-200"
-            >
-              Signup
-            </button>
-            <button
-              ref={loginButtonRef}
-              onClick={() => navigate("/login")}
-              className="text-zinc-200 bg-black rounded-md py-2 px-3 transition hover:text-black hover:bg-zinc-200"
-            >
-              Login
-            </button>
+        {/* Profile or Signup/Login */}
+        {userInfo ? (
+          <div ref={profileRef}>
+            <ProfileInfo userInfo={userInfo} onLogout={onLogout} />
           </div>
-        )
-      )}
+        ) : (
+          location.pathname !== "/login" && location.pathname !== "/signup" && (
+            <div className="flex justify-evenly items-center space-x-4">
+              <button
+                ref={signupButtonRef}
+                onClick={() => navigate("/signup")}
+                className="text-white bg-blue-600 rounded-md px-4 py-2 transition hover:bg-blue-800"
+              >
+                Signup
+              </button>
+              <button
+                ref={loginButtonRef}
+                onClick={() => navigate("/login")}
+                className="text-white bg-gray-700 rounded-md px-4 py-2 transition hover:bg-gray-900"
+              >
+                Login
+              </button>
+            </div>
+          )
+        )}
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/components/Tabs.jsx b/frontend/src/components/Tabs.jsx
index 2d00b924..7dc0c118 100644
--- a/frontend/src/components/Tabs.jsx
+++ b/frontend/src/components/Tabs.jsx
@@ -4,7 +4,7 @@ import { Link, useLocation } from "react-router-dom";
 
 export const SlideTabsExample = () => {
   return (
-    <div className="bg-white py-2">
+    <div className="bg-white  rounded-lg m-2 p-2">
       <SlideTabs />
     </div>
   );
@@ -29,17 +29,26 @@ const SlideTabs = () => {
         }));
         setHoveredTab(null);
       }}
-      className="relative mx-auto flex w-fit bg-white p-1"
+      className="relative mx-auto b flex w-fit bg-white p-1"
     >
       <Tab
         setPosition={setPosition}
         currentPathName={currentPathName}
-        to="/dashboard"
+        to="/"
         hoveredTab={hoveredTab}
         setHoveredTab={setHoveredTab}
       >
         Home
       </Tab>
+      <Tab
+        setPosition={setPosition}
+        currentPathName={currentPathName}
+        to="/dashboard"
+        hoveredTab={hoveredTab}
+        setHoveredTab={setHoveredTab}
+      >
+        Dashboard
+      </Tab>
       <Tab
         setPosition={setPosition}
         currentPathName={currentPathName}
diff --git a/frontend/src/pages/Login/Login.jsx b/frontend/src/pages/Login/Login.jsx
index 14314b83..6809b199 100644
--- a/frontend/src/pages/Login/Login.jsx
+++ b/frontend/src/pages/Login/Login.jsx
@@ -167,10 +167,6 @@ const Login = ({ setUser }) => {
 
   return (
     <div>
-      <div className="fixed top-0 left-0 right-0 z-50">
-        <Navbar />
-      </div>
-
       <section className="bg-white">
         <div className="lg:grid lg:min-h-screen lg:grid-cols-12">
           <section className="relative flex h-32 items-end bg-gray-900 lg:col-span-5 lg:h-full xl:col-span-6">

From 6a426ba8f0f8f5d947ceb52e62078108d10e5ff2 Mon Sep 17 00:00:00 2001
From: Anirban Ghosh <anirbanghosh060@gmail.com>
Date: Sun, 20 Oct 2024 09:54:10 +0530
Subject: [PATCH 2/2] changes in the sign-up

---
 frontend/src/pages/Signup/Signup.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/pages/Signup/Signup.jsx b/frontend/src/pages/Signup/Signup.jsx
index fb59c27c..c0601dd1 100644
--- a/frontend/src/pages/Signup/Signup.jsx
+++ b/frontend/src/pages/Signup/Signup.jsx
@@ -219,9 +219,7 @@ const Signup = () => {
 
   return (
     <div>
-      <div className="fixed top-0 left-0 right-0 z-50">
-        <Navbar />
-      </div>
+      
 
       <section className="bg-white">
         <div className="lg:grid lg:min-h-screen lg:grid-cols-12">