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/assets/scss/badge.scss

@@ -4,23 +4,47 @@
   line-height: 1.33;
   color: $gray-200;
   padding: 4px 8px;
-  box-shadow: 0 1px 1px 0 rgba($black, 0.12);
+  box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
 }
 
 .badge-pill {
   border-radius: 100px;
 }
 
+.badge-round {
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 100%;
+}
+
 .badge-default {
   background: $gray-500;
   box-shadow: none;
 }
 
+.badge-dialog {
+  position: absolute;
+  left: -16px;
+  top: -16px;
+
+  .badge-pin {
+    width: 36px;
+    height: 36px;
+    padding: 0.5rem;
+  }
+}
+
 .badge-item {
   position: absolute;
   top: -9px;
 }
 
+.badge-top {
+  position: absolute;
+  left: calc((100% - 24px) / 2);
+  top: -12px;
+}
+
 .badge-purple {
   position: absolute;
   color: $white;

website/client/src/assets/scss/colors.scss

@@ -68,8 +68,6 @@ $purple-600: #D5C8FF;
 $header-color: #D5C8FF;
 $header-dark-background: #271B3D;
 
-$suggested-item-color: #D5C8FF;
-
 $healer-color: #FFA624;
 $rogue-color: #4F2A93;
 $warrior-color: #C92B2B;

website/client/src/assets/scss/index.scss

@@ -32,7 +32,6 @@
 @import './dragdrop';
 @import './banner';
 @import './progress-bar';
-@import './pin';
 @import './animals';
 @import './iconalert';
 @import './tiers';

website/client/src/assets/scss/item.scss

@@ -47,8 +47,9 @@
   height: 92px;
   border-radius: 2px;
   background: $white;
-  box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
+  box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   border: 1px solid transparent;
+  cursor: pointer;
 
   &-empty {
     background: $gray-10;
@@ -61,8 +62,8 @@
   }
 
   &:hover {
-    box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
-    border-color: $purple-500;
+    border-color: $purple-400;
   }
 
   &.highlight {
@@ -72,15 +73,6 @@
   &.highlight-border {
     border-color: $purple-500;
   }
-
-  &.suggested {
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    border: solid 1px $suggested-item-color;
-  }
-
-  &.suggested:hover {
-    border: solid 1px $purple-500;
-  }
 }
 
 .flat .item {

website/client/src/assets/scss/pin.scss

@@ -1,26 +0,0 @@
-.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;
-  }
-}

website/client/src/assets/svg/pin.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="-2 -1.5 16 16">
-    <path fill="#FFF" fill-rule="evenodd" d="M6.252 8.46l-2.71-2.712 4.602-3.58 1.688 1.689-3.58 4.602zm5.554-4.497l-.626-.627-.001-.001L8.666.822 8.037.194a.66.66 0 1 0-.934.934l.1.1L2.6 4.806l-.216-.216a.66.66 0 1 0-.934.934l.627.627v.001l1.418 1.418-3.301 3.302a.66.66 0 1 0 .934.934L4.43 8.505l1.417 1.417.001.002.628.627a.658.658 0 0 0 .934 0 .66.66 0 0 0 0-.934L7.194 9.4l3.58-4.602.098.099a.659.659 0 0 0 .934 0 .66.66 0 0 0 0-.934z"/>
+	<path id="prefix__a" d="M9.748 4.127l-3.27 4.205-2.31-2.31 4.205-3.27 1.375 1.375zm2.484-.091l-.554-.554V3.43l-.102-.051L8.463.267C8.293.095 8.063 0 7.82 0c-.244 0-.472.095-.644.267-.173.172-.267.401-.267.644 0 .195.061.382.174.536L2.87 4.724l-.06-.06c-.355-.354-.932-.354-1.288 0-.355.356-.355.933 0 1.288l1.87 1.869-3.126 3.125c-.355.355-.355.933 0 1.286.17.173.4.268.643.268.244 0 .474-.095.645-.267L4.68 9.108l1.87 1.87c.342.343.94.344 1.287 0 .355-.356.355-.933 0-1.289l-.06-.06 3.277-4.212c.345.252.87.215 1.18-.093.354-.356.354-.933 0-1.288z"/>
 </svg>

website/client/src/components/creatorIntro.vue

@@ -227,7 +227,7 @@
             ></i>
             <div
               v-if="!user.purchased.background[bg.key]"
-              class="purchase-background single"
+              class="purchase-background single d-flex align-items-center justify-content-center"
             >
               <div
                 class="svg-icon hourglass"
@@ -237,16 +237,12 @@
             </div>
             <span
               v-if="!user.purchased.background[bg.key]"
-              class="badge badge-pill badge-item badge-svg"
+              class="badge-top"
-              :class="{
+              @click.stop.prevent="togglePinned(bg)"
-                'item-selected-badge': isBackgroundPinned(bg),
-                'hide': !isBackgroundPinned(bg)}"
-              @click.prevent.stop="togglePinned(bg)"
             >
