From b19a2a8dea4b5cee77f9cdc1650266e7fd61ad88 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 12 Mar 2020 17:44:06 +0100
Subject: [PATCH] Refactor GeneralFilter to remove unnecessary code

- remove ds-flex, ds-flex-item, ds-space, ds-heading
- not really happy with the design, and in mobile the divider border is
  hidden(!?)
---
 .../components/FilterMenu/GeneralFilter.vue   | 110 +++++++++---------
 1 file changed, 54 insertions(+), 56 deletions(-)

diff --git a/webapp/components/FilterMenu/GeneralFilter.vue b/webapp/components/FilterMenu/GeneralFilter.vue
index f13e6b778..0da1e7df4 100644
--- a/webapp/components/FilterMenu/GeneralFilter.vue
+++ b/webapp/components/FilterMenu/GeneralFilter.vue
@@ -1,46 +1,37 @@
 <template>
-  <ds-space>
-    <ds-flex id="filter-menu-by-followers-header">
-      <ds-heading tag="h4">{{ $t('filter-menu.general.header') }}</ds-heading>
-      <ds-space margin-bottom="large" />
-    </ds-flex>
-    <ds-flex :gutter="{ lg: 'large' }">
-      <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '10%', lg: '10%' }"
-        class="follow-filter"
-      >
-        <base-button
-          data-test="filter-by-followed"
-          icon="user-plus"
-          circle
-          :filled="filteredByUsersFollowed"
-          @click="toggleFilteredByFollowed(currentUser.id)"
-          v-tooltip="{
-            content: this.$t('contribution.filterFollow'),
-            placement: 'left',
-            delay: { show: 500 },
-          }"
-        />
-        <label class="follow-label">{{ $t('filter-menu.followers.label') }}</label>
-      </ds-flex-item>
-      <emotion-button
-        v-for="emotion in emotionsArray"
-        :key="emotion"
-        :emojiPath="iconPath(emotion)"
-        :emotion="emotion"
-        @toggleEmotion="toogleFilteredByEmotions(emotion)"
-      />
-      <ds-space margin-bottom="large" />
-    </ds-flex>
-  </ds-space>
+  <section class="general-filter">
+    <h4 class="title">{{ $t('filter-menu.general.header') }}</h4>
+    <div class="divider" />
+    <labeled-button
+      data-test="filter-by-followed"
+      :filled="filteredByUsersFollowed"
+      icon="user-plus"
+      :label="$t('filter-menu.followers.label')"
+      @click="toggleFilteredByFollowed(currentUser.id)"
+      v-tooltip="{
+        content: this.$t('contribution.filterFollow'),
+        placement: 'left',
+        delay: { show: 500 },
+      }"
+    />
+    <emotion-button
+      v-for="emotion in emotionsArray"
+      :key="emotion"
+      :emojiPath="iconPath(emotion)"
+      :emotion="emotion"
+      @toggleEmotion="toogleFilteredByEmotions(emotion)"
+    />
+  </section>
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import EmotionButton from '~/components/EmotionButton/EmotionButton'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
   components: {
     EmotionButton,
+    LabeledButton,
   },
   data() {
     return {
@@ -69,33 +60,40 @@ export default {
 }
 </script>
 <style lang="scss">
-#filter-menu-header {
-  display: block;
-}
-
-#filter-menu-by-followers-header {
-  display: block;
-}
-
-.follow-filter.ds-flex-item {
+.general-filter {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: $space-base;
+  flex-wrap: wrap;
+  margin-top: $space-base;
 
-  > .follow-label {
-    margin-top: $space-x-small;
-    text-align: center;
+  > .title {
+    width: 100%;
+    margin-bottom: $space-base;
+  }
+
+  > .labeled-button {
+    width: 11%;
+  }
+
+  > .divider {
+    border-left: $border-size-base solid $border-color-soft;
+    margin: 0px $space-base 0px 76px;
   }
 }
 
-@media only screen and (max-width: 960px) {
-  #filter-menu-header {
-    text-align: center;
-  }
-}
+@media only screen and (max-width: 630px) {
+  .general-filter {
+    > .title {
+      text-align: center;
+    }
 
-.text-center {
-  text-align: center;
+    > .labeled-button {
+      width: 100%;
+      margin-bottom: $space-small;
+    }
+
+    > .divider {
+      border-top: $border-size-base solid $border-color-soft;
+    }
+  }
 }
 </style>