diff --git a/app/components/Sidebar/components/CollectionLink.js b/app/components/Sidebar/components/CollectionLink.js index 7852ae59e..c22334be3 100644 --- a/app/components/Sidebar/components/CollectionLink.js +++ b/app/components/Sidebar/components/CollectionLink.js @@ -78,7 +78,7 @@ function CollectionLink({ <>
- } - > + /> {expanded && manualSort && ( @@ -138,6 +138,10 @@ function CollectionLink({ ); } +const SidebarLinkWithPadding = styled(SidebarLink)` + padding-right: 60px; +`; + const CollectionSortMenuWithMargin = styled(CollectionSortMenu)` margin-right: 4px; `; diff --git a/app/components/Sidebar/components/SidebarLink.js b/app/components/Sidebar/components/SidebarLink.js index 6b670d521..970bbe9a4 100644 --- a/app/components/Sidebar/components/SidebarLink.js +++ b/app/components/Sidebar/components/SidebarLink.js @@ -70,6 +70,7 @@ function SidebarLink({ as={to ? undefined : href ? "a" : "div"} href={href} ref={innerRef} + {...rest} > {icon && {icon}} @@ -91,16 +92,17 @@ const Actions = styled.span` top: 4px; right: 4px; color: ${(props) => props.theme.textTertiary}; - opacity: 0.75; transition: opacity 50ms; svg { - opacity: 0.75; + color: ${(props) => props.theme.textSecondary}; + fill: currentColor; + opacity: 0.5; } &:hover { svg { - opacity: 1; + opacity: 0.75; } } `; @@ -138,8 +140,11 @@ const StyledNavLink = styled(NavLink)` &:hover, &:active { > ${Actions} { - opacity: 1; display: inline-flex; + + svg { + opacity: 0.75; + } } } `;