From 652dfa6ecc5b1f6afe289a777d9ea75a90b2f8f8 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Wed, 26 Jul 2023 16:33:05 -0400
Subject: [PATCH 1/2] feat(content): upgrade profile page

---
 .../src/components/userMenu/profile.vue       | 312 +++++++-----------
 .../src/components/userMenu/profileStats.vue  |  36 +-
 2 files changed, 129 insertions(+), 219 deletions(-)

diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index d228a5769b..67fc95b1dd 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -1,173 +1,68 @@
 <template>
-  <div
-    v-if="!user && userLoaded"
-  >
-    <error404 />
-  </div>
-  <div
-    v-else-if="userLoaded"
-    class="profile"
-  >
-    <div class="header">
-      <div class="profile-actions d-flex">
-        <router-link
-          :to="{ path: '/private-messages', query: { uuid: user._id } }"
-          replace
-        >
-          <button
-            v-b-tooltip.hover.left="$t('sendMessage')"
-            class="btn btn-secondary message-icon"
-          >
-            <div
-              v-once
-              class="svg-icon message-icon"
-              v-html="icons.message"
-            ></div>
-          </button>
-        </router-link>
-        <button
-          v-b-tooltip.hover.bottom="$t('sendGems')"
-          class="btn btn-secondary gift-icon"
-          @click="openSendGemsModal()"
-        >
-          <div
-            class="svg-icon gift-icon"
-            v-html="icons.gift"
-          ></div>
-        </button>
-        <button
-          v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
-          v-b-tooltip.hover.right="$t('blockWarning')"
-          class="btn btn-secondary block-icon d-flex justify-content-center align-items-center"
-          @click="blockUser()"
-        >
-          <div
-            v-once
-            class="svg-icon block-icon"
-            v-html="icons.block"
-          ></div>
-        </button>
-        <button
-          v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1"
-          v-b-tooltip.hover.right="$t('unblock')"
-          class="btn btn-secondary positive-icon"
-          @click="unblockUser()"
-        >
-          <div
-            class="svg-icon positive-icon"
-            v-html="icons.positive"
-          ></div>
-        </button>
-        <button
-          v-if="hasPermission(userLoggedIn, 'moderator')"
-          v-b-tooltip.hover.right="'Admin - Toggle Tools'"
-          class="btn btn-secondary positive-icon d-flex justify-content-center align-items-center"
-          @click="toggleAdminTools()"
-        >
-          <div
-            class="svg-icon positive-icon"
-            v-html="icons.staff"
-          ></div>
-        </button>
-      </div>
-      <div
-        v-if="hasPermission(userLoggedIn, 'moderator') && adminToolsLoaded"
-        class="row admin-profile-actions"
-      >
-        <div class="col-12 text-right">
-          <span
-            v-if="!hero.flags || (hero.flags && !hero.flags.chatShadowMuted)"
-            v-b-tooltip.hover.bottom="'Turn on Shadow Muting'"
-            class="admin-action"
-            @click="adminTurnOnShadowMuting()"
-          >shadow-mute</span>
-          <span
-            v-if="hero.flags && hero.flags.chatShadowMuted"
-            v-b-tooltip.hover.bottom="'Turn off Shadow Muting'"
-            class="admin-action"
-            @click="adminTurnOffShadowMuting()"
-          >un-shadow-mute</span>
-          <span
-            v-if="!hero.flags || (hero.flags && !hero.flags.chatRevoked)"
-            v-b-tooltip.hover.bottom="'Revoke Chat Privileges'"
-            class="admin-action"
-            @click="adminRevokeChat()"
-          >mute</span>
-          <span
-            v-if="hero.flags && hero.flags.chatRevoked"
-            v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'"
-            class="admin-action"
-            @click="adminReinstateChat()"
-          >un-mute</span>
-          <span
-            v-if="!hero.auth.blocked"
-            v-b-tooltip.hover.bottom="'Ban User'"
-            class="admin-action"
-            @click="adminBlockUser()"
-          >ban</span>
-          <span
-            v-if="hero.auth.blocked"
-            v-b-tooltip.hover.bottom="'Un-Ban User'"
-            class="admin-action"
-            @click="adminUnblockUser()"
-          >un-ban</span>
-          <router-link
-            :to="{ name: 'adminPanelUser', params: { userIdentifier: userId } }"
-            replace
-          >
-            Admin Panel
-          </router-link>
+  <div>
+    <div
+      v-if="!user && userLoaded"
+    >
+      <error404 />
+    </div>
+    <div
+      v-else-if="userLoaded"
+      class="profile"
+    >
+      <!-- HEADER -->
+      <div class="header">
+        <div class="profile-actions d-flex">
+        </div>
+        <div class="row">
+          <div class="">
+            <member-details
+              :member="user"
+              :class-badge-position="'hidden'"
+            />
+          </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-12">
-          <member-details :member="user" />
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="text-center nav">
-        <div
-          class="nav-item"
-          :class="{active: selectedPage === 'profile'}"
-          @click="selectPage('profile')"
-        >
-          {{ $t('profile') }}
-        </div>
-        <div
-          class="nav-item"
-          :class="{active: selectedPage === 'stats'}"
-          @click="selectPage('stats')"
-        >
-          {{ $t('stats') }}
-        </div>
-        <div
-          class="nav-item"
-          :class="{active: selectedPage === 'achievements'}"
-          @click="selectPage('achievements')"
-        >
-          {{ $t('achievements') }}
+      <!-- STATE CHANGES -->
+      <div class="row state-pages">
+        <div class="text-center nav">
+          <div
+            class="nav-item"
+            :class="{active: selectedPage === 'profile'}"
+            @click="selectPage('profile')"
+          >
+            {{ $t('profile') }}
+          </div>
+          <div
+            class="nav-item"
+            :class="{active: selectedPage === 'stats'}"
+            @click="selectPage('stats')"
+          >
+            {{ $t('stats') }}
+          </div>
+          <div
+            class="nav-item"
+            :class="{active: selectedPage === 'achievements'}"
+            @click="selectPage('achievements')"
+          >
+            {{ $t('achievements') }}
+          </div>
         </div>
       </div>
     </div>
