replace instances of ds-card with base-card

webapp/components/FilterMenu/FilterMenu.spec.js

@@ -12,10 +12,10 @@ describe('FilterMenu.vue', () => {
     mocks = { $t: () => {} }
   })
 
-  describe('given a user', () => {
+  describe('given a hashtag', () => {
     beforeEach(() => {
       propsData = {
-        hashtag: null,
+        hashtag: 'Frieden',
       }
     })
 
@@ -27,19 +27,14 @@ describe('FilterMenu.vue', () => {
         wrapper = Wrapper()
       })
 
-      it('does not render a card if there are no hashtags', () => {
+      it('renders a card', () => {
-        expect(wrapper.is('.ds-card')).toBe(true)
-      })
-
-      it('renders a card if there are hashtags', () => {
-        propsData.hashtag = 'Frieden'
         wrapper = Wrapper()
-        expect(wrapper.is('.ds-card')).toBe(true)
+        expect(wrapper.is('.base-card')).toBe(true)
       })
 
-      describe('click "clear-search-button" button', () => {
+      describe('click clear search button', () => {
         it('emits clearSearch', () => {
-          wrapper.find('[name="clear-search-button"]').trigger('click')
+          wrapper.find('.base-button').trigger('click')
           expect(wrapper.emitted().clearSearch).toHaveLength(1)
         })
       })

webapp/components/FilterMenu/FilterMenu.vue

@@ -1,32 +1,23 @@
 <template>
-  <ds-card class="filter-menu-card">
+  <base-card class="filter-menu">
-    <ds-flex class="filter-menu-content">
+    <h2>{{ $t('filter-menu.hashtag-search', { hashtag }) }}</h2>
-      <ds-flex-item>
-        <ds-heading size="h3">{{ $t('filter-menu.hashtag-search', { hashtag }) }}</ds-heading>
-      </ds-flex-item>
-      <ds-flex-item>
-        <div class="filter-menu-buttons">
     <base-button
       name="clear-search-button"
       icon="close"
       circle
+      :title="this.$t('filter-menu.clearSearch')"
       @click="clearSearch"
-            v-tooltip="{
-              content: this.$t('filter-menu.clearSearch'),
-              placement: 'left',
-              delay: { show: 500 },
-            }"
     />
-        </div>
+  </base-card>
-      </ds-flex-item>
-    </ds-flex>
-  </ds-card>
 </template>
 
 <script>
 export default {
   props: {
-    hashtag: { type: String, default: null },
+    hashtag: {
+      type: String,
+      required: true,
+    },
   },
   methods: {
     clearSearch() {
@@ -37,21 +28,10 @@ export default {
 </script>
 
 <style lang="scss">
-.filter-menu-card {
+.filter-menu.base-card {
-  background-color: $background-color-soft;
-}
-
-.filter-menu-content {
-  height: 100%;
-  align-items: center;
-}
-
-.filter-menu-title {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-}
+  padding: $space-x-small $space-base;
-
-.filter-menu-buttons {
-  float: right;
 }
 </style>

webapp/components/features/ReportList/ReportList.story.js

@@ -183,11 +183,11 @@ storiesOf('ReportList', module)
       openModal: action('openModal'),
       filter: action('filter'),
     },
-    template: `<ds-card>
+    template: `<base-card>
                 <div class="reports-header">
                   <h3 class="title">Reports</h3>
                   <dropdown-filter @filter="filter" :filterOptions="filterOptions" :selected="selected" />
                 </div>
                 <reports-table :reports="reports" @confirm="openModal" />
-              </ds-card>`,
+              </base-card>`,
   }))

webapp/components/features/ReportList/ReportList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-card>
+  <base-card>
     <div class="reports-header">
       <h3 class="title">{{ $t('moderation.reports.name') }}</h3>
       <client-only>
@@ -8,8 +8,9 @@
     </div>
     <reports-table :reports="reports" @confirm="openModal" />
     <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
-  </ds-card>
+  </base-card>
 </template>
+
 <script>
 import { mapMutations } from 'vuex'
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
@@ -166,7 +167,7 @@ export default {
 .reports-header {
   display: flex;
   justify-content: space-between;
-  margin: $space-small 0;
+  margin-bottom: $space-small;
 
   > .title {
     margin: 0;