Squashed commit of the following:

commit 35fae86bf8498a21419a32f7cdfca7f521b85494
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Apr 30 11:36:24 2020 -0500

    fix(items): bouncy numbers

commit 3d32d8962060fc2561687bca5a4037c47e12ca04
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Apr 30 09:36:52 2020 -0500

    fix(badges): standardize box-shadow

commit 5f89f1a8db00ab7d1ea29b99c90c47c358ee9268
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Wed Apr 29 15:51:56 2020 -0500

    fix(badges): standardize hover, box-shadow; fix equipment pills

commit 4eda06072a82f7a41de2fde6c9e1023e0e519b3c
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Tue Apr 28 13:24:04 2020 -0500

    fix(badges): pill vs round

commit 7181af5cb8d552e82eb4f12bf98a31723669f16b
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Mon Apr 27 15:54:30 2020 -0500

    fix(items): SVG nonsense

commit 95cfe28db0ec0a452ae6437b3a89c07b055a4092
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Fri Apr 24 12:35:00 2020 -0500

    fix(items): don't apply "empty" to equipment

commit 5932b9e9fafc2afa914a36a91fcf4d03132f18a4
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Fri Apr 24 11:50:46 2020 -0500

    refactor(pins): move pin badge to component and implement across site

commit 0533f6f79a8c51b506c2c1870bad529fccff9ae7
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Fri Apr 24 11:50:23 2020 -0500

    fix(mounts): misaligned tigers

commit a74e64afa3e0ff7a032da3406f7787b4782cc7bf
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Fri Apr 24 06:17:53 2020 -0500

    fix(svg): remove mask attributes

commit ae0f874fb6b708b4420d8b3ac18aa3b92dc2554c
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Apr 23 18:11:13 2020 -0500

    refactor(icons): standard freeze structure

commit 03c836313f91f761a1ae46d89b39625bd562d239
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Apr 23 16:31:33 2020 -0500

    WIP(styles): pin badge story

commit 661cf2a885a77fbc9edd8e84802354c282e86476
Merge: 34ec0b6c6a c4343379a1
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Apr 23 14:48:22 2020 -0500

    Merge branch 'develop' into sabrecat/quests-touchup

commit 34ec0b6c6ae3991665699aafc80d49d550a1661b
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Mon Apr 20 16:12:11 2020 -0500

    fix(items): style bodges

commit 3bbe1e98e14e94d4e3de8bdcc192478fe5d7cd0d
Merge: 095674ac0f 13123c0bae
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Mon Apr 20 15:51:31 2020 -0500

    Merge branch 'develop' into sabrecat/quests-touchup

commit 095674ac0fd462a8558d9de5469b7216be579411
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Tue Apr 7 12:27:03 2020 -0500

    fix(markets): styling

commit 8ffb8080a7b07ab0e5e19215bc8a3ce0b77cd54e
Merge: 5d4b20cd4f 9ac7840940
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Tue Apr 7 09:49:16 2020 -0500

    Merge branch 'develop' into sabrecat/quests-touchup

commit 5d4b20cd4f58c514ff788d5f64eb6398792c9583
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Mar 26 15:01:05 2020 -0500

    WIP(shops): item updates start

website/client/src/components/shops/quests/index.vue

@@ -100,14 +100,12 @@
                   slot-scope="ctx"
                 >
                   <span
-                    class="badge badge-pill badge-item badge-svg"
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
+                    class="badge-top"
                     @click.prevent.stop="togglePinned(ctx.item)"
                   >
-                    <span
-                      class="svg-icon inline icon-12 color"
-                      v-html="icons.pin"
-                    ></span>
+                    <pin-badge
+                      :pinned="ctx.item.pinned"
+                    />
                   </span>
                 </template>
               </shopItem>
@@ -185,14 +183,12 @@
                 slot-scope="ctx"
               >
                 <span
-                  class="badge badge-pill badge-item badge-svg"
-                  :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
+                  class="badge-top"
                   @click.prevent.stop="togglePinned(ctx.item)"
                 >