+    <!-- SHOW PROFILE -->
     <div
       v-show="selectedPage === 'profile'"
       v-if="user.profile"
       id="userProfile"
-      class="standard-page"
+      class="standard-page "
     >
       <div class="row">
-        <div class="col-12 col-md-8">
+        <div class="">
           <div class="header mb-3">
-            <h1>{{ user.profile.name }}</h1>
-            <div
-              v-if="user.auth && user.auth.local && user.auth.local.username"
-              class="name"
-            >
-              @{{ user.auth.local.username }}
-            </div>
+            <h1>{{ $t('about') }}</h1>
           </div>
         </div>
+        <!-- EDIT BUTTON REPURPOSE FOR SEND MESSAGE/OTHER ACTIONS-->
         <div class="col-12 col-md-4">
           <button
             v-if="user._id === userLoggedIn._id"
@@ -179,13 +74,13 @@
           </button>
         </div>
       </div>
+      <!-- PROFILE STUFF -->
       <div
         v-if="!editing"
         class="row"
       >
-        <div class="col-12 col-md-8">
+        <div class="">
           <div class="about profile-section">
-            <h2>{{ $t('about') }}</h2>
             <p
               v-if="user.profile.blurb"
               v-markdown="user.profile.blurb"
@@ -206,9 +101,8 @@
             </p>
           </div>
         </div>
-        <div class="col-12 col-md-4">
+        <div class="">
           <div class="info profile-section">
-            <h2>{{ $t('info') }}</h2>
             <div class="info-item">
               <div class="info-item-label">
                 {{ $t('joined') }}:
@@ -252,12 +146,13 @@
           <!-- @TODO: Implement in V2 .social-->
         </div>
       </div>
+      <!-- EDITING PROFILE -->
       <div
         v-if="editing"
         class="row"
       >
         <h1>{{ $t('editProfile') }}</h1>
-        <div class="col-12">
+        <div class="">
           <div
             class="alert alert-info alert-sm"
             v-html="$t('communityGuidelinesWarning', managerEmail)"
@@ -292,9 +187,9 @@
             <!-- include ../../shared/formatting-help-->
           </div>
         </div>
