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;
+ }
}
}
`;