chore: collection sidebar style updates

packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js

@@ -16,10 +16,6 @@ const Wrapper = styled.div`
       transform: rotateZ(90deg);
     }
 
-    &.item-focused-in-tab {
-      background:#ededed;
-    }
-
     &:hover {
       background: #f7f7f7;
       .menu-icon {
@@ -27,6 +23,24 @@ const Wrapper = styled.div`
       }
     }
 
+    .menu-icon {
+      color: rgb(110 110 110);
+    }
+
+    &.item-focused-in-tab {
+      background: #2383e0;
+      color: white;
+
+      &:hover {
+        background: #2383e0 !important;
+        color: white !important;
+      }
+
+      .menu-icon {
+        color: white !important;
+      }
+    }
+
     div.tippy-box {
       position: relative;
       top: -0.625rem;

packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -13,7 +13,7 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
   const MenuIcon = forwardRef((props, ref) => {
     return (
       <div ref={ref}>
-        <IconDots size={22} style={{color: 'rgb(110 110 110)'}}/>
+        <IconDots size={22}/>
       </div>
     );
   });

packages/grafnode-components/src/components/Sidebar/Collections/Collection/StyledWrapper.js

@@ -7,14 +7,12 @@ const Wrapper = styled.div`
     user-select: none;
     padding-left: 8px;
     padding-right: 8px;
+    background-color: #f4f4f4;
+    font-weight: 600;
 
     .rotate-90 {
       transform: rotateZ(90deg);
     }
-
-    &:hover {
-      background:#ededed;
-    }
   }
 `;