-        <div class="col-12 text-center">
+        <div class=" text-center">
           <button
-            class="btn btn-primary mr-2"
+            class="btn btn-primary"
             @click="save()"
           >
             {{ $t("save") }}
@@ -308,21 +203,22 @@
         </div>
       </div>
     </div>
+    <!-- ACHIEVEMENTS -->
     <div
       v-show="selectedPage === 'achievements'"
       v-if="user.achievements"
       id="achievements"
-      class="standard-page container"
+      class="standard-page container "
     >
       <div
         v-for="(category, key) in achievements"
         :key="key"
         class="row category-row"
       >
-        <h3 class="col-12 text-center mb-3">
+        <h3 class="text-center">
           {{ $t(`${key}Achievs`) }}
         </h3>
-        <div class="col-12">
+        <div class="">
           <div class="row achievements-row justify-content-center">
             <div
               v-for="(achievement, achievKey) in achievementsCategory(key, category)"
@@ -378,14 +274,14 @@
           </div>
         </div>
       </div>
-      <hr class="col-12">
+      <hr class="">
       <div class="row">
         <div
           v-if="user.achievements.challenges"
-          class="col-12 col-md-6"
+          class=""
         >
           <div class="achievement-icon achievement-karaoke-2x"></div>
-          <h3 class="text-center mt-2 mb-4">
+          <h3 class="text-center">
             {{ $t('challengesWon') }}
           </h3>
           <div
@@ -398,10 +294,10 @@
         </div>
         <div
           v-if="user.achievements.quests"
-          class="col-12 col-md-6"
+          class=""
         >
           <div class="achievement-icon achievement-alien2x"></div>
-          <h3 class="text-center mt-2 mb-4">
+          <h3 class="text-center">
             {{ $t('questsCompleted') }}
           </h3>
           <div
@@ -420,31 +316,48 @@
         </div>
       </div>
     </div>
-    <profileStats
-      v-show="selectedPage === 'stats'"
-      v-if="user.preferences"
-      :user="user"
-      :show-allocation="showAllocation()"
-    />
+    <!-- STATS -->
+    <div>
+      <profileStats
+        v-show="selectedPage === 'stats'"
+        v-if="user.preferences"
+        :user="user"
+        :show-allocation="showAllocation()"
+      />
+    </div>
   </div>
 </template>
 
 <style lang="scss" >
   @import '~@/assets/scss/colors.scss';
 
