From de7bf8c1332f858af2b475928cec0a21c8da2ec9 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 6 Jan 2021 20:35:02 -0800
Subject: [PATCH] fix: Fixes padding on sidebar collection links closes #1770

---
 app/components/Sidebar/components/CollectionLink.js |  8 ++++++--
 app/components/Sidebar/components/SidebarLink.js    | 13 +++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

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