From c9f51ffca91445122e64008382af860c0ffdaf40 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Thu, 20 Jul 2023 10:07:59 +0200
Subject: [PATCH] [refactor] filter menu further feedback implementation

---
 .../components/FilterMenu/CategoriesFilter.vue |  2 +-
 .../components/FilterMenu/EventsByFilter.vue   | 18 +++++++++++-------
 .../FilterMenu/FilterMenuSection.vue           |  6 +++---
 webapp/components/FilterMenu/OrderByFilter.vue | 18 +++++++++++-------
 .../components/FilterMenu/PostTypeFilter.vue   | 10 +++++++++-
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 71c4f0738..73170cf4b 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -84,7 +84,7 @@ export default {
 </script>
 <style lang="scss">
 .category-filter-list {
-  margin-left: $space-xx-large;
+  margin-left: $space-xx-small;
 
   > .base-button {
     margin-right: $space-xx-small;
diff --git a/webapp/components/FilterMenu/EventsByFilter.vue b/webapp/components/FilterMenu/EventsByFilter.vue
index 6e03a2c65..e46f503c6 100644
--- a/webapp/components/FilterMenu/EventsByFilter.vue
+++ b/webapp/components/FilterMenu/EventsByFilter.vue
@@ -2,24 +2,30 @@
   <filter-menu-section class="order-by-filter" :title="sectionTitle" :divider="false">
     <template #filter-list>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="check"
           :label="$t('filter-menu.ended.all.label')"
           :filled="!eventsEnded"
           :title="$t('filter-menu.ended.all.hint')"
           @click="toggleEventsEnded"
           data-test="all-button"
-        />
+          size="small"
+        >
+          {{ $t('filter-menu.ended.all.hint') }}
+        </base-button>
       </li>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="calendar"
           :label="$t('filter-menu.ended.onlyEnded.label')"
           :filled="eventsEnded"
           :title="$t('filter-menu.ended.onlyEnded.hint')"
           @click="toggleEventsEnded"
           data-test="not-ended-button"
-        />
+          size="small"
+        >
+          {{ $t('filter-menu.ended.onlyEnded.hint') }}
+        </base-button>
       </li>
     </template>
   </filter-menu-section>
@@ -28,13 +34,11 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
   name: 'EventsByFilter',
   components: {
-    FilterMenuSection,
-    LabeledButton,
+    FilterMenuSection
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue
index b527bd12a..d8e15c1b5 100644
--- a/webapp/components/FilterMenu/FilterMenuSection.vue
+++ b/webapp/components/FilterMenu/FilterMenuSection.vue
@@ -65,13 +65,13 @@ export default {
     flex-grow: 1;
 
     > .item {
-      width: 30%;
-      padding: 0 $space-x-small;
+      // width: 30%;
+      padding: 0 $space-xx-small;
       margin-bottom: $space-small;
       text-align: center;
 
       @media only screen and (min-width: 800px) {
-        width: 20%;
+        // width: 15%;
       }
     }
   }
diff --git a/webapp/components/FilterMenu/OrderByFilter.vue b/webapp/components/FilterMenu/OrderByFilter.vue
index 8ef248f6d..102768320 100644
--- a/webapp/components/FilterMenu/OrderByFilter.vue
+++ b/webapp/components/FilterMenu/OrderByFilter.vue
@@ -2,24 +2,30 @@
   <filter-menu-section class="order-by-filter" :title="sectionTitle" :divider="false">
     <template #filter-list>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="sort-amount-asc"
           :label="buttonLabel('desc')"
           :filled="orderBy === orderedDesc"
           :title="buttonTitle('desc')"
           @click="toggleOrder(orderedDesc)"
           data-test="newest-button"
-        />
+          size="small"
+        >
+          {{ buttonLabel('desc') }}
+        </base-button>
       </li>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="sort-amount-desc"
           :label="buttonLabel('asc')"
           :filled="orderBy === orderedAsc"
           :title="buttonTitle('asc')"
           @click="toggleOrder(orderedAsc)"
           data-test="oldest-button"
-        />
+          size="small"
+        >
+          {{ buttonTitle('asc') }}
+        </base-button>
       </li>
     </template>
   </filter-menu-section>
@@ -28,13 +34,11 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
   name: 'OrderByFilter',
   components: {
-    FilterMenuSection,
-    LabeledButton,
+    FilterMenuSection
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index 418cac432..8f2ec729c 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -2,7 +2,7 @@
   <filter-menu-section
     :title="$t('filter-menu.post-type')"
     :divider="false"
-    class="following-filter"
+    class="following-filter post-type-filter"
   >
     <template #filter-follower>
       <li class="item all-item">
@@ -61,3 +61,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.post-type-filter {  
+  & .item {
+    margin-right: $space-base;
+  }
+}
+</style>