From b97524f5b847d8dda316df488a7943aac2edad47 Mon Sep 17 00:00:00 2001
From: Monalika Patnaik <99353300+MonalikaPatnaik@users.noreply.github.com>
Date: Sun, 31 Dec 2023 01:00:51 +0530
Subject: [PATCH 1/3] Update Navbar.js

---
 src/components/Navbar.js | 98 +++++++++-------------------------------
 1 file changed, 22 insertions(+), 76 deletions(-)

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 1c8f1a2..ccb4c97 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,99 +1,45 @@
-import React, { useState } from "react";
-import { useAuth0 } from "@auth0/auth0-react";
-import Container from "react-bootstrap/Container";
-import Nav from "react-bootstrap/Nav";
-import Navbar from "react-bootstrap/Navbar";
-import mainLogo from "./icon.png";
-import { NavDropdown } from "react-bootstrap";
-import Profile from "../pages/Profile";
-import { Link } from "react-router-dom";
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import mainLogo from'./icon.png';
 
-// Login with Auth0
-const LoginButton = () => {
-  const { loginWithRedirect } = useAuth0();
 
-  return (
-    <Nav.Link className="btn btn-black" onClick={() => loginWithRedirect()}>
-      Login
-    </Nav.Link>
-  );
-};
-
-// User Profile Dropdown
-const UserProfileDropdown = () => {
-  const { user, isAuthenticated, logout } = useAuth0();
-  const [showProfile, setShowProfile] = useState(false);
-
-  const openProfile = () => setShowProfile(true);
-  const closeProfile = () => setShowProfile(false);
-
-  if (isAuthenticated) {
-    return (
-      <Nav className="gap-2 align-items-center">
-        <NavDropdown
-          title={
-            <>
-              <img
-                src={user.picture}
-                alt={user.name}
-                width="30"
-                height="30"
-                className="d-inline-block align-top rounded-circle me-2"
-              />
-              {user.name}
-            </>
-          }
-          id="basic-nav-dropdown"
-          className="btn btn-black"
-        >
-          <Link to="/profile" className="dropdown-item">
-            Profile
-          </Link>
-          <NavDropdown.Item
-            onClick={() => logout({ returnTo: window.location.origin })}
-          >
-            {" "}
-            Logout{" "}
-          </NavDropdown.Item>
-        </NavDropdown>
-
-        {showProfile && <Profile onClose={closeProfile} />}
-      </Nav>
-    );
-  } else {
-    return (
-      <Nav className="gap-2">
-        <Nav.Link className="btn btn-black">
-          <LoginButton />
-        </Nav.Link>
-      </Nav>
-    );
-  }
-};
 
 export default function App() {
   return (
     <>
       <Navbar bg="black" variant="dark" expand="lg" className="p-3 sticky-top">
         <Container>
-          <Navbar.Brand href="#home">
+        <Navbar.Brand href="#home">
             <img
               alt=""
               src={mainLogo}
               width="30"
               height="30"
               className="d-inline-block align-top"
-            />{" "}
+            />{' '}
             Tasty-Tips
           </Navbar.Brand>
           <Navbar.Toggle aria-controls="basic-navbar-nav" />
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="me-auto">
-              <Nav.Link href="#home">Home</Nav.Link>
-              <Nav.Link href="#about">About us</Nav.Link>
-              <Nav.Link href="#contact">Contact us</Nav.Link>
+              <Nav.Link className="btn btn-black btn-hover" href="#home">Home</Nav.Link>
+              <Nav.Link className="btn btn-black btn-hover" href="#about">About us</Nav.Link>
+              <Nav.Link className="btn btn-black btn-hover" href="#contact">Contact us</Nav.Link>
+            </Nav>
+            <Nav className="gap-2">
+              <Nav.Link className="btn btn-black btn-hover" href="#">
+                Login
+              </Nav.Link>
+              <Nav.Link
+                eventKey={2}
+                className="btn btn-black btn-hover"
+                href="#"
+              >
+                Sign up
+              </Nav.Link>
             </Nav>
-            <UserProfileDropdown />
           </Navbar.Collapse>
         </Container>
       </Navbar>

From 735477a53bc2f56b9c5f3aa255cc6dc82b8a9fcc Mon Sep 17 00:00:00 2001
From: Monalika Patnaik <99353300+MonalikaPatnaik@users.noreply.github.com>
Date: Sun, 31 Dec 2023 01:02:17 +0530
Subject: [PATCH 2/3] Update App.css

---
 src/App.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/App.css b/src/App.css
index 9c440d5..04d8bd9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -118,5 +118,16 @@ body {
     padding: 20px;
     margin-top: 50px;
 }
+.btn-hover{
+  border: 2px solid white;
+  border-radius: 5px;
+  color:white !important;
+  margin-right: 9px;
+}
+.btn-hover:hover {
+  background-color: white;
+  color: black !important; /* Change text color on hover if needed */
+}
+
 
 

From c05a0f43c222c5e7cae046eaaf7672229b2d4ca1 Mon Sep 17 00:00:00 2001
From: Monalika Patnaik <99353300+MonalikaPatnaik@users.noreply.github.com>
Date: Sun, 31 Dec 2023 01:16:48 +0530
Subject: [PATCH 3/3] Update Navbar.js

---
 src/components/Navbar.js | 92 +++++++++++++++++++++++++++++++---------
 1 file changed, 73 insertions(+), 19 deletions(-)

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index ccb4c97..20f62bc 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,24 +1,89 @@
-import React from 'react';
-import Container from 'react-bootstrap/Container';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import mainLogo from'./icon.png';
+import React, { useState } from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+import mainLogo from "./icon.png";
+import { NavDropdown } from "react-bootstrap";
+import Profile from "../pages/Profile";
+import { Link } from "react-router-dom";
 
+// Login with Auth0
+const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
 
+  return (
+    <Nav.Link className="btn btn-black btn-hover" onClick={() => loginWithRedirect()}>
+      Login
+    </Nav.Link>
+  );
+};
+
+// User Profile Dropdown
+const UserProfileDropdown = () => {
+  const { user, isAuthenticated, logout } = useAuth0();
+  const [showProfile, setShowProfile] = useState(false);
+
+  const openProfile = () => setShowProfile(true);
+  const closeProfile = () => setShowProfile(false);
+
+  if (isAuthenticated) {
+    return (
+      <Nav className="gap-2 align-items-center">
+        <NavDropdown
+          title={
+            <>
+              <img
+                src={user.picture}
+                alt={user.name}
+                width="30"
+                height="30"
+                className="d-inline-block align-top rounded-circle me-2"
+              />
+              {user.name}
+            </>
+          }
+          id="basic-nav-dropdown"
+          className="btn btn-black"
+        >
+          <Link to="/profile" className="dropdown-item">
+            Profile
+          </Link>
+          <NavDropdown.Item
+            onClick={() => logout({ returnTo: window.location.origin })}
+          >
+            {" "}
+            Logout{" "}
+          </NavDropdown.Item>
+        </NavDropdown>
+
+        {showProfile && <Profile onClose={closeProfile} />}
+      </Nav>
+    );
+  } else {
+    return (
+      <Nav className="gap-2">
+        <Nav.Link className="btn btn-black">
+          <LoginButton />
+        </Nav.Link>
+      </Nav>
+    );
+  }
+};
 
 export default function App() {
   return (
     <>
       <Navbar bg="black" variant="dark" expand="lg" className="p-3 sticky-top">
         <Container>
-        <Navbar.Brand href="#home">
+          <Navbar.Brand href="#home">
             <img
               alt=""
               src={mainLogo}
               width="30"
               height="30"
               className="d-inline-block align-top"
-            />{' '}
+            />{" "}
             Tasty-Tips
           </Navbar.Brand>
           <Navbar.Toggle aria-controls="basic-navbar-nav" />
@@ -28,18 +93,7 @@ export default function App() {
               <Nav.Link className="btn btn-black btn-hover" href="#about">About us</Nav.Link>
               <Nav.Link className="btn btn-black btn-hover" href="#contact">Contact us</Nav.Link>
             </Nav>
-            <Nav className="gap-2">
-              <Nav.Link className="btn btn-black btn-hover" href="#">
-                Login
-              </Nav.Link>
-              <Nav.Link
-                eventKey={2}
-                className="btn btn-black btn-hover"
-                href="#"
-              >
-                Sign up
-              </Nav.Link>
-            </Nav>
+            <UserProfileDropdown />
           </Navbar.Collapse>
         </Container>
       </Navbar>