[refactor] filter menu further feedback implementation

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;

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({

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%;
       }
     }
   }

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({

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>