Restore styling on instrument filters

client/src/components/instruments/FilterEntry.vue

@@ -2,10 +2,17 @@
   <a
     :class="typeClass"
     class="filter-entry"
+    :style="categoryStyle"
   >
     <span class="filter-entry__text">{{ text }}</span>
-    <span class="filter-entry__icon-wrapper">
-      <chevron-right class="filter-entry__icon" />
+    <span
+      :style="activeStyle"
+      class="filter-entry__icon-wrapper"
+    >
+      <chevron-right
+        :style="{fill: category.foreground}"
+        class="filter-entry__icon"
+      />
     </span>
 
   </a>
@@ -13,6 +20,7 @@
 
 <script>
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+
   const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
 
   export default {
@@ -41,8 +49,8 @@
 
     apollo: {
       instrumentFilter: {
-        query: INSTRUMENT_FILTER_QUERY
-      }
+        query: INSTRUMENT_FILTER_QUERY,
+      },
     },
 
     data() {
@@ -56,11 +64,27 @@
     computed: {
       isActive() {
         if (!this.instrumentFilter.currentFilter) {
-          return this.type === '';
+          return this.id === '';
         }
         // eslint-disable-next-line
         const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
-        return this.type === identifier;
+        return this.id === identifier;
+      },
+      activeStyle() {
+        if (this.isActive) {
+          return {
+            backgroundColor: this.category.background,
+          };
+        }
+        return {};
+      },
+      categoryStyle() {
+        if (this.isCategory) {
+          return {
+            color: this.category.foreground,
+          };
+        }
+        return {};
       },
       typeClass() {
         return {

client/src/graphql/gql/fragments/contentBlockParts.gql

@@ -3,6 +3,12 @@ fragment ContentBlockParts on ContentBlockNode {
   slug
   userCreated
   mine
+  instrumentCategory {
+    id
+    foreground
+    background
+    name
+  }
   bookmarks {
     uuid
     note {

client/src/graphql/gql/queries/instrumentCategoriesQuery.gql

@@ -2,6 +2,8 @@ query InstrumentCategoriesQuery {
   instrumentCategories {
     name
     id
+    foreground
+    background
     types {
       name
       id