Merge branch 'fiz/challenge-modal-fixes' into fiz/updated-end-challenge-modal

- 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

gulp/gulp-start.js

@@ -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();
-});

gulp/gulp-tests.js

@@ -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);

gulpfile.js

@@ -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

migrations/archive/api_v3/groups.js

@@ -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');

migrations/archive/api_v3/users.js

@@ -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');

migrations/migration-runner.js

@@ -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();
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "habitica",
-  "version": "5.35.3",
+  "version": "5.38.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habitica",
-      "version": "5.35.3",
+      "version": "5.38.1",
       "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",
+      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.10.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "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",
+      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.2.tgz",
-      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "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",
+      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/moment-recur/-/moment-recur-1.0.7.tgz",
+      "resolved": "git+ssh://git@github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
-      "integrity": "sha512-jpBQn6H62gCnEYjtYdLfK/VdPZHEXo1t8RrVItHVVS67SRvByyJBNBa3WQSGTe+8H0smcYO/79FYTA9LGMVdQw==",
+      "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",
+      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
-      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "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",
+        "semver": "^7.5.3",
-        "simple-update-notifier": "^1.0.7",
+        "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",
+      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "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",
+      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
-      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "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",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
-      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "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",
+      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "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",

package.json

@@ -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.1",
   "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",

scripts/gdpr-delete-users.js

@@ -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 },

scripts/team-cron.js

@@ -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: [
+  }, { cron: 1, leader: 1, purchased: 1 }).exec();
-      { 'purchased.plan.dateTerminated': { $exists: false } },
-      { 'purchased.plan.dateTerminated': null },
-      { 'purchased.plan.dateTerminated': { $gt: new Date() } },
-    ],
-  }).exec();
 
   const cronPromises = activeTeams.map(updateTeamTasks);
   return Promise.all(cronPromises);

test/api/unit/libs/highlightMentions.test.js

@@ -47,6 +47,12 @@ describe('highlightMentions', () => {
     expect(result[0]).to.equal('[@user-dash](/profile/444): message [@user_underscore](/profile/555)');
   });
 
+  it('highlights users with case-insensitive matching', async () => {
+    const text = '@USER: message @User2 @USER3';
+    const result = await highlightMentions(text);
+    expect(result[0]).to.equal('[@USER](/profile/111): message [@User2](/profile/222) [@USER3](/profile/333)');
+  });
+
   it('doesn\'t highlight nonexisting users', async () => {
     const text = '@nouser message';
     const result = await highlightMentions(text);

test/api/unit/middlewares/auth.test.js

@@ -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();
+        });
+      });
+    });
   });
 });

test/api/v3/integration/chat/POST-chat.test.js

@@ -238,6 +238,18 @@ describe('POST /chat', () => {
     expect(groupMessages[0].id).to.exist;
   });
 
