Style instruments dynamically

Resolves MS-479

client/src/components/ContentBlock.vue

@@ -5,6 +5,7 @@
   >
     <div
       :class="specialClass"
+      :style="instrumentStyle"
       class="content-block"
       data-cy="content-block"
     >
@@ -43,6 +44,7 @@
       <h3
         class="content-block__instrument-label"
         data-cy="instrument-label"
+        :style="instrumentLabelStyle"
         v-if="instrumentLabel !== ''"
       >
         {{ instrumentLabel }}
@@ -129,13 +131,35 @@
       specialClass() {
         return `content-block--${this.contentBlock.type.toLowerCase()}`;
       },
+      isInstrumentBlock() {
+        return !!this.contentBlock.instrumentCategory;
+      },
+      instrumentStyle() {
+        if (this.isInstrumentBlock) {
+          return {
+            backgroundColor: this.contentBlock.instrumentCategory.background
+          };
+        }
+        return {};
+      },
       instrumentLabel() {
         const contentType = this.contentBlock.type.toLowerCase();
-        if (contentType.startsWith('base')) { // all instruments start with `base`
+        if (contentType.startsWith('base')) { // all legacy instruments start with `base`
           return instrumentCategory(contentType);
         }
+        if (this.isInstrumentBlock) {
+          return instrumentCategory(this.contentBlock.instrumentCategory.name);
+        }
         return '';
       },
+      instrumentLabelStyle() {
+        if (this.isInstrumentBlock) {
+          return {
+            color: this.contentBlock.instrumentCategory.foreground
+          };
+        }
+        return {};
+      },
       canEditContentBlock() {
         return this.contentBlock.mine && !this.contentBlock.indent;
       },
@@ -316,6 +340,10 @@
       }
     }
 
+    &--instrument {
+      @include content-box-base;
+    }
+
     /deep/ p {
       line-height: 1.5;
       margin-bottom: 1em;

client/src/components/content-blocks/InstrumentWidget.vue

@@ -8,6 +8,9 @@
     <router-link
       :to="{name: 'instrument', params: { slug: value.slug }}"
       class="instrument-widget__button button"
+      :style="{
+        borderColor: value.foreground
+      }"
     >
       {{ $flavor.textInstrument }} anzeigen
     </router-link>

client/src/components/instruments/FilterEntry.vue

@@ -39,7 +39,7 @@
       },
       category: {
         type: Object,
-        default: () => {},
+        default: () => ({}),
       },
     },
 

client/src/helpers/instrumentType.js

@@ -8,7 +8,7 @@ const instrumentType = (instrument) => {
   } else {
     return instrument.type.category.name;
   }
-  return typeDictionary[category] || '';
+  return typeDictionary[category] || category || '';
 };
 
 const instrumentCategory = (instrument) => {

client/src/styles/_mixins.scss

@@ -61,18 +61,25 @@
 
 }
 
-@mixin content-box($color-list) {
+@mixin content-box-base {
-  background-color: nth($color-list, 2);
   padding: 15px;
   align-items: start;
   border-radius: $default-border-radius;
 
   /deep/ .button {
-    border-color: nth($color-list, 1);
     background-color: $color-white;
   }
 }
 
+@mixin content-box($color-list) {
+  @include content-box-base;
+  background-color: nth($color-list, 2);
+
+  /deep/ .button {
+    border-color: nth($color-list, 1);
+  }
+}
+
 @mixin desktop {
   @media (min-width: 1200px) {
     @content