From 15ee3dc91423cf97c239541925fe0b6dd778e6de Mon Sep 17 00:00:00 2001
From: Troplo <troplo@flowinity.com>
Date: Thu, 28 Jan 2021 19:25:45 +1100
Subject: [PATCH] prerelease3

---
 src/components/Navbar.vue     |  35 +++----
 src/components/Pagination.vue |   2 +-
 src/locales/en.json           |  11 ++-
 src/router/index.js           |  10 +-
 src/store/index.js            |   2 +-
 src/views/ForumThread.vue     |  27 +++---
 src/views/Friends.vue         | 175 +++++++++++-----------------------
 src/views/Marketplace.vue     |   9 +-
 src/views/MarketplaceItem.vue |  13 ++-
 src/views/User.vue            |   2 +-
 src/views/UserInventory.vue   |   4 +-
 11 files changed, 117 insertions(+), 173 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index bd64d72..b02b611 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -155,11 +155,13 @@
           <section class="modal-card-body has-text-centered">
             <h1 class="subtitle">What's new in {{$store.state.client.clientVersion}}?</h1>
             <ul>
-              <li>Marketplace</li>
-              <li>Pagination Component</li>
-              <li>Fix crashing when token is null</li>
-              <li>User list pagination</li>
-              <li>Marketplace Item</li>
+              <li>Improved pagination</li>
+              <li>Add friend page</li>
+              <li>Remove koin icon in buttons</li>
+              <li>Add global wall</li>
+              <li>Add blog</li>
+              <li>Add new friend count in Navbar User Menu</li>
+              <li>Add developmental forum</li>
             </ul>
           </section>
           <footer class="modal-card-foot">
@@ -314,7 +316,7 @@
       </template>
 
       <template #end>
-        <b-navbar-item v-if="$store.state.user.username && !loading" @click="dailyReward">
+        <b-navbar-item v-if="$store.state.user.username && !loading" @click="dailyReward(true)">
           <img src="https://cdn.kaverti.com/icons/koins.svg">{{$store.state.user.koins}}
         </b-navbar-item>
         <div v-if="!loading">
@@ -337,7 +339,7 @@
           <b-navbar-item tag="router-link" to="/creations">{{$t('navbar.user.creations')}}</b-navbar-item>
           <b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.user.downloads')}}</b-navbar-item>
           <b-navbar-item tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
-          <b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded> 1</b-tag>&nbsp; {{$t('navbar.user.friends')}}</b-navbar-item>
+          <b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded v-if="friendCount > 0"> {{ friendCount }}</b-tag>&nbsp;&nbsp;&nbsp;&nbsp;<p>{{$t('navbar.user.friends')}}</p></b-navbar-item>
           <b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
         </b-navbar-dropdown>
         <b-navbar-item v-if="loading">
@@ -657,13 +659,15 @@ export default {
       this.$buefy.snackbar.open(`WARNING: You have fake authenticated, you do not have authenticated API access. Use for debug purposes only.`)
       Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
     },
-    dailyReward() {
+    dailyReward(notify) {
       this.axios.get(
           process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/reward'
       ).then(res => {
         this.$store.commit('setKoins', res.data.koins)
       }).catch(e => {
-        AjaxErrorHandler(this.$store)(e)
+        if(notify) {
+          AjaxErrorHandler(this.$store)(e)
+        }
       })
     },
     getInfo() {
@@ -723,17 +727,14 @@ export default {
       this.loading = false
       console.log(this.getBannerId())
     })
-    if(this.$store.state.username) {
-      this.dailyReward()
+    this.$nextTick(() => {
+      this.dailyReward(false)
+      this.showUpdate()
       this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAllPendingCanAccept')
           .then(res => {
             this.friendCount = res.data.count
-          }).catch(() => {
-        this.$buefy.snackbar.open({message: this.$t('errors.authFail'), type: 'is-warning'})
-        this.loading = false
-      })
-    }
-    this.showUpdate()
+          })
+    })
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index dad3fe3..486e83e 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='pagination'>
+  <div>
     <slot></slot>
   </div>
 </template>
diff --git a/src/locales/en.json b/src/locales/en.json
index 4914805..fb7a4ed 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -113,7 +113,8 @@
     "dev": {
       "title": "Developer Options",
       "fakeUser": "Fake User Auth",
-      "debug": "Debug Page"
+      "debug": "Debug Page",
+      "brokenRoute": "Enable broken (disabled) routes"
     },
     "user": {
       "title": "Unknown",
@@ -133,7 +134,8 @@
       "discord": "Discord",
       "roadmap": "Roadmap",
       "documentation": "API Docs",
-      "stats": "Kaverti Stats"
+      "stats": "Kaverti Stats",
+      "blog": "Kaverti Blog"
     },
     "register": "Register",
     "login": "Login"
