[WIP] New Client - Shops/Market (#8884)

* initial market - routing - store - load market data

* move drawer/drawerSlider / count/star badge to components/ui

* filter market categories

* shopItem with gem / gold

* show count of purchable items

* show count of purchable itemsshow drawer with currently owned items + DrawerHeaderTabs-Component

* show featured gear

* show Gear - filter by class - sort by (type, price, stats) - sort market items

* Component: ItemRows - shows only the max items in one row (depending on the available width)

* Sell Dialog + Balance Component

* generic buy-dialog / attributes grid with highlight

* buyItem - hide already owned gear

* filter: hide locked/pinned - lock items if not enough gold

* API: Sell multiple items

* show avatar in buy-equipment-dialog with changed gear

* market banner

* misc fixes

* filter by text

* pin/unpin gear store actions

* Sell API: amount as query-parameter

* Update user.js

* fixes

* fix sell api amount test

* add back stroke/fill currentColor

* use scss variables

website/client/components/inventory/stable/index.vue

@@ -248,6 +248,7 @@
 <style lang="scss">
 
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/modal.scss';
 
   .standard-page .clearfix .float-right {
     margin-right: 24px;
@@ -329,22 +330,8 @@
     height: 114px;
   }
 
-  @mixin habitModal() {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    header, footer {
-      border: 0;
-    }
-
-    .modal-footer {
-      justify-content: center;
-    }
-  }
-
   #welcome-modal {
-    @include habitModal();
+    @include centeredModal();
 
     .npc_matt {
       margin: 0 auto 21px auto;
@@ -367,10 +354,14 @@
 
       width: 400px;
     }
+
+    .modal-footer {
+      justify-content: center;
+    }
   }
 
   #hatching-modal {
-    @include habitModal();
+    @include centeredModal();
 
     .content {
       text-align: center;
@@ -405,6 +396,10 @@
       right: 10px;
       top: 10px;
     }
+
+    .modal-footer {
+      justify-content: center;
+    }
   }
 
   .modal-backdrop.fade.show {
@@ -466,11 +461,11 @@
   import PetItem from './petItem';
   import MountItem from './mountItem.vue';
   import FoodItem from './foodItem';
-  import Drawer from 'client/components/inventory/drawer';
+  import Drawer from 'client/components/ui/drawer';
   import toggleSwitch from 'client/components/ui/toggleSwitch';
-  import StarBadge from 'client/components/inventory/starBadge';
-  import CountBadge from './countBadge';
-  import DrawerSlider from './drawerSlider';
+  import StarBadge from 'client/components/ui/starBadge';
+  import CountBadge from 'client/components/ui/countBadge';
+  import DrawerSlider from 'client/components/ui/drawerSlider';
 
   import ResizeDirective from 'client/directives/resize.directive';
   import DragDropDirective from 'client/directives/dragdrop.directive';
@@ -556,7 +551,6 @@
       petGroups () {
         let petGroups = [
           {
-            label: this.$t('filterByStandard'),
             key: 'standardPets',
             petSource: {
               eggs: this.content.dropEggs,
@@ -649,7 +643,7 @@
       drawerTabs () {
         return [
           {
-            label: this.$t('food'),
+            label: this.$t('foodTitle'),
             items: _filter(this.content.food, f => {
               return f.key !== 'Saddle' && this.userItems.food[f.key];
             }),