From 5f1a6c1babb405e4b46a65ce951b44a6dca4ae78 Mon Sep 17 00:00:00 2001
From: PoulavBhowmick03 <bpoulav@gmail.com>
Date: Sun, 27 Oct 2024 13:37:40 +0530
Subject: [PATCH 1/2] modified the Logout button CSS, state change for navbar
 elements

---
 frontend/src/components/header/Header.jsx | 70 ++++++++++++-----------
 frontend/src/components/header/header.css | 38 ++++++++++++
 2 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx
index d1abd773..b0e84668 100644
--- a/frontend/src/components/header/Header.jsx
+++ b/frontend/src/components/header/Header.jsx
@@ -1,44 +1,46 @@
 import React from 'react';
 import './header.css'
 import { ReactComponent as Logo } from "../../assets/images/logo.svg";
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 function Header({ walletId, onConnectWallet, onLogout }) {
   return (
-      <nav>
-          <div className='list-items'>
-              <div className='logo'>
-                <Link to="/">
-                    <Logo/>
-                </Link>
+    <nav>
+      <div className='list-items'>
+        <div className='logo'>
+          <NavLink to="/">
+            <Logo/>
+          </NavLink>
+        </div>
+        <div className='nav-items'>
+          <NavLink to="/" end className={({ isActive }) => (isActive ? 'active-link' : '')}>
+            Home
+          </NavLink>
+          <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active-link' : '')}>
+            Dashboard
+          </NavLink>
+        </div>
+        <div className='wallet-section'>
+          {walletId ? (
+            <div className='wallet-container'>
+              <button className='logout-button' onClick={onLogout}>
+                Log Out
+              </button>
+              <div className='wallet-id'>
+                {`${walletId.slice(0, 4)}...${walletId.slice(-4)}`}
               </div>
-              <div className='nav-items'>
-                  <a href="/">Home</a>
-                  <Link to="/dashboard">Dashboard</Link>
-              </div>
-              <div className='wallet-section'>
-                  {walletId ? (
-                      <div className='wallet-container'>
-                          <div className='wallet-id'>
-                              {`${walletId.slice(0, 4)}...${walletId.slice(-4)}`}
-                          </div>
-                          <button className='gradient-button'
-                              onClick={onLogout}
-                          >
-                              Log Out
-                          </button>
-                      </div>
-                  ) : (
-                      <button className='gradient-button'
-                          onClick={onConnectWallet}
-                      >
-                          <span>Connect Wallet</span>
-                      </button>
-                  )}
-              </div>
-          </div>
-      </nav>
+            </div>
+          ) : (
+            <button className='gradient-button' 
+            onClick={onConnectWallet}
+            >
+              <span>Connect Wallet</span>
+            </button>
+          )}
+        </div>
+      </div>
+    </nav>
   );
 }
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css
index 7a52eed4..63a861fe 100644
--- a/frontend/src/components/header/header.css
+++ b/frontend/src/components/header/header.css
@@ -71,12 +71,18 @@ nav {
     color: var(--secondary);
     font-family:var(--text-font);
     font-size: 20px;
+    transition: color 0.3s;
 }
 
 .nav-items a:hover{
     color: var(--brand);
 }
 
+.active-link {
+    color: var(--brand) !important;
+    font-weight: 700;
+}
+
 .gradient-button{
     border-radius: 8px;
     border: none;
@@ -90,6 +96,38 @@ nav {
     line-height: 100%;
 } 
 
+.logout-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 190px;
+    height: 52px;
+    border-radius: 8px;
+    border: 1px solid #74D6FD;
+    background-color: transparent;
+    color: #fff;
+    font-family: var(--text-font, 'Rethink Sans', sans-serif);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 100%;
+    transition: all 0.3s ease;
+  }
+
+  .logout-button:hover {
+    background: var(--button-gradient, linear-gradient(55deg, #74d6fd 0%, #e01dee 100%));
+    border: none;
+  }
+
+  .logout-button:active {
+    background: var(--button-gradient-active, linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%));
+  }
+
+  .logout-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+
 .gradient-button:hover {
     background: var(--button-gradient-hover);
 }

From 57449954ae0c357feaa3b3e460f61a9ddf46b5dd Mon Sep 17 00:00:00 2001
From: PoulavBhowmick03 <bpoulav@gmail.com>
Date: Sun, 27 Oct 2024 23:29:52 +0530
Subject: [PATCH 2/2] made the changes

---
 frontend/src/components/header/Header.jsx | 2 +-
 frontend/src/components/header/header.css | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx
index b0e84668..030fc994 100644
--- a/frontend/src/components/header/Header.jsx
+++ b/frontend/src/components/header/Header.jsx
@@ -24,7 +24,7 @@ function Header({ walletId, onConnectWallet, onLogout }) {
           {walletId ? (
             <div className='wallet-container'>
               <button className='logout-button' onClick={onLogout}>
-                Log Out
+                Log out
               </button>
               <div className='wallet-id'>
                 {`${walletId.slice(0, 4)}...${walletId.slice(-4)}`}
diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css
index 63a861fe..5d0be87d 100644
--- a/frontend/src/components/header/header.css
+++ b/frontend/src/components/header/header.css
@@ -78,8 +78,8 @@ nav {
     color: var(--brand);
 }
 
-.active-link {
-    color: var(--brand) !important;
+.nav-items a.active-link {
+    color: var(--brand);
     font-weight: 700;
 }
 
@@ -103,7 +103,7 @@ nav {
     width: 190px;
     height: 52px;
     border-radius: 8px;
-    border: 1px solid #74D6FD;
+    border: 1px solid var(--brand);
     background-color: transparent;
     color: #fff;
     font-family: var(--text-font, 'Rethink Sans', sans-serif);