From 649a1598a0c6d75fd5650b2c6b3b9779d694fe46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 5 Feb 2021 10:33:26 +0100
Subject: [PATCH] change page navigation buttons

---
 docs/src/assets/icons/arrow-left.svg          |  3 +++
 docs/src/components/PageNavigation/index.vue  | 26 ++++++++++++-------
 docs/src/components/PageNavigation/style.scss | 12 ---------
 3 files changed, 19 insertions(+), 22 deletions(-)
 create mode 100644 docs/src/assets/icons/arrow-left.svg

diff --git a/docs/src/assets/icons/arrow-left.svg b/docs/src/assets/icons/arrow-left.svg
new file mode 100644
index 00000000..8fba4141
--- /dev/null
+++ b/docs/src/assets/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0607 3.93934C10.4749 3.35355 9.52507 3.35355 8.93927 3.93934L1.93927 10.9393C1.35357 11.5251 1.35357 12.4749 1.93927 13.0607L8.93927 20.0607C9.52507 20.6464 10.4749 20.6464 11.0607 20.0607C11.6464 19.4749 11.6464 18.5251 11.0607 17.9393L6.62127 13.5H21C21.8284 13.5 22.5 12.8284 22.5 12C22.5 11.1716 21.8284 10.5 21 10.5H6.62127L11.0607 6.06066C11.6464 5.47487 11.6464 4.52513 11.0607 3.93934Z" fill="black"/>
+</svg>
diff --git a/docs/src/components/PageNavigation/index.vue b/docs/src/components/PageNavigation/index.vue
index 29d1b726..0604b1b3 100644
--- a/docs/src/components/PageNavigation/index.vue
+++ b/docs/src/components/PageNavigation/index.vue
@@ -1,32 +1,38 @@
 <template>
   <nav class="page-navigation">
     <div class="page-navigation__previous">
-      <g-link
-        class="page-navigation__link"
-        exact
+      <btn
+        type="secondary"
+        icon="arrow-left"
+        icon-position="before"
         :to="previousPage.link"
         v-if="previousPage"
       >
-        ← {{ previousPage.title }}
-      </g-link>
+        {{ previousPage.title }}
+      </btn>
     </div>
     <div class="page-navigation__next">
-      <g-link
-        class="page-navigation__link"
-        exact
+      <btn
+        type="secondary"
+        icon="arrow-right"
         :to="nextPage.redirect || nextPage.link"
         v-if="nextPage"
       >
-        {{ nextPage.title }} →
-      </g-link>
+        {{ nextPage.title }}
+      </btn>
     </div>
   </nav>
 </template>
 
 <script>
 import linkGroups from '@/links.yaml'
+import Btn from '~/components/Btn'
 
 export default {
+  components: {
+    Btn,
+  },
+
   data() {
     return {
       linkGroups,
diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss
index a0e51f6f..f5057b8d 100644
--- a/docs/src/components/PageNavigation/style.scss
+++ b/docs/src/components/PageNavigation/style.scss
@@ -1,16 +1,4 @@
 .page-navigation {
   display: flex;
   justify-content: space-between;
-  padding: 1.5rem 0;
-
-  &__link {
-    color: rgba($colorBlack, 0.6);
-    padding: 0.25rem 0.5rem;
-    border-radius: 5px;
-
-    &:hover {
-      color: $colorBlack;
-      background-color: rgba($colorBlack, 0.05);
-    }
-  }
 }