Add some styling for filter group headers

client/src/components/instruments/FilterEntry.vue

@@ -1,22 +1,41 @@
 <template>
-  <a class="filter-entry">
+  <a
-    <span class="filter-entry__text">{{ text }}</span><chevron-right class="filter-entry__icon" />
+    :class="typeClass"
+    class="filter-entry">
+    <span class="filter-entry__text">{{ text }}</span>
+    <chevron-right class="filter-entry__icon"/>
   </a>
 </template>
 
 <script>
   import ChevronRight from '@/components/icons/ChevronRight';
+  import {INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
+
   export default {
     props: {
       text: {
         type: String,
-        required: true
+        required: true,
-      }
+      },
+      type: {
+        type: String,
+        default: '',
+      },
     },
 
     components: {
-      ChevronRight
+      ChevronRight,
-    }
+    },
+
+    computed: {
+      typeClass() {
+        return {
+          'filter-entry--language-communication': this.type === LANGUAGE_COMMUNICATION,
+          'filter-entry--society': this.type === SOCIETY,
+          'filter-entry--interdisciplinary': this.type === INTERDISCIPLINARY,
+        };
+      },
+    },
   };
 </script>
 
@@ -31,11 +50,24 @@
     &__text {
       @include sub-heading;
       line-height: 1.5;
+      color: inherit;
     }
 
     &__icon {
       width: 10px;
       height: 10px;
     }
+
+    &--language-communication {
+      color: $color-accent-2-dark;
+    }
+
+    &--society {
+      color: $color-accent-1-dark;
+    }
+
+    &--interdisciplinary {
+      color: $color-accent-4-dark;
+    }
   }
 </style>

client/src/components/instruments/FilterGroup.vue

@@ -3,6 +3,7 @@
     <filter-entry
       :text="title"
       v-bind="$attrs"
+      :type="type"
       @click.native="$emit('click')"/>
     <div class="filter-group__children">
 
@@ -30,6 +31,10 @@
         type: Array,
         default: () => [],
       },
+      type: {
+        type: String,
+        default: ''
+      }
     },
     components: {FilterEntry, ChevronRight},
     inheritAttrs: false,
@@ -40,7 +45,7 @@
   @import '~styles/helpers';
 
   .filter-group {
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid $color-silver;
     display: flex;
     flex-direction: column;
 

client/src/components/instruments/InstrumentFilter.vue

@@ -7,14 +7,17 @@
 
     <filter-group
       :types="languageCommunicationTypes"
+      :type="LANGUAGE_COMMUNICATION"
       title="Sprache und Kommunikation"
       data-cy="filter-language-communication"
+      class="instrument-filter__group--language"
       @filter="setFilter($event)"
       @click="setFilter(i=>i.type.category===LANGUAGE_COMMUNICATION)"
     />
 
     <filter-group
       :types="societyTypes"
+      :type="SOCIETY"
       title="Gesellschaft"
       data-cy="filter-society"
       @filter="setFilter($event)"
@@ -22,6 +25,7 @@
 
     <filter-group
       :types="interdisciplinaryTypes"
+      :type="INTERDISCIPLINARY"
       title="Überfachliche Instrumente"
       data-cy="filter-interdisciplinary"
       @filter="setFilter($event)"
@@ -87,26 +91,5 @@
   .instrument-filter {
     display: flex;
     flex-direction: column;
-    //align-content: center;
-
-    &__checkbox {
-      &--language {
-        /deep/ input:checked + .checkbox {
-          background-color: $color-accent-1-dark;
-        }
-      }
-
-      &--society {
-        /deep/ input:checked + .checkbox {
-          background-color: $color-accent-2-dark;
-        }
-      }
-
-      &--interdisciplinary {
-        /deep/ input:checked + .checkbox {
-          background-color: $color-accent-4-dark;
-        }
-      }
-    }
   }
 </style>

client/src/pages/instrumentOverview.vue

@@ -64,7 +64,9 @@
     display: grid;
     //grid-template-rows: auto auto 1fr;
     grid-template-columns: 300px auto;
+    grid-column-gap: $small-spacing;
     //@include centered(800px);
+    padding: 0 $small-spacing;
 
     &__filter {
 
@@ -76,6 +78,7 @@
       width: 100%;
       display: flex;
       flex-direction: column;
+      justify-self: center;
     }
 
     &__list-item {