WIP(shops): start wiring up buy modals

website/client/src/assets/scss/button.scss

@@ -218,13 +218,12 @@
 .btn-show-more {
   display: block;
   width: 100%;
-  margin-top: 12px;
   padding: 8px;
   font-size: 14px;
   line-height: 1.43;
   font-weight: bold;
   text-align: center;
-  background: $gray-600;
+  background: $gray-500;
   color: $gray-200 !important; // Otherwise it gets ignored when used on an A element
   box-shadow: none;
 

website/client/src/components/avatarModal/body-settings.vue

@@ -35,7 +35,7 @@
 import appearance from '@/../../common/script/content/appearance';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -51,7 +51,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',

website/client/src/components/avatarModal/customize-options.vue

@@ -67,11 +67,11 @@
 <script>
 import gem from '@/assets/svg/gem.svg';
 import gold from '@/assets/svg/gold.svg';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 
 export default {
   mixins: [
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: ['items', 'currentValue', 'fullSet'],
   data () {

website/client/src/components/avatarModal/extra-settings.vue

@@ -60,7 +60,7 @@
 import appearance from '@/../../common/script/content/appearance';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -76,7 +76,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',

website/client/src/components/avatarModal/hair-settings.vue

@@ -81,7 +81,7 @@ import appearance from '@/../../common/script/content/appearance';
 import appearanceSets from '@/../../common/script/content/appearance/sets';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -97,7 +97,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',

website/client/src/components/avatarModal/skin-settings.vue

@@ -36,7 +36,7 @@ import appearance from '@/../../common/script/content/appearance';
 import appearanceSets from '@/../../common/script/content/appearance/sets';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -56,7 +56,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',

website/client/src/components/creatorIntro.vue

@@ -1187,7 +1187,7 @@ import gold from '@/assets/svg/gold.svg';
 import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
 import svgClose from '@/assets/svg/close.svg';
-import { avatarEditorUtilies } from '../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 
 export default {
   components: {
@@ -1201,7 +1201,7 @@ export default {
     toggleSwitch,
     usernameForm,
   },
-  mixins: [guide, notifications, avatarEditorUtilies],
+  mixins: [guide, notifications, avatarEditorUtilities],
   data () {
     const backgroundShopSets = shops.getBackgroundShopSets();
 

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

@@ -89,19 +89,19 @@
           v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
           class="purchase-amount"
         >
-          <!-- this is where the pretty item cost element lives -->
+          <div class="item-cost justify-content-center my-3">
-          <div class="item-cost">
             <span
-              class="cost"
+              class="cost d-flex mx-auto"
               :class="getPriceClass()"
             >
               <span
-                class="svg-icon inline icon-24"
+                class="svg-icon icon-24 my-auto mr-1"
                 aria-hidden="true"
                 v-html="icons[getPriceClass()]"
               >
               </span>
               <span
+                class="my-auto"
                 :class="getPriceClass()"
               >{{ item.value }}</span>
             </span>
@@ -452,14 +452,11 @@
     }
 
     .item-cost {
-      display: inline-flex;
-      margin: 16px 0;
-      align-items: center;
       height: 40px;
     }
 
     .cost {
-      display: inline-block;
+      width: fit-content;
       font-family: sans-serif;
       font-size: 1.25rem;
       font-weight: bold;
@@ -470,19 +467,16 @@
       &.gems {
         color: $green-10;
         background-color: rgba(36, 204, 143, 0.15);
-        align-items: center;
       }
 
       &.gold {
         color: $yellow-5;
         background-color: rgba(255, 190, 93, 0.15);
-        align-items: center;
       }
 
       &.hourglasses {
         color: $hourglass-color;
         background-color: rgba(41, 149, 205, 0.15);
-        align-items: center;
       }
     }
 

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

@@ -38,7 +38,6 @@
       <div class="p-4">
         <h1
           v-once
-          class="mb-4"
         >
           {{ $t('customizations') }}
         </h1>
@@ -46,7 +45,7 @@
           v-for="category in categories"
           :key="category.identifier"
         >
-          <h2 class="mb-3">
+          <h2 class="mb-3 mt-4">
             {{ category.text }}
           </h2>
           <item-rows
@@ -67,6 +66,7 @@
                 :price-type="ctx.item.currency"
                 :empty-item="false"
                 :show-popover="Boolean(ctx.item.text)"
+                @click="selectItem(ctx.item)"
               />
             </template>
           </item-rows>
@@ -190,6 +190,9 @@ export default {
       return category.items.filter(item => !searchBy
         || item.text.toLowerCase().includes(searchBy));
     },
+    selectItem (item) {
+      this.$root.$emit('buyModal::showItem', item);
+    },
   },
 };
 </script>

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

@@ -193,6 +193,7 @@
     font-size: 12px;
     font-weight: bold;
     line-height: 1.33;
+    margin-bottom: 1px;
 
     &.gems {
       color: $green-1;
@@ -367,6 +368,7 @@ export default {
       this.$emit('click', {});
     },
     blur () {
+      if (!this.$refs?.popover) return;
       this.$refs.popover.$emit('enable');
     },
     getPrice () {

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

@@ -22,20 +22,12 @@
       :show-all="showAll"
       @click="toggleItemsToShow()"
     />
-    <div
-      v-else
-      class="fill-height"
-    ></div>
   </div>
 </template>
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .fill-height {
-    height: 38px; // button + margin + padding
-  }
-
   .item-rows {
     margin-right: -1.5rem;
   }

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

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="btn btn-flat btn-show-more mb-4"
+    class="btn btn-flat btn-show-more mt-2"
     @click="$emit('click')"
   >
     <span class="button-text">

website/client/src/mixins/avatarEditUtilities.js

@@ -9,7 +9,7 @@ import appearanceSets from '@/../../common/script/content/appearance/sets';
 
 import { userStateMixin } from './userState';
 
-export const avatarEditorUtilies = { // eslint-disable-line import/prefer-default-export
+export const avatarEditorUtilities = { // eslint-disable-line import/prefer-default-export
   mixins: [userStateMixin],
   data () {
     return {

website/common/script/libs/shops.js

@@ -549,7 +549,7 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
   const officialPinnedItems = getOfficialPinnedItems();
 
   const backgroundsCategory = {
-    identifier: 'backgrounds',
+    identifier: 'background',
     text: i18n.t('backgrounds', language),
   };
   backgroundsCategory.items = values(content.backgroundsFlat)