From fcfce5456344dcb5c4e539c55c76859dd91ba916 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 25 Apr 2023 21:08:47 +0200
Subject: [PATCH] fix(webapp): category filter buttons

---
 .../FilterMenu/CategoriesFilter.vue           | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index bcbfc7d1c..8b96245fd 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -17,18 +17,22 @@
     </template>
 
     <template #filter-list>
-      <li v-for="category in categories" :key="category.id" class="item item-category">
-        <labeled-button
-          :icon="category.icon"
-          :filled="filteredCategoryIds.includes(category.id)"
-          :label="$t(`contribution.category.name.${category.slug}`)"
+      <div class="category-filter-list">
+        <base-button
+          v-for="category in categories"
+          :key="category.id"
           @click="toggleCategory(category.id)"
+          :filled="filteredCategoryIds.includes(category.id)"
+          :icon="category.icon"
+          size="small"
           v-tooltip="{
             content: $t(`contribution.category.description.${category.slug}`),
             placement: 'bottom-start',
           }"
-        />
-      </li>
+        >
+          {{ $t(`contribution.category.name.${category.slug}`) }}
+        </base-button>
+      </div>
     </template>
   </filter-menu-section>
 </template>
@@ -95,3 +99,13 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.category-filter-list {
+  margin-left: $space-xx-large;
+
+  > .base-button {
+    margin-right: $space-xx-small;
+    margin-bottom: $space-xx-small;
+  }
+}
+</style>