Fix inconsistent profile URL format between own and other users' profiles

- Update profile tab navigation to use consistent URL format for all users - Redirect old /user/* routes to new format for backward compatibility - Update all navigation points (dropdown menu, notifications) to use new URLs
Fix undefined userId
2026-04-23 13:49:22 -05:00 · 2025-08-06 13:24:31 -05:00 · 2025-08-05 12:53:28 -05:00 · 2025-08-05 11:59:11 -05:00 · 2025-07-31 12:38:01 -05:00 · 2025-07-28 14:15:00 -05:00
580 changed files with 10077 additions and 12436 deletions
@@ -9,4 +9,4 @@
      }
    ]
  ]
-}
+}
@@ -1,11 +0,0 @@
-import gulp from 'gulp';
-import nodemon from 'gulp-nodemon';
-
-import pkg from '../package.json';
-
-gulp.task('nodemon', done => {
-  nodemon({
-    script: pkg.main,
-  });
-  done();
-});
@@ -49,12 +49,6 @@ function integrationTestCommand (testDir) {
 }

 /* Test task definitions */
-gulp.task('test:nodemon', gulp.series(done => {
-  process.env.PORT = TEST_SERVER_PORT; // eslint-disable-line no-process-env
-  process.env.NODE_DB_URI = TEST_DB_URI; // eslint-disable-line no-process-env
-  done();
-}, 'nodemon'));
-
 gulp.task('test:prepare:mongo', cb => {
  const mongooseOptions = getDefaultConnectionOptions();
  const connectionUrl = getDevelopmentConnectionUrl(TEST_DB_URI);
@@ -21,7 +21,6 @@ if (process.env.NODE_ENV === 'production') { // eslint-disable-line no-process-e
  require('./gulp/gulp-build'); // eslint-disable-line global-require
  require('./gulp/gulp-console'); // eslint-disable-line global-require
  require('./gulp/gulp-sprites'); // eslint-disable-line global-require
-  require('./gulp/gulp-start'); // eslint-disable-line global-require
  require('./gulp/gulp-tests'); // eslint-disable-line global-require
  require('./gulp/gulp-transifex-test'); // eslint-disable-line global-require
  require('gulp').task('default', gulp.series('test')); // eslint-disable-line global-require
@@ -37,7 +37,7 @@ let consoleStamp = require('console-stamp');
 consoleStamp(console);

 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf')();
+require('../../website/server/libs/api-v3/setupNconf').default();

 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');
@@ -32,7 +32,7 @@ let moment = require('moment');
 consoleStamp(console);

 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf')();
+require('../../website/server/libs/api-v3/setupNconf').default();

 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');
@@ -6,7 +6,7 @@ require('@babel/register'); // eslint-disable-line import/no-extraneous-dependen
 function setUpServer () {
  const nconf = require('nconf'); // eslint-disable-line global-require, no-unused-vars
  const mongoose = require('mongoose'); // eslint-disable-line global-require, no-unused-vars
-  const setupNconf = require('../website/server/libs/setupNconf'); // eslint-disable-line global-require
+  const setupNconf = require('../website/server/libs/setupNconf').default; // eslint-disable-line global-require

  setupNconf();

@@ -1,12 +1,12 @@
 {
  "name": "habitica",
-  "version": "5.35.3",
+  "version": "5.38.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "habitica",
-      "version": "5.35.3",
+      "version": "5.38.0",
      "hasInstallScript": true,
      "dependencies": {
        "@babel/core": "^7.22.10",
@@ -43,7 +43,6 @@
        "gulp-babel": "^8.0.0",
        "gulp-filter": "^7.0.0",
        "gulp-imagemin": "^7.1.0",
-        "gulp-nodemon": "^2.5.0",
        "gulp.spritesmith": "^6.13.0",
        "habitica-markdown": "^3.0.0",
        "helmet": "^4.6.0",
@@ -55,12 +54,12 @@
        "merge-stream": "^2.0.0",
        "method-override": "^3.0.0",
        "moment": "^2.29.4",
-        "moment-recur": "^1.0.7",
+        "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
        "mongoose": "^8.9.5",
        "morgan": "^1.10.0",
        "nconf": "^0.12.1",
        "node-gcm": "^1.0.5",
-        "nodemon": "^2.0.20",
+        "nodemon": "^3.1.9",
        "on-headers": "^1.0.2",
        "passport": "^0.5.3",
        "passport-facebook": "^3.0.0",
@@ -87,7 +86,7 @@
        "xml2js": "^0.6.2"
      },
      "devDependencies": {
-        "axios": "^1.7.4",
+        "axios": "^1.8.2",
        "chai": "^4.3.7",
        "chai-as-promised": "^7.1.1",
        "chai-moment": "^0.1.0",
@@ -151,14 +150,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/@babel/code-frame/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/@babel/code-frame/node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -542,14 +533,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/@babel/highlight/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/@babel/highlight/node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -1699,9 +1682,10 @@
      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
    },
    "node_modules/@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.10.tgz",
+      "integrity": "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==",
+      "license": "MIT",
      "dependencies": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -1786,231 +1770,6 @@
        "node": ">=10.0.0"
      }
    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.17.tgz",
-      "integrity": "sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz",
-      "integrity": "sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.17.tgz",
-      "integrity": "sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz",
-      "integrity": "sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz",
-      "integrity": "sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz",
-      "integrity": "sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz",
-      "integrity": "sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz",
-      "integrity": "sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz",
-      "integrity": "sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz",
-      "integrity": "sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz",
-      "integrity": "sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==",
-      "cpu": [
-        "loong64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz",
-      "integrity": "sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==",
-      "cpu": [
-        "mips64el"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz",
-      "integrity": "sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz",
-      "integrity": "sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz",
-      "integrity": "sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==",
-      "cpu": [
-        "s390x"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
    "node_modules/@esbuild/linux-x64": {
      "version": "0.16.17",
      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz",
@@ -2026,96 +1785,6 @@
        "node": ">=12"
      }
    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz",
-      "integrity": "sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz",
-      "integrity": "sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz",
-      "integrity": "sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz",
-      "integrity": "sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz",
-      "integrity": "sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.16.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz",
-      "integrity": "sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -4170,6 +3839,14 @@
        "node": ">=6"
      }
    },
+    "node_modules/apidoc/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
    "node_modules/apidoc/node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4200,6 +3877,41 @@
        "node": ">=10"
      }
    },
+    "node_modules/apidoc/node_modules/nodemon": {
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^3.2.7",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^5.7.1",
+        "simple-update-notifier": "^1.0.7",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/apidoc/node_modules/nodemon/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
    "node_modules/apidoc/node_modules/semver": {
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
@@ -4214,6 +3926,36 @@
        "node": ">=10"
      }
    },
+    "node_modules/apidoc/node_modules/simple-update-notifier": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
+      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "dependencies": {
+        "semver": "~7.0.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/apidoc/node_modules/simple-update-notifier/node_modules/semver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/apidoc/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/apidoc/node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -4787,10 +4529,11 @@
      "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg=="
    },
    "node_modules/axios": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
-      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.2.tgz",
+      "integrity": "sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "follow-redirects": "^1.15.6",
        "form-data": "^4.0.0",
@@ -6193,7 +5936,7 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "devOptional": true,
+      "dev": true,
      "dependencies": {
        "file-uri-to-path": "1.0.0"
      }
@@ -7013,15 +6756,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/coa/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/coa/node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7115,6 +6849,7 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
      "engines": {
        "node": ">=0.1.90"
      }
@@ -8993,14 +8728,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/eslint-config-habitrpg/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/eslint-config-habitrpg/node_modules/ignore": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -10507,7 +10234,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "devOptional": true
+      "dev": true
    },
    "node_modules/filename-reserved-regex": {
      "version": "2.0.0",
@@ -11593,24 +11320,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/glob-watcher/node_modules/fsevents": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-      "deprecated": "The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "dependencies": {
-        "bindings": "^1.5.0",
-        "nan": "^2.12.1"
-      },
-      "engines": {
-        "node": ">= 4.0"
-      }
-    },
    "node_modules/glob-watcher/node_modules/glob-parent": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -12300,16 +12009,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/gulp-nodemon": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/gulp-nodemon/-/gulp-nodemon-2.5.0.tgz",
-      "integrity": "sha512-vXfaP72xo2C6XOaXrNcLEM3QqDJ1x21S3x97U4YtzN2Rl2kH57++aFkAVxe6BafGRSTxs/xVfE/jNNlCv5Ym2Q==",
-      "dependencies": {
-        "colors": "^1.2.1",
-        "gulp": "^4.0.0",
-        "nodemon": "^2.0.2"
-      }
-    },
    "node_modules/gulp.spritesmith": {
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/gulp.spritesmith/-/gulp.spritesmith-6.13.0.tgz",
@@ -12542,6 +12241,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/has-property-descriptors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
@@ -15335,15 +15042,6 @@
        "node": "*"
      }
    },
-    "node_modules/mocha/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/mocha/node_modules/minimatch": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -15407,9 +15105,10 @@
      }
    },
    "node_modules/moment-recur": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/moment-recur/-/moment-recur-1.0.7.tgz",
-      "integrity": "sha512-jpBQn6H62gCnEYjtYdLfK/VdPZHEXo1t8RrVItHVVS67SRvByyJBNBa3WQSGTe+8H0smcYO/79FYTA9LGMVdQw==",
+      "version": "1.0.8",
+      "resolved": "git+ssh://git@github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
+      "integrity": "sha512-LaqXV3izeVQjG0EKAEQQWdneMiff5JR6oBKcfgl0uFOTeaFzLKG62psk7r2VE7RTBdhYigt6KNaLZR7GdWPEIA==",
+      "license": "Unlicense",
      "dependencies": {
        "moment": "<3.0.0"
      }
@@ -15949,7 +15648,7 @@
      "version": "2.18.0",
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
      "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
-      "devOptional": true
+      "dev": true
    },
    "node_modules/nanomatch": {
      "version": "1.2.13",
@@ -16313,17 +16012,17 @@
      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
    },
    "node_modules/nodemon": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
-      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
+      "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
      "dependencies": {
        "chokidar": "^3.5.2",
-        "debug": "^3.2.7",
+        "debug": "^4",
        "ignore-by-default": "^1.0.1",
        "minimatch": "^3.1.2",
        "pstree.remy": "^1.1.8",
-        "semver": "^5.7.1",
-        "simple-update-notifier": "^1.0.7",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
        "supports-color": "^5.5.0",
        "touch": "^3.1.0",
        "undefsafe": "^2.0.5"
@@ -16332,35 +16031,22 @@
        "nodemon": "bin/nodemon.js"
      },
      "engines": {
-        "node": ">=8.10.0"
+        "node": ">=10"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/nodemon"
      }
    },
