fix: Fixes padding on sidebar collection links

closes #1770

app/components/Sidebar/components/CollectionLink.js

@@ -78,7 +78,7 @@ function CollectionLink({
     <>
       <div ref={drop} style={{ position: "relative" }}>
         <DropToImport key={collection.id} collectionId={collection.id}>
-          <SidebarLink
+          <SidebarLinkWithPadding
             key={collection.id}
             to={collection.url}
             icon={
@@ -114,7 +114,7 @@ function CollectionLink({
                 />
               </>
             }
-          ></SidebarLink>
+          />
         </DropToImport>
         {expanded && manualSort && (
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
@@ -138,6 +138,10 @@ function CollectionLink({
   );
 }
 
+const SidebarLinkWithPadding = styled(SidebarLink)`
+  padding-right: 60px;
+`;
+
 const CollectionSortMenuWithMargin = styled(CollectionSortMenu)`
   margin-right: 4px;
 `;

app/components/Sidebar/components/SidebarLink.js

@@ -70,6 +70,7 @@ function SidebarLink({
       as={to ? undefined : href ? "a" : "div"}
       href={href}
       ref={innerRef}
+      {...rest}
     >
       {icon && <IconWrapper>{icon}</IconWrapper>}
       <Label>{label}</Label>
@@ -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;
+      }
     }
   }
 `;