-              <span
+              <pin-badge
-                class="svg-icon inline icon-12 color"
+                :pinned="isBackgroundPinned(bg)"
-                v-html="icons.pin"
+              />
-              ></span>
             </span>
           </div>
         </div>
@@ -295,7 +291,7 @@
               ></i>
               <div
                 v-if="!user.purchased.background[bg.key]"
-                class="purchase-background single"
+                class="purchase-background single d-flex align-items-center justify-content-center"
               >
                 <div
                   class="svg-icon gem"
@@ -305,16 +301,12 @@
               </div>
               <span
                 v-if="!user.purchased.background[bg.key]"
-                class="badge badge-pill badge-item badge-svg"
+                class="badge-top"
-                :class="{
+                @click.stop.prevent="togglePinned(bg)"
-                  'item-selected-badge': isBackgroundPinned(bg),
-                  'hide': !isBackgroundPinned(bg)}"
-                @click.prevent.stop="togglePinned(bg)"
               >
-                <span
+                <pin-badge
-                  class="svg-icon inline icon-12 color"
+                  :pinned="isBackgroundPinned(bg)"
-                  v-html="icons.pin"
+                />
-                ></span>
               </span>
             </div>
             <div
@@ -1095,38 +1087,14 @@
       }
     }
 
-    .badge-svg {
+    .background-button {
-      left: calc((100% - 18px) / 2);
+      margin-bottom: 15px;
-      cursor: pointer;
-      color: $gray-400;
-      background: $white;
-      padding: 4.5px 6px;
 
-      &.item-selected-badge {
+      .badge-pin:not(.pinned) {
-        background: $purple-300;
-        color: $white;
-      }
-    }
-
-    .icon-12 {
-      width: 12px;
-      height: 12px;
-    }
-
-    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;
       }
 
-    .background-button {
+      &:hover .badge-pin {
-      margin-bottom: 15px;
-    }
-
-    .background-button:hover {
-      span.badge.badge-pill.badge-item.badge-svg.hide {
         display: block;
       }
     }
@@ -1142,6 +1110,7 @@ import usernameForm from './settings/usernameForm';
 import shops from '@/../../common/script/libs/shops';
 import guide from '@/mixins/guide';
 import notifications from '@/mixins/notifications';
+import PinBadge from '@/components/ui/pinBadge';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 import bodySettings from './avatarModal/body-settings';
 import skinSettings from './avatarModal/skin-settings';
@@ -1158,7 +1127,6 @@ import backgroundsIcon from '@/assets/svg/backgrounds.svg';
 import gem from '@/assets/svg/gem.svg';
 import hourglass from '@/assets/svg/hourglass.svg';
 import gold from '@/assets/svg/gold.svg';
-import pin from '@/assets/svg/pin.svg';
 import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
 import svgClose from '@/assets/svg/close.svg';
@@ -1170,14 +1138,14 @@ import content from '@/../../common/script/content/index';
 export default {
   components: {
     avatar,
+    bodySettings,
+    extraSettings,
+    hairSettings,
+    PinBadge,
+    skinSettings,
+    subMenu,
     toggleSwitch,
     usernameForm,
-    bodySettings,
-    skinSettings,
-    hairSettings,
-    extraSettings,
-
-    subMenu,
   },
   mixins: [guide, notifications, avatarEditorUtilies],
   data () {
@@ -1198,7 +1166,6 @@ export default {
         backgroundsIcon,
         gem,
         hourglass,
-        pin,
         gold,
         arrowRight,
         arrowLeft,

website/client/src/components/inventory/equipment/index.vue

@@ -159,10 +159,10 @@
         :class="group.key"
       >
         <!-- eslint-enable vue/no-use-v-if-with-v-for -->
-        <h2 class="mb-3">
+        <h2 class="d-flex align-items-center mb-3">
           {{ group.label }}
           <span
-            class="badge badge-pill badge-default"
+            class="badge badge-pill badge-default ml-2"
           >{{ items[group.key].length }}</span>
         </h2>
         <itemRows

website/client/src/components/inventory/items/index.vue

@@ -80,11 +80,11 @@
         :key="group.key"
       >
         <!-- eslint-enable vue/no-use-v-if-with-v-for -->
-        <h2 class="mb-3">
+        <h2 class="d-flex align-items-center mb-3">
           {{ $t(group.key) }}
           <span
             v-if="group.key != 'special'"
-            class="badge badge-pill badge-default"
+            class="badge badge-pill badge-default ml-2"
           >{{ group.quantity }}</span>
         </h2>
         <itemRows

website/client/src/components/shops/buyModal.vue

@@ -6,14 +6,12 @@
   >
     <span
       v-if="withPin"
-      class="badge badge-pill badge-dialog"
+      class="badge-dialog"
-      :class="{'item-selected-badge': isPinned}"
       @click.prevent.stop="togglePinned()"
     >
-      <span
+      <pin-badge
-        class="svg-icon inline color icon-16"
+        :pinned="isPinned"
-        v-html="icons.pin"
+      />
-      ></span>
     </span>
     <div>
       <span
@@ -147,7 +145,7 @@
           v-else
           class="btn btn-primary"
           :disabled="item.key === 'gem' && gemsLeft === 0 ||
-            attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid"
+            attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked"
           :class="{'notEnough': !preventHealthPotion ||
             !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)}"
           @click="buyItem()"
@@ -310,21 +308,6 @@
       display: block;
     }
 
-    .badge-dialog {
-      color: $gray-300;
-      position: absolute;
-      left: -14px;
-      padding: 8px 10px;
-      top: -12px;
-      background: white;
-      cursor: pointer;
-
-      &.item-selected-badge {
-        background: $purple-300;
-        color: $white;
-      }
-    }
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -405,11 +388,11 @@ import svgClose from '@/assets/svg/close.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgGem from '@/assets/svg/gem.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
-import svgPin from '@/assets/svg/pin.svg';
 import svgClock from '@/assets/svg/clock.svg';
 import svgWhiteClock from '@/assets/svg/clock-white.svg';
 
 import BalanceInfo from './balanceInfo.vue';
+import PinBadge from '@/components/ui/pinBadge';
 import currencyMixin from './_currencyMixin';
 import notifications from '@/mixins/notifications';
 import buyMixin from '@/mixins/buy';
@@ -439,6 +422,7 @@ export default {
     EquipmentAttributesGrid,
     Item,
     Avatar,
+    PinBadge,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
   props: {
@@ -463,7 +447,6 @@ export default {
         gold: svgGold,
         gems: svgGem,
         hourglasses: svgHourglasses,
-        pin: svgPin,
         clock: svgClock,
         whiteClock: svgWhiteClock,
       }),

website/client/src/components/shops/featuredItemsHeader.vue

@@ -37,14 +37,12 @@
               slot-scope="ctx"
             >
               <span
-                class="badge badge-pill badge-item badge-svg"
+                class="badge-top"
-                :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                 @click.prevent.stop="togglePinned(ctx.item)"
               >
-                <span
+                <pin-badge
-                  class="svg-icon inline icon-12 color"
+                  :pinned="ctx.item.pinned"
-                  v-html="icons.pin"
+                />
-                ></span>
               </span>
             </template>
           </shopItem>
@@ -55,14 +53,14 @@
 </template>
 
 <script>
+import PinBadge from '@/components/ui/pinBadge';
 import ShopItem from './shopItem';
 
 import pinUtils from '@/mixins/pinUtils';
 
-import svgPin from '@/assets/svg/pin.svg';
-
 export default {
   components: {
+    PinBadge,
     ShopItem,
   },
   mixins: [pinUtils],
@@ -72,13 +70,6 @@ export default {
     featuredText: String,
     featuredItems: Array,
   },
-  data () {
-    return {
-      icons: Object.freeze({
-        pin: svgPin,
-      }),
-    };
-  },
   methods: {
     featuredItemSelected (item) {
       this.$emit('featuredItemSelected', item);
@@ -105,6 +96,14 @@ export default {
     align-items: center;
   }
 
+  .badge-pin:not(.pinned) {
+      display: none;
+    }
+
+  .item:hover .badge-pin {
+    display: block;
+  }
+
   .content {
     display: flex;
     flex-direction: column;

website/client/src/components/shops/market/categoryItem.vue

@@ -12,39 +12,41 @@
       {{ gemsLeft }}
     </div>
     <span
-      class="badge badge-pill badge-item badge-svg"
+      class="badge-top"
-      :class="{'item-selected-badge': item.pinned, 'hide': !item.pinned}"
       @click.prevent.stop="togglePinned(item)"
     >
-      <span
+      <pin-badge
-        class="svg-icon inline icon-12 color"
+        :pinned="item.pinned"
-        v-html="icons.pin"
+      />
-      ></span>
     </span>
   </div>
 </template>
 
+<style lang="scss" scoped>
+  .badge-pin:not(.pinned) {
+      display: none;
+    }
+
+  .item:hover .badge-pin {
+    display: block;
+  }
+</style>
+
 <script>
 import { mapState } from '@/libs/store';
 import CountBadge from '@/components/ui/countBadge';
 
-import svgPin from '@/assets/svg/pin.svg';
+import PinBadge from '@/components/ui/pinBadge';
 import planGemLimits from '@/../../common/script/libs/planGemLimits';
 import pinUtils from '../../../mixins/pinUtils';
 
 export default {
   components: {
     CountBadge,
+    PinBadge,
   },
   mixins: [pinUtils],
   props: ['item'],
-  data () {
-    return {
-      icons: Object.freeze({
-        pin: svgPin,
-      }),
-    };
-  },
   computed: {
     ...mapState({
       user: 'user.data',

website/client/src/components/shops/market/equipmentSection.vue

@@ -49,7 +49,6 @@
         <shopItem
           :key="ctx.item.key"
           :item="ctx.item"
-          :empty-item="userItems.gear[ctx.item.key] === undefined"
           :popover-position="'top'"
           @click="gearSelected(ctx.item)"
         >
@@ -58,14 +57,12 @@
             slot-scope="ctx"
           >
             <span
-              class="badge badge-pill badge-item badge-svg"
+              class="badge-top"
-              :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
               @click.prevent.stop="togglePinned(ctx.item)"
             >
-              <span
+              <pin-badge
-                class="svg-icon inline icon-12 color"
+                :pinned="ctx.item.pinned"
-                v-html="icons.pin"
+              />
-              ></span>
             </span>
           </template>
         </shopItem>
@@ -81,11 +78,11 @@ import { mapState } from '@/libs/store';
 import LayoutSection from '@/components/ui/layoutSection';
 import FilterDropdown from '@/components/ui/filterDropdown';
 import ItemRows from '@/components/ui/itemRows';
+import PinBadge from '@/components/ui/pinBadge';
 import ShopItem from '../shopItem';
 
 import shops from '@/../../common/script/libs/shops';
 
-import svgPin from '@/assets/svg/pin.svg';
 import svgWarrior from '@/assets/svg/warrior.svg';
 import svgWizard from '@/assets/svg/wizard.svg';
 import svgRogue from '@/assets/svg/rogue.svg';
@@ -112,6 +109,7 @@ export default {
     LayoutSection,
     FilterDropdown,
     ItemRows,
+    PinBadge,
     ShopItem,
   },
   mixins: [pinUtils],
@@ -122,7 +120,6 @@ export default {
       selectedSortGearBy: sortGearTypes[0],
       selectedGroupGearByClass: '',
       icons: Object.freeze({
-        pin: svgPin,
         warrior: svgWarrior,
         wizard: svgWizard,
         rogue: svgRogue,
@@ -168,9 +165,7 @@ export default {
       return this.$t(classType);
     },
     gearSelected (item) {
-      if (!item.locked) {
       this.$root.$emit('buyModal::showItem', item);
-      }
     },
     filterGearItems () {
       const category = _filter(this.marketGearCategories, ['identifier', this.selectedGroupGearByClass]);
@@ -200,9 +195,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .equipment-rows {
+  .badge-pin:not(.pinned) {
-    ::v-deep .item.item-empty {
+      display: none;
-      background: white;
     }
+
+  .item:hover .badge-pin {
+    display: block;
   }
 </style>

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

@@ -176,15 +176,9 @@ import FilterDropdown from '@/components/ui/filterDropdown';
 import MarketFilter from './filter';
 
 import SellModal from './sellModal.vue';
-
-import svgPin from '@/assets/svg/pin.svg';
-import svgGem from '@/assets/svg/gem.svg';
-import svgInformation from '@/assets/svg/information.svg';
-
 import getItemInfo from '@/../../common/script/libs/getItemInfo';
 import shops from '@/../../common/script/libs/shops';
 
-
 import notifications from '@/mixins/notifications';
 import buyMixin from '@/mixins/buy';
 import currencyMixin from '../_currencyMixin';
@@ -222,13 +216,6 @@ export default {
 
       searchText: null,
       searchTextThrottled: null,
-
-      icons: Object.freeze({
-        pin: svgPin,
-        gem: svgGem,
-        information: svgInformation,
-      }),
-
       sortItemsBy: sortItems,
       selectedSortItemsBy: sortItems[0],
 

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

@@ -6,14 +6,12 @@
   >
     <span
       v-if="withPin"
-      class="badge badge-pill badge-dialog"
+      class="badge-dialog"
-      :class="{'item-selected-badge': isPinned}"
       @click.prevent.stop="togglePinned()"
     >
-      <span
+      <pin-badge
-        class="svg-icon inline color icon-10"
+        :pinned="isPinned"
-        v-html="icons.pin"
+      />
-      ></span>
     </span>
     <div class="close">
       <span
@@ -29,7 +27,10 @@
     >
       <div class="inner-content">
         <questDialogContent :item="item" />
-        <div class="purchase-amount">
+        <div
+          class="purchase-amount"
+          v-if="!item.locked"
+        >
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
@@ -59,7 +60,8 @@
         </div>
         <button
           v-if="priceType === 'gems'
-            && !enoughCurrency(priceType, item.value * selectedAmountToBuy)"
+            && !enoughCurrency(priceType, item.value * selectedAmountToBuy)
+            && !item.locked"
           class="btn btn-primary"
           @click="purchaseGems()"
         >
@@ -206,21 +208,6 @@
       display: block;
     }
 
-    .badge-dialog {
-      color: $gray-300;
-      position: absolute;
-      left: -14px;
-      padding: 8px 10px;
-      top: -12px;
-      background: white;
-      cursor: pointer;
-
-      &.item-selected-badge {
-        background: $purple-300;
-        color: $white;
-      }
-    }
-
     .limitedTime {
       height: 32px;
       background-color: $purple-300;
@@ -291,13 +278,13 @@ import svgExperience from '@/assets/svg/experience.svg';
 import svgGem from '@/assets/svg/gem.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
-import svgPin from '@/assets/svg/pin.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
 import notifications from '@/mixins/notifications';
 import buyMixin from '@/mixins/buy';
 import numberInvalid from '@/mixins/numberInvalid';
+import PinBadge from '@/components/ui/pinBadge';
 
 import questDialogDrops from './questDialogDrops';
 import questDialogContent from './questDialogContent';
@@ -305,6 +292,7 @@ import questDialogContent from './questDialogContent';
 export default {
   components: {
     BalanceInfo,
+    PinBadge,
     questDialogDrops,
     questDialogContent,
   },
@@ -329,7 +317,6 @@ export default {
         gem: svgGem,
         gold: svgGold,
         hourglass: svgHourglasses,
-        pin: svgPin,
       }),
 
       isPinned: false,

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="badge-top"
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                     @click.prevent.stop="togglePinned(ctx.item)"
                   >
-                    <span
+                    <pin-badge
-                      class="svg-icon inline icon-12 color"
+                      :pinned="ctx.item.pinned"
-                      v-html="icons.pin"
+                    />
-                    ></span>
                   </span>
                 </template>
               </shopItem>
@@ -185,14 +183,12 @@
                 slot-scope="ctx"
               >
                 <span
-                  class="badge badge-pill badge-item badge-svg"
+                  class="badge-top"
-                  :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                   @click.prevent.stop="togglePinned(ctx.item)"
                 >
-                  <span
+                  <pin-badge
-                    class="svg-icon inline icon-12 color"
+                    :pinned="ctx.item.pinned"
-                    v-html="icons.pin"
+                  />
-                  ></span>
                 </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="badge-top"
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                     @click.prevent.stop="togglePinned(ctx.item)"
                   >
-                    <span
+                    <pin-badge
-                      class="svg-icon inline icon-12 color"
+                      :pinned="ctx.item.pinned"
-                      v-html="icons.pin"
+                    />
-                    ></span>
                   </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="badge-top"
-                :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                 @click.prevent.stop="togglePinned(ctx.item)"
               >
-                <span
+                <pin-badge
-                  class="svg-icon inline icon-12 color"
+                  :pinned="ctx.item.pinned"
-                  v-html="icons.pin"
+                />
-                ></span>
               </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');

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

@@ -103,7 +103,21 @@
                 :popover-position="'top'"
                 :show-event-badge="false"
                 @click="itemSelected(item)"
+              >
+                <template
+                  slot="itemBadge"
+                  slot-scope="ctx"
+                >
+                  <span
+                    class="badge-top"
+                    @click.prevent.stop="togglePinned(ctx.item)"
+                  >
+                    <pin-badge
+                      :pinned="ctx.item.pinned"
                     />
+                  </span>
+                </template>
+              </shopItem>
             </div>
           </div>
         </div>
@@ -181,14 +195,12 @@
                   slot-scope="ctx"
                 >
                   <span
-                    class="badge badge-pill badge-item badge-svg"
+                    class="badge-top"
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                     @click.prevent.stop="togglePinned(ctx.item)"
                   >
-                    <span
+                    <pin-badge
-                      class="svg-icon inline icon-12 color"
+                      :pinned="ctx.item.pinned"
-                      v-html="icons.pin"
+                    />
-                    ></span>
                   </span>
                 </template>
               </shopItem>
@@ -205,43 +217,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;
   }
@@ -273,6 +248,14 @@
       position: relative;
     }
 
+    .badge-pin:not(.pinned) {
+        display: none;
+      }
+
+    .item:hover .badge-pin {
+      display: block;
+    }
+
     h3.classgroup {
       line-height: 1.5;
       display: flex;
@@ -392,20 +375,19 @@ import _groupBy from 'lodash/groupBy';
 import _reverse from 'lodash/reverse';
 import { mapState } from '@/libs/store';
 
-import ShopItem from '../shopItem';
 import Checkbox from '@/components/ui/checkbox';
+import PinBadge from '@/components/ui/pinBadge';
+import ShopItem from '../shopItem';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 import buyMixin from '@/mixins/buy';
 import currencyMixin from '../_currencyMixin';
 import pinUtils from '@/mixins/pinUtils';
 
-import svgPin from '@/assets/svg/pin.svg';
 import svgWarrior from '@/assets/svg/warrior.svg';
 import svgWizard from '@/assets/svg/wizard.svg';
 import svgRogue from '@/assets/svg/rogue.svg';
 import svgHealer from '@/assets/svg/healer.svg';
 
-
 import isPinned from '@/../../common/script/libs/isPinned';
 import getOfficialPinnedItems from '@/../../common/script/libs/getOfficialPinnedItems';
 
@@ -415,9 +397,10 @@ import shops from '@/../../common/script/libs/shops';
 
 export default {
   components: {
+    Checkbox,
+    PinBadge,
     ShopItem,
     toggleSwitch,
-    Checkbox,
   },
   mixins: [buyMixin, currencyMixin, pinUtils],
   data () {
@@ -427,7 +410,6 @@ export default {
       searchTextThrottled: null,
 
       icons: Object.freeze({
-        pin: svgPin,
         warrior: svgWarrior,
         wizard: svgWizard,
         rogue: svgRogue,
@@ -476,7 +458,10 @@ export default {
 
       const itemsNotOwned = seasonal.featured.items
         .filter(item => !this.user.items.gear.owned[item.key]);
-      seasonal.featured.items = itemsNotOwned;
+      seasonal.featured.items = _map(itemsNotOwned, e => ({
+        ...e,
+        pinned: isPinned(this.user, e, this.usersOfficalPinnedItems),
+      }));
 
       // If we are out of gear, show the spells
       // @TODO: add dates to check instead?
@@ -609,7 +594,6 @@ export default {
       return false;
     },
     itemSelected (item) {
-      if (item.locked) return;
       this.$root.$emit('buyModal::showItem', item);
     },
   },

website/client/src/components/shops/shopItem.vue

@@ -16,14 +16,13 @@
         ></slot>
         <span
           v-if="item.event && item.owned == null && showEventBadge"
-          class="badge badge-pill badge-item badge-clock"
+          class="badge badge-round badge-item badge-clock"
         >
           <span
             class="svg-icon inline clock"
             v-html="icons.clock"
           ></span>
         </span>
-        <div class="shop-content">
         <span
           v-if="item.locked"
           class="svg-icon inline lock"
@@ -43,10 +42,14 @@
             :item="item"
           ></slot>
         </div>
-          <div class="price">
+        <div
+          class="price d-flex align-items-center justify-content-center"
+          :class="currencyClass"
+        >
           <span
             v-once
-              class="svg-icon inline icon-16"
+            :class="{ 'w-0': currencyClass === 'unlock'}"
+            class="svg-icon inline icon-16 mr-1"
             v-html="icons[currencyClass]"
           ></span>
           <span
@@ -57,7 +60,6 @@
         </div>
       </div>
     </div>
-    </div>
     <b-popover
       v-if="showPopover"
       :target="itemId"
@@ -121,60 +123,66 @@
   }
 
   .item {
-    min-height: 106px;
+    height: 7.5rem;
-  }
+    width: 94px;
-
+    border-radius: 4px;
-  .item:not(.locked) {
+    background-color: $white;
+    box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
     cursor: pointer;
-  }
 
-  .item.item-empty {
+    &.locked .price {
-    border-radius: 2px;
+      opacity: 0.5;
-    background-color: #f9f9f9;
-    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
-  }
-
-  .shop-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    & > * {
-      margin-top : 12px;
     }
   }
 
   .image {
-    height: 50px;
+    margin: 12px 13px;
   }
 
-
   .price {
-    .svg-icon {
+    height: 1.75rem;
-      padding-top: 2px;
+    width: 94px;
-      margin-right: 4px;
+    margin-left: -1px;
+    margin-right: -1px;
+    border-radius: 0px 0px 4px 4px;
+
+    &.gems {
+      background-color: rgba($green-100, 0.15);
     }
 
-    margin-top: 1.25em;
+    &.gold {
+      background-color: rgba($yellow-100, 0.15);
+    }
+
+    &.hourglasses {
+      background-color: rgba($blue-50, 0.15);
+    }
+
+    &.unlock {
+      background-color: rgba($gray-400, 0.15);
+    }
   }
 
   .price-label {
-    height: 16px;
     font-family: Roboto;
-    font-size: 16px;
+    font-size: 12px;
     font-weight: bold;
     line-height: 1.33;
 
     &.gems {
-      color: $green-10;
+      color: $green-1;
     }
 
     &.gold {
-      color: $yellow-10
+      color: $yellow-1;
+    }
+
+    &.unlock {
+      color: $gray-100;
     }
 
     &.hourglasses {
-      color: $blue-10;
+      color: $blue-1;
     }
   }
 
@@ -185,9 +193,10 @@
     right: 8px;
     top: 8px;
     margin-top: 0;
+    color: $gray-200;
   }
 
-  span.badge.badge-pill.badge-item.badge-clock {
+  span.badge.badge-round.badge-item.badge-clock {
     height: 24px;
     width: 24px;
     background-color: $purple-300;
@@ -206,7 +215,7 @@
   .suggestedDot {
     width: 6px;
     height: 6px;
-    background-color: $suggested-item-color;
+    background-color: $purple-400;
     border-radius: 4px;
 
     position: absolute;
@@ -219,6 +228,10 @@
     width: 48px;
     height: 48px;
   }
+
+  .w-0 {
+    width: 0rem;
+  }
 </style>
 
 <script>
@@ -235,7 +248,6 @@ import EquipmentAttributesPopover from '@/components/inventory/equipment/attribu
 
 import QuestInfo from './quests/questInfo.vue';
 
-
 import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
 
 export default {
@@ -271,6 +283,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    owned: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return Object.freeze({
@@ -290,6 +306,7 @@ export default {
       return false;
     },
     currencyClass () {
+      if (this.item.unlockCondition && this.item.unlockCondition.condition === 'party invite' && !this.owned) return 'unlock';
       if (this.item.currency && this.icons[this.item.currency]) {
         return this.item.currency;
       }
@@ -305,6 +322,7 @@ export default {
       this.$emit('click', {});
     },
     getPrice () {
+      if (this.item.unlockCondition && this.item.unlockCondition.condition === 'party invite' && !this.owned) return this.item.unlockCondition.text();
       if (this.price === -1) {
         return this.item.value;
       }

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

@@ -139,13 +139,13 @@
               >
                 <span
                   v-if="ctx.item.pinType !== 'IGNORE'"
-                  class="badge badge-pill badge-item badge-svg"
+                  class="badge-top"
-                  :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                   @click.prevent.stop="togglePinned(ctx.item)"
-                ><span
+                >
-                  class="svg-icon inline icon-12 color"
+                  <pin-badge
-                  v-html="icons.pin"
+                    :pinned="ctx.item.pinned"
-                ></span></span>
+                  />
+                </span>
               </template>
             </shopItem>
           </template>
@@ -177,43 +177,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;
   }
@@ -223,7 +186,6 @@
     width: 33%;
     margin-bottom: 24px;
 
-
     .items {
       border-radius: 2px;
       background-color: #edecee;
@@ -245,6 +207,14 @@
       position: relative;
     }
 
+    .badge-pin:not(.pinned) {
+        display: none;
+      }
+
+    .item:hover .badge-pin {
+      display: block;
+    }
+
     .avatar {
       cursor: default;
       margin: 0 auto;
@@ -319,15 +289,14 @@ import { mapState } from '@/libs/store';
 import ShopItem from '../shopItem';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
-import toggleSwitch from '@/components/ui/toggleSwitch';
 import QuestInfo from '../quests/questInfo.vue';
+import PinBadge from '@/components/ui/pinBadge';
+import toggleSwitch from '@/components/ui/toggleSwitch';
 
 import BuyQuestModal from '../quests/buyQuestModal.vue';
 
-import svgPin from '@/assets/svg/pin.svg';
 import svgHourglass from '@/assets/svg/hourglass.svg';
 
-
 import isPinned from '@/../../common/script/libs/isPinned';
 import shops from '@/../../common/script/libs/shops';
 
@@ -338,6 +307,7 @@ export default {
     ShopItem,
     Item,
     ItemRows,
+    PinBadge,
     toggleSwitch,
     QuestInfo,
 
@@ -352,7 +322,6 @@ export default {
       searchTextThrottled: null,
 
       icons: Object.freeze({
-        pin: svgPin,
         hourglass: svgHourglass,
       }),
 

website/client/src/components/tasks/column.vue

@@ -113,7 +113,6 @@
             v-for="reward in inAppRewards"
             :key="reward.key"
             :item="reward"
-            :highlight-border="reward.isSuggested"
             :show-popover="showPopovers"
             :popover-position="'left'"
             @click="openBuyDialog(reward)"
@@ -123,14 +122,12 @@
               slot-scope="ctx"
             >
               <span
-                class="badge badge-pill badge-item badge-svg"
+                class="badge-top"
-                :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.highlightBorder}"
                 @click.prevent.stop="togglePinned(ctx.item)"
               >
-                <span
+                <pin-badge
-                  class="svg-icon inline icon-12 color"
+                  :pinned="ctx.item.pinned"
-                  v-html="icons.pin"
+                />
-                ></span>
               </span>
             </template>
           </shopItem>
@@ -147,6 +144,14 @@
     cursor: grabbing;
   }
 
+  .badge-pin {
+    display: none;
+  }
+
+  .item:hover .badge-pin {
+    display: block;
+  }
+
   .tasks-column {
     min-height: 556px;
   }
@@ -335,6 +340,7 @@ import buyMixin from '@/mixins/buy';
 import { mapState, mapActions, mapGetters } from '@/libs/store';
 import shopItem from '../shops/shopItem';
 import BuyQuestModal from '@/components/shops/quests/buyQuestModal.vue';
+import PinBadge from '@/components/ui/pinBadge';
 
 import notifications from '@/mixins/notifications';
 import { shouldDo } from '@/../../common/script/cron';
@@ -347,7 +353,6 @@ import {
   getActiveFilter,
 } from '@/libs/store/helpers/filterTasks';
 
-import svgPin from '@/assets/svg/pin.svg';
 import habitIcon from '@/assets/svg/habit.svg';
 import dailyIcon from '@/assets/svg/daily.svg';
 import todoIcon from '@/assets/svg/todo.svg';
@@ -359,6 +364,7 @@ export default {
     Task,
     ClearCompletedTodos,
     BuyQuestModal,
+    PinBadge,
     shopItem,
     draggable,
   },
@@ -384,7 +390,6 @@ export default {
       daily: dailyIcon,
       todo: todoIcon,
       reward: rewardIcon,
-      pin: svgPin,
     });
 
     const typeLabel = '';

website/client/src/components/ui/countBadge.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="show && count > 0"
-    class="badge badge-pill badge-item badge-count"
+    class="badge badge-pill badge-item badge-count d-flex justify-content-center align-items-center"
   >{{ count }}</span>
 </template>
 
@@ -10,13 +10,15 @@
 
 .badge-count {
   right: -9px;
+  top: -12px;
+  border-radius: 100px;
   color: $white;
   background: $gray-200;
   padding: 4.5px 8.5px;
-  min-width: 24px;
+  min-width: 1.5rem;
-  height: 24px;
+  height: 1.5rem;
-  box-shadow: 0 1px 1px 0 rgba($black, 0.12);
   z-index: 1;
+  user-select: none;
 }
 
 </style>

website/client/src/components/ui/pinBadge.stories.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+import PinBadge from './pinBadge.vue';
+
+const stories = storiesOf('Pin Badge', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('states', () => ({
+    components: { PinBadge },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <pin-badge :pinned="pinned"></pin-badge>
+      </div>
+    `,
+    props: {
+      pinned: {
+        default: boolean('Pinned', false),
+      },
+    },
+  }));

website/client/src/components/ui/pinBadge.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="badge badge-round badge-pin align-items-center justify-content-center"
+    :class="{'pinned': pinned}"
+  >
+    <div
+      class="svg-icon color"
+      v-html="icons.pin">
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+  .badge-pin {
+    background-color: $white;
+    color: $gray-200;
+    transition: none;
+    display: flex;
+    cursor: pointer;
+    padding: 0.25rem;
+
+    &:hover:not(.pinned) {
+      color: $purple-300;
+    }
+
+    &.pinned {
+      background-color: $purple-300;
+      color: $white;
+    }
+
+    .svg-icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+</style>
+
+<script>
+import svgPin from '@/assets/svg/pin.svg';
+
+export default {
+  props: {
+    pinned: {
+      type: Boolean,
+    },
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        pin: svgPin,
+      }),
+    };
+  },
+};
+</script>

website/client/src/components/ui/starBadge.vue

@@ -1,36 +1,53 @@
 <template>
   <span
     v-if="show"
-    class="badge badge-pill badge-item badge-star"
+    class="badge badge-round badge-item badge-star"
     :class="{'item-selected-badge': selected === true}"
     @click.stop="click"
-  >&#9733;</span>
+  >
+    <div
+      class="svg-icon color"
+      v-html="icons.star"
+    >
+    </div>
+  </span>
 </template>
 
 <style lang="scss">
 @import '~@/assets/scss/colors.scss';
 
-.badge-star {
+  .badge-star {
     cursor: pointer;
     display: none;
     left: -9px;
     color: $gray-400;
     background: $white;
-  padding: 4.5px 6px;
+    padding: 0.375rem;
 
     &.item-selected-badge {
       display: block;
       background: $teal-50;
       color: $white;
     }
-}
 
-.item:hover > .badge-star {
+    &:hover:not(.item-selected-badge) {
+      color: $purple-300;
+    }
+
+    .svg-icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .item:hover > .badge-star {
     display: block;
-}
+  }
 </style>
 
 <script>
+import svgStar from '@/assets/svg/star-badge.svg';
+
 export default {
   props: {
     show: {
@@ -40,6 +57,13 @@ export default {
       type: Boolean,
     },
   },
+  data () {
+    return {
+      icons: Object.freeze({
+        star: svgStar,
+      }),
+    };
+  },
   methods: {
     click () {
       this.$emit('click');

website/common/script/content/quests.js

@@ -2241,10 +2241,6 @@ const quests = {
     completion: t('questDustBunniesCompletion'),
     value: 1,
     category: 'unlockable',
-    unlockCondition: {
-      condition: 'party invite',
-      text: t('createAccountReward'),
-    },
     boss: {
       name: t('questDustBunniesBoss'),
       hp: 100,