-    "node_modules/nodemon/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/nodemon/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/nodemon/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
      "bin": {
-        "semver": "bin/semver"
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/nodemon/node_modules/supports-color": {
@@ -18200,9 +17886,10 @@
      }
    },
    "node_modules/prismjs": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
      "engines": {
        "node": ">=6"
      }
@@ -19213,15 +18900,6 @@
      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
      "dev": true
    },
-    "node_modules/run-rs/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/run-rs/node_modules/mongodb": {
      "version": "3.6.12",
      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.12.tgz",
@@ -19746,22 +19424,25 @@
      }
    },
    "node_modules/simple-update-notifier": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
-      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
      "dependencies": {
-        "semver": "~7.0.0"
+        "semver": "^7.5.3"
      },
      "engines": {
-        "node": ">=8.10.0"
+        "node": ">=10"
      }
    },
    "node_modules/simple-update-notifier/node_modules/semver": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
      "bin": {
        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/sinon": {
@@ -20790,15 +20471,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/svgo/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/svgo/node_modules/sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -1,7 +1,7 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.35.3",
+  "version": "5.38.0",
  "main": "./website/server/index.js",
  "dependencies": {
    "@babel/core": "^7.22.10",
@@ -38,7 +38,6 @@
    "gulp-babel": "^8.0.0",
    "gulp-filter": "^7.0.0",
    "gulp-imagemin": "^7.1.0",
-    "gulp-nodemon": "^2.5.0",
    "gulp.spritesmith": "^6.13.0",
    "habitica-markdown": "^3.0.0",
    "helmet": "^4.6.0",
@@ -50,12 +49,11 @@
    "merge-stream": "^2.0.0",
    "method-override": "^3.0.0",
    "moment": "^2.29.4",
-    "moment-recur": "^1.0.7",
+    "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
    "mongoose": "^8.9.5",
    "morgan": "^1.10.0",
    "nconf": "^0.12.1",
    "node-gcm": "^1.0.5",
-    "nodemon": "^2.0.20",
    "on-headers": "^1.0.2",
    "passport": "^0.5.3",
    "passport-facebook": "^3.0.0",
@@ -100,15 +98,14 @@
    "test:sanity": "nyc --silent --no-clean mocha test/sanity --recursive",
    "test:common": "nyc --silent --no-clean mocha test/common --recursive",
    "test:content": "nyc --silent --no-clean mocha test/content --recursive",
-    "test:nodemon": "gulp test:nodemon",
    "coverage": "nyc report --reporter=html --report-dir coverage/results; open coverage/results/index.html",
    "sprites": "gulp sprites:compile",
    "client:dev": "cd website/client && npm run serve",
    "client:build": "cd website/client && npm run build",
    "client:unit": "cd website/client && npm run test:unit",
-    "start": "gulp nodemon",
+    "start": "node --watch ./website/server/index.js",
    "start:simple": "node ./website/server/index.js",
-    "debug": "gulp nodemon --inspect",
+    "debug": "node --watch --inspect ./website/server/index.js",
    "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
    "mongo:test": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data-testing --number 1 --quiet",
    "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
@@ -116,7 +113,7 @@
    "heroku-postbuild": ".heroku/report_deploy.sh"
  },
  "devDependencies": {
-    "axios": "^1.7.4",
+    "axios": "^1.8.2",
    "chai": "^4.3.7",
    "chai-as-promised": "^7.1.1",
    "chai-moment": "^0.1.0",
@@ -71,15 +71,14 @@ async function deleteHabiticaData (user, email) {
 }

 async function processEmailAddress (email) {
-  const emailRegex = new RegExp(`^${email}$`, 'i');
  const localUsers = await User.find(
-    { 'auth.local.email': emailRegex },
+    { 'auth.local.email': email },
    { _id: 1, apiToken: 1, auth: 1 },
  ).exec();

  const socialUsers = await User.find(
    {
-      'auth.local.email': { $not: emailRegex },
+      'auth.local.email': { $ne: email },
      $or: [
        { 'auth.facebook.emails.value': email },
        { 'auth.google.emails.value': email },
@@ -8,7 +8,17 @@ const TASK_VALUE_CHANGE_FACTOR = 0.9747;
 const MIN_TASK_VALUE = -47.27;

 async function updateTeamTasks (team) {
+  if (team.purchased.plan.dateTerminated) {
+    const dateTerminated = new Date(team.purchased.plan.dateTerminated);
+    if (dateTerminated < new Date()) {
+      team.purchased.plan.customerId = undefined;
+      team.markModified('purchased.plan');
+      return team.save();
+    }
+  }
+
  const toSave = [];
+
  let teamLeader = await User.findOne({ _id: team.leader }, 'preferences').exec();

  if (!teamLeader) { // why would this happen?
@@ -93,12 +103,7 @@ async function updateTeamTasks (team) {
 export default async function processTeamsCron () {
  const activeTeams = await Group.find({
    'purchased.plan.customerId': { $exists: true },
-    $or: [
-      { 'purchased.plan.dateTerminated': { $exists: false } },
-      { 'purchased.plan.dateTerminated': null },
-      { 'purchased.plan.dateTerminated': { $gt: new Date() } },
-    ],
-  }).exec();
+  }, { cron: 1, leader: 1, purchased: 1 }).exec();

  const cronPromises = activeTeams.map(updateTeamTasks);
  return Promise.all(cronPromises);
@@ -1,8 +1,11 @@
+import nconf from 'nconf';
+import requireAgain from 'require-again';
 import {
  generateRes,
  generateReq,
 } from '../../../helpers/api-unit.helper';
-import { authWithHeaders as authWithHeadersFactory } from '../../../../website/server/middlewares/auth';
+
+const authPath = '../../../../website/server/middlewares/auth';

 describe('auth middleware', () => {
  let res; let req; let
@@ -16,6 +19,7 @@ describe('auth middleware', () => {

  describe('auth with headers', () => {
    it('allows to specify a list of user field that we do not want to load', done => {
+      const authWithHeadersFactory = requireAgain(authPath).authWithHeaders;
      const authWithHeaders = authWithHeadersFactory({
        userFieldsToExclude: ['items'],
      });
@@ -35,6 +39,7 @@ describe('auth middleware', () => {
    });

    it('makes sure some fields are always included', done => {
+      const authWithHeadersFactory = requireAgain(authPath).authWithHeaders;
      const authWithHeaders = authWithHeadersFactory({
        userFieldsToExclude: [
          'items', 'auth.timestamps',
@@ -60,5 +65,57 @@ describe('auth middleware', () => {
        return done();
      });
    });
+
+    it('errors with InvalidCredentialsError and code when token is wrong', done => {
+      const authWithHeadersFactory = requireAgain(authPath).authWithHeaders;
+      const authWithHeaders = authWithHeadersFactory({ userFieldsToExclude: [] });
+
+      req.headers['x-api-user'] = user._id;
+      req.headers['x-api-key'] = 'totally-wrong-token';
+
+      authWithHeaders(req, res, err => {
+        expect(err).to.exist;
+        expect(err.name).to.equal('InvalidCredentialsError');
+        expect(err.code).to.equal('invalid_credentials');
+        expect(err.message).to.equal(res.t('invalidCredentials'));
+        return done();
+      });
+    });
+
+    describe('when ENFORCE_CLIENT_HEADER is true', () => {
+      let authFactory;
+
+      beforeEach(() => {
+        sandbox.stub(nconf, 'get').withArgs('ENFORCE_CLIENT_HEADER').returns('true');
+        authFactory = requireAgain(authPath).authWithHeaders;
+      });
+
+      it('errors with missingClientHeader when x-client header is not present', done => {
+        const authWithHeaders = authFactory({ userFieldsToExclude: [] });
+
+        req.headers['x-api-user'] = user._id;
+        req.headers['x-api-key'] = user;
+        authWithHeaders(req, res, err => {
+          expect(err).to.exist;
+          expect(err.name).to.equal('BadRequest');
+          expect(err.message).to.equal(res.t('missingClientHeader'));
+          return done();
+        });
+      });
+
+      it('allows request to pass when x-client header is present', done => {
+        const authWithHeaders = authFactory({ userFieldsToExclude: [] });
+
+        req.headers['x-api-user'] = user._id;
+        req.headers['x-api-key'] = user.apiToken;
+        req.headers['x-client'] = 'habitica-web';
+
+        authWithHeaders(req, res, err => {
+          if (err) return done(err);
+          expect(res.locals.user).to.exist;
+          return done();
+        });
+      });
+    });
  });
 });
@@ -101,34 +101,6 @@ describe('GET /tasks/user', () => {
    expect(allCompletedTodos[allCompletedTodos.length - 1].text).to.equal('todo to complete 2');
  });

-  it('returns only some completed todos if req.query.type is "completedTodos" or "_allCompletedTodos"', async () => {
-    const LIMIT = 30;
-    const numberOfTodos = LIMIT + 1;
-    const todosInput = [];
-
-    for (let i = 0; i < numberOfTodos; i += 1) {
-      todosInput[i] = { text: `todo to complete ${i}`, type: 'todo' };
-    }
-    const todos = await user.post('/tasks/user', todosInput);
-    await user.sync();
-    const initialTodoCount = user.tasksOrder.todos.length;
-
-    for (let i = 0; i < numberOfTodos; i += 1) {
-      const id = todos[i]._id;
-
-      await user.post(`/tasks/${id}/score/up`); // eslint-disable-line no-await-in-loop
-    }
-    await user.sync();
-
-    expect(user.tasksOrder.todos.length).to.equal(initialTodoCount - numberOfTodos);
-
-    const completedTodos = await user.get('/tasks/user?type=completedTodos');
-    expect(completedTodos.length).to.equal(LIMIT);
-
-    const allCompletedTodos = await user.get('/tasks/user?type=_allCompletedTodos');
-    expect(allCompletedTodos.length).to.equal(numberOfTodos);
-  });
-
  it('returns dailies with isDue for the date specified', async () => {
    // @TODO Add required format
    const startDate = moment().subtract('1', 'days').toISOString();
@@ -238,6 +238,28 @@ describe('POST /user/auth/reset-password-set-new-one', () => {
    expect(isPassValid).to.equal(true);
  });

+  it('changes the apiToken on password reset', async () => {
+    const user = await generateUser();
+    const previousToken = user.apiToken;
+
+    const code = encrypt(JSON.stringify({
+      userId: user._id,
+      expiresAt: moment().add({ days: 1 }),
+    }));
+    await user.updateOne({
+      'auth.local.passwordResetCode': code,
+    });
+
+    await api.post(`${endpoint}`, {
+      newPassword: 'my new password',
+      confirmPassword: 'my new password',
+      code,
+    });
+
+    await user.sync();
+    expect(user.apiToken).to.not.eql(previousToken);
+  });
+
  it('renders the success page and convert the password from sha1 to bcrypt', async () => {
    const user = await generateUser();

@@ -27,11 +27,30 @@ describe('PUT /user/auth/update-password', async () => {
      newPassword,
      confirmPassword: newPassword,
    });
-    expect(response).to.eql({});
+
+    expect(response).to.exist;
+    expect(response.apiToken).to.exist;
+
    await user.sync();
    expect(user.auth.local.hashed_password).to.not.eql(previousHashedPassword);
  });

+  it('should change the apiToken on password change', async () => {
+    const previousToken = user.apiToken;
+    const response = await user.put(ENDPOINT, {
+      password,
+      newPassword,
+      confirmPassword: newPassword,
+    });
+
+    const newToken = response.apiToken;
+    expect(newToken).to.exist;
+
+    await user.sync();
+    expect(user.apiToken).to.eql(newToken);
+    expect(user.apiToken).to.not.eql(previousToken);
+  });
+
  it('returns an error when confirmPassword does not match newPassword', async () => {
    await expect(user.put(ENDPOINT, {
      password,
@@ -133,21 +133,21 @@ describe('Content Schedule', () => {
  });

  it('sets the end date for a gala', () => {
-    const date = new Date('2024-05-20');
+    const date = new Date('2024-05-31');
    const matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2024-06-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
+    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2024-06-01T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
  });

  it('sets the end date for a winter gala', () => {
-    const date = new Date('2024-12-22');
+    const date = new Date('2025-02-28');
    const matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
+    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-01T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
  });

  it('sets the end date in new year for a winter gala', () => {
-    const date = new Date('2025-01-04');
+    const date = new Date('2025-02-28');
    const matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
+    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-01T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
  });

  it('uses correct date for first hours of the month', () => {
@@ -18,7 +18,7 @@ describe('Shop Featured Items', () => {
    });

    it('contains the current premium hatching potions', () => {
-      clock = Sinon.useFakeTimers(new Date('2024-04-08'));
+      clock = Sinon.useFakeTimers(new Date('2024-04-09'));
      const items = featuredItems.market();
      expect(_.find(items, item => item.path === 'premiumHatchingPotions.Porcelain')).to.exist;
    });
@@ -19,6 +19,6 @@ const sinonStubPromise = require('sinon-stub-promise');
 sinonStubPromise(global.sinon);
 global.sandbox = sinon.createSandbox();

-const setupNconf = require('../../website/server/libs/setupNconf');
+const setupNconf = require('../../website/server/libs/setupNconf').default;

 setupNconf('./config.json.example');
@@ -3,7 +3,7 @@

 const nconf = require('nconf');
 const mongoose = require('mongoose');
-const setupNconf = require('../../website/server/libs/setupNconf');
+const setupNconf = require('../../website/server/libs/setupNconf').default;

 // fix further imports of require/import syntaxes
 require('@babel/register');
@@ -3,6 +3,7 @@ module.exports = {
  root: true,
  env: {
    node: true,
+    es2021: true,
  },
  extends: [
    'habitrpg/lib/vue',
@@ -39,7 +40,4 @@ module.exports = {
      order: ['template', 'style', 'script'],
    }],
  },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
 };
@@ -1,9 +0,0 @@
-/* eslint-disable import/no-commonjs */
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-optional-chaining',
-  ],
-};
@@ -12,6 +12,7 @@
    <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
    <link rel="mask-icon" href="/static/icons/favicon.ico">
    <meta property="og:image" content="/static/emails/images/meta-image.png" />
+    <script type="module" src="/src/main.js"></script>
  </head>
  <body>
    <div id="loading-screen">
@@ -28,10 +29,9 @@
    </div>

    <div id="app"></div>
-    <!-- built files will be auto injected -->

    <script type="text/javascript" src="//cloudfront.loggly.com/js/loggly.tracker-latest.min.js" async></script>
    <!-- Translations -->
-    <script type='text/javascript' src='/api/v4/i18n/browser-script'></script>
+    <script type='text/javascript' src='/api/v4/i18n/browser-script' vite-ignore></script>
  </body>
 </html>
@@ -3,28 +3,26 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
-    "lint": "vue-cli-service lint .",
-    "lint-no-fix": "vue-cli-service lint --no-fix .",
+    "serve": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest watch",
+    "lint": "eslint --ext .js,.vue --ignore-path ../../.gitignore --fix .",
+    "lint-no-fix": "eslint --ext .js,.vue --no-fix src",
    "postinstall": "node ./scripts/npm-postinstall.js"
  },
  "dependencies": {
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
+    "@froxz/vite-plugin-s3": "^1.6.0",
+    "@vitejs/plugin-vue2": "^2.3.3",
    "@vue/test-utils": "1.0.0-beta.29",
    "amplitude-js": "^8.21.3",
    "assert": "^2.1.0",
+    "autoprefixer": "^10.4.20",
    "axios": "^0.28.0",
    "axios-progress-bar": "^1.2.0",
-    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.23.1",
-    "core-js": "^3.33.1",
    "eslint": "7.32.0",
    "eslint-config-habitrpg": "6.2.0",
    "eslint-plugin-mocha": "5.3.0",
@@ -34,31 +32,34 @@
    "intro.js": "^7.2.0",
    "jquery": "^3.7.1",
    "lodash": "^4.17.21",
+    "markdown-it": "^14.0.0",
    "moment": "^2.29.4",
-    "moment-locales-webpack-plugin": "^1.2.0",
    "nconf": "^0.12.1",
    "sass": "^1.63.4",
-    "sass-loader": "^14.1.1",
    "sinon": "^17.0.1",
    "stopword": "^2.0.8",
    "timers-browserify": "^2.0.12",
    "uuid": "^9.0.1",
    "validator": "^13.9.0",
+    "vite": "^6.0.0",
+    "vite-plugin-compression2": "^1.3.3",
    "vue": "^2.7.10",
    "vue-fragment": "^1.6.0",
    "vue-mugen-scroll": "^0.2.6",
    "vue-router": "^3.6.5",
-    "vue-template-babel-compiler": "^2.0.0",
-    "vue-template-compiler": "^2.7.10",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@vitest/browser": "^3.0.5",
    "babel-plugin-lodash": "^3.3.4",
-    "chai": "^5.1.0",
    "inspectpack": "^4.7.1",
+    "jsdom": "^26.0.0",
+    "mocha": "^11.1.0",
+    "playwright": "^1.50.1",
    "terser-webpack-plugin": "^5.3.10",
+    "vitest": "^3.0.5",
    "webpack": "^5.94.0"
  }
 }
@@ -29,12 +29,14 @@
    </div>
    <snackbars />
    <router-view v-if="!isUserLoggedIn || isStaticPage" />
-    <user-main v-else />
+    <div v-else>
+      <user-main />
+    </div>
  </div>
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #loading-screen-inapp {
    #melior {
@@ -90,7 +92,7 @@
 </style>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .modal-backdrop {
    opacity: .9 !important;
@@ -108,16 +110,16 @@ import axios from 'axios';

 import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';
-import userMain from '@/pages/user-main';
 import snackbars from '@/components/snackbars/notifications';
+import { LOCALSTORAGE_AUTH_KEY } from '@/libs/auth';

-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL;

 export default {
  name: 'App',
  components: {
    snackbars,
-    userMain,
+    userMain: () => import('@/pages/user-main'),
  },
  data () {
    return {
@@ -221,11 +223,10 @@ export default {

        const errorData = error.response.data;
        const errorMessage = errorData.message || errorData;
+        const errorCode = errorData.error;

-        // Check for conditions to reset the user auth
-        // TODO use a specific error like NotificationNotFound instead of checking for the string
-        const invalidUserMessage = [this.$t('invalidCredentials'), 'Missing authentication headers.'];
-        if (invalidUserMessage.indexOf(errorMessage) !== -1) {
+        // If 'invalid_credentials' signaled, force logout
+        if (error.response.status === 401 && errorCode === 'invalid_credentials') {
          this.$store.dispatch('auth:logout', { redirectToLogin: true });
          return null;
        }
@@ -268,16 +269,29 @@ export default {
    const loadingScreen = document.getElementById('loading-screen');
    if (loadingScreen) document.body.removeChild(loadingScreen);

-    if (this.isStaticPage || !this.isUserLoggedIn) {
-      this.hideLoadingScreen();
+    // Check if we need to show password change success message
+    if (sessionStorage.getItem('passwordChangeSuccess') === 'true') {
+      sessionStorage.removeItem('passwordChangeSuccess');
+      this.$store.dispatch('snackbars:add', {
+        title: 'Habitica',
+        text: this.$t('passwordSuccess'),
+        type: 'success',
+        timeout: true,
+      });
    }
+
+    this.$router.onReady(() => {
+      if (this.isStaticPage || !this.isUserLoggedIn) {
+        this.hideLoadingScreen();
+      }
+    });
  },
  methods: {
    hideLoadingScreen () {
      this.loading = false;
    },
    checkForBannedUser (error) {
-      const AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
+      const AUTH_SETTINGS = localStorage.getItem(LOCALSTORAGE_AUTH_KEY);
      const parseSettings = JSON.parse(AUTH_SETTINGS);
      const errorMessage = error.response.data.message;

@@ -301,4 +315,3 @@ export default {
 </script>

 <style src="@/assets/scss/index.scss" lang="scss"></style>
-<style src="@/assets/scss/sprites.scss" lang="scss"></style>
@@ -2001,6 +2001,11 @@
  width: 141px;
  height: 147px;
 }
+.background_sirens_lair {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_sirens_lair.png');
+  width: 141px;
+  height: 147px;
+}
 .background_slimy_swamp {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_slimy_swamp.png');
  width: 141px;
@@ -2176,11 +2181,21 @@
  width: 141px;
  height: 147px;
 }
+.background_summer_seashore {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_summer_seashore.png');
+  width: 141px;
+  height: 147px;
+}
 .background_sunken_ship {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_sunken_ship.png');
  width: 141px;
  height: 147px;
 }
+.background_sunny_street_with_shops {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_sunny_street_with_shops.png');
+  width: 141px;
+  height: 147px;
+}
 .background_sunset_meadow {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_sunset_meadow.png');
  width: 141px;
@@ -2266,6 +2281,11 @@
  width: 141px;
  height: 147px;
 }
+.background_trail_through_a_forest {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_trail_through_a_forest.png');
+  width: 141px;
+  height: 147px;
+}
 .background_training_grounds {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_training_grounds.png');
  width: 141px;
@@ -29540,6 +29560,11 @@
  width: 114px;
  height: 90px;
 }
+.broad_armor_armoire_beekeepersSuit {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_beekeepersSuit.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_blueMoonShozoku {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_blueMoonShozoku.png');
  width: 114px;
@@ -29670,6 +29695,11 @@
  width: 114px;
  height: 90px;
 }
+.broad_armor_armoire_flyFishingWaders {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_flyFishingWaders.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_funnyFoolCostume {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_funnyFoolCostume.png');
  width: 114px;
@@ -29680,6 +29710,11 @@
  width: 114px;
  height: 90px;
 }
+.broad_armor_armoire_gildedKnightsPlate {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_gildedKnightsPlate.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_gladiatorArmor {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_gladiatorArmor.png');
  width: 90px;
@@ -29870,6 +29905,11 @@
  width: 90px;
  height: 90px;
 }
+.broad_armor_armoire_redWaistcoat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_redWaistcoat.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_robeOfDiamonds {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_robeOfDiamonds.png');
  width: 114px;
@@ -30135,6 +30175,11 @@
  width: 114px;
  height: 90px;
 }
+.head_armoire_beekeepersHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_beekeepersHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_bigWig {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_bigWig.png');
  width: 90px;
@@ -30275,6 +30320,11 @@
  width: 114px;
  height: 90px;
 }
+.head_armoire_flyFishingHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_flyFishingHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_frostedHelm {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_frostedHelm.png');
  width: 114px;
@@ -30290,6 +30340,11 @@
  width: 114px;
  height: 90px;
 }
+.head_armoire_gildedKnightsHelm {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_gildedKnightsHelm.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_gladiatorHelm {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_gladiatorHelm.png');
  width: 90px;
@@ -30490,6 +30545,11 @@
  width: 90px;
  height: 90px;
 }
+.head_armoire_redNewsieHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_redNewsieHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_regalCrown {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_regalCrown.png');
  width: 114px;
@@ -30630,6 +30690,11 @@
  width: 114px;
  height: 90px;
 }
+.shield_armoire_beekeepersHive {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_beekeepersHive.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_armoire_birthdayBanner {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_birthdayBanner.png');
  width: 114px;
@@ -30730,6 +30795,11 @@
  width: 114px;
  height: 90px;
 }
+.shield_armoire_flyFishingRod {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_flyFishingRod.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_armoire_gardenersSpade {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_gardenersSpade.png');
  width: 114px;
@@ -31075,6 +31145,11 @@
  width: 114px;
  height: 90px;
 }
+.slim_armor_armoire_beekeepersSuit {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_beekeepersSuit.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_blueMoonShozoku {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_blueMoonShozoku.png');
  width: 114px;
@@ -31205,6 +31280,11 @@
  width: 114px;
  height: 90px;
 }
+.slim_armor_armoire_flyFishingWaders {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_flyFishingWaders.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_funnyFoolCostume {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_funnyFoolCostume.png');
  width: 114px;
@@ -31215,6 +31295,11 @@
  width: 114px;
  height: 90px;
 }
+.slim_armor_armoire_gildedKnightsPlate {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_gildedKnightsPlate.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_gladiatorArmor {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_gladiatorArmor.png');
  width: 90px;
@@ -31405,6 +31490,11 @@
  width: 90px;
  height: 90px;
 }
+.slim_armor_armoire_redWaistcoat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_redWaistcoat.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_robeOfDiamonds {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_robeOfDiamonds.png');
  width: 114px;
@@ -31640,6 +31730,11 @@
  width: 114px;
  height: 90px;
 }
+.weapon_armoire_beekeepersSmoker {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_beekeepersSmoker.png');
+  width: 114px;
+  height: 90px;
+}
 .weapon_armoire_blueKite {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_blueKite.png');
  width: 114px;
@@ -31760,6 +31855,11 @@
  width: 114px;
  height: 90px;
 }
+.weapon_armoire_gildedKnightsSpear {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_gildedKnightsSpear.png');
+  width: 114px;
+  height: 90px;
+}
 .weapon_armoire_glassblowersBlowpipe {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_glassblowersBlowpipe.png');
  width: 114px;
@@ -35525,6 +35625,46 @@
  width: 114px;
  height: 90px;
 }
+.back_mystery_202505 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_202505.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_mystery_202505 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_mystery_202505.png');
+  width: 114px;
+  height: 90px;
+}
+.back_mystery_202506 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_202506.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_mystery_202506 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202506.png');
+  width: 114px;
+  height: 90px;
+}
+.back_mystery_202507 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_202507.png');
+  width: 117px;
+  height: 120px;
+}
+.head_mystery_202507 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202507.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_mystery_202508 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202508.png');
+  width: 117px;
+  height: 120px;
+}
+.weapon_mystery_202508 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_mystery_202508.png');
+  width: 117px;
+  height: 120px;
+}
 .broad_armor_mystery_301404 {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
  width: 90px;
@@ -37070,6 +37210,26 @@
  width: 114px;
  height: 117px;
 }
+.broad_armor_special_summer2025Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_summer2025Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.broad_armor_special_summer2025Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_summer2025Mage.png');
+  width: 114px;
+  height: 117px;
+}
+.broad_armor_special_summer2025Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_summer2025Rogue.png');
+  width: 114px;
+  height: 108px;
+}
+.broad_armor_special_summer2025Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_summer2025Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_special_summerHealer {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_summerHealer.png');
  width: 90px;
@@ -37300,6 +37460,26 @@
  width: 114px;
  height: 117px;
 }
+.head_special_summer2025Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_summer2025Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.head_special_summer2025Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_summer2025Mage.png');
+  width: 114px;
+  height: 117px;
+}
+.head_special_summer2025Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_summer2025Rogue.png');
+  width: 114px;
+  height: 108px;
+}
+.head_special_summer2025Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_summer2025Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .head_special_summerHealer {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_summerHealer.png');
  width: 90px;
@@ -37475,6 +37655,21 @@
  width: 114px;
  height: 117px;
 }
+.shield_special_summer2025Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_summer2025Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_special_summer2025Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_summer2025Rogue.png');
+  width: 114px;
+  height: 108px;
+}
+.shield_special_summer2025Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_summer2025Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_special_summerHealer {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_summerHealer.png');
  width: 90px;
@@ -37695,6 +37890,26 @@
  width: 114px;
  height: 117px;
 }
+.slim_armor_special_summer2025Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_summer2025Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.slim_armor_special_summer2025Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_summer2025Mage.png');
+  width: 114px;
+  height: 117px;
+}
+.slim_armor_special_summer2025Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_summer2025Rogue.png');
+  width: 114px;
+  height: 108px;
+}
+.slim_armor_special_summer2025Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_summer2025Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_special_summerHealer {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_summerHealer.png');
  width: 90px;
@@ -37915,6 +38130,26 @@
  width: 114px;
  height: 117px;
 }
+.weapon_special_summer2025Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_summer2025Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.weapon_special_summer2025Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_summer2025Mage.png');
+  width: 114px;
+  height: 117px;
+}
+.weapon_special_summer2025Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_summer2025Rogue.png');
+  width: 114px;
+  height: 108px;
+}
+.weapon_special_summer2025Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_summer2025Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .weapon_special_summerHealer {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_summerHealer.png');
  width: 90px;
@@ -40813,6 +41048,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_BearCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_BearCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_BearCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_BearCub-Peppermint.png');
  width: 105px;
@@ -41268,6 +41508,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_Cactus-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cactus-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_Cactus-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cactus-Peppermint.png');
  width: 105px;
@@ -42018,6 +42263,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_Dragon-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Dragon-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_Dragon-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Dragon-Peppermint.png');
  width: 105px;
@@ -42468,6 +42718,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_FlyingPig-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_FlyingPig-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_FlyingPig-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_FlyingPig-Peppermint.png');
  width: 105px;
@@ -42768,6 +43023,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_Fox-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Fox-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_Fox-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Fox-Peppermint.png');
  width: 105px;
@@ -43508,6 +43768,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_LionCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_LionCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_LionCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_LionCub-Peppermint.png');
  width: 105px;
@@ -44078,6 +44343,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_PandaCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_PandaCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_PandaCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_PandaCub-Peppermint.png');
  width: 105px;
@@ -44378,6 +44648,56 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_Platypus-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-Base.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-CottonCandyBlue.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-CottonCandyPink.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-Desert.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-Golden.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-Red.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-Shade.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-Skeleton.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-White.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Platypus-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Platypus-Zombie.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_Pterodactyl-Base {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Pterodactyl-Base.png');
  width: 105px;
@@ -45383,6 +45703,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_TigerCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_TigerCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_TigerCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_TigerCub-Peppermint.png');
  width: 105px;
@@ -45993,6 +46318,11 @@
  width: 135px;
  height: 135px;
 }
+.Mount_Body_Wolf-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Wolf-Opal.png');
+  width: 135px;
+  height: 135px;
+}
 .Mount_Body_Wolf-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Wolf-Peppermint.png');
  width: 135px;
@@ -46593,6 +46923,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_BearCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_BearCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_BearCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_BearCub-Peppermint.png');
  width: 105px;
@@ -47048,6 +47383,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_Cactus-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cactus-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_Cactus-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cactus-Peppermint.png');
  width: 105px;
@@ -47798,6 +48138,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_Dragon-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Dragon-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_Dragon-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Dragon-Peppermint.png');
  width: 105px;
@@ -48248,6 +48593,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_FlyingPig-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_FlyingPig-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_FlyingPig-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_FlyingPig-Peppermint.png');
  width: 105px;
@@ -48548,6 +48898,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_Fox-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Fox-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_Fox-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Fox-Peppermint.png');
  width: 105px;
@@ -49288,6 +49643,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_LionCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_LionCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_LionCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_LionCub-Peppermint.png');
  width: 105px;
@@ -49858,6 +50218,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_PandaCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_PandaCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_PandaCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_PandaCub-Peppermint.png');
  width: 105px;
@@ -50158,6 +50523,56 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_Platypus-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-Base.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-CottonCandyBlue.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-CottonCandyPink.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-Desert.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-Golden.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-Red.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-Shade.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-Skeleton.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-White.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Platypus-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Platypus-Zombie.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_Pterodactyl-Base {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Pterodactyl-Base.png');
  width: 105px;
@@ -51163,6 +51578,11 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_TigerCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_TigerCub-Opal.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_TigerCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_TigerCub-Peppermint.png');
  width: 105px;
@@ -51773,6 +52193,11 @@
  width: 135px;
  height: 135px;
 }
+.Mount_Head_Wolf-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Wolf-Opal.png');
+  width: 135px;
+  height: 135px;
+}
 .Mount_Head_Wolf-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Wolf-Peppermint.png');
  width: 135px;
@@ -52393,6 +52818,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-BearCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-BearCub-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-BearCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-BearCub-Peppermint.png');
  width: 81px;
@@ -52878,6 +53308,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-Cactus-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cactus-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Cactus-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cactus-Peppermint.png');
  width: 81px;
@@ -53668,6 +54103,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-Dragon-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Dragon-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Dragon-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Dragon-Peppermint.png');
  width: 81px;
@@ -54153,6 +54593,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-FlyingPig-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-FlyingPig-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-FlyingPig-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-FlyingPig-Peppermint.png');
  width: 81px;
@@ -54483,6 +54928,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-Fox-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Fox-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Fox-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Fox-Peppermint.png');
  width: 81px;
@@ -55258,6 +55708,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-LionCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-LionCub-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-LionCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-LionCub-Peppermint.png');
  width: 81px;
@@ -55858,6 +56313,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-PandaCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-PandaCub-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-PandaCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-PandaCub-Peppermint.png');
  width: 81px;
@@ -56173,6 +56633,56 @@
  width: 81px;
  height: 99px;
 }
+.Pet-Platypus-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-Base.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-CottonCandyBlue.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-CottonCandyPink.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-Desert.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-Golden.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-Red.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-Shade.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-Skeleton.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-White.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Platypus-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Platypus-Zombie.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Pterodactyl-Base {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Pterodactyl-Base.png');
  width: 81px;
@@ -57198,6 +57708,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-TigerCub-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-TigerCub-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-TigerCub-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-TigerCub-Peppermint.png');
  width: 81px;
@@ -57838,6 +58353,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-Wolf-Opal {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Wolf-Opal.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Wolf-Peppermint {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Wolf-Peppermint.png');
  width: 81px;
@@ -1,5 +1,5 @@

-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .featured-label {
  width: auto;
@@ -2,7 +2,7 @@
 $grid-gutter-width: 24px;

 // Bootstrap and its default variables
-@import 'node_modules/bootstrap/scss/bootstrap';
+@import '~/bootstrap/scss/bootstrap';

 // Bootstrap Vue styles
-@import 'node_modules/bootstrap-vue/dist/bootstrap-vue';
+@import '~/bootstrap-vue/dist/bootstrap-vue';
@@ -316,3 +316,9 @@
  line-height: 2;
  padding: 2px 2px;
 }
+
+.btn-lg {
+  font-size: 1.25rem;
+  line-height: 1.5;
+  padding: .5rem 1rem;
+}
@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h1 {
  margin-top: 0px;
@@ -61,13 +61,13 @@ input, textarea, input.form-control, textarea.form-control {

  &.input-valid {
    padding-right: 27px;
-    background-image: url(~@/assets/svg/for-css/check.svg);
+    background-image: url(@/assets/svg/for-css/check.svg);
    background-size: 1rem;
  }

  &.input-invalid {
    padding-right: 40px;
-    background-image: url(~@/assets/svg/for-css/alert.svg);
+    background-image: url(@/assets/svg/for-css/alert.svg);
    background-size: 16px 16px;
    border-color: $red-100 !important;
  }
@@ -239,7 +239,7 @@ $bg-disabled-control: $gray-10;
    &:checked~.custom-control-label::after {
      width: 18px;
      height: 18px;
-      background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
+      background-image: url(@/assets/svg/for-css/checkbox-white.svg);
      background-size: 13px 10px;
    }

@@ -29,13 +29,13 @@
 }

 .iconalert-success::before {
-  background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
+  background-image: url(@/assets/svg/for-css/checkbox-white.svg);
  background-size: 13px 10px;
  background-color: #1ca372;
 }

 .iconalert-warning::before, .iconalert-error::before {
-  background-image: url(~@/assets/svg/for-css/alert-white.svg);
+  background-image: url(@/assets/svg/for-css/alert-white.svg);
  background-size: 16px 16px;
 }

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .modal {
  z-index: 1350;
@@ -46,13 +46,11 @@

    .background {
      background-repeat: repeat-x;
-
+      height:216px;
      width: 100%;
      position: absolute;
-
      top: 0;
      left: 0;
-
      display: flex;
      flex-direction: column;
      justify-content: center;
@@ -67,6 +65,13 @@
      flex-direction: column;
    }

+    .shop-message {
+      position: relative;
+      height: 76px;
+      margin: 71px auto;
+      width: 240px;
+    }
+    
    .npc {
      position: absolute;
      left: 0;
@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .container-fluid.static-view {
  margin: 5em 2em 0 2em;
@@ -4,7 +4,7 @@
      <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
      <img
        :class="retiredChatPage ? 'mt-5' : 'image-404'"
-        src="~@/assets/images/404.png"
+        src="@/assets/images/404.png"
      >
      <div v-if="retiredChatPage">
        <h1>
@@ -48,7 +48,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h1, .static-wrapper h1 {
  color: $purple-200;
@@ -107,7 +107,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .btn-primary:active {
      border: 2px solid $purple-400 !important;
@@ -193,10 +193,10 @@
 import Avatar from '../avatar';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
-import warriorIcon from '@/assets/svg/warrior.svg';
-import rogueIcon from '@/assets/svg/rogue.svg';
-import healerIcon from '@/assets/svg/healer.svg';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
+import healerIcon from '@/assets/svg/healer.svg?raw';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';

 export default {
  components: {
@@ -70,7 +70,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h2 {
    color: $purple-200;
@@ -100,7 +100,7 @@
 </style>

 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
 import Sprite from '@/components/ui/sprite.vue';

 export default {
@@ -45,7 +45,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
+  @import '@/assets/scss/mixins.scss';

  #generic-achievement {
    @include centeredModal();
@@ -61,7 +61,7 @@
 </style>

 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .content {
    text-align: center;
@@ -98,7 +98,7 @@
 <script>
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
 import Sprite from '@/components/ui/sprite.vue';

 export default {
@@ -58,7 +58,7 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #level-up {
    .modal-content {
@@ -157,8 +157,8 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 import Avatar from '../avatar';
 import Sprite from '@/components/ui/sprite';
 import { mapState } from '@/libs/store';
-import starGroup from '@/assets/svg/star-group.svg';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import starGroup from '@/assets/svg/star-group.svg?raw';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 const levelQuests = {
  15: 'atom1',
@@ -17,7 +17,7 @@
      </h2>
      <img
        class="onboarding-complete-banner d-block"
-        src="~@/assets/images/onboarding-complete-banner@2x.png"
+        src="@/assets/images/onboarding-complete-banner@2x.png"
      >
      <p
        v-once
@@ -59,7 +59,7 @@
 </style>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h2 {
  color: $purple-200;
@@ -100,7 +100,7 @@ button {
 </style>

 <script>
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';

 export default {
  data () {
@@ -117,7 +117,7 @@ export default {
    closeWithAction () {
      this.close();
      setTimeout(() => {
-        this.$router.push({ name: 'achievements' });
+        this.$router.push(`/profile/${this.$store.state.user.data._id}#achievements`);
      }, 200);
    },
  },
@@ -97,9 +97,9 @@ import { mapState } from '@/libs/store';
 import Sprite from '@/components/ui/sprite';

 export default {
-  components: [
+  components: {
    Sprite,
-  ],
+  },
  data () {
    return {
      maxHealth,
@@ -73,7 +73,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #won-challenge {
    .modal-body {
@@ -96,7 +96,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .purple {
    color: $purple-300;
@@ -146,9 +146,9 @@
 <script>
 import habiticaMarkdown from 'habitica-markdown';
 import closeIcon from '@/components/shared/closeIcon';
-import sparkles from '@/assets/svg/star-group.svg';
-import gem from '@/assets/svg/gem.svg';
-import stars from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/star-group.svg?raw';
+import gem from '@/assets/svg/gem.svg?raw';
+import stars from '@/assets/svg/sparkles-left.svg?raw';
 import { mapState } from '@/libs/store';

 export default {
@@ -19,7 +19,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .about-row {
    margin-left: 0px;
@@ -170,7 +170,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .about-row {
    margin-left: 0px;
@@ -401,7 +401,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

 .input-group-append {
  width: auto;
@@ -150,7 +150,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .page-header.btn-flat {
    background: transparent;
@@ -403,7 +403,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 .footer-row {
  margin: 0;
  flex: 0 1 auto;
@@ -838,12 +838,12 @@ import moment from 'moment';
 import Vue from 'vue';

 // images
-import melior from '@/assets/svg/melior.svg';
-import bluesky from '@/assets/svg/bluesky.svg';
-import facebook from '@/assets/svg/facebook.svg';
-import instagram from '@/assets/svg/instagram.svg';
-import tumblr from '@/assets/svg/tumblr.svg';
-import heart from '@/assets/svg/heart.svg';
+import melior from '@/assets/svg/melior.svg?raw';
+import bluesky from '@/assets/svg/bluesky.svg?raw';
+import facebook from '@/assets/svg/facebook.svg?raw';
+import instagram from '@/assets/svg/instagram.svg?raw';
+import tumblr from '@/assets/svg/tumblr.svg?raw';
+import heart from '@/assets/svg/heart.svg?raw';

 // components & modals
 import { mapState } from '@/libs/store';
@@ -851,12 +851,14 @@ import buyGemsModal from './payments/buyGemsModal.vue';
 import reportBug from '@/mixins/reportBug.js';
 import { worldStateMixin } from '@/mixins/worldState';

-const DEBUG_ENABLED = process.env.DEBUG_ENABLED === 'true'; // eslint-disable-line no-process-env
-const TIME_TRAVEL_ENABLED = process.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
+const DEBUG_ENABLED = import.meta.env.DEBUG_ENABLED === 'true';
+const TIME_TRAVEL_ENABLED = import.meta.env.TIME_TRAVEL_ENABLED === 'true';
+
 let sinon;
-if (TIME_TRAVEL_ENABLED) {
-  // eslint-disable-next-line global-require
-  sinon = await import('sinon');
+if (import.meta.env.TIME_TRAVEL_ENABLED === 'true') {
+  (async () => {
+    sinon = await import('sinon');
+  })();
 }

 export default {
@@ -168,7 +168,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .form {
    margin: 0 auto;
@@ -227,8 +227,8 @@ import debounce from 'lodash/debounce';
 import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
-import googleIcon from '@/assets/svg/google.svg';
-import appleIcon from '@/assets/svg/apple_black.svg';
+import googleIcon from '@/assets/svg/google.svg?raw';
+import appleIcon from '@/assets/svg/apple_black.svg?raw';

 export default {
  name: 'AuthForm',
@@ -290,7 +290,7 @@ export default {
  },
  mounted () {
    hello.init({
-      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
    });
  },
  methods: {
@@ -220,7 +220,6 @@
      v-if="forgotPassword"
      id="forgot-form"
      @submit.prevent="handleSubmit"
-      @keyup.enter="handleSubmit"
    >
      <div class="text-center">
        <div>
@@ -268,12 +267,11 @@
      v-if="resetPasswordSetNewOne"
      id="reset-password-set-new-one-form"
      @submit.prevent="handleSubmit"
-      @keyup.enter="handleSubmit"
    >
      <div class="text-center">
        <div>
          <div
-            class="svg-icon habitica-logo color"
+            class="svg-icon habitica-logo"
            v-html="icons.habiticaIcon"
          ></div>
        </div>
@@ -355,7 +353,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media only screen  and (min-height: 1080px) {
    .bottom-wrap-register {
@@ -491,7 +489,7 @@

  #top-background {
    .seamless_stars_varied_opacity_repeat {
-      background-image: url('~@/assets/images/auth/seamless_stars_varied_opacity.png');
+      background-image: url('@/assets/images/auth/seamless_stars_varied_opacity.png');
      background-repeat: repeat-x;
      position: absolute;
      height: 500px;
@@ -510,7 +508,7 @@
    position: relative;

    .seamless_mountains_demo_repeat {
-      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
+      background-image: url('@/assets/images/auth/seamless_mountains_demo.png');
      background-repeat: repeat-x;
      width: 100%;
      height: 300px;
@@ -520,7 +518,7 @@
    }

    .midground_foreground_extended2 {
-      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
+      background-image: url('@/assets/images/auth/midground_foreground_extended2.png');
      position: relative;
      width: 1500px;
      max-width: 100%;
@@ -611,11 +609,11 @@ import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
 import sanitizeRedirect from '@/mixins/sanitizeRedirect';
-import exclamation from '@/assets/svg/exclamation.svg';
-import gryphon from '@/assets/svg/gryphon.svg';
-import habiticaIcon from '@/assets/svg/logo-horizontal.svg';
-import googleIcon from '@/assets/svg/google.svg';
-import appleIcon from '@/assets/svg/apple_black.svg';
+import exclamation from '@/assets/svg/exclamation.svg?raw';
+import gryphon from '@/assets/svg/gryphon.svg?raw';
+import habiticaIcon from '@/assets/svg/logo-horizontal.svg?raw';
+import googleIcon from '@/assets/svg/google.svg?raw';
+import appleIcon from '@/assets/svg/apple_black.svg?raw';

 export default {
  mixins: [sanitizeRedirect],
@@ -726,9 +724,13 @@ export default {
  },
  mounted () {
    this.forgotPassword = this.$route.path.startsWith('/forgot-password');
-
+    if (this.forgotPassword) {
+      if (this.$route.query.email) {
+        this.username = this.$route.query.email;
+      }
+    }
    hello.init({
-      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
    });
  },
  methods: {
@@ -97,7 +97,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .avatar {
    width: 141px;
@@ -27,7 +27,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .bottom-banner {
    background: linear-gradient(114.26deg, $purple-300 0%, $purple-200 100%);
@@ -55,7 +55,7 @@
 </style>

 <script>
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 export default {
  data () {
@@ -42,8 +42,8 @@
 </template>

 <script>
-import gem from '@/assets/svg/gem.svg';
-import gold from '@/assets/svg/gold.svg';
+import gem from '@/assets/svg/gem.svg?raw';
+import gold from '@/assets/svg/gold.svg?raw';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import Sprite from '@/components/ui/sprite.vue';

@@ -72,7 +72,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .customize-options {
    width: 100%;
@@ -19,7 +19,7 @@ export default {
 </script>

 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .sub-menu {
    display: flex;
@@ -30,8 +30,9 @@

 <script>
 import markdownDirective from '@/directives/markdown';
+import { LOCALSTORAGE_AUTH_KEY } from '@/libs/auth';

-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line

 export default {
  directives: {
@@ -39,7 +40,7 @@ export default {
  },
  computed: {
    bannedMessage () {
-      const AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
+      const AUTH_SETTINGS = localStorage.getItem(LOCALSTORAGE_AUTH_KEY);
      const parseSettings = JSON.parse(AUTH_SETTINGS);
      const userId = parseSettings ? parseSettings.auth.apiId : '';

@@ -118,7 +118,7 @@
 </style>

 <style scoped lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h2 {
  color: $white;
@@ -70,7 +70,7 @@
 </style>

 <style scoped lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h2 {
  color: $white;
@@ -134,7 +134,7 @@ label {

 <script>
 import closeIcon from '@/components/shared/closeIcon';
-import checkCircleIcon from '@/assets/svg/check_circle.svg';
+import checkCircleIcon from '@/assets/svg/check_circle.svg?raw';
 import { MODALS } from '@/libs/consts';

 export default {
@@ -259,7 +259,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h1 {
    color: $purple-200;
@@ -380,9 +380,9 @@ import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
 import groupLink from '../groupLink';

-import gemIcon from '@/assets/svg/gem.svg';
-import memberIcon from '@/assets/svg/member-icon.svg';
-import calendarIcon from '@/assets/svg/calendar.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';

 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];

@@ -106,7 +106,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  // Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
  .challenge-title > p {
    display: -webkit-box;
@@ -127,7 +127,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .challenge {
    background-color: $white;
@@ -377,14 +377,14 @@ import categoryTags from '../categories/categoryTags';
 import markdownDirective from '@/directives/markdown';
 import { mapState } from '@/libs/store';

-import gemIcon from '@/assets/svg/gem.svg';
-import memberIcon from '@/assets/svg/member-icon.svg';
-import calendarIcon from '@/assets/svg/calendar.svg';
-import habitIcon from '@/assets/svg/habit.svg';
-import todoIcon from '@/assets/svg/todo.svg';
-import dailyIcon from '@/assets/svg/daily.svg';
-import rewardIcon from '@/assets/svg/reward.svg';
-import officialIcon from '@/assets/svg/official.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';
+import habitIcon from '@/assets/svg/habit.svg?raw';
+import todoIcon from '@/assets/svg/todo.svg?raw';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
+import rewardIcon from '@/assets/svg/reward.svg?raw';
+import officialIcon from '@/assets/svg/official.svg?raw';

 export default {
  components: {
@@ -207,7 +207,7 @@
 </template>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #challenge-modal {
    h5 {
@@ -81,7 +81,7 @@
 </template>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #close-challenge-modal {
    h2 {
@@ -98,7 +98,7 @@
    }

    .support-habitica {
-      background-image: url('~@/assets/svg/for-css/support-habitica-gems.svg');
+      background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw');
      width: 325px;
      height: 89px;
      margin: 0 auto;
@@ -63,7 +63,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media only screen and (max-width: 768px) {
    .header-row {
@@ -122,7 +122,7 @@ import challengeModal from './challengeModal';
 import externalLinks from '@/mixins/externalLinks';
 import challengeUtilities from '@/mixins/challengeUtilities';

-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: {
@@ -49,7 +49,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .no-challenge-section {
    padding: 2em;
@@ -84,7 +84,7 @@ import markdownDirective from '@/directives/markdown';
 import externalLinks from '../../mixins/externalLinks';

 import challengeItem from './challengeItem';
-import challengeIcon from '@/assets/svg/challenge.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';

 export default {
  components: {
@@ -86,7 +86,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media only screen and (max-width: 768px) {
    .header-row {
@@ -150,8 +150,8 @@ import challengeModal from './challengeModal';
 import challengeUtilities from '@/mixins/challengeUtilities';
 import externalLinks from '@/mixins/externalLinks';

-import challengeIcon from '@/assets/svg/challenge.svg';
-import positiveIcon from '@/assets/svg/positive.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: {
@@ -102,7 +102,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .modal-body {
    padding: 0px 8px 0px 8px;
@@ -207,8 +207,8 @@ import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
 import { userStateMixin } from '../../mixins/userState';
 import markdownDirective from '@/directives/markdown';
-import svgClose from '@/assets/svg/close.svg';
-import svgReport from '@/assets/svg/report.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
+import svgReport from '@/assets/svg/report.svg?raw';

 export default {
  directives: {
@@ -34,8 +34,8 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/tiers.scss';
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/tiers.scss';
+  @import '@/assets/scss/colors.scss';

  .autocomplete-results {
    padding: .5em;
@@ -74,16 +74,16 @@
 <script>
 import groupBy from 'lodash/groupBy';
 import styleHelper from '@/mixins/styleHelper';
-import tier1 from '@/assets/svg/tier-1.svg';
-import tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tier8 from '@/assets/svg/tier-mod.svg';
-import tier9 from '@/assets/svg/tier-staff.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
+import tier8 from '@/assets/svg/tier-mod.svg?raw';
+import tier9 from '@/assets/svg/tier-staff.svg?raw';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';

 export default {
  mixins: [styleHelper],
@@ -63,7 +63,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .avatar {
    width: 10%;
@@ -95,7 +95,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

   .modal-body {
     padding: 0px 8px 0px 8px;
@@ -199,7 +199,7 @@
 import notifications from '@/mixins/notifications';
 import markdownDirective from '@/directives/markdown';
 import { userStateMixin } from '../../mixins/userState';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';

 export default {
  directives: {
@@ -572,7 +572,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  $dialogMarginTop: 56px;
  $userCreationBgHeight:  105px;
@@ -671,7 +671,7 @@
    }

    .user-creation-bg {
-      background-image: url('~@/assets/creator/creator-hills-bg.png');
+      background-image: url('@/assets/creator/creator-hills-bg.png');
      height: $userCreationBgHeight;
      width: 219px;
      margin: 0 auto;
@@ -1001,18 +1001,18 @@ import hairSettings from './avatarModal/hair-settings';
 import extraSettings from './avatarModal/extra-settings';
 import closeX from './ui/closeX';

-import logoPurple from '@/assets/svg/logo-purple.svg';
-import bodyIcon from '@/assets/svg/body.svg';
-import accessoriesIcon from '@/assets/svg/accessories.svg';
-import skinIcon from '@/assets/svg/skin.svg';
-import hairIcon from '@/assets/svg/hair.svg';
-import backgroundsIcon from '@/assets/svg/backgrounds.svg';
-import gem from '@/assets/svg/gem.svg';
-import hourglass from '@/assets/svg/hourglass.svg';
-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 logoPurple from '@/assets/svg/logo-purple.svg?raw';
+import bodyIcon from '@/assets/svg/body.svg?raw';
+import accessoriesIcon from '@/assets/svg/accessories.svg?raw';
+import skinIcon from '@/assets/svg/skin.svg?raw';
+import hairIcon from '@/assets/svg/hair.svg?raw';
+import backgroundsIcon from '@/assets/svg/backgrounds.svg?raw';
+import gem from '@/assets/svg/gem.svg?raw';
+import hourglass from '@/assets/svg/hourglass.svg?raw';
+import gold from '@/assets/svg/gold.svg?raw';
+import arrowRight from '@/assets/svg/arrow_right.svg?raw';
+import arrowLeft from '@/assets/svg/arrow_left.svg?raw';
+import svgClose from '@/assets/svg/close.svg?raw';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 import Sprite from './ui/sprite';

@@ -60,7 +60,7 @@
 </template>

 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 #external-link-modal {
  &.modal {
@@ -174,8 +174,8 @@
 </style>

 <script>
-import exclamationIcon from '@/assets/svg/exclamation.svg';
-import closeIcon from '@/assets/svg/new-close.svg';
+import exclamationIcon from '@/assets/svg/exclamation.svg?raw';
+import closeIcon from '@/assets/svg/new-close.svg?raw';

 export default {
  data () {
@@ -39,7 +39,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .face-avatar {
    width: 36px;
@@ -108,7 +108,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h2 {
    color: $purple-300;
@@ -201,7 +201,7 @@

 </style>
 <style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
+  @import '@/assets/scss/mixins.scss';
  #create-group {
    .modal-dialog {
      max-width: 448px;
@@ -28,9 +28,9 @@
      ></div>
      <img
        class="task-columns"
-        src="~@/assets/images/group-plans/task-columns.png"
-        srcset="~@/assets/images/group-plans/task-columns@2x.png 2x,
-          ~@/assets/images/group-plans/task-columns@3x.png 3x"
+        src="@/assets/images/group-plans/task-columns.png"
+        srcset="@/assets/images/group-plans/task-columns@2x.png 2x,
+          @/assets/images/group-plans/task-columns@3x.png 3x"
      >
    </div>
    <div
@@ -96,7 +96,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  #group-plans-update {
    .modal-content {
      border-top-left-radius: 10px;
@@ -125,7 +125,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  h2 {
    color: $white;
    line-height: 28px;
@@ -183,8 +183,8 @@
 </style>

 <script>
-import closeIcon from '@/assets/svg/close.svg';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 export default {
  data () {
@@ -125,8 +125,8 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/create-task.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/create-task.scss';

  h1 {
    color: $purple-300;
@@ -190,13 +190,13 @@ import toggleSwitch from '@/components/ui/toggleSwitch';

 import sync from '../../mixins/sync';

-import positiveIcon from '@/assets/svg/positive.svg';
-import filterIcon from '@/assets/svg/filter.svg';
-import deleteIcon from '@/assets/svg/delete.svg';
-import habitIcon from '@/assets/svg/habit.svg';
-import dailyIcon from '@/assets/svg/daily.svg';
-import todoIcon from '@/assets/svg/todo.svg';
-import rewardIcon from '@/assets/svg/reward.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
+import filterIcon from '@/assets/svg/filter.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import habitIcon from '@/assets/svg/habit.svg?raw';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
+import todoIcon from '@/assets/svg/todo.svg?raw';
+import rewardIcon from '@/assets/svg/reward.svg?raw';

 import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';
@@ -212,8 +212,8 @@ export default {
 </script>

 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/variables.scss';

  .chat-actions {
    margin-top: 1em;
@@ -21,7 +21,7 @@
 </template>

 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .community-guidelines {
  background-color: rgba(135, 129, 144, 0.84);
@@ -114,7 +114,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .copy-icon {
    width: 1rem;
@@ -163,7 +163,7 @@
    width: 100%;

    .quest_screen {
-      background-image: url('~@/assets/images/group@3x.png');
+      background-image: url('@/assets/images/group@3x.png');
      background-size: cover;
      width: 100%;
      height: 246px;
@@ -196,7 +196,7 @@
  }

  .join-party {
-    background-image: url('~@/assets/images/party.png');
+    background-image: url('@/assets/images/party.png');
    background-size: cover;
    width: 203px;
    height: 66px;
@@ -244,7 +244,7 @@ import * as Analytics from '@/libs/analytics';
 import notifications from '@/mixins/notifications';
 import closeX from '../ui/closeX';

-import copyIcon from '@/assets/svg/copy.svg';
+import copyIcon from '@/assets/svg/copy.svg?raw';
 import copyToClipboard from '@/mixins/copyToClipboard';

 export default {
@@ -65,7 +65,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .sort-select {
    margin: 2em;
@@ -95,7 +95,7 @@ import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';
 import groupUtilities from '@/mixins/groupsUtilities';

-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 function _mapCategories (guilds) {
  guilds.forEach(guild => {
@@ -115,7 +115,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media (min-width: 1300px) {
    .standard-page {
@@ -297,17 +297,17 @@ import markdownDirective from '@/directives/markdown';
 import chat from './chat';
 import userLink from '../userLink';

-import deleteIcon from '@/assets/svg/delete.svg';
-import copyIcon from '@/assets/svg/copy.svg';
-import likeIcon from '@/assets/svg/like.svg';
-import likedIcon from '@/assets/svg/liked.svg';
-import reportIcon from '@/assets/svg/report.svg';
-import gemIcon from '@/assets/svg/gem.svg';
-import questIcon from '@/assets/svg/quest.svg';
-import questBackground from '@/assets/svg/quest-background-border.svg';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import copyIcon from '@/assets/svg/copy.svg?raw';
+import likeIcon from '@/assets/svg/like.svg?raw';
+import likedIcon from '@/assets/svg/liked.svg?raw';
+import reportIcon from '@/assets/svg/report.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import questIcon from '@/assets/svg/quest.svg?raw';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg?raw';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg?raw';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg?raw';
 import QuestDetailModal from './questDetailModal';
 import RightSidebar from '@/components/groups/rightSidebar';
 import InvitationListModal from './invitationListModal';
@@ -312,7 +312,7 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .custom-control-input {
    z-index: 1 !important;
@@ -376,8 +376,8 @@ import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '@/../../common/script/constants';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 import markdownDirective from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg';
-import informationIcon from '@/assets/svg/information.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import informationIcon from '@/assets/svg/information.svg?raw';

 import { userStateMixin } from '../../mixins/userState';

@@ -79,7 +79,7 @@
 </template>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #invitation-list {
    .modal-header {
@@ -127,7 +127,7 @@
 </style>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .header-wrap {
    width: 100%;
@@ -242,8 +242,8 @@ import CloseIcon from '../shared/closeIcon';
 import ClassBadge from '../members/classBadge';
 import UserLabel from '../userLabel';

-import svgClose from '@/assets/svg/close.svg';
-import svgCheck from '@/assets/svg/check.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
+import svgCheck from '@/assets/svg/check.svg?raw';

 export default {
  components: {
@@ -75,7 +75,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  a:not([href]) {
    font-size: 16px;
@@ -126,7 +126,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import isUUID from 'validator/es/lib/isUUID';
 import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 const INVITE_DEFAULTS = { text: '', error: null, valid: null };

@@ -128,7 +128,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h1 {
    color: $purple-300;
@@ -252,12 +252,12 @@ import Avatar from '../avatar';
 import userLink from '../userLink';
 import { mapState } from '@/libs/store';

-import syncIcon from '@/assets/svg/sync-2.svg';
-import usersIcon from '@/assets/svg/users.svg';
-import warriorIcon from '@/assets/svg/warrior.svg';
-import rogueIcon from '@/assets/svg/rogue.svg';
-import healerIcon from '@/assets/svg/healer.svg';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import syncIcon from '@/assets/svg/sync-2.svg?raw';
+import usersIcon from '@/assets/svg/users.svg?raw';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
+import healerIcon from '@/assets/svg/healer.svg?raw';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';

 export default {
  components: {
@@ -45,6 +45,9 @@
          <div class="col-5">
            <select-list
              :items="sortOptions"
+              :hide-icon="false"
+              :inline-dropdown="false"
+              :direct-select="true"
              :value="optionEntryBySelectedValue"
              key-prop="value"
              @select="changeSortOption($event)"
@@ -61,6 +64,9 @@
            <select-list
              :items="sortDirections"
              :value="directionEntryBySelectedValue"
+              :hide-icon="false"
+              :inline-dropdown="false"
+              :direct-select="true"
              key-prop="value"
              @select="changeSortDirection($event)"
            >
@@ -278,7 +284,7 @@
 </style>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .apply-options {
    padding: 1em;
@@ -372,10 +378,10 @@ import isEmpty from 'lodash/isEmpty';
 import removeMemberModal from '@/components/members/removeMemberModal';
 import loadingGryphon from '@/components/ui/loadingGryphon';
 import MemberDetails from '../memberDetails';
-import blockIcon from '@/assets/svg/block.svg';
-import messageIcon from '@/assets/members/message.svg';
-import starIcon from '@/assets/members/star.svg';
-import dots from '@/assets/svg/dots.svg';
+import blockIcon from '@/assets/svg/block.svg?raw';
+import messageIcon from '@/assets/members/message.svg?raw';
+import starIcon from '@/assets/members/star.svg?raw';
+import dots from '@/assets/svg/dots.svg?raw';
 import SelectList from '@/components/ui/selectList';
 import { PAGES } from '@/libs/consts';
 import { userStateMixin } from '../../mixins/userState';
@@ -81,7 +81,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  .sort-select {
    margin: 2em;
  }
@@ -115,8 +115,8 @@ import groupUtilities from '@/mixins/groupsUtilities';
 import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';

-import greyBadgeIcon from '@/assets/svg/grey-badge.svg';
-import positiveIcon from '@/assets/svg/positive.svg';
+import greyBadgeIcon from '@/assets/svg/grey-badge.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: { PublicGuildItem, Sidebar },
@@ -87,7 +87,7 @@
 </style>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .header-wrap {
    width: 100%;
@@ -109,7 +109,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .card-link {
    color: #4E4A57 !important;
@@ -218,10 +218,10 @@ import { mapState } from '@/libs/store';
 import categoryTags from '../categories/categoryTags';
 import groupUtilities from '@/mixins/groupsUtilities';
 import markdown from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg?raw';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg?raw';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg?raw';

 export default {
  directives: {
@@ -151,7 +151,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h2 {
    color: $purple-300;
@@ -308,7 +308,7 @@ import getItemInfo from '@/../../common/script/libs/getItemInfo';
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';

-import navigationBack from '@/assets/svg/navigation_back.svg';
+import navigationBack from '@/assets/svg/navigation_back.svg?raw';
 import questDialogContent from '../shops/quests/questDialogContent';
 import closeIcon from '../shared/closeIcon';
 import QuestRewards from '../shops/quests/questRewards';
@@ -268,7 +268,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .svg-icon {
    height: 25px;
@@ -644,10 +644,10 @@ import { mapState } from '@/libs/store';
 import sidebarSection from '../sidebarSection';
 import Sprite from '../ui/sprite';

-import questIcon from '@/assets/svg/quest.svg';
-import swordIcon from '@/assets/svg/sword.svg';
-import rageIcon from '@/assets/svg/rage.svg';
-import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg';
+import questIcon from '@/assets/svg/quest.svg?raw';
+import swordIcon from '@/assets/svg/sword.svg?raw';
+import rageIcon from '@/assets/svg/rage.svg?raw';
+import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg?raw';
 import questActionsMixin from '@/components/groups/questActions.mixin';

 export default {
@@ -143,12 +143,12 @@ import questSidebarSection from '@/components/groups/questSidebarSection';
 import sidebarSection from '@/components/sidebarSection';
 import markdownDirective from '@/directives/markdown';

-import menuIcon from '@/assets/svg/menu.svg';
-import sparklesIcon from '@/assets/svg/sparklesIcon.svg';
-import leaveIcon from '@/assets/svg/leave.svg';
-import editIcon from '@/assets/svg/edit.svg';
-import messageIcon from '@/assets/svg/message.svg';
-import usersIcon from '@/assets/svg/users.svg';
+import menuIcon from '@/assets/svg/menu.svg?raw';
+import sparklesIcon from '@/assets/svg/sparklesIcon.svg?raw';
+import leaveIcon from '@/assets/svg/leave.svg?raw';
+import editIcon from '@/assets/svg/edit.svg?raw';
+import messageIcon from '@/assets/svg/message.svg?raw';
+import usersIcon from '@/assets/svg/users.svg?raw';

 export default {
  components: {
@@ -181,7 +181,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media (min-width: 1300px) {
    .sidebar {
@@ -157,12 +157,12 @@
                    <img
                      v-if="!group.quest.extra.worldDmg.seasonalShop"
                      class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                    >
                    <img
                      v-if="group.quest.extra.worldDmg.seasonalShop"
                      class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
                    >
                  </div>
                  <div
@@ -172,12 +172,12 @@
                    <img
                      v-if="!group.quest.extra.worldDmg.market"
                      class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                    >
                    <img
                      v-if="group.quest.extra.worldDmg.market"
                      class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-market@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-market@2x.png"
                    >
                  </div>
                  <div
@@ -187,12 +187,12 @@
                    <img
                      v-if="!group.quest.extra.worldDmg.quests"
                      class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                    >
                    <img
                      v-if="group.quest.extra.worldDmg.quests"
                      class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-quests@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-quests@2x.png"
                    >
                  </div>
                </div>
@@ -486,7 +486,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h1 {
    color: $purple-200;
@@ -756,25 +756,25 @@ import worldBossRageModal from '../world-boss/worldBossRageModal';
 import sidebarSection from '../sidebarSection';
 import chat from './chat';

-import challengeIcon from '@/assets/svg/challenge.svg';
-import chevronIcon from '@/assets/svg/chevron-red.svg';
-import gemIcon from '@/assets/svg/gem.svg';
-import healthIcon from '@/assets/svg/health.svg';
-import informationIconRed from '@/assets/svg/information-red.svg';
-import questBackground from '@/assets/svg/quest-background-border.svg';
-import rageIcon from '@/assets/svg/rage.svg';
-import swordIcon from '@/assets/svg/sword.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
+import chevronIcon from '@/assets/svg/chevron-red.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import healthIcon from '@/assets/svg/health.svg?raw';
+import informationIconRed from '@/assets/svg/information-red.svg?raw';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
+import rageIcon from '@/assets/svg/rage.svg?raw';
+import swordIcon from '@/assets/svg/sword.svg?raw';

-import tier1 from '@/assets/svg/tier-1.svg';
-import tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tierMod from '@/assets/svg/tier-mod.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
-import tierStaff from '@/assets/svg/tier-staff.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
+import tierMod from '@/assets/svg/tier-mod.svg?raw';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';
+import tierStaff from '@/assets/svg/tier-staff.svg?raw';

 import staffList from '../../libs/staffList';
 import reportBug from '@/mixins/reportBug.js';
@@ -20,7 +20,7 @@ body.modal-open .habitica-top-banner {
 </style>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .habitica-top-banner {
  width: 100%;
@@ -41,7 +41,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .announce-text {
    color: $purple-50;
@@ -56,7 +56,7 @@
      rgba(255,190,93,1) 25%,
      rgba(255,190,93,1) 75%,
      rgba(255,190,93,0) 100%),
-      url('~@/assets/images/glitter.png');
+      url('@/assets/images/glitter.png');
    cursor: pointer;
  }

@@ -86,8 +86,8 @@ import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';

-import giftsBirthday from '@/assets/svg/gifts-birthday.svg';
-import tenBirthday from '@/assets/svg/10th-birthday-linear.svg';
+import giftsBirthday from '@/assets/svg/gifts-birthday.svg?raw';
+import tenBirthday from '@/assets/svg/10th-birthday-linear.svg?raw';

 export default {
  components: {
@@ -17,7 +17,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .chat-banner {
    width: 100%;
@@ -28,7 +28,7 @@
 </template>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .resting-banner {
  background-color: $blue-10;
@@ -15,62 +15,62 @@
        v-if="eventName === 'fall_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/fall-confetti-left/confetti.png,
-    ~@/assets/images/gems/fall-confetti-left/confetti@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-left/confetti@3x.png 3x"
-        src="~@/assets/images/gems/fall-confetti-left/confetti.png"
+    @/assets/images/gems/fall-confetti-left/confetti.png,
+    @/assets/images/gems/fall-confetti-left/confetti@2x.png 2x,
+    @/assets/images/gems/fall-confetti-left/confetti@3x.png 3x"
+        src="@/assets/images/gems/fall-confetti-left/confetti.png"
      >
      <img
        v-else-if="eventName === 'spooky_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/spooky-confetti-left/confetti.png,
-    ~@/assets/images/gems/spooky-confetti-left/confetti@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-left/confetti@3x.png 3x"
-        src="~@/assets/images/gems/spooky-confetti-left/confetti.png"
+    @/assets/images/gems/spooky-confetti-left/confetti.png,
+    @/assets/images/gems/spooky-confetti-left/confetti@2x.png 2x,
+    @/assets/images/gems/spooky-confetti-left/confetti@3x.png 3x"
+        src="@/assets/images/gems/spooky-confetti-left/confetti.png"
      >
      <div class="promo-test">
        <img
          v-if="eventName === 'fall_extra_gems'"
          srcset="
-      ~@/assets/images/gems/fall-text/text.png,
-      ~@/assets/images/gems/fall-text/text@2x.png 2x,
-      ~@/assets/images/gems/fall-text/text@3x.png 3x"
-          src="~@/assets/images/gems/fall-text/text.png"
+      @/assets/images/gems/fall-text/text.png,
+      @/assets/images/gems/fall-text/text@2x.png 2x,
+      @/assets/images/gems/fall-text/text@3x.png 3x"
+          src="@/assets/images/gems/fall-text/text.png"
        >
        <img
          v-else-if="eventName === 'spooky_extra_gems'"
          srcset="
-      ~@/assets/images/gems/spooky-text/text.png,
-      ~@/assets/images/gems/spooky-text/text@2x.png 2x,
-      ~@/assets/images/gems/spooky-text/text@3x.png 3x"
-          src="~@/assets/images/gems/spooky-text/text.png"
+      @/assets/images/gems/spooky-text/text.png,
+      @/assets/images/gems/spooky-text/text@2x.png 2x,
+      @/assets/images/gems/spooky-text/text@3x.png 3x"
+          src="@/assets/images/gems/spooky-text/text.png"
        >
      </div>
      <img
        v-if="eventName === 'fall_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/fall-confetti-right/confetti.png,
-    ~@/assets/images/gems/fall-confetti-right/confetti@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-right/confetti@3x.png 3x"
-        src="~@/assets/images/gems/fall-confetti-right/confetti.png"
+    @/assets/images/gems/fall-confetti-right/confetti.png,
+    @/assets/images/gems/fall-confetti-right/confetti@2x.png 2x,
+    @/assets/images/gems/fall-confetti-right/confetti@3x.png 3x"
+        src="@/assets/images/gems/fall-confetti-right/confetti.png"
      >
      <img
        v-else-if="eventName === 'spooky_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/spooky-confetti-right/confetti.png,
-    ~@/assets/images/gems/spooky-confetti-right/confetti@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-right/confetti@3x.png 3x"
-        src="~@/assets/images/gems/spooky-confetti-right/confetti.png"
+    @/assets/images/gems/spooky-confetti-right/confetti.png,
+    @/assets/images/gems/spooky-confetti-right/confetti@2x.png 2x,
+    @/assets/images/gems/spooky-confetti-right/confetti@3x.png 3x"
+        src="@/assets/images/gems/spooky-confetti-right/confetti.png"
      >
    </div>
  </base-banner>
 </template>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .gems-promo-banner-fall_extra_gems {
  background: $gray-10;
@@ -34,7 +34,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .announce-text {
    color: $white;
@@ -67,7 +67,7 @@ import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';

-import gifts from '@/assets/svg/gifts.svg';
+import gifts from '@/assets/svg/gifts.svg?raw';

 export default {
  components: {
@@ -74,7 +74,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #app-header {
    padding-left: 24px;
@@ -402,9 +402,9 @@ body.modal-open #habitica-menu {
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/utils.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/utils.scss';
+  @import '@/assets/scss/variables.scss';

  .menu-toggle {
    border: none;
@@ -417,7 +417,7 @@ body.modal-open #habitica-menu {

  .topbar {
    z-index: 1080;
-    background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right top no-repeat;
+    background: $purple-100 url(@/assets/svg/for-css/bits.svg) right top no-repeat;
    min-height: 56px;
    box-shadow: 0 1px 2px 0 rgba($black, 0.24);

@@ -740,12 +740,12 @@ body.modal-open #habitica-menu {
 import { mapState, mapGetters } from '@/libs/store';
 import { goToModForm } from '@/libs/modform';

-import gemIcon from '@/assets/svg/gem.svg';
-import goldIcon from '@/assets/svg/gold.svg';
-import syncIcon from '@/assets/svg/sync.svg';
-import svgHourglasses from '@/assets/svg/hourglass.svg';
-import chevronDownIcon from '@/assets/svg/chevron-down.svg';
-import melior from '@/assets/svg/melior.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import goldIcon from '@/assets/svg/gold.svg?raw';
+import syncIcon from '@/assets/svg/sync.svg?raw';
+import svgHourglasses from '@/assets/svg/hourglass.svg?raw';
+import chevronDownIcon from '@/assets/svg/chevron-down.svg?raw';
+import melior from '@/assets/svg/melior.svg?raw';

 import creatorIntro from '../creatorIntro';
 import notificationMenu from './notificationsDropdown';
--- a/Show More
+++ b/Show More