From fd5bc8f0b956225305197b96da22c92b6f045ad7 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Tue, 4 Jun 2024 11:50:26 -0500
Subject: [PATCH] fix(shops): various cleanup

---
 .../avatarModal/customize-options.vue         |  1 +
 .../components/avatarModal/extra-settings.vue |  4 +-
 .../components/shops/customizations/index.vue |  2 +-
 .../components/shops/timeTravelers/index.vue  | 39 ++++++++++++-------
 .../tasks/modal-controls/selectDifficulty.vue |  1 +
 website/client/src/store/actions/user.js      |  2 +-
 6 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue
index 2df1895016..62c42fd814 100644
--- a/website/client/src/components/avatarModal/customize-options.vue
+++ b/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"
diff --git a/website/client/src/components/avatarModal/extra-settings.vue b/website/client/src/components/avatarModal/extra-settings.vue
index 470abd7ffb..2655b8b1ad 100644
--- a/website/client/src/components/avatarModal/extra-settings.vue
+++ b/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>
diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue
index 757259def1..59703aaae7 100644
--- a/website/client/src/components/shops/customizations/index.vue
+++ b/website/client/src/components/shops/customizations/index.vue
@@ -98,7 +98,7 @@
   }
 
   .featured-label {
-    margin-left: 52px;
+    margin-left: 90px;
     margin-top: 200px;
   }
 
diff --git a/website/client/src/components/shops/timeTravelers/index.vue b/website/client/src/components/shops/timeTravelers/index.vue
index ab6d829571..b36612f45c 100644
--- a/website/client/src/components/shops/timeTravelers/index.vue
+++ b/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>
diff --git a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
index 019ccdc544..d3ee734018 100644
--- a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
+++ b/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 }">
diff --git a/website/client/src/store/actions/user.js b/website/client/src/store/actions/user.js
index 88dc2f03df..6ede5b18dd 100644
--- a/website/client/src/store/actions/user.js
+++ b/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 {