From 14eb671e3e46d9fc9f1bf4ca88b100ff1bc05f6b Mon Sep 17 00:00:00 2001
From: Jonathan Pye-Finch <46478402+jpye-finch@users.noreply.github.com>
Date: Tue, 18 Jun 2024 10:05:21 +0200
Subject: [PATCH] Update NavigationItem.tsx

Updates hover and active state to use updated greys
---
 packages/components/src/SideNavigation/NavigationItem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/SideNavigation/NavigationItem.tsx b/packages/components/src/SideNavigation/NavigationItem.tsx
index 2780553ed6f..d9370409670 100644
--- a/packages/components/src/SideNavigation/NavigationItem.tsx
+++ b/packages/components/src/SideNavigation/NavigationItem.tsx
@@ -31,18 +31,18 @@ const ItemContainer = styled.button<{ isSelected?: boolean }>`
   border-radius: 4px;
   padding: 0 8px;
   background-color: ${({ theme, isSelected }) =>
-    isSelected ? theme.colors.grey200 : theme.colors.white};
+    isSelected ? theme.colors.grey100 : theme.colors.white};
   ${({ theme }) => theme.fonts.bold14};
   color: ${({ theme, isSelected }) =>
     isSelected ? theme.colors.copy : theme.colors.grey500};
 
   &:hover {
-    background: ${({ theme }) => theme.colors.grey100};
+    background: ${({ theme }) => theme.colors.grey50};
     color: ${({ theme }) => theme.colors.grey600};
   }
 
   &:active {
-    background-color: ${({ theme }) => theme.colors.grey200};
+    background-color: ${({ theme }) => theme.colors.grey100};
     color: ${({ theme }) => theme.colors.grey600};
   }
   &:focus-visible {