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;