Merge pull request #129 from PoulavBhowmick03/test/dashboard

Modified the Logout button CSS, state change for navbar elements
djeck1432 · Oct 27, 2024 · 6cb27ca · 6cb27ca
2 parents 69efdda + 5744995
commit 6cb27ca
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 34 deletions.
diff --git 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;
+export default Header;
diff --git 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);
 }
 
+.nav-items a.active-link {
+    color: var(--brand);
+    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 var(--brand);
+    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);
 }