+  #profile {
+    .modal-header{
+
+    }
+
+    .modal-body {
+      padding: 0;
+      border-radius: 12px;
+    }
+    .modal-content {
+      background: $gray-700;
+      padding: 0;
+
+    }
+  }
+
   .profile {
     .member-details {
-      .character-name, small, .small-text {
-        color: #878190;
+      margin-left: 24px;
+      background-color: $white;
+
+      &.character-name, small, .small-text {
+        color: $gray-50;
       }
     }
-
     .standard-page {
-      padding-bottom: 0rem;
-    }
-
-    .modal-content {
-      background: #f9f9f9;
+      padding: 0px;
     }
 
     .progress-container > .progress {
@@ -538,22 +451,29 @@
     }
   }
 
+  .state-pages {
+    background-color: $gray-700;
+
+  }
+
   .nav {
+    font-size: 0.875rem;
     width: 100%;
     font-weight: bold;
     min-height: 40px;
     justify-content: center;
+    padding-top: 16px;
   }
 
   .nav-item {
     display: inline-block;
-    margin: 0 1.2em;
-    padding: 1em;
+    margin: 0 8px 8px 6px;
+    color: $gray-50;
   }
 
   .nav-item:hover, .nav-item.active {
-    color: #4f2a93;
-    border-bottom: 2px solid #4f2a93;
+    color: $purple-300;
+    border-bottom: 2px solid $purple-300;
     cursor: pointer;
   }
 
@@ -657,8 +577,8 @@
   }
 
     .member-details {
-      .character-name, small, .small-text {
-        color: #878190;
+      small, .small-text {
+        color: $gray-10;
       }
 
       .progress-container > .progress {
@@ -673,21 +593,11 @@
       size: 16px;
       color: $gray-50;
     }
-    h2:after {
-      background-color: $gray-500;
-      content: "";
-      display: inline-block;
-      height: 1px;
-      position: relative;
-      vertical-align: middle;
-      width: 100%;
-    }
   }
 
   .info {
-
     .info-item {
-      color: $gray-200;
+      color: $gray-50;
       size: 14px;
       margin-bottom: 8px;
 
diff --git a/website/client/src/components/userMenu/profileStats.vue b/website/client/src/components/userMenu/profileStats.vue
index 3e983a2b2b..b529b3b1ce 100644
--- a/website/client/src/components/userMenu/profileStats.vue
+++ b/website/client/src/components/userMenu/profileStats.vue
@@ -120,27 +120,27 @@
         </h2>
         <div class="well pet-mount-well">
           <div class="pet-mount-well-image">
+            <div
+              class="box"
+              :class="{white: user.items.currentPet}"
+            >
               <div
-                class="box"
-                :class="{white: user.items.currentPet}"
-              >
-                <div
-                  class="Pet"
-                  :class="`Pet-${user.items.currentPet}`"
-                ></div>
-              </div>
+                class="Pet"
+                :class="`Pet-${user.items.currentPet}`"
+              ></div>
             </div>
-            <div class="pet-mount-well-text">
-              <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
-              <div>
-                <strong>{{ $t('petsFound') }}:</strong>
-                {{ totalCount(user.items.pets) }}
-              </div>
-              <div>
-                <strong>{{ $t('beastMasterProgress') }}:</strong>
-                {{ beastMasterProgress(user.items.pets) }}
-              </div>
+          </div>
+          <div class="pet-mount-well-text">
+            <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
+            <div>
+              <strong>{{ $t('petsFound') }}:</strong>
+              {{ totalCount(user.items.pets) }}
             </div>
+            <div>
+              <strong>{{ $t('beastMasterProgress') }}:</strong>
+              {{ beastMasterProgress(user.items.pets) }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="stats-section-mounts col-12 col-md-6">

From ede036e94b53fb30956ef3e9784d16ef3a316c36 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Mon, 31 Jul 2023 12:07:46 -0500
Subject: [PATCH 2/2] Universal routing for migrations (#14772)

* refactor(notifs): universal routing for migrations

* fix(lint): remove whitespace

* chore(content): update migration for new scheme

* fix(migration): account for cake

* chore(images): update sprite CSS

---------

Co-authored-by: SabreCat <sabe@habitica.com>
---
 habitica-images                               |   2 +-
 .../archive/2023/20230731_naming_day.js       | 155 +++++
 .../assets/css/sprites/spritesmith-main.css   | 566 ++++++++++++------
 .../header/notifications/itemReceived.vue     |   4 +-
 4 files changed, 526 insertions(+), 201 deletions(-)
 create mode 100644 migrations/archive/2023/20230731_naming_day.js

diff --git a/habitica-images b/habitica-images
index 0c48d4c818..109539e445 160000
--- a/habitica-images
+++ b/habitica-images
@@ -1 +1 @@
-Subproject commit 0c48d4c81852b7a4b0a9b7f536ec75ba399fa044
+Subproject commit 109539e445936786e183ac800c1d956e1999f2b8
diff --git a/migrations/archive/2023/20230731_naming_day.js b/migrations/archive/2023/20230731_naming_day.js
new file mode 100644
index 0000000000..58ccfbb728
--- /dev/null
+++ b/migrations/archive/2023/20230731_naming_day.js
@@ -0,0 +1,155 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20230731_naming_day';
+import { v4 as uuid } from 'uuid';
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  let set;
+  let push;
+  const inc = {
+    'items.food.Cake_Base': 1,
+    'items.food.Cake_CottonCandyBlue': 1,
+    'items.food.Cake_CottonCandyPink': 1,
+    'items.food.Cake_Desert': 1,
+    'items.food.Cake_Golden': 1,
+    'items.food.Cake_Red': 1,
+    'items.food.Cake_Shade': 1,
+    'items.food.Cake_Skeleton': 1,
+    'items.food.Cake_White': 1,
+    'items.food.Cake_Zombie': 1,
+    'achievements.habiticaDays': 1,
+  };
+
+  if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.back_special_namingDay2020 !== 'undefined') {
+    set = { migration: MIGRATION_NAME };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_cake',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you some cake!',
+          destination: '/inventory/items',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.body_special_namingDay2018 !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.back_special_namingDay2020': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_back',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Tail and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.head_special_namingDay2017 !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.body_special_namingDay2018': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_body',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Cloak and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.pets && typeof user.items.pets['Gryphon-RoyalPurple'] !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.head_special_namingDay2017': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_head',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Helm and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.mounts && typeof user.items.mounts['Gryphon-RoyalPurple'] !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.pets.Gryphon-RoyalPurple': 5 };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_pet',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Pet and cake!',
+          destination: '/inventory/stable',
+        },
+        seen: false,
+      },
+    };
+  } else {
+    set = { migration: MIGRATION_NAME, 'items.mounts.Gryphon-RoyalPurple': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_mount',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Mount and cake!',
+          destination: '/inventory/stable',
+        },
+        seen: false,
+      },
+    };
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  if (push) {
+    return await user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
+  } else {
+    return await user.updateOne({ $set: set, $inc: inc }).exec();
+  }
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-07-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};
diff --git a/website/client/src/assets/css/sprites/spritesmith-main.css b/website/client/src/assets/css/sprites/spritesmith-main.css
index 6c74f83717..f3cd9bfc28 100644
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/website/client/src/assets/css/sprites/spritesmith-main.css
@@ -68,6 +68,11 @@
   width: 68px;
   height: 68px;
 }
