From 2941b1392ef30f3a9e0470068887482576355f30 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Thu, 19 Dec 2019 11:44:31 +0530
Subject: [PATCH] improve markup and design of Paginate component

---
 webapp/components/Paginate/Paginate.spec.js |  8 ++++----
 webapp/components/Paginate/Paginate.vue     | 22 +++++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/webapp/components/Paginate/Paginate.spec.js b/webapp/components/Paginate/Paginate.spec.js
index f542533fd..53847b726 100644
--- a/webapp/components/Paginate/Paginate.spec.js
+++ b/webapp/components/Paginate/Paginate.spec.js
@@ -23,13 +23,13 @@ describe('Paginate.vue', () => {
       beforeEach(() => {
         propsData.hasNext = true
         wrapper = Wrapper()
-        nextButton = wrapper.findAll('.ds-button').at(0)
+        nextButton = wrapper.findAll('.base-button').at(0)
       })
 
       it('is disabled by default', () => {
         propsData = {}
         wrapper = Wrapper()
-        nextButton = wrapper.findAll('.ds-button').at(0)
+        nextButton = wrapper.findAll('.base-button').at(0)
         expect(nextButton.attributes().disabled).toEqual('disabled')
       })
 
@@ -47,13 +47,13 @@ describe('Paginate.vue', () => {
       beforeEach(() => {
         propsData.hasPrevious = true
         wrapper = Wrapper()
-        backButton = wrapper.findAll('.ds-button').at(1)
+        backButton = wrapper.findAll('.base-button').at(1)
       })
 
       it('is disabled by default', () => {
         propsData = {}
         wrapper = Wrapper()
-        backButton = wrapper.findAll('.ds-button').at(1)
+        backButton = wrapper.findAll('.base-button').at(1)
         expect(backButton.attributes().disabled).toEqual('disabled')
       })
 
diff --git a/webapp/components/Paginate/Paginate.vue b/webapp/components/Paginate/Paginate.vue
index aa1455d19..721be6d40 100644
--- a/webapp/components/Paginate/Paginate.vue
+++ b/webapp/components/Paginate/Paginate.vue
@@ -1,13 +1,10 @@
 <template>
-  <ds-flex direction="row-reverse">
-    <ds-flex-item width="50px">
-      <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
-    </ds-flex-item>
-    <ds-flex-item width="50px">
-      <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
-    </ds-flex-item>
-  </ds-flex>
+  <div class="paginate">
+    <base-button @click="back" :disabled="!hasPrevious" icon="arrow-left" circle />
+    <base-button @click="next" :disabled="!hasNext" icon="arrow-right" circle />
+  </div>
 </template>
+
 <script>
 export default {
   props: {
@@ -24,3 +21,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.paginate {
+  display: flex;
+  justify-content: space-around;
+  width: 100px;
+  margin: $space-x-small auto;
+}
+</style>