@@ -287,6 +289,11 @@
     "originalPrice": "Original Price",
     "creator": "The Creator"
   },
+  "friends": {
+    "pendingCanAccept": "Requests to you",
+    "pending": "Requests from you",
+    "accepted": "Accepted requests"
+  },
   "currency": "Koins",
   "close": "Close",
   "tos": "Terms of Service",
diff --git a/src/router/index.js b/src/router/index.js
index ea535ec..3acafe9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,6 +67,11 @@ const routes = [
     name: 'Forums',
     component: route('Forums')
   },
+  {
+    path: '/forums/create',
+    name: 'ForumThreadCreate',
+    component: route('ForumThreadCreate')
+  },
   {
     path: '/forums/:category',
     name: 'Forums',
@@ -77,11 +82,6 @@ const routes = [
     name: 'ForumThread',
     component: route('ForumThread')
   },
-  {
-    path: '/forums/create',
-    name: 'ForumThreadCreate',
-    component: route('ForumThreadCreate')
-  },
   {
     path: '/roadmap',
     name: 'Roadmap',
diff --git a/src/store/index.js b/src/store/index.js
index 34960fc..8aa261d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,7 +8,7 @@ export default new Vuex.Store({
     wind: false,
     enableBrokenRoutes: false,
     client: {
-      clientVersion: '1.0.0-prerelease2',
+      clientVersion: '1.0.0-prerelease3',
       latestClientVersion: '',
       latestAPIVersion: '',
       bannerText: '',
diff --git a/src/views/ForumThread.vue b/src/views/ForumThread.vue
index 4cfddbc..48b8936 100644
--- a/src/views/ForumThread.vue
+++ b/src/views/ForumThread.vue
@@ -7,11 +7,12 @@
           <div class="media-left">
             <img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.User.picture + '.png'">
           </div>
-        <div class="media-content">
-          <div v-html="post.content"></div>
+          <div class="media-content">
+            <h2 class="subtitle">{{post.User.username}}</h2>
+            <div v-html="post.content"></div>
+          </div>
         </div>
       </div>
-      </div>
     </div>
   </main>
 </template>
@@ -36,16 +37,16 @@ export default {
       }
       this.axios
           .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/thread/' + this.$route.params.id)
-      .then((res) => {
-        if(initial) {
-          this.thread = res.data
-        } else {
-          this.thread.Posts.push(...res.data.Posts)
-        }
-      })
-      .catch((e) => {
-        AjaxErrorHandler(this.$store)(e)
-      })
+          .then((res) => {
+            if(initial) {
+              this.thread = res.data
+            } else {
+              this.thread.Posts.push(...res.data.Posts)
+            }
+          })
+          .catch((e) => {
+            AjaxErrorHandler(this.$store)(e)
+          })
     }
   },
   mounted () {
diff --git a/src/views/Friends.vue b/src/views/Friends.vue
index 62ec64c..5846476 100644
--- a/src/views/Friends.vue
+++ b/src/views/Friends.vue
@@ -1,22 +1,46 @@
 <template>
-  <main class="section">
-    <h1 class="title has-text-centered">{{name}} ({{count}})</h1>
-    <div class="tabs is-centered">
-      <ul>
-        <router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a></router-link>
-        <router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
-        <router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
-      </ul>
-    </div>
-    <div class="columns is-multiline">
-      <div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
-        <h1 class="title has-text-centered">{{friend.friend2.username}}</h1>
-        <div class="box">
-          <img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'"><br>
-          <b-button class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request</b-button>
-          <b-button class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend Request</b-button>
-          <b-button class="is-success has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend Request</b-button>
-          <b-button class="is-danger has-text-centered is-centered is-center" v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend</b-button>
+  <main>
+    <div class="section">
+      <h1 class="title has-text-centered">{{name}} ({{count}})</h1>
+      <div class="tabs is-centered">
+        <ul>
+          <router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a></router-link>
+          <router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
+          <router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
+        </ul>
+      </div>
+      <div class="columns is-multiline" v-if="friends.length && !loading">
+        <div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
+          <h1 class="title has-text-centered">{{friend.friend2.username}}</h1>
+          <div class="box">
+            <img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'"><br>
+            <div class="buttons">
+              <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request</b-button>
+              <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend Request</b-button>
+              <b-button @click="doRelationshipAccept(friend)" class="is-success has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend Request</b-button>
+              <b-button @click="removeFriend(friend)" class="is-danger has-text-centered is-centered is-center" v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend</b-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="section" v-if="!friends.length && !loading">
+        <NoItems type="friends"></NoItems>
+      </div>
+      <div class="section columns" v-if="loading">
+        <div class="column">
+          <div class="box">
+            <b-skeleton></b-skeleton>
+          </div>
+        </div>
+        <div class="column">
+          <div class="box">
+            <b-skeleton></b-skeleton>
+          </div>
+        </div>
+        <div class="column">
+          <div class="box">
+            <b-skeleton></b-skeleton>
+          </div>
         </div>
       </div>
     </div>
@@ -24,9 +48,12 @@
 </template>
 <script>
 import AjaxErrorHandler from "../../assets/js/errorHandler";
-
+import NoItems from "../components/NoItems"
 export default {
   name: 'Friends',
+  components: {
+    NoItems
+  },
   data() {
     return {
       friends: [],
@@ -55,126 +82,32 @@ export default {
     }
   },
   methods: {
-    removeFriend (username) {
+    removeFriend (user) {
       this.axios
           .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', {
-            friend: username
+            friend: user.friend2.username
           })
           .then(() => {
             this.getItems()
           })
           .catch(e => {
-            this.refreshFriend()
-            this.description.loading = false
-
-            AjaxErrorHandler(this.$store)(e, error => {
-              this.description.error = error.message
-            })
-            this.axios
-                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
-                .then(res => this.relationship = res.data, this.refreshFriend())
-                .catch(e => {
-                  this.refreshFriend()
-                  let invalidId = e.response.data.errors.find(error => {
-                    return error.name === 'accountDoesNotExist'
-                  })
-
-                  if(invalidId) {
-                    this.$store.commit('set404Page', true)
-                  } else {
-                    AjaxErrorHandler(this.$store)(e)
-                  }
-                })
-          })
-    },
-    doRelationship () {
-      this.axios
-          .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/send', {
-            friend: this.$route.params.username
-          })
-          .then(() => {
-            this.refreshFriend()
-            this.description.loading = false
-            this.axios
-                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
-                .then(res => this.relationship = res.data)
-                .catch(e => {
-                  let invalidId = e.response.data.errors.find(error => {
-                    return error.name === 'accountDoesNotExist'
-                  })
-
-                  if(invalidId) {
-                    this.$store.commit('set404Page', true)
-                  } else {
-                    AjaxErrorHandler(this.$store)(e)
-                  }
-                })
-          })
-          .catch(e => {
-            this.refreshFriend()
-            this.description.loading = false
+            this.getItems()
 
             AjaxErrorHandler(this.$store)(e)
-            this.axios
-                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
-                .then(res => this.relationship = res.data)
-                .catch(e => {
-                  let invalidId = e.response.data.errors.find(error => {
-                    return error.name === 'accountDoesNotExist'
-                  })
-
-                  if(invalidId) {
-                    this.$store.commit('set404Page', true)
-                  } else {
-                    AjaxErrorHandler(this.$store)(e)
-                  }
-                })
           })
     },
-    doRelationshipAccept () {
+    doRelationshipAccept (user) {
       this.axios
           .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', {
-            friend: this.$route.params.username
+            friend: user.friend2.username
           })
           .then(() => {
-            this.refreshFriend()
-            this.description.loading = false
-            this.axios
-                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
-                .then(res => this.relationship = res.data)
-                .catch(e => {
-                  let invalidId = e.response.data.errors.find(error => {
-                    return error.name === 'accountDoesNotExist'
-                  })
-
-                  if(invalidId) {
-                    this.$store.commit('set404Page', true)
-                  } else {
-                    AjaxErrorHandler(this.$store)(e)
-                  }
-                })
+            this.getItems()
           })
           .catch(e => {
-            this.refreshFriend()
-            this.description.loading = false
+            this.getItems()
 
-            AjaxErrorHandler(this.$store)(e, error => {
-              this.description.error = error.message
-            })
-            this.axios
-                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
-                .then(res => this.relationship = res.data)
-                .catch(e => {
-                  let invalidId = e.response.data.errors.find(error => {
-                    return error.name === 'accountDoesNotExist'
-                  })
-
-                  if(invalidId) {
-                    this.$store.commit('set404Page', true)
-                  } else {
-                    AjaxErrorHandler(this.$store)(e)
-                  }
-                })
+            AjaxErrorHandler(this.$store)(e)
           })
     },
     getItems () {
diff --git a/src/views/Marketplace.vue b/src/views/Marketplace.vue
index 6ec1f8e..3708213 100644
--- a/src/views/Marketplace.vue
+++ b/src/views/Marketplace.vue
@@ -43,14 +43,13 @@
           :paginate="paginate"
           @loadNext='getItems(false)'
       >
-      <div class="column is-3" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'>
+      <div class="column is-3 has-text-centered" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'>
+        <router-link :to="'/m/' + item.id" class="subtitle has-text-centered">{{item.name}}</router-link>
         <div class="box">
-          <router-link :to="'/m/' + item.id" class="subtitle">{{item.name}}</router-link>
           <img :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'" width="40%">
           <div class="buttons is-centered is-center">
-            <b-button class="is-info" v-if="!item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="8%">{{item.price}}</b-button>
-            <b-button class="is-success" v-if="item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.salePrice}} <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
-            <b-button tag="router-link" :to="'/m/' + item.id" class="is-success">{{$t('marketplace.moreInfo')}}</b-button>
+            <b-button class="is-info" v-if="!item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.price}} Koins</b-button>
+            <b-button class="is-success" v-if="item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.salePrice}} Koins <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
           </div>
         </div>
       </div>
diff --git a/src/views/MarketplaceItem.vue b/src/views/MarketplaceItem.vue
index d64471a..6cf0ad9 100644
--- a/src/views/MarketplaceItem.vue
+++ b/src/views/MarketplaceItem.vue
@@ -30,11 +30,14 @@
         </div>
       </div>
       <div class="columns" v-if="!loading">
-        <div class="column is-4">
+        <div class="column is-4 has-text-centered">
           <h1 class="title has-text-centered">{{item.name}}</h1>
           <div class="box">
-            <img :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'">
+            <img width=50% :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'">
           </div>
+          <b-button class="is-info" v-if="!item.saleEnabled && !purchased">Buy now</b-button>
+          <b-button class="is-success" v-if="item.saleEnabled && !purchased">Buy now for discounted price</b-button>
+          <b-button disabled v-if="purchased">You own this item!</b-button>
         </div>
         <div class="column is-7">
           <h1 class="title has-text-centered">{{$t('marketplaceItem.moreInfo')}}</h1>
@@ -43,9 +46,9 @@
             <b-button class="is-success" v-if="item.saleEnabled && !purchased">Buy now for discounted price</b-button>
             <b-button disabled v-if="purchased">You own this item!</b-button>
             <hr class="solid">
-            <p v-if="item.saleEnabled">{{$t('marketplaceItem.price')}}: <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins.svg" width="5%">{{item.salePrice}}</p>
-            <p v-if="item.saleEnabled">{{$t('marketplaceItem.originalPrice')}}: <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins.svg" width="5%">{{item.price}}</p>
-            <p v-if="!item.saleEnabled">{{$t('marketplaceItem.price')}}: <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins.svg" width="5%">{{item.price}}</p>
+            <p v-if="item.saleEnabled">{{$t('marketplaceItem.price')}}: {{item.salePrice}} Koins</p>
+            <p v-if="item.saleEnabled">{{$t('marketplaceItem.originalPrice')}}: {{item.price}} Koins</p>
+            <p v-if="!item.saleEnabled">{{$t('marketplaceItem.price')}}: {{item.price}} Koins</p>
             <p>Uploaded at: {{item.createdAt | formatDate()}}</p>
           </div>
           <h1 class="title has-text-centered">{{$t('marketplaceItem.creator')}}</h1>
diff --git a/src/views/User.vue b/src/views/User.vue
index 94f5102..c287cf0 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -10,7 +10,7 @@
       <div class="column is-4 is-vcentered has-text-centered">
         <h1 class="title">{{user.username}}&nbsp;<Badges :username="user.username" :system="user.system" :hidden="user.hidden" :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges></h1>
         <div class="box">
-          <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width=25%>
+          <img :src="'https://cdn.kaverti.com/user/avatars/full/' + user.picture + '.png'" :alt="user.username + '\'s avatar'" width=25%>
         </div>
         <div class="buttons is-centered">
           <b-button @click="doRelationship" class="is-success" v-if="relationships.type === 'notFriends' && user.username !== $store.state.user.username"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.notFriends')}}</b-button>
diff --git a/src/views/UserInventory.vue b/src/views/UserInventory.vue
index ff5ceda..2a173ee 100644
--- a/src/views/UserInventory.vue
+++ b/src/views/UserInventory.vue
@@ -8,8 +8,8 @@
         <h1 class="subtitle">{{item.Item.name}}</h1>
         <div class="box">
           <img v-if="item.Item.approved" width="128px" height="128px" :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.Item.previewFile + '.png'">
-          <b-button class="is-info" v-if="!item.Item.offSale && !item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.Item.price}}</b-button>
-          <b-button class="is-success" v-if="item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.Item.salePrice}} <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
+          <b-button class="is-info" v-if="!item.Item.offSale && !item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.Item.price}} Koins</b-button>
+          <b-button class="is-success" v-if="item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.Item.salePrice}} Koins <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
           <b-button disabled v-if="item.Item.offSale">{{$t('user.inventoryTab.unavailable')}}</b-button>
         </div>
       </div>