From 0ec9b396aa46b40af19e1c42f67a9cef68fea31c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Mon, 14 Mar 2022 16:58:45 +0100
Subject: [PATCH] fix(dashboard-v2): styling fixes for active link in navbar
 dropdown

---
 .../src/components/DropdownMenu/DropdownMenuLink.js  | 12 +++++-------
 .../dashboard-v2/src/components/NavBar/NavBar.js     | 10 ++++++++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
index 45a86483..426501c4 100644
--- a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
+++ b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
@@ -3,18 +3,16 @@ import PropTypes from "prop-types";
 
 const DropdownLink = styled.a.attrs({
   className: `m-0 border-t border-palette-200/50 h-[60px]
-              whitespace-nowrap transition-colors text-current
+              whitespace-nowrap transition-colors
               hover:bg-palette-100/50 flex items-center
               pr-8 pl-6 py-4 gap-4 first:border-0`,
 })``;
 
 export const DropdownMenuLink = ({ active, icon: Icon, label, ...props }) => (
-  <>
-    <DropdownLink {...props}>
-      {Icon ? <Icon className={active ? "text-primary" : "text-current"} /> : null}
-      {label}
-    </DropdownLink>
-  </>
+  <DropdownLink {...props}>
+    {Icon ? <Icon /> : null}
+    <span className="text-palette-500">{label}</span>
+  </DropdownLink>
 );
 
 DropdownMenuLink.propTypes = {
diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index 2b53f2be..7fa52109 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/packages/dashboard-v2/src/components/NavBar/NavBar.js
@@ -68,8 +68,14 @@ export const NavBar = () => (
         </NavBarSection>
         <NavBarSection className="dropdown-area justify-end">
           <DropdownMenu title="My account">
-            <DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
-            <DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
+            <DropdownMenuLink to="/settings" as={Link} activeClassName="text-primary" icon={CogIcon} label="Settings" />
+            <DropdownMenuLink
+              to="/logout"
+              as={Link}
+              activeClassName="text-primary"
+              icon={LockClosedIcon}
+              label="Log out"
+            />
           </DropdownMenu>
         </NavBarSection>
       </NavBarBody>