From 81cbb7a85c2c4200199c834140b6ec245a2fbc6c Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 15 Jan 2020 17:37:54 +0100
Subject: [PATCH] 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         | 7 ++++++-
 .../generic/PaginationButtons/PaginationButtons.spec.js}  | 0
 .../generic/PaginationButtons/PaginationButtons.story.js} | 2 +-
 .../generic/PaginationButtons/PaginationButtons.vue}      | 4 ++--
 webapp/components/features/ReportList/ReportList.vue      | 6 +++---
 webapp/components/generic/SearchHeading/SearchHeading.vue | 2 +-
 webapp/pages/admin/users.vue                              | 6 +++---
 webapp/pages/notifications/index.spec.js                  | 8 ++++----
 webapp/pages/notifications/index.vue                      | 6 +++---
 9 files changed, 23 insertions(+), 18 deletions(-)
 rename webapp/components/{Paginate/Paginate.spec.js => _new/generic/PaginationButtons/PaginationButtons.spec.js} (100%)
 rename webapp/components/{Paginate/Paginate.story.js => _new/generic/PaginationButtons/PaginationButtons.story.js} (95%)
 rename webapp/components/{Paginate/Paginate.vue => _new/generic/PaginationButtons/PaginationButtons.vue} (92%)

diff --git a/webapp/components/EmotionButton/EmotionButton.vue b/webapp/components/EmotionButton/EmotionButton.vue
index b493a2f82..f6a4b4938 100644
--- a/webapp/components/EmotionButton/EmotionButton.vue
+++ b/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>
diff --git a/webapp/components/Paginate/Paginate.spec.js b/webapp/components/_new/generic/PaginationButtons/PaginationButtons.spec.js
similarity index 100%
rename from webapp/components/Paginate/Paginate.spec.js
rename to webapp/components/_new/generic/PaginationButtons/PaginationButtons.spec.js
diff --git a/webapp/components/Paginate/Paginate.story.js b/webapp/components/_new/generic/PaginationButtons/PaginationButtons.story.js
similarity index 95%
rename from webapp/components/Paginate/Paginate.story.js
rename to webapp/components/_new/generic/PaginationButtons/PaginationButtons.story.js
index 6efc9353f..9ec9532f6 100644
--- a/webapp/components/Paginate/Paginate.story.js
+++ b/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"
diff --git a/webapp/components/Paginate/Paginate.vue b/webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue
similarity index 92%
rename from webapp/components/Paginate/Paginate.vue
rename to webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue
index be1b2f379..592492f7d 100644
--- a/webapp/components/Paginate/Paginate.vue
+++ b/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;
diff --git a/webapp/components/features/ReportList/ReportList.vue b/webapp/components/features/ReportList/ReportList.vue
index 3659daa9e..62a29e66b 100644
--- a/webapp/components/features/ReportList/ReportList.vue
+++ b/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
diff --git a/webapp/components/generic/SearchHeading/SearchHeading.vue b/webapp/components/generic/SearchHeading/SearchHeading.vue
index 6431ae66d..a2add90c7 100644
--- a/webapp/components/generic/SearchHeading/SearchHeading.vue
+++ b/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>
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index e56be70ab..610307704 100644
--- a/webapp/pages/admin/users.vue
+++ b/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
diff --git a/webapp/pages/notifications/index.spec.js b/webapp/pages/notifications/index.spec.js
index 66f68aac7..70592b467 100644
--- a/webapp/pages/notifications/index.spec.js
+++ b/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)
         })
       })
diff --git a/webapp/pages/notifications/index.vue b/webapp/pages/notifications/index.vue
index aa002cec7..c49d208be 100644
--- a/webapp/pages/notifications/index.vue
+++ b/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