From e1a87739df226f0627e08abfdea2e3d9039dcfa6 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sun, 31 Oct 2021 22:02:30 +0100
Subject: [PATCH] Add some styling for filter group headers

---
 .../components/instruments/FilterEntry.vue    | 44 ++++++++++++++++---
 .../components/instruments/FilterGroup.vue    |  7 ++-
 .../instruments/InstrumentFilter.vue          | 25 ++---------
 client/src/pages/instrumentOverview.vue       |  3 ++
 4 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/client/src/components/instruments/FilterEntry.vue b/client/src/components/instruments/FilterEntry.vue
index 1b058eaf..285fb13e 100644
--- a/client/src/components/instruments/FilterEntry.vue
+++ b/client/src/components/instruments/FilterEntry.vue
@@ -1,22 +1,41 @@
 <template>
-  <a class="filter-entry">
-    <span class="filter-entry__text">{{ text }}</span><chevron-right class="filter-entry__icon" />
+  <a
+    :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>
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index a4ff330e..7250b051 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/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;
 
diff --git a/client/src/components/instruments/InstrumentFilter.vue b/client/src/components/instruments/InstrumentFilter.vue
index 514b9c46..49e346e6 100644
--- a/client/src/components/instruments/InstrumentFilter.vue
+++ b/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>
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index b92efc2f..cd4928ed 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/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 {