From 41ef496d6b216922cf3538d3845526c7cecc019c Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 5 Feb 2020 21:45:28 +0100
Subject: [PATCH] refactor CategoriesSelect template

---
 .../CategoriesSelect/CategoriesSelect.vue     | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 7f0cbfcbc..b7d71de2d 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -1,22 +1,18 @@
 <template>
-  <div>
-    <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'xx-small' }">
-      <div v-for="category in categories" :key="category.id">
-        <ds-flex-item>
-          <base-button
-            :data-test="categoryButtonsId(category.id)"
-            @click="toggleCategory(category.id)"
-            :filled="isActive(category.id)"
-            :disabled="isDisabled(category.id)"
-            :icon="category.icon"
-            size="small"
-          >
-            {{ $t(`contribution.category.name.${category.slug}`) }}
-          </base-button>
-        </ds-flex-item>
-      </div>
-    </ds-flex>
-  </div>
+  <section class="categories-select">
+    <base-button
+      v-for="category in categories"
+      :key="category.id"
+      :data-test="categoryButtonsId(category.id)"
+      @click="toggleCategory(category.id)"
+      :filled="isActive(category.id)"
+      :disabled="isDisabled(category.id)"
+      :icon="category.icon"
+      size="small"
+    >
+      {{ $t(`contribution.category.name.${category.slug}`) }}
+    </base-button>
+  </section>
 </template>
 
 <script>
@@ -77,3 +73,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.categories-select {
+  display: flex;
+  flex-wrap: wrap;
+
+  > .base-button {
+    margin-right: $space-xx-small;
+    margin-bottom: $space-xx-small;
+  }
+}
+</style>