From 7e930dd1c9a82c685159681df6572131bf05b117 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 3 Mar 2022 22:11:43 -0800
Subject: [PATCH] fix: Regression in actions background on sidebar links closes
 #3194

---
 app/components/Sidebar/components/SidebarLink.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/components/Sidebar/components/SidebarLink.tsx b/app/components/Sidebar/components/SidebarLink.tsx
index 88cf5a39f..5a541de3a 100644
--- a/app/components/Sidebar/components/SidebarLink.tsx
+++ b/app/components/Sidebar/components/SidebarLink.tsx
@@ -140,6 +140,7 @@ const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
   gap: 4px;
   color: ${(props) => props.theme.textTertiary};
   transition: opacity 50ms;
+  height: 24px;
 
   svg {
     color: ${(props) => props.theme.textSecondary};
@@ -189,6 +190,8 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
   }
 
   & + ${Actions} {
+    background: ${(props) => props.theme.sidebarBackground};
+
     ${NudeButton} {
       background: transparent;
 
@@ -199,6 +202,10 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
     }
   }
 
+  &[aria-current="page"] + ${Actions} {
+    background: ${(props) => props.theme.sidebarActiveBackground};
+  }
+
   ${breakpoint("tablet")`
     padding: 4px 8px 4px 16px;
     font-size: 15px;