+.achievement-bonelessBoss2x {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-bonelessBoss2x.png');
+  width: 68px;
+  height: 68px;
+}
 .achievement-boot2x {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-boot2x.png');
   width: 48px;
@@ -715,6 +720,11 @@
   width: 141px;
   height: 147px;
 }
+.background_bonsai_collection {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_bonsai_collection.png');
+  width: 141px;
+  height: 147px;
+}
 .background_branches_of_a_holiday_tree {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_branches_of_a_holiday_tree.png');
   width: 141px;
@@ -920,6 +930,11 @@
   width: 141px;
   height: 147px;
 }
+.background_dreamy_island {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_dreamy_island.png');
+  width: 141px;
+  height: 147px;
+}
 .background_drifting_raft {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_drifting_raft.png');
   width: 141px;
@@ -1729,6 +1744,11 @@
   width: 141px;
   height: 147px;
 }
+.background_rock_garden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_rock_garden.png');
+  width: 141px;
+  height: 147px;
+}
 .background_rolling_hills {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_rolling_hills.png');
   width: 141px;
@@ -2441,6 +2461,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_bonsai_collection {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_bonsai_collection.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_branches_of_a_holiday_tree {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_branches_of_a_holiday_tree.png');
   width: 68px;
@@ -2651,6 +2676,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_dreamy_island {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_dreamy_island.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_drifting_raft {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_drifting_raft.png');
   width: 68px;
@@ -3460,6 +3490,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_rock_garden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_rock_garden.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_rolling_hills {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_rolling_hills.png');
   width: 68px;
@@ -18435,6 +18470,51 @@
   width: 114px;
   height: 87px;
 }
+.body_armoire_karateBlackBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateBlackBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateBlueBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateBlueBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateBrownBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateBrownBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateGreenBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateGreenBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateOrangeBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateOrangeBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karatePurpleBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karatePurpleBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateRedBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateRedBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateWhiteBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateWhiteBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateYellowBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateYellowBelt.png');
+  width: 114px;
+  height: 90px;
+}
 .body_armoire_lifeguardWhistle {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_lifeguardWhistle.png');
   width: 114px;
@@ -18695,6 +18775,11 @@
   width: 114px;
   height: 90px;
 }
+.broad_armor_armoire_karateGi {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_karateGi.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_lamplightersGreatcoat {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_lamplightersGreatcoat.png');
   width: 114px;
@@ -20000,6 +20085,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_armor_armoire_karateGi {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_karateGi.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_armoire_lamplightersGreatcoat {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_lamplightersGreatcoat.png');
   width: 68px;
@@ -20230,6 +20320,51 @@
   width: 68px;
   height: 68px;
 }
+.shop_body_armoire_karateBlackBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateBlackBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateBlueBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateBlueBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateBrownBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateBrownBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateGreenBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateGreenBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateOrangeBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateOrangeBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karatePurpleBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karatePurpleBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateRedBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateRedBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateWhiteBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateWhiteBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateYellowBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateYellowBelt.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_body_armoire_lifeguardWhistle {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_lifeguardWhistle.png');
   width: 68px;
@@ -21785,6 +21920,11 @@
   width: 114px;
   height: 90px;
 }
+.slim_armor_armoire_karateGi {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_karateGi.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_lamplightersGreatcoat {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_lamplightersGreatcoat.png');
   width: 114px;
@@ -34229,6 +34369,204 @@
   width: 68px;
   height: 68px;
 }
+.headAccessory_special_bearEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_bearEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_blackHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blackHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_blueHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blueHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_cactusEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_cactusEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_foxEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_foxEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_greenHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_greenHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_lionEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_lionEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pandaEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_pandaEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pigEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_pigEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pinkHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pinkHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_redHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_redHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_tigerEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_tigerEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_whiteHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_whiteHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_wolfEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_wolfEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_yellowHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_yellowHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_headAccessory_special_bearEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_bearEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_blackHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blackHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_blueHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blueHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_cactusEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_cactusEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_foxEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_foxEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_greenHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_greenHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_lionEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_lionEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pandaEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pandaEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pigEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pigEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pinkHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pinkHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_redHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_redHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_tigerEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_tigerEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_whiteHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_whiteHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_wolfEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_wolfEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_yellowHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_yellowHeadband.png');
+  width: 68px;
+  height: 68px;
+}
 .head_0 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_0.png');
   width: 90px;
@@ -34610,204 +34948,6 @@
   width: 68px;
   height: 68px;
 }
-.headAccessory_special_bearEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_bearEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_blackHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blackHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_blueHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blueHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_cactusEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_cactusEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_foxEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_foxEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_greenHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_greenHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_lionEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_lionEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pandaEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_pandaEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pigEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_pigEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pinkHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pinkHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_redHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_redHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_tigerEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_tigerEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_whiteHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_whiteHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_wolfEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_wolfEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_yellowHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_yellowHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.shop_headAccessory_special_bearEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_bearEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_blackHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blackHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_blueHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blueHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_cactusEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_cactusEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_foxEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_foxEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_greenHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_greenHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_lionEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_lionEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pandaEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pandaEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pigEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pigEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pinkHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pinkHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_redHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_redHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_tigerEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_tigerEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_whiteHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_whiteHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_wolfEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_wolfEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_yellowHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_yellowHeadband.png');
-  width: 68px;
-  height: 68px;
-}
 .shield_healer_1 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_healer_1.png');
   width: 90px;
@@ -35873,6 +36013,36 @@
   width: 20px;
   height: 24px;
 }
+.notif_namingDay_back {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_back.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_body {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_body.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_cake {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_cake.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_head {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_head.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_mount {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_mount.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_pet {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_pet.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_orca_mount {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_orca_mount.png');
   width: 28px;
diff --git a/website/client/src/components/header/notifications/itemReceived.vue b/website/client/src/components/header/notifications/itemReceived.vue
index 700f7b47a5..90e97fb549 100644
--- a/website/client/src/components/header/notifications/itemReceived.vue
+++ b/website/client/src/components/header/notifications/itemReceived.vue
@@ -44,13 +44,13 @@ export default {
       if (!this.notification || !this.notification.data) {
         return;
       }
-      if (this.notification.data.destination === 'backgrounds') {
+      if (this.notification.data.destination.indexOf('backgrounds') !== -1) {
         this.$store.state.avatarEditorOptions.editingUser = true;
         this.$store.state.avatarEditorOptions.startingPage = 'backgrounds';
         this.$store.state.avatarEditorOptions.subpage = '2023';
         this.$root.$emit('bv::show::modal', 'avatar-modal');
       } else {
-        this.$router.push({ name: this.notification.data.destination || 'items' });
+        this.$router.push(this.notification.data.destination || '/inventory/items');
       }
     },
   },