+  it('creates a chat with case-insensitive mentions', async () => {
+    const originalUsername = member.auth.local.username;
+    const uppercaseUsername = originalUsername.toUpperCase();
+    const messageWithMentions = `hi @${uppercaseUsername}`;
+    const newMessage = await user.post(`/groups/${groupWithChat._id}/chat`, { message: messageWithMentions });
+    const groupMessages = await user.get(`/groups/${groupWithChat._id}/chat`);
+
+    expect(newMessage.message.id).to.exist;
+    expect(newMessage.message.text).to.include(`[@${uppercaseUsername}](/profile/${member._id})`);
+    expect(groupMessages[0].id).to.exist;
+  });
+
   it('creates a chat with a max length of 3000 chars', async () => {
     const veryLongMessage = `
     123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789.

test/api/v3/integration/content/GET-content.test.js

@@ -1,6 +1,7 @@
 import {
   requester,
   translate as t,
+  generateUser,
 } from '../../../../helpers/api-integration/v3';
 import i18n from '../../../../../website/common/script/i18n';
 
@@ -56,4 +57,28 @@ describe('GET /content', () => {
     const res = await requester().get('/content?filter=backgroundsFlat,invalid');
     expect(res).to.not.have.property('backgroundsFlat');
   });
+
+  describe('authenticated user', () => {
+    let user;
+    it('returns content in user\'s preferred language when no language parameter is provided', async () => {
+      user = await generateUser({ 'preferences.language': 'de' });
+      const res = await user.get('/content');
+      expect(res).to.have.nested.property('backgrounds.backgrounds062014.beach');
+      expect(res.backgrounds.backgrounds062014.beach.text).to.equal(i18n.t('backgroundBeachText', 'de'));
+    });
+
+    it('respects language parameter over user\'s preferred language', async () => {
+      user = await generateUser({ 'preferences.language': 'de' });
+      const res = await user.get('/content?language=fr');
+      expect(res).to.have.nested.property('backgrounds.backgrounds062014.beach');
+      expect(res.backgrounds.backgrounds062014.beach.text).to.equal(i18n.t('backgroundBeachText', 'fr'));
+    });
+
+    it('falls back to English if user\'s preferred language is invalid', async () => {
+      user = await generateUser({ 'preferences.language': 'invalid_lang' });
+      const res = await user.get('/content');
+      expect(res).to.have.nested.property('backgrounds.backgrounds062014.beach');
+      expect(res.backgrounds.backgrounds062014.beach.text).to.equal(t('backgroundBeachText'));
+    });
+  });
 });

test/api/v3/integration/tasks/GET-tasks_user.test.js

@@ -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();

test/api/v3/integration/user/auth/POST-auth_reset-password-set-new-one.js

@@ -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();
 

test/api/v3/integration/user/auth/PUT-user_update_password.test.js

@@ -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,

test/content/schedule.test.js

@@ -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', () => {

test/content/shop-featuredItems.test.js

@@ -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;
     });

test/helpers/globals.helper.js

@@ -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');

test/helpers/start-server.js

@@ -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');

website/client/.eslintrc.js

@@ -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',
-  },
 };

website/client/babel.config.js

@@ -1,9 +0,0 @@
-/* eslint-disable import/no-commonjs */
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-optional-chaining',
-  ],
-};

website/client/index.html

@@ -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>

website/client/package.json

@@ -3,28 +3,26 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vite",
-    "build": "vue-cli-service build",
+    "build": "vite build",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
+    "preview": "vite preview",
-    "lint": "vue-cli-service lint .",
+    "test:unit": "vitest run",
-    "lint-no-fix": "vue-cli-service lint --no-fix .",
+    "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",
+    "@froxz/vite-plugin-s3": "^1.6.0",
-    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vitejs/plugin-vue2": "^2.3.3",
-    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
     "@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"
   }
 }

website/client/src/app.vue

@@ -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
+        // If 'invalid_credentials' signaled, force logout
-        // TODO use a specific error like NotificationNotFound instead of checking for the string
+        if (error.response.status === 401 && errorCode === 'invalid_credentials') {
-        const invalidUserMessage = [this.$t('invalidCredentials'), 'Missing authentication headers.'];
-        if (invalidUserMessage.indexOf(errorMessage) !== -1) {
           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);
 
+    // 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>

website/client/src/assets/css/sprites.css

@@ -177,7 +177,7 @@
   height: 96px;
 }
 
-.Mount_Head_Gryphon-Gryphatrice, .Mount_Body_Gryphon-Gryphatrice {
+.Mount_Head_Gryphon-Gryphatrice, .Mount_Body_Gryphon-Gryphatrice, .Mount_Head_Dragon-Hydra, .Mount_Body_Dragon-Hydra {
   width: 135px;
   height: 135px;
 }
@@ -190,6 +190,14 @@
   background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/BackerOnly-Mount-Body-Gryphatrice.gif") no-repeat;
 }
 
+.Mount_Head_Dragon-Hydra {
+  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Dragon-Hydra.gif") no-repeat;
+}
+
+.Mount_Body_Dragon-Hydra {
+  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Dragon-Hydra.gif") no-repeat;
+}
+
 .background_airship, .background_clocktower, .background_steamworks {
   width: 141px;
   height: 147px;

website/client/src/assets/css/sprites/spritesmith-main.css

@@ -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;

website/client/src/assets/scss/banner.scss

@@ -1,5 +1,5 @@
 
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .featured-label {
   width: auto;

website/client/src/assets/scss/bootstrap.scss

@@ -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';

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

@@ -316,3 +316,9 @@
   line-height: 2;
   padding: 2px 2px;
 }
+
+.btn-lg {
+  font-size: 1.25rem;
+  line-height: 1.5;
+  padding: .5rem 1rem;
+}

website/client/src/assets/scss/faq.scss

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 h1 {
   margin-top: 0px;

website/client/src/assets/scss/form.scss

@@ -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;
     }
 

website/client/src/assets/scss/iconalert.scss

@@ -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;
 }
 

website/client/src/assets/scss/modal.scss

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .modal {
   z-index: 1350;

website/client/src/assets/scss/shops.scss

@@ -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;

website/client/src/assets/scss/static.scss

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .container-fluid.static-view {
   margin: 5em 2em 0 2em;

website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg

@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1792 31.6843L46.8536 22.3769L23.918 28.6988L18.861 42.5218L44.341 58.5813L58.1792 31.6843Z" fill="#FF944C"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L46.1108 26.1328L36.2812 28.8422L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M30.2393 39.0304L26.4518 31.5515L36.2813 28.8422L30.2393 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L36.2813 28.8422L30.2393 39.0304L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.1108 26.1328L46.6218 34.5148L53.8301 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L26.4518 31.5516L30.2393 39.0304L23.0309 41.0173Z" fill="#FA8537"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.6218 34.5148L43.0424 53.79L53.8301 32.5279Z" fill="#FA8537"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L30.2393 39.0304L43.0425 53.79L23.0309 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L30.2393 39.0304L43.0425 53.79L46.6218 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.555 4.15937L47.026 0.420004L38.7773 1.59601L36.4144 6.17539L44.5675 12.8919L50.555 4.15937Z" fill="#FFBE5D"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L46.6034 1.6924L43.0682 2.1964L46.414 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M40.5221 5.46854L39.5331 2.7004L43.0682 2.1964L40.5221 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L43.0683 2.1964L40.5221 5.46855L46.414 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25894L46.6034 1.6924L46.414 4.62854L49.0064 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M37.9296 5.83815L39.5331 2.70041L40.5221 5.46855L37.9296 5.83815Z" fill="#FFA624"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25893L46.414 4.62853L44.3259 11.1688L49.0064 4.25893Z" fill="#FFA624"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M37.9297 5.83815L40.5221 5.46855L44.326 11.1688L37.9297 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L40.5221 5.46855L44.326 11.1688L46.414 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2986 16.7775L24.6513 8.36623L11.1016 3.94533L4.07056 9.19883L11.614 25.6769L27.2986 16.7775Z" fill="#FF6165"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L23.0573 10.0026L17.2502 8.10789L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.908 11.2141L11.4432 6.21322L17.2502 8.10789L10.908 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L17.2502 8.10789L10.9081 11.2141L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L23.0573 10.0026L20.5864 14.3719L24.8449 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M6.64955 9.82464L11.4432 6.21321L10.908 11.2141L6.64955 9.82464Z" fill="#F23035"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L20.5864 14.3719L12.5221 22.8464L24.8449 15.7613Z" fill="#F23035"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.64959 9.82464L10.9081 11.2141L12.5221 22.8463L6.64959 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L10.9081 11.2141L12.5221 22.8463L20.5864 14.3719Z" fill="white"/>
+</svg>

website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg

@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.82083 31.6843L17.1464 22.3769L40.082 28.6988L45.139 42.5218L19.659 58.5813L5.82083 31.6843Z" fill="#24CC8F"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L17.8892 26.1328L27.7188 28.8422L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.7607 39.0304L37.5482 31.5515L27.7187 28.8422L33.7607 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L27.7187 28.8422L33.7607 39.0304L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.8892 26.1328L17.3782 34.5148L10.1699 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L37.5482 31.5516L33.7607 39.0304L40.9691 41.0173Z" fill="#1CA372"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.3782 34.5148L20.9576 53.79L10.1699 32.5279Z" fill="#1CA372"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L33.7607 39.0304L20.9575 53.79L40.9691 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L33.7607 39.0304L20.9575 53.79L17.3782 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.445 4.15937L16.974 0.420004L25.2227 1.59601L27.5856 6.17539L19.4325 12.8919L13.445 4.15937Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L17.3966 1.6924L20.9318 2.1964L17.586 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M23.4779 5.46854L24.4669 2.7004L20.9318 2.1964L23.4779 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L20.9317 2.1964L23.4779 5.46855L17.586 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25894L17.3966 1.6924L17.586 4.62854L14.9936 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M26.0704 5.83815L24.4669 2.70041L23.4779 5.46855L26.0704 5.83815Z" fill="#4F2A93"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25893L17.586 4.62853L19.6741 11.1688L14.9936 4.25893Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M26.0703 5.83815L23.4779 5.46855L19.674 11.1688L26.0703 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L23.4779 5.46855L19.674 11.1688L17.586 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7014 16.7775L39.3487 8.36623L52.8984 3.94533L59.9294 9.19883L52.386 25.6769L36.7014 16.7775Z" fill="#50B5E9"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L40.9427 10.0026L46.7498 8.10789L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M53.092 11.2141L52.5568 6.21322L46.7498 8.10789L53.092 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L46.7498 8.10789L53.0919 11.2141L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L40.9427 10.0026L43.4136 14.3719L39.1551 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L52.5568 6.21321L53.092 11.2141L57.3504 9.82464Z" fill="#46A7D9"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L43.4136 14.3719L51.4779 22.8464L39.1551 15.7613Z" fill="#46A7D9"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L53.0919 11.2141L51.4779 22.8463L57.3504 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L53.0919 11.2141L51.4779 22.8463L43.4136 14.3719Z" fill="white"/>
+</svg>

website/client/src/components/404.vue

@@ -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;

website/client/src/components/achievements/chooseClass.vue

@@ -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 warriorIcon from '@/assets/svg/warrior.svg?raw';
-import rogueIcon from '@/assets/svg/rogue.svg';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
-import healerIcon from '@/assets/svg/healer.svg';
+import healerIcon from '@/assets/svg/healer.svg?raw';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';
 
 export default {
   components: {

website/client/src/components/achievements/firstDrops.vue

@@ -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 {

website/client/src/components/achievements/genericAchievement.vue

@@ -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 {

website/client/src/components/achievements/levelUp.vue

@@ -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 starGroup from '@/assets/svg/star-group.svg?raw';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';
 
 const levelQuests = {
   15: 'atom1',

website/client/src/components/achievements/onboardingComplete.vue

@@ -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);
     },
   },

website/client/src/components/achievements/questInvitation.vue

@@ -97,9 +97,9 @@ import { mapState } from '@/libs/store';
 import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: [
+  components: {
     Sprite,
-  ],
+  },
   data () {
     return {
       maxHealth,

website/client/src/components/achievements/wonChallenge.vue

@@ -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 sparkles from '@/assets/svg/star-group.svg?raw';
-import gem from '@/assets/svg/gem.svg';
+import gem from '@/assets/svg/gem.svg?raw';
-import stars from '@/assets/svg/sparkles-left.svg';
+import stars from '@/assets/svg/sparkles-left.svg?raw';
 import { mapState } from '@/libs/store';
 
 export default {

website/client/src/components/admin-panel/user-support/stats-row.vue

@@ -19,7 +19,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .about-row {
     margin-left: 0px;

website/client/src/components/admin-panel/user-support/stats.vue

@@ -170,7 +170,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .about-row {
     margin-left: 0px;

website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue

@@ -401,7 +401,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
 .input-group-append {
   width: auto;

website/client/src/components/admin-panel/user-support/userHistory.vue

@@ -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;

website/client/src/components/appFooter.vue

@@ -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 melior from '@/assets/svg/melior.svg?raw';
-import bluesky from '@/assets/svg/bluesky.svg';
+import bluesky from '@/assets/svg/bluesky.svg?raw';
-import facebook from '@/assets/svg/facebook.svg';
+import facebook from '@/assets/svg/facebook.svg?raw';
-import instagram from '@/assets/svg/instagram.svg';
+import instagram from '@/assets/svg/instagram.svg?raw';
-import tumblr from '@/assets/svg/tumblr.svg';
+import tumblr from '@/assets/svg/tumblr.svg?raw';
-import heart from '@/assets/svg/heart.svg';
+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 DEBUG_ENABLED = import.meta.env.DEBUG_ENABLED === 'true';
-const TIME_TRAVEL_ENABLED = process.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
+const TIME_TRAVEL_ENABLED = import.meta.env.TIME_TRAVEL_ENABLED === 'true';
+
 let sinon;
-if (TIME_TRAVEL_ENABLED) {
+if (import.meta.env.TIME_TRAVEL_ENABLED === 'true') {
-  // eslint-disable-next-line global-require
+  (async () => {
     sinon = await import('sinon');
+  })();
 }
 
 export default {

website/client/src/components/auth/authForm.vue

@@ -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 googleIcon from '@/assets/svg/google.svg?raw';
-import appleIcon from '@/assets/svg/apple_black.svg';
+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: {

website/client/src/components/auth/registerLoginReset.vue

@@ -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 exclamation from '@/assets/svg/exclamation.svg?raw';
-import gryphon from '@/assets/svg/gryphon.svg';
+import gryphon from '@/assets/svg/gryphon.svg?raw';
-import habiticaIcon from '@/assets/svg/logo-horizontal.svg';
+import habiticaIcon from '@/assets/svg/logo-horizontal.svg?raw';
-import googleIcon from '@/assets/svg/google.svg';
+import googleIcon from '@/assets/svg/google.svg?raw';
-import appleIcon from '@/assets/svg/apple_black.svg';
+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: {

website/client/src/components/avatar.vue

@@ -97,7 +97,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .avatar {
     width: 141px;

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

@@ -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 () {

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

@@ -42,8 +42,8 @@
 </template>
 
 <script>
-import gem from '@/assets/svg/gem.svg';
+import gem from '@/assets/svg/gem.svg?raw';
-import gold from '@/assets/svg/gold.svg';
+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%;

website/client/src/components/avatarModal/sub-menu.vue

@@ -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;

website/client/src/components/bannedAccountModal.vue

@@ -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 : '';
 

website/client/src/components/bugReportModal.vue

@@ -118,7 +118,7 @@
 </style>
 
 <style scoped lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 h2 {
   color: $white;

website/client/src/components/bugReportSuccessModal.vue

@@ -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 {

website/client/src/components/challenges/challengeDetail.vue

@@ -75,11 +75,14 @@
             class="box member-count"
             @click="showMemberModal()"
           >
+            <div class="box-content">
+              <div class="icon-number-row">
                 <div
                   class="svg-icon member-icon"
                   v-html="icons.memberIcon"
                 ></div>
-            {{ challenge.memberCount }}
+                <span class="number">{{ challenge.memberCount }}</span>
+              </div>
               <div
                 v-once
                 class="details"
@@ -87,6 +90,7 @@
                 {{ $t('participantsTitle') }}
               </div>
             </div>
+          </div>
           <div class="box">
             <div
               class="svg-icon gem-icon"
@@ -259,7 +263,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   h1 {
     color: $purple-200;
@@ -304,7 +308,7 @@
 
   .box {
     display: inline-block;
-    padding: 1em;
+    padding: 0.5em;
     border-radius: 2px;
     background-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
@@ -314,22 +318,69 @@
     text-align: center;
     font-size: 20px;
     vertical-align: bottom;
+    overflow: hidden;
+    position: relative;
 
     &.member-count:hover {
       cursor: pointer;
     }
 
+    .box-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+    }
+
+    .icon-number-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0.1em;
+
+      .number {
+        font-size: 20px;
+        font-weight: normal;
+        margin-left: 0.2em;
+      }
+    }
+
     .svg-icon {
       width: 30px;
       display: inline-block;
-      margin-right: .2em;
       vertical-align: bottom;
     }
 
     .details {
       font-size: 12px;
-      margin-top: 0.4em;
       color: $gray-200;
+      width: 100%;
+      padding: 0 4px;
+      line-height: 1.15;
+      word-break: break-word;
+      max-height: 2.3em;
+      overflow: visible;
+    }
+
+    &.member-count {
+      .icon-number-row {
+        .svg-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        .number {
+          font-size: 18px;
+        }
+      }
+
+      .details {
+        font-size: 11px;
+        line-height: 1.1;
+        max-height: 2.2em;
+      }
     }
   }
 
@@ -380,9 +431,9 @@ import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
 import groupLink from '../groupLink';
 
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import memberIcon from '@/assets/svg/member-icon.svg';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
-import calendarIcon from '@/assets/svg/calendar.svg';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';
 
 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];
 

website/client/src/components/challenges/challengeItem.vue

@@ -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 gemIcon from '@/assets/svg/gem.svg?raw';
-import memberIcon from '@/assets/svg/member-icon.svg';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
-import calendarIcon from '@/assets/svg/calendar.svg';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';
-import habitIcon from '@/assets/svg/habit.svg';
+import habitIcon from '@/assets/svg/habit.svg?raw';
-import todoIcon from '@/assets/svg/todo.svg';
+import todoIcon from '@/assets/svg/todo.svg?raw';
-import dailyIcon from '@/assets/svg/daily.svg';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
-import rewardIcon from '@/assets/svg/reward.svg';
+import rewardIcon from '@/assets/svg/reward.svg?raw';
-import officialIcon from '@/assets/svg/official.svg';
+import officialIcon from '@/assets/svg/official.svg?raw';
 
 export default {
   components: {

website/client/src/components/challenges/challengeModal.vue

@@ -207,7 +207,7 @@
 </template>
 
 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #challenge-modal {
     h5 {

website/client/src/components/challenges/closeChallengeModal.vue

@@ -4,6 +4,7 @@
       id="close-challenge-modal"
       :title="$t('endChallenge')"
       size="md"
+      :hide-header="false"
     >
       <div
         slot="modal-header"
@@ -15,6 +16,15 @@
         >
           {{ $t('endChallenge') }}
         </h2>
+        <button
+          class="close-button"
+          @click="$root.$emit('bv::hide::modal', 'close-challenge-modal')"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.close"
+          ></div>
+        </button>
       </div>
       <div class="row text-center">
         <span
@@ -28,28 +38,67 @@
           class="col-12"
         >
           <div class="col-12">
-            <div class="support-habitica">
+            <div class="badge-section">
-              <!-- @TODO: Add challenge achievement badge here-->
+              <div
+                class="gems-left"
+                v-html="icons.gemsOrange"
+              ></div>
+              <div
+                class="challenge-badge"
+                v-html="icons.endChallengeBadge"
+              ></div>
+              <div
+                class="gems-right"
+                v-html="icons.gemsPurple"
+              ></div>
             </div>
           </div>
           <div class="col-12">
             <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
           </div>
           <div class="col-12">
-            <member-search-dropdown
+            <div class="search-input-wrapper">
-              :text="winnerText"
+              <div
-              :members="members"
+                class="search-icon"
-              :challenge-id="challengeId"
+                v-html="icons.search"
-              @member-selected="selectMember"
+              ></div>
-            />
+              <input
+                v-model="searchTerm"
+                class="search-input"
+                type="text"
+                :placeholder="'@' + $t('username')"
+                @input="searchMembers"
+                @focus="showResults = true"
+                @blur="handleBlur"
+              >
+              <div
+                v-if="showResults && filteredMembers.length > 0"
+                class="search-results"
+              >
+                <div
+                  v-for="member in filteredMembers"
+                  :key="member._id"
+                  class="search-result-item"
+                  @mousedown="selectMember(member)"
+                >
+                  {{ getMemberDisplayName(member) }}
+                </div>
+              </div>
+            </div>
           </div>
           <div class="col-12">
             <button
-              v-once
+              class="btn award-winner-btn"
-              class="btn btn-primary"
+              :class="{'has-winner': winner._id}"
+              :disabled="!winner._id"
               @click="closeChallenge"
             >
-              {{ $t('awardWinners') }}
+              <span>{{ $t('awardWinners') }}</span>
+              <div
+                class="gem-icon"
+                v-html="icons.gem"
+              ></div>
+              <span>{{ prize }} {{ prize === 1 ? $t('gem') : $t('gems') }}</span>
             </button>
           </div>
         </span>
@@ -60,14 +109,24 @@
           </div>
         </div>
         <div class="col-12">
-          <strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+          <strong
+            v-once
+            class="delete-challenge-text"
+          >{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+        </div>
+        <div class="col-12 refund-text">
+          {{ $t('deleteChallengeRefundDescription') }}
         </div>
         <div class="col-12">
           <button
             v-once
-            class="btn btn-danger"
+            class="btn btn-danger delete-challenge-btn"
             @click="deleteChallenge()"
           >
+            <div
+              class="delete-icon"
+              v-html="icons.deleteIcon"
+            ></div>
             {{ $t('deleteChallenge') }}
           </button>
         </div>
@@ -81,7 +140,7 @@
 </template>
 
 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #close-challenge-modal {
     h2 {
@@ -95,13 +154,185 @@
     .header-wrap {
       width: 100%;
       padding-top: 2em;
+      position: relative;
     }
 
-    .support-habitica {
+    .close-button {
-      background-image: url('~@/assets/svg/for-css/support-habitica-gems.svg');
+      position: absolute;
-      width: 325px;
+      top: 1rem;
-      height: 89px;
+      right: 1rem;
+      background: none;
+      border: none;
+      padding: 0.5rem;
+      cursor: pointer;
+      opacity: 0.5;
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      .svg-icon {
+        width: 16px;
+        height: 16px;
+        color: $gray-10;
+      }
+    }
+
+    .search-input-wrapper {
+      position: relative;
+      width: 384px;
       margin: 0 auto;
+
+      .search-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        color: $gray-200;
+        pointer-events: none;
+      }
+
+      .search-input {
+        width: 100%;
+        height: 32px;
+        padding-left: 36px;
+        padding-right: 12px;
+        border: 2px solid $gray-400;
+        border-radius: 4px;
+        font-size: 14px;
+        transition: border-color 0.2s ease;
+
+        &:focus {
+          outline: none;
+          border-color: $purple-300;
+        }
+
+        &::placeholder {
+          color: $gray-300;
+        }
+      }
+
+      .search-results {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: $white;
+        border: 1px solid $gray-400;
+        border-top: none;
+        border-radius: 0 0 4px 4px;
+        max-height: 200px;
+        overflow-y: auto;
+        z-index: 1000;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+        .search-result-item {
+          padding: 8px 12px;
+          cursor: pointer;
+          transition: background-color 0.2s ease;
+
+          &:hover {
+            background-color: $gray-700;
+          }
+        }
+      }
+    }
+
+    .delete-challenge-text {
+      color: $maroon-50;
+    }
+
+    .refund-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $gray-50;
+      margin-top: 0.5em !important;
+    }
+
+    .delete-challenge-btn {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 24px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+
+      .delete-icon {
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        color: $white;
+      }
+    }
+
+    .award-winner-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background-color: $white;
+      color: $gray-200;
+      border: 1px solid $gray-400;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+      transition: all 0.2s ease;
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        
+        &:hover {
+          background-color: $white;
+        }
+      }
+
+      &.has-winner {
+        background-color: $purple-200;
+        color: $white;
+        border-color: $purple-200;
+
+        .gem-icon {
+          color: $white;
+        }
+      }
+
+      &:hover:not(.has-winner):not(:disabled) {
+        background-color: $gray-700;
+      }
+
+      .gem-icon {
+        width: 20px;
+        height: 20px;
+        display: inline-flex;
+        align-items: center;
+        color: $gems-color;
+      }
+    }
+
+    .badge-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1.5rem;
+      margin: 0 auto;
+      padding: 1rem 0;
+
+      .gems-left, .gems-right {
+        width: 64px;
+        height: 64px;
+        flex-shrink: 0;
+      }
+
+      .challenge-badge {
+        width: 48px;
+        height: 52px;
+        flex-shrink: 0;
+      }
     }
 
     .modal-footer, .modal-header {
@@ -123,21 +354,37 @@
       margin-right: auto;
       margin-left: auto;
       font-weight: bold;
+      color: $gray-100;
     }
   }
 </style>
 
 <script>
-import memberSearchDropdown from '@/components/members/memberSearchDropdown';
+import searchIcon from '@/assets/svg/for-css/search.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import closeIcon from '@/assets/svg/close.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import endChallengeBadge from '@/assets/svg/for-css/end_challenge_badge.svg?raw';
+import gemsOrange from '@/assets/svg/for-css/orange100_red100_yellow100_gems.svg?raw';
+import gemsPurple from '@/assets/svg/for-css/purple200_green10_blue100_gems.svg?raw';
 
 export default {
-  components: {
-    memberSearchDropdown,
-  },
   props: ['challengeId', 'members', 'prize', 'flagCount'],
   data () {
     return {
       winner: {},
+      searchTerm: '',
+      showResults: false,
+      filteredMembers: [],
+      icons: Object.freeze({
+        search: searchIcon,
+        deleteIcon,
+        close: closeIcon,
+        gem: gemIcon,
+        endChallengeBadge,
+        gemsOrange,
+        gemsPurple,
+      }),
     };
   },
   computed: {
@@ -150,8 +397,35 @@ export default {
     },
   },
   methods: {
+    searchMembers () {
+      if (!this.searchTerm) {
+        this.filteredMembers = [];
+        return;
+      }
+
+      const searchLower = this.searchTerm.toLowerCase().replace('@', '');
+      this.filteredMembers = this.members.filter(member => {
+        const username = member.auth?.local?.username || '';
+        const displayName = member.profile?.name || '';
+        return username.toLowerCase().includes(searchLower)
+               || displayName.toLowerCase().includes(searchLower);
+      }).slice(0, 10);
+    },
+    getMemberDisplayName (member) {
+      if (member.auth?.local?.username) {
+        return `@${member.auth.local.username}`;
+      }
+      return member.profile?.name || '';
+    },
     selectMember (member) {
       this.winner = member;
+      this.searchTerm = this.getMemberDisplayName(member);
+      this.showResults = false;
+    },
+    handleBlur () {
+      setTimeout(() => {
+        this.showResults = false;
+      }, 200);
     },
     async closeChallenge () {
       this.challenge = await this.$store.dispatch('challenges:selectChallengeWinner', {

website/client/src/components/challenges/findChallenges.vue

@@ -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: {

website/client/src/components/challenges/groupChallenges.vue

@@ -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: {

website/client/src/components/challenges/myChallenges.vue

@@ -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 challengeIcon from '@/assets/svg/challenge.svg?raw';
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
 
 export default {
   components: {

website/client/src/components/challenges/reportChallengeModal.vue

@@ -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 svgClose from '@/assets/svg/close.svg?raw';
-import svgReport from '@/assets/svg/report.svg';
+import svgReport from '@/assets/svg/report.svg?raw';
 
 export default {
   directives: {

website/client/src/components/chat/autoComplete.vue

@@ -34,8 +34,8 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/tiers.scss';
+  @import '@/assets/scss/tiers.scss';
-  @import '~@/assets/scss/colors.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 tier1 from '@/assets/svg/tier-1.svg?raw';
-import tier2 from '@/assets/svg/tier-2.svg';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
-import tier3 from '@/assets/svg/tier-3.svg';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
-import tier4 from '@/assets/svg/tier-4.svg';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
-import tier5 from '@/assets/svg/tier-5.svg';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
-import tier6 from '@/assets/svg/tier-6.svg';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
-import tier7 from '@/assets/svg/tier-7.svg';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
-import tier8 from '@/assets/svg/tier-mod.svg';
+import tier8 from '@/assets/svg/tier-mod.svg?raw';
-import tier9 from '@/assets/svg/tier-staff.svg';
+import tier9 from '@/assets/svg/tier-staff.svg?raw';
-import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';
 
 export default {
   mixins: [styleHelper],

website/client/src/components/chat/chatMessages.vue

@@ -63,7 +63,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .avatar {
     width: 10%;

website/client/src/components/chat/reportFlagModal.vue

@@ -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: {

website/client/src/components/creatorIntro.vue

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

website/client/src/components/externalLinkModal.vue

@@ -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 exclamationIcon from '@/assets/svg/exclamation.svg?raw';
-import closeIcon from '@/assets/svg/new-close.svg';
+import closeIcon from '@/assets/svg/new-close.svg?raw';
 
 export default {
   data () {

website/client/src/components/faceAvatar.vue

@@ -39,7 +39,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .face-avatar {
     width: 36px;

website/client/src/components/group-plans/groupPlanCreationModal.vue

@@ -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;

website/client/src/components/group-plans/groupPlansUpdateModal.vue

@@ -28,9 +28,9 @@
       ></div>
       <img
         class="task-columns"
-        src="~@/assets/images/group-plans/task-columns.png"
+        src="@/assets/images/group-plans/task-columns.png"
-        srcset="~@/assets/images/group-plans/task-columns@2x.png 2x,
+        srcset="@/assets/images/group-plans/task-columns@2x.png 2x,
-          ~@/assets/images/group-plans/task-columns@3x.png 3x"
+          @/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 closeIcon from '@/assets/svg/close.svg?raw';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';
 
 export default {
   data () {

website/client/src/components/group-plans/taskInformation.vue

@@ -125,8 +125,8 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
-  @import '~@/assets/scss/create-task.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 positiveIcon from '@/assets/svg/positive.svg?raw';
-import filterIcon from '@/assets/svg/filter.svg';
+import filterIcon from '@/assets/svg/filter.svg?raw';
-import deleteIcon from '@/assets/svg/delete.svg';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
-import habitIcon from '@/assets/svg/habit.svg';
+import habitIcon from '@/assets/svg/habit.svg?raw';
-import dailyIcon from '@/assets/svg/daily.svg';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
-import todoIcon from '@/assets/svg/todo.svg';
+import todoIcon from '@/assets/svg/todo.svg?raw';
-import rewardIcon from '@/assets/svg/reward.svg';
+import rewardIcon from '@/assets/svg/reward.svg?raw';
 
 import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';

website/client/src/components/groups/chat.vue

@@ -212,8 +212,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/variables.scss';
 
   .chat-actions {
     margin-top: 1em;

website/client/src/components/groups/communityGuidelines.vue

@@ -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);

website/client/src/components/groups/createPartyModal.vue

@@ -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 {

website/client/src/components/groups/discovery.vue

@@ -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 => {

website/client/src/components/groups/group.vue

@@ -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 deleteIcon from '@/assets/svg/delete.svg?raw';
-import copyIcon from '@/assets/svg/copy.svg';
+import copyIcon from '@/assets/svg/copy.svg?raw';
-import likeIcon from '@/assets/svg/like.svg';
+import likeIcon from '@/assets/svg/like.svg?raw';
-import likedIcon from '@/assets/svg/liked.svg';
+import likedIcon from '@/assets/svg/liked.svg?raw';
-import reportIcon from '@/assets/svg/report.svg';
+import reportIcon from '@/assets/svg/report.svg?raw';
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import questIcon from '@/assets/svg/quest.svg';
+import questIcon from '@/assets/svg/quest.svg?raw';
-import questBackground from '@/assets/svg/quest-background-border.svg';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg?raw';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg?raw';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
+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';

website/client/src/components/groups/groupFormModal.vue

@@ -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 gemIcon from '@/assets/svg/gem.svg?raw';
-import informationIcon from '@/assets/svg/information.svg';
+import informationIcon from '@/assets/svg/information.svg?raw';
 
 import { userStateMixin } from '../../mixins/userState';
 

website/client/src/components/groups/invitationListModal.vue

@@ -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 svgClose from '@/assets/svg/close.svg?raw';
-import svgCheck from '@/assets/svg/check.svg';
+import svgCheck from '@/assets/svg/check.svg?raw';
 
 export default {
   components: {

website/client/src/components/groups/inviteModal.vue

@@ -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 };
 

website/client/src/components/groups/lookingForParty.vue

@@ -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 syncIcon from '@/assets/svg/sync-2.svg?raw';
-import usersIcon from '@/assets/svg/users.svg';
+import usersIcon from '@/assets/svg/users.svg?raw';
-import warriorIcon from '@/assets/svg/warrior.svg';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
-import rogueIcon from '@/assets/svg/rogue.svg';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
-import healerIcon from '@/assets/svg/healer.svg';
+import healerIcon from '@/assets/svg/healer.svg?raw';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';
 
 export default {
   components: {

website/client/src/components/groups/membersModal.vue

@@ -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 blockIcon from '@/assets/svg/block.svg?raw';
-import messageIcon from '@/assets/members/message.svg';
+import messageIcon from '@/assets/members/message.svg?raw';
-import starIcon from '@/assets/members/star.svg';
+import starIcon from '@/assets/members/star.svg?raw';
-import dots from '@/assets/svg/dots.svg';
+import dots from '@/assets/svg/dots.svg?raw';
 import SelectList from '@/components/ui/selectList';
 import { PAGES } from '@/libs/consts';
 import { userStateMixin } from '../../mixins/userState';

website/client/src/components/groups/myGuilds.vue

@@ -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 greyBadgeIcon from '@/assets/svg/grey-badge.svg?raw';
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
 
 export default {
   components: { PublicGuildItem, Sidebar },

website/client/src/components/groups/participantListModal.vue

@@ -87,7 +87,7 @@
 </style>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .header-wrap {
     width: 100%;

website/client/src/components/groups/publicGuildItem.vue

@@ -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 gemIcon from '@/assets/svg/gem.svg?raw';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg?raw';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg?raw';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg?raw';
 
 export default {
   directives: {

website/client/src/components/groups/questDetailModal.vue

@@ -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';

website/client/src/components/groups/questSidebarSection.vue

@@ -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 questIcon from '@/assets/svg/quest.svg?raw';
-import swordIcon from '@/assets/svg/sword.svg';
+import swordIcon from '@/assets/svg/sword.svg?raw';
-import rageIcon from '@/assets/svg/rage.svg';
+import rageIcon from '@/assets/svg/rage.svg?raw';
-import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg';
+import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg?raw';
 import questActionsMixin from '@/components/groups/questActions.mixin';
 
 export default {

website/client/src/components/groups/rightSidebar.vue

@@ -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 menuIcon from '@/assets/svg/menu.svg?raw';
-import sparklesIcon from '@/assets/svg/sparklesIcon.svg';
+import sparklesIcon from '@/assets/svg/sparklesIcon.svg?raw';
-import leaveIcon from '@/assets/svg/leave.svg';
+import leaveIcon from '@/assets/svg/leave.svg?raw';
-import editIcon from '@/assets/svg/edit.svg';
+import editIcon from '@/assets/svg/edit.svg?raw';
-import messageIcon from '@/assets/svg/message.svg';
+import messageIcon from '@/assets/svg/message.svg?raw';
-import usersIcon from '@/assets/svg/users.svg';
+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 {

website/client/src/components/groups/tavern.vue

@@ -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 challengeIcon from '@/assets/svg/challenge.svg?raw';
-import chevronIcon from '@/assets/svg/chevron-red.svg';
+import chevronIcon from '@/assets/svg/chevron-red.svg?raw';
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import healthIcon from '@/assets/svg/health.svg';
+import healthIcon from '@/assets/svg/health.svg?raw';
-import informationIconRed from '@/assets/svg/information-red.svg';
+import informationIconRed from '@/assets/svg/information-red.svg?raw';
-import questBackground from '@/assets/svg/quest-background-border.svg';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
-import rageIcon from '@/assets/svg/rage.svg';
+import rageIcon from '@/assets/svg/rage.svg?raw';
-import swordIcon from '@/assets/svg/sword.svg';
+import swordIcon from '@/assets/svg/sword.svg?raw';
 
-import tier1 from '@/assets/svg/tier-1.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
-import tier2 from '@/assets/svg/tier-2.svg';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
-import tier3 from '@/assets/svg/tier-3.svg';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
-import tier4 from '@/assets/svg/tier-4.svg';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
-import tier5 from '@/assets/svg/tier-5.svg';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
-import tier6 from '@/assets/svg/tier-6.svg';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
-import tier7 from '@/assets/svg/tier-7.svg';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
-import tierMod from '@/assets/svg/tier-mod.svg';
+import tierMod from '@/assets/svg/tier-mod.svg?raw';
-import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';
-import tierStaff from '@/assets/svg/tier-staff.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg?raw';
 
 import staffList from '../../libs/staffList';
 import reportBug from '@/mixins/reportBug.js';

website/client/src/components/header/banners/base.vue

@@ -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%;

website/client/src/components/header/banners/birthdayBanner.vue

@@ -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 giftsBirthday from '@/assets/svg/gifts-birthday.svg?raw';
-import tenBirthday from '@/assets/svg/10th-birthday-linear.svg';
+import tenBirthday from '@/assets/svg/10th-birthday-linear.svg?raw';
 
 export default {
   components: {