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

packages/grafnode-run/src/providers/Store/index.js

@@ -8,7 +8,7 @@ const tabId1 = nanoid();
 
 const collection = {
   "id": nanoid(),
-	"name": "SpaceX",
+	"name": "spacex",
 	"items": [
 		{
       "id": nanoid(),
@@ -56,8 +56,58 @@ const collection = {
 	]
 };
 
+const collection2 = {
+  "id": nanoid(),
+	"name": "notebase",
+	"items": [
+		{
+      "id": nanoid(),
+      "name": "Notes",
+      "depth": 1,
+			"items": [
+				{
+          "id": nanoid(),
+          "depth": 2,
+					"name": "Create",
+					"request": {
+						"url": "https://api.spacex.land/graphql/",
+						"method": "POST",
+						"headers": [],
+						"body": {
+							"mimeType": "application/graphql",
+							"graphql": {
+								"query": "{\n  launchesPast(limit: 10) {\n    mission_name\n    launch_date_local\n    launch_site {\n      site_name_long\n    }\n    links {\n      article_link\n      video_link\n    }\n    rocket {\n      rocket_name\n      first_stage {\n        cores {\n          flight\n          core {\n            reuse_count\n            status\n          }\n        }\n      }\n      second_stage {\n        payloads {\n          payload_type\n          payload_mass_kg\n          payload_mass_lbs\n        }\n      }\n    }\n    ships {\n      name\n      home_port\n      image\n    }\n  }\n}",
+								"variables": ""
+							}
+						}
+					},
+					"response": null
+				},
+				{
+          "id": nanoid(),
+          "depth": 2,
+					"name": "Update",
+					"request": {
+						"url": "https://api.spacex.land/graphql/",
+						"method": "POST",
+						"headers": [],
+						"body": {
+							"mimeType": "application/graphql",
+							"graphql": {
+								"query": "{\n  launches {\n    launch_site {\n      site_id\n      site_name\n    }\n    launch_success\n  }\n}",
+								"variables": ""
+							}
+						}
+					},
+					"response": null
+				}
+			]
+		}
+	]
+};
+
 const initialState = {
-  collections: [collection],
+  collections: [collection, collection2],
   activeRequestTabId: null,
   requestTabs: []
 };