fix(shops): various cleanup

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

@@ -1,6 +1,7 @@
 <template>
   <div
     class="customize-options mb-4"
+    v-if="items.length > 1"
   >
     <div
       v-for="option in items"

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

@@ -21,7 +21,7 @@
       id="animal-ears"
     >
       <customize-options
-        v-if="animalItems('back').length > 1"
+        v-if="animalItems('back').length > 0"
         :items="animalItems('headAccessory')"
       />
     </div>
@@ -30,7 +30,7 @@
       id="animal-tails"
     >
       <customize-options
-        v-if="animalItems('back').length > 1"
+        v-if="animalItems('back').length > 0"
         :items="animalItems('back')"
       />
     </div>

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

@@ -98,7 +98,7 @@
   }
 
   .featured-label {
-    margin-left: 52px;
+    margin-left: 90px;
     margin-top: 200px;
   }
 

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

@@ -68,19 +68,28 @@
             </div>
           </div>
         </div>
-      </div><div
-        class="clearfix"
-      >
-        <div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <select-translated-array
-            :right="true"
-            :value="selectedSortItemsBy"
-            :items="sortItemsBy"
-            :inline-dropdown="false"
-            class="inline"
-            @select="selectedSortItemsBy = $event"
-          />
+      </div>
+      <div class="d-flex justify-content-between w-items mt-1">
+        <h1
+          v-once
+          class="mb-4 page-header"
+        >
+          {{ $t('timeTravelers') }}
+        </h1>
+        <div
+          class="clearfix"
+        >
+          <div class="float-right">
+            <span class="dropdown-label">{{ $t('sortBy') }}</span>
+            <select-translated-array
+              :right="true"
+              :value="selectedSortItemsBy"
+              :items="sortItemsBy"
+              :inline-dropdown="false"
+              class="inline"
+              @select="selectedSortItemsBy = $event"
+            />
+          </div>
         </div>
       </div>
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
@@ -141,6 +150,10 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/shops.scss';
+
+  .w-items {
+    max-width: 920px;
+  }
 </style>
 
 <script>

website/client/src/components/tasks/modal-controls/selectDifficulty.vue

@@ -7,6 +7,7 @@
       :disabled="disabled"
       :value="selected"
       :hide-icon="true"
+      :direct-select="true"
       @select="$emit('select', $event.value)"
     >
       <template #item="{ item, button }">

website/client/src/store/actions/user.js

@@ -48,7 +48,7 @@ export async function set (store, changes) {
           tagsIndexesToRemove.forEach(i => task.tags.splice(i, 1));
         });
       });
-    } else if ((key.startsWith('preferences.hair') || key.startsWith('preferences.chair'))
+    } else if (((key.startsWith('preferences.hair') && !(key.startsWith('preferences.hair.color'))) || key.startsWith('preferences.chair'))
       && getProps(user, key) === changes[key]) {
       setProps(user, key, key.startsWith('preferences.chair') ? 'none' : 0);
     } else {