-                  <span
-                    class="svg-icon inline icon-12 color"
-                    v-html="icons.pin"
-                  ></span>
+                  <pin-badge
+                    :pinned="ctx.item.pinned"
+                  />
                 </span>
                 <countBadge
                   :show="userItems.quests[ctx.item.key] > 0"
@@ -222,6 +218,7 @@
                 :price="item.value"
                 :empty-item="false"
                 :popover-position="'top'"
+                :owned="!isNaN(userItems.quests[item.key])"
                 @click="selectItem(item)"
               >
                 <span slot="popoverContent">
@@ -264,14 +261,12 @@
                   slot-scope="ctx"
                 >
                   <span
-                    class="badge badge-pill badge-item badge-svg"
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
+                    class="badge-top"
                     @click.prevent.stop="togglePinned(ctx.item)"
                   >
-                    <span
-                      class="svg-icon inline icon-12 color"
-                      v-html="icons.pin"
-                    ></span>
+                    <pin-badge
+                      :pinned="ctx.item.pinned"
+                    />
                   </span>
                   <countBadge
                     :show="userItems.quests[ctx.item.key] > 0"
@@ -310,14 +305,12 @@
               slot-scope="ctx"
             >
               <span
-                class="badge badge-pill badge-item badge-svg"
-                :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
+                class="badge-top"
                 @click.prevent.stop="togglePinned(ctx.item)"
               >
-                <span
-                  class="svg-icon inline icon-12 color"
-                  v-html="icons.pin"
-                ></span>
+                <pin-badge
+                  :pinned="ctx.item.pinned"
+                />
               </span>
               <countBadge
                 :show="userItems.quests[ctx.item.key] > 0"
@@ -353,42 +346,6 @@
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/variables.scss';
 
-  .badge-svg {
-    left: calc((100% - 18px) / 2);
-    cursor: pointer;
-    color: $gray-400;
-    background: $white;
-    padding: 4.5px 6px;
-
-    &.item-selected-badge {
-      background: $purple-300;
-      color: $white;
-    }
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
-    color: #a5a1ac;
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg.hide {
-    display: none;
-  }
-
-  .item:hover {
-    span.badge.badge-pill.badge-item.badge-svg.hide {
-      display: block;
-    }
-  }
-
-  .icon-12 {
-    width: 12px;
-    height: 12px;
-  }
-
-  .hand-cursor {
-    cursor: pointer;
-  }
-
   .featured-label {
     margin: 24px auto;
   }
@@ -420,6 +377,15 @@
     .standard-page {
       position: relative;
     }
+
+    .badge-pin:not(.pinned) {
+        display: none;
+      }
+
+    .item:hover .badge-pin {
+      display: block;
+    }
+
     .featuredItems {
       height: 216px;
 
@@ -502,10 +468,9 @@ import pinUtils from '@/mixins/pinUtils';
 import currencyMixin from '../_currencyMixin';
 
 import BuyModal from './buyQuestModal.vue';
+import PinBadge from '@/components/ui/pinBadge';
 import QuestInfo from './questInfo.vue';
 
-import svgPin from '@/assets/svg/pin.svg';
-
 import shops from '@/../../common/script/libs/shops';
 
 import isPinned from '@/../../common/script/libs/isPinned';
@@ -520,6 +485,7 @@ export default {
     toggleSwitch,
 
     BuyModal,
+    PinBadge,
     QuestInfo,
   },
   mixins: [buyMixin, currencyMixin, pinUtils],
@@ -530,10 +496,6 @@ export default {
       searchText: null,
       searchTextThrottled: null,
 
-      icons: Object.freeze({
-        pin: svgPin,
-      }),
-
       sortItemsBy: ['AZ', 'sortByNumber'],
       selectedSortItemsBy: 'AZ',
 
@@ -631,8 +593,6 @@ export default {
       return false;
     },
     selectItem (item) {
-      if (item.locked) return;
-
       this.selectedItemToBuy = item;
 
       this.$root.$emit('bv::show::modal', 'buy-quest-modal');