Refactor styling, fix naming convention

- Emotions buttons were not displaying images correctly
- Follow vue guidelines for multiword naming convention
- Favor tokens over magic px numbers

webapp/components/EmotionButton/EmotionButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="emotion-button">
     <base-button :id="emotion" circle ghost @click="$emit('toggleEmotion', emotion)">
-      <img :src="emojiPath" />
+      <img class="image" :src="emojiPath" />
     </base-button>
     <label class="label" :for="emotion">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
     <p v-if="emotionCount !== null" class="count">{{ emotionCount }}x</p>
@@ -52,5 +52,10 @@ export default {
   > .count {
     margin: $space-x-small 0;
   }
+
+  .image {
+    max-width: $size-button-base;
+    height: 100%;
+  }
 }
 </style>

webapp/components/_new/generic/PaginationButtons/PaginationButtons.story.js

@@ -19,7 +19,7 @@ storiesOf('Paginate', module)
       back: action('back'),
       next: action('next'),
     },
-    template: `<paginate
+    template: `<pagination-buttons
                 :hasNext="hasNext"
                 :hasPrevious="hasPrevious"
                 @back="back"

webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="paginate">
+  <div class="pagination-buttons">
     <base-button
       @click="$emit('back')"
       :disabled="!hasPrevious"
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <style lang="scss">
-.paginate {
+.pagination-buttons {
   display: flex;
   justify-content: space-around;
   width: $size-width-paginate;

webapp/components/features/ReportList/ReportList.vue

@@ -7,7 +7,7 @@
       </client-only>
     </div>
     <reports-table :reports="reports" @confirm="openModal" />
-    <paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
+    <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
   </ds-card>
 </template>
 <script>
@@ -15,13 +15,13 @@ import { mapMutations } from 'vuex'
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import ReportsTable from '~/components/features/ReportsTable/ReportsTable'
 import { reportsListQuery, reviewMutation } from '~/graphql/Moderation.js'
-import Paginate from '~/components/Paginate/Paginate'
+import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
 
 export default {
   components: {
     DropdownFilter,
     ReportsTable,
-    Paginate,
+    PaginationButtons,
   },
   data() {
     const pageSize = 25

webapp/components/generic/SearchHeading/SearchHeading.vue

@@ -22,6 +22,6 @@ export default {
 
 // override styleguide styles
 .search-heading.ds-heading:first-child {
-  margin-top: -8px;
+  margin-top: -$space-x-small;
 }
 </style>

webapp/pages/admin/users.vue

@@ -50,7 +50,7 @@
           {{ scope.row.createdAt | dateTime }}
         </template>
       </ds-table>
-      <hc-paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
+      <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
     </ds-card>
     <ds-card v-else>
       <ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder>
@@ -62,11 +62,11 @@
 import gql from 'graphql-tag'
 import { isEmail } from 'validator'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
-import HcPaginate from '~/components/Paginate/Paginate'
+import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
 
 export default {
   components: {
-    HcPaginate,
+    PaginationButtons,
   },
   data() {
     const pageSize = 15

webapp/pages/notifications/index.spec.js

@@ -3,7 +3,7 @@ import NotificationsPage from './index.vue'
 
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
-import Paginate from '~/components/Paginate/Paginate'
+import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
 
 const localVue = global.localVue
 
@@ -122,14 +122,14 @@ describe('PostIndex', () => {
       })
     })
 
-    describe('Paginate', () => {
+    describe('PaginationButtons', () => {
       beforeEach(() => {
         wrapper = Wrapper()
       })
 
       describe('next: given a user is on the first page', () => {
         it('adds offset to pageSize to skip first x notifications and display next page', () => {
-          wrapper.find(Paginate).vm.$emit('next')
+          wrapper.find(PaginationButtons).vm.$emit('next')
           expect(wrapper.vm.offset).toEqual(12)
         })
       })
@@ -137,7 +137,7 @@ describe('PostIndex', () => {
       describe('back: given a user is on the third page', () => {
         it('sets offset when back is emitted', () => {
           wrapper.setData({ offset: 24 })
-          wrapper.find(Paginate).vm.$emit('back')
+          wrapper.find(PaginationButtons).vm.$emit('back')
           expect(wrapper.vm.offset).toEqual(12)
         })
       })

webapp/pages/notifications/index.vue

@@ -15,21 +15,21 @@
       @markNotificationAsRead="markNotificationAsRead"
       :notifications="notifications"
     />
-    <paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
+    <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
   </ds-card>
 </template>
 
 <script>
 import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
-import Paginate from '~/components/Paginate/Paginate'
+import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 
 export default {
   components: {
     DropdownFilter,
     NotificationsTable,
-    Paginate,
+    PaginationButtons,
   },
   data() {
     const pageSize = 12