start building out more sophisticated rate limiting

.github/workflows/test.yml

@@ -19,8 +19,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -42,8 +41,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -65,8 +63,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -89,8 +86,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -112,8 +108,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -142,8 +137,7 @@ jobs:
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -173,8 +167,7 @@ jobs:
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -204,8 +197,7 @@ jobs:
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -230,8 +222,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -255,8 +246,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt update
-    - run: sudo apt -y install libkrb5-dev
+    - run: sudo apt-get -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |

README.md

@@ -1,20 +1,14 @@
-Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg)
+Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg) [![Code Climate](https://codeclimate.com/github/HabitRPG/habitrpg.svg)](https://codeclimate.com/github/HabitRPG/habitrpg) [![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=68393)](https://www.bountysource.com/trackers/68393-habitrpg?utm_source=68393&utm_medium=shield&utm_campaign=TRACKER_BADGE)
 ===============
 
-[Habitica](https://habitica.com) is an open-source habit-building program that treats your life like a role-playing game. Level up as you succeed, lose HP as you fail, and earn Gold to buy weapons and armor!
+[Habitica](https://habitica.com) is an open-source habit-building program that treats your life like a role-playing game. Level up as you succeed, lose HP as you fail, and earn money to buy weapons and armor.
 
-**Want to contribute code to Habitica?** We're always looking for assistance on any issues in our repo with the "Help Wanted" label. The wiki pages below and the additional linked pages will tell you how to start contributing code and where you can seek further help or ask questions:
+**We need more programmers!** Your assistance will be greatly appreciated. The wiki pages below and the additional pages they link to will tell you how to get started on contributing code and where you can go to seek further help or ask questions:
 * [Guidance for Blacksmiths](https://habitica.fandom.com/wiki/Guidance_for_Blacksmiths) - an introduction to the technologies used and how the software is organized.
-* [Setting up Habitica Locally](https://github.com/HabitRPG/habitica/wiki/Setting-Up-Habitica-for-Local-Development) - how to set up a local install of Habitica for development and testing.
-
-**Interested in contributing to Habitica’s mobile apps?** Visit the links below for our mobile repositories.
-* **Android:** https://github.com/HabitRPG/habitica-android
-* **iOS:** https://github.com/HabitRPG/habitica-ios
+* [Setting up Habitica Locally](https://habitica.fandom.com/wiki/Setting_up_Habitica_Locally) - how to set up a local install of Habitica for development and testing on various platforms.
 
 Habitica's code is licensed as described at https://github.com/HabitRPG/habitica/blob/develop/LICENSE
 
-**Found a bug?** Please report it to [admin email](mailto:admin@habitica.com) rather than create an issue (an admin will advise you if a new issue is necessary; usually it is not).
+**Found a bug?** Please report it to [admin email](mailto:admin@habitica.com) rather than creating an issue (an admin will advise you if a new issue is necessary; usually it is not).
 
-**Creating a third-party tool?** Please review our [API Usage Guidelines](https://github.com/HabitRPG/habitica/wiki/API-Usage-Guidelines) to ensure that your tool is compliant and maintains the best experience for Habitica players.
-
-**Have any questions about Habitica or contributing?** See the links in the [Habitica](https://habitica.com) website's Help menu. There’s FAQ’s, guides, and the option to reach out to us with any further questions!
+**Have any questions about Habitica or its community?** See the links in the [habitica.com](https://habitica.com) website's Help menu or drop in to [Guilds > Tavern Chat](https://habitica.com/groups/tavern) to ask questions or chat socially!

config.json.example

@@ -37,7 +37,6 @@
   "NODE_DB_URI": "mongodb://localhost:27017/habitica-dev?replicaSet=rs",
   "TEST_DB_URI": "mongodb://localhost:27017/habitica-test?replicaSet=rs",
   "MONGODB_POOL_SIZE": "10",
-  "MONGODB_SOCKET_TIMEOUT": "20000",
   "NODE_ENV": "development",
   "PATH": "bin:node_modules/.bin:/usr/local/bin:/usr/bin:/bin",
   "PAYPAL_BILLING_PLANS_basic_12mo": "basic_12mo",

gulp/gulp-sprites.js

@@ -42,41 +42,10 @@ function cssVarMap (sprite) {
   }
 }
 
-function filterFile (file) {
-  if (file.relative.indexOf('Mount_Icon_') !== -1) {
-    return false;
-  }
-  if (file.path.indexOf('shop/') !== -1) {
-    return false;
-  }
-  if (file.path.indexOf('stable/eggs') !== -1) {
-    return false;
-  }
-  if (file.path.indexOf('stable/food') !== -1) {
-    return false;
-  }
-  if (file.path.indexOf('stable/potions') !== -1) {
-    return false;
-  }
-  if (file.relative.indexOf('shop_') === 0) {
-    return false;
-  }
-  if (file.relative.indexOf('icon_background') === 0) {
-    return false;
-  }
-  return true;
-}
-
-async function createSpritesStream (name, src) {
+function createSpritesStream (name, src) {
   const stream = mergeStream();
-  // need to import this way bc of weird dependency things
-  // eslint-disable-next-line global-require
-  const filter = require('gulp-filter');
-
-  const f = filter(filterFile);
 
   const spriteData = gulp.src(src)
-    .pipe(f)
     .pipe(spritesmith({
       imgName: `spritesmith-${name}.png`,
       cssName: `spritesmith-${name}.css`,
@@ -94,7 +63,7 @@ async function createSpritesStream (name, src) {
   return stream;
 }
 
-gulp.task('sprites:main', async () => {
+gulp.task('sprites:main', () => {
   const mainSrc = sync('habitica-images/**/*.png');
   return createSpritesStream('main', mainSrc);
 });

migrations/archive/2023/20230731_naming_day.js

@@ -1,12 +1,14 @@
 /* eslint-disable no-console */
-import { model as User } from '../../website/server/models/user';
+const MIGRATION_NAME = '20230731_naming_day';
+import { v4 as uuid } from 'uuid';
+
+import { model as User } from '../../../website/server/models/user';
 
-const MIGRATION_NAME = '20240731_naming_day';
 const progressCount = 1000;
 let count = 0;
 
 async function updateUser (user) {
-  count += 1;
+  count++;
 
   let set;
   let push;
@@ -113,16 +115,16 @@ async function updateUser (user) {
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
 
   if (push) {
-    return user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
+    return await user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
+  } else {
+    return await user.updateOne({ $set: set, $inc: inc }).exec();
   }
-
-  return user.updateOne({ $set: set, $inc: inc }).exec();
 }
 
 export default async function processUsers () {
-  const query = {
+  let query = {
     migration: { $ne: MIGRATION_NAME },
-    'auth.timestamps.loggedin': { $gt: new Date('2024-07-01') },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-07-01') },
   };
 
   const fields = {
@@ -134,7 +136,7 @@ export default async function processUsers () {
     const users = await User // eslint-disable-line no-await-in-loop
       .find(query)
       .limit(250)
-      .sort({ _id: 1 })
+      .sort({_id: 1})
       .select(fields)
       .exec();
 
@@ -150,4 +152,4 @@ export default async function processUsers () {
 
     await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
   }
-}
+};

migrations/archive/2024/2024_purge_invite_accepted.js

@@ -1,47 +0,0 @@
-/* eslint-disable no-console */
-import { model as User } from '../../../website/server/models/user';
-
-const MIGRATION_NAME = '2024_purge_invite_accepted';
-const progressCount = 1000;
-let count = 0;
-
-async function updateUsers (userIds) {
-  count += userIds.length;
-  if (count % progressCount === 0) console.warn(`${count} ${userIds[0]}`);
-
-  return await User.updateMany(
-    { _id: { $in: userIds } },
-    { $pull: { notifications: { type: 'GROUP_INVITE_ACCEPTED' } } },
-  ).exec();
-}
-
-export default async function processUsers () {
-  let query = {
-    migration: { $ne: MIGRATION_NAME },
-    'notifications.type': 'GROUP_INVITE_ACCEPTED',
-    'auth.timestamps.loggedin': { $gt: new Date('2024-06-25') },
-  };
-
-  while (true) { // eslint-disable-line no-constant-condition
-    const users = await User // eslint-disable-line no-await-in-loop
-      .find(query)
-      .limit(250)
-      .sort({ _id: 1 })
-      .select({ _id: 1 })
-      .exec();
-
-    if (users.length === 0) {
-      console.warn('All appropriate users found and modified.');
-      console.warn(`\n${count} users processed\n`);
-      break;
-    } else {
-      query._id = {
-        $gt: users[users.length - 1],
-      };
-    }
-
-    const userIds = users.map(user => user._id);
-
-    await updateUsers(userIds); // eslint-disable-line no-await-in-loop
-  }
-};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.28.1",
+  "version": "5.26.1",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.10",
@@ -15,7 +15,6 @@
     "amplitude": "^6.0.0",
     "apidoc": "^0.54.0",
     "apple-auth": "^1.0.9",
-    "babel-preset-env": "^1.7.0",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "bootstrap": "^4.6.2",
@@ -36,7 +35,6 @@
     "got": "^11.8.6",
     "gulp": "^4.0.0",
     "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",
@@ -76,7 +74,6 @@
     "useragent": "^2.1.9",
     "uuid": "^9.0.0",
     "validator": "^13.11.0",
-    "webpack-bundle-analyzer": "^4.10.2",
     "winston": "^3.10.0",
     "winston-loggly-bulk": "^3.3.0",
     "xml2js": "^0.6.2"
@@ -114,7 +111,7 @@
     "heroku-postbuild": "npm run client:build"
   },
   "devDependencies": {
-    "axios": "^1.7.4",
+    "axios": "^1.4.0",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",

test/api/unit/middlewares/rateLimiter.test.js

@@ -10,7 +10,7 @@ import { TooManyRequests } from '../../../../website/server/libs/errors';
 import { apiError } from '../../../../website/server/libs/apiError';
 import logger from '../../../../website/server/libs/logger';
 
-describe('rateLimiter middleware', () => {
+describe.only('rateLimiter middleware', () => {
   const pathToRateLimiter = '../../../../website/server/middlewares/rateLimiter';
 
   let res; let req; let next; let nconfGetStub;
@@ -253,4 +253,24 @@ describe('rateLimiter middleware', () => {
       'X-RateLimit-Reset': sinon.match(Date),
     });
   });
+
+  describe('authentication rate limiting', async () => {
+    it('applies cost for failed login attempts', async () => {
+      nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+      nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
+      const attachRateLimiter = requireAgain(pathToRateLimiter).default;
+
+      req.path = '/api/v4/user/auth/local/login';
+
+      req.ip = 1;
+      await attachRateLimiter(req, res, next);
+      await attachRateLimiter(req, res, next);
+
+      expect(res.set).to.have.been.calledWithMatch({
+        'X-RateLimit-Limit': 30,
+        'X-RateLimit-Remaining': 28,
+        'X-RateLimit-Reset': sinon.match(Date),
+      });
+    });
+  });
 });

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

@@ -3,7 +3,6 @@ import {
   createAndPopulateGroup,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
-import { model as Group } from '../../../../../website/server/models/group';
 
 describe('GET /groups/:groupId/chat', () => {
   let user;
@@ -38,34 +37,4 @@ describe('GET /groups/:groupId/chat', () => {
       });
     });
   });
-
-  context('public Guild', () => {
-    let group;
-    before(async () => {
-      ({ group } = await createAndPopulateGroup({
-        groupDetails: {
-          name: 'test group',
-          type: 'guild',
-          privacy: 'private',
-        },
-        members: 1,
-        upgradeToGroupPlan: true,
-        chat: [
-          'Hello',
-          'Welcome to the Guild',
-        ],
-      }));
-
-      // Creation API is shut down, we need to simulate an extant public group
-      await Group.updateOne({ _id: group._id }, { $set: { privacy: 'public' }, $unset: { 'purchased.plan': 1 } }).exec();
-    });
-
-    it('returns error if user attempts to fetch a sunset Guild', async () => {
-      await expect(user.get(`/groups/${group._id}/chat`)).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('featureRetired'),
-      });
-    });
-  });
 });

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

@@ -4,7 +4,6 @@ import {
   createAndPopulateGroup,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
-import { model as Group } from '../../../../../website/server/models/group';
 
 describe('POST /chat/:chatId/like', () => {
   let user;
@@ -112,18 +111,4 @@ describe('POST /chat/:chatId/like', () => {
         message: t('groupNotFound'),
       });
   });
-
-  it('does not like a message that belongs to a sunset public group', async () => {
-    const message = await anotherUser.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
-
-    // Creation API is shut down, we need to simulate an extant public group
-    await Group.updateOne({ _id: groupWithChat._id }, { $set: { privacy: 'public' }, $unset: { 'purchased.plan': 1 } }).exec();
-
-    await expect(user.post(`/groups/${groupWithChat._id}/chat/${message.message.id}/like`))
-      .to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('featureRetired'),
-      });
-  });
 });

test/api/v3/integration/debug/POST-debug_boss-rage.test.js

@@ -1,73 +0,0 @@
-import nconf from 'nconf';
-import {
-  generateUser,
-  createAndPopulateGroup,
-} from '../../../../helpers/api-integration/v3';
-
-describe('POST /debug/boss-rage', () => {
-  let user;
-  let nconfStub;
-
-  beforeEach(async () => {
-    user = await generateUser();
-  });
-
-  beforeEach(() => {
-    nconfStub = sandbox.stub(nconf, 'get');
-    nconfStub.withArgs('DEBUG_ENABLED').returns(true);
-    nconfStub.withArgs('BASE_URL').returns('https://example.com');
-  });
-
-  afterEach(() => {
-    nconfStub.restore();
-  });
-
-  it('errors if user is not in a party', async () => {
-    await expect(user.post('/debug/boss-rage'))
-      .to.eventually.be.rejected.and.deep.equal({
-        code: 400,
-        error: 'BadRequest',
-        message: 'User not in a party.',
-      });
-  });
-
-  it('returns error when not in production mode', async () => {
-    nconfStub.withArgs('DEBUG_ENABLED').returns(false);
-
-    await expect(user.post('/debug/boss-rage'))
-      .to.eventually.be.rejected.and.deep.equal({
-        code: 404,
-        error: 'NotFound',
-        message: 'Not found.',
-      });
-  });
-
-  context('user is in a party', async () => {
-    let party;
-
-    beforeEach(async () => {
-      const { group, groupLeader } = await createAndPopulateGroup({
-        groupDetails: {
-          name: 'Test Party',
-          type: 'party',
-        },
-        members: 2,
-      });
-      party = group;
-      user = groupLeader;
-    });
-
-    it('increases boss rage to 50', async () => {
-      await user.post('/debug/boss-rage');
-      await party.sync();
-      expect(party.quest.progress.rage).to.eql(50);
-    });
-
-    it('increases boss rage to 100', async () => {
-      await user.post('/debug/boss-rage');
-      await user.post('/debug/boss-rage');
-      await party.sync();
-      expect(party.quest.progress.rage).to.eql(100);
-    });
-  });
-});

test/api/v3/integration/debug/POST-debug_jumpTime.test.js

@@ -34,11 +34,9 @@ describe('POST /debug/jump-time', () => {
     expect(resultDate.getMonth()).to.eql(today.getMonth());
     expect(resultDate.getFullYear()).to.eql(today.getFullYear());
     const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: 1 })).time);
-    const tomorrow = new Date(today.valueOf());
-    tomorrow.setDate(today.getDate() + 1);
-    expect(newResultDate.getDate()).to.eql(tomorrow.getDate());
-    expect(newResultDate.getMonth()).to.eql(tomorrow.getMonth());
-    expect(newResultDate.getFullYear()).to.eql(tomorrow.getFullYear());
+    expect(newResultDate.getDate()).to.eql(today.getDate() + 1);
+    expect(newResultDate.getMonth()).to.eql(today.getMonth());
+    expect(newResultDate.getFullYear()).to.eql(today.getFullYear());
   });
 
   it('jumps back', async () => {
@@ -47,11 +45,9 @@ describe('POST /debug/jump-time', () => {
     expect(resultDate.getMonth()).to.eql(today.getMonth());
     expect(resultDate.getFullYear()).to.eql(today.getFullYear());
     const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: -1 })).time);
-    const yesterday = new Date(today.valueOf());
-    yesterday.setDate(today.getDate() - 1);
-    expect(newResultDate.getDate()).to.eql(yesterday.getDate());
-    expect(newResultDate.getMonth()).to.eql(yesterday.getMonth());
-    expect(newResultDate.getFullYear()).to.eql(yesterday.getFullYear());
+    expect(newResultDate.getDate()).to.eql(today.getDate() - 1);
+    expect(newResultDate.getMonth()).to.eql(today.getMonth());
+    expect(newResultDate.getFullYear()).to.eql(today.getFullYear());
   });
 
   it('can jump a lot', async () => {

test/api/v3/integration/groups/POST-groups_groupId_join.test.js

@@ -85,6 +85,22 @@ describe('POST /group/:groupId/join', () => {
         await expect(user.get('/user')).to.eventually.have.nested.property('items.quests.basilist', 1);
       });
 
+      it('notifies inviting user that their invitation was accepted', async () => {
+        await invitedUser.post(`/groups/${guild._id}/join`);
+
+        const inviter = await user.get('/user');
+        const expectedData = {
+          headerText: t('invitationAcceptedHeader'),
+          bodyText: t('invitationAcceptedBody', {
+            username: invitedUser.auth.local.username,
+            groupName: guild.name,
+          }),
+        };
+
+        expect(inviter.notifications[1].type).to.eql('GROUP_INVITE_ACCEPTED');
+        expect(inviter.notifications[1].data).to.eql(expectedData);
+      });
+
       it('awards Joined Guild achievement', async () => {
         await invitedUser.post(`/groups/${guild._id}/join`);
 
@@ -139,6 +155,23 @@ describe('POST /group/:groupId/join', () => {
         await expect(invitedUser.get('/user')).to.eventually.have.nested.property('party._id', party._id);
       });
 
+      it('notifies inviting user that their invitation was accepted', async () => {
+        await invitedUser.post(`/groups/${party._id}/join`);
+
+        const inviter = await user.get('/user');
+
+        const expectedData = {
+          headerText: t('invitationAcceptedHeader'),
+          bodyText: t('invitationAcceptedBody', {
+            username: invitedUser.auth.local.username,
+            groupName: party.name,
+          }),
+        };
+
+        expect(inviter.notifications[0].type).to.eql('GROUP_INVITE_ACCEPTED');
+        expect(inviter.notifications[0].data).to.eql(expectedData);
+      });
+
       it('clears invitation from user when joining party', async () => {
         await invitedUser.post(`/groups/${party._id}/join`);
 

test/api/v3/integration/world-state/GET-world-state.test.js

@@ -123,7 +123,7 @@ describe('GET /world-state', () => {
 
       const res = await requester().get('/world-state');
 
-      expect(res.npcImageSuffix).to.equal('fall');
+      expect(res.npcImageSuffix).to.equal('winter');
     });
   });
 });

test/common/libs/shops.test.js

@@ -47,17 +47,15 @@ describe('shops', () => {
 
     describe('premium hatching potions', () => {
       it('contains current scheduled premium hatching potions', async () => {
-        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
+        clock = sinon.useFakeTimers(new Date('2024-04-01'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.length).to.eql(3);
+        expect(potions.items.length).to.eql(2);
       });
 
       it('does not contain past scheduled premium hatching potions', async () => {
-        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.filter(x => x.key === 'Aquatic' || x.key === 'Celestial').length, 'Aquatic or Celestial found').to.eql(0);
+        expect(potions.items.filter(x => x.key === 'Aquatic' || x.key === 'Celestial').length).to.eql(0);
       });
-
       it('returns end date for scheduled premium potions', async () => {
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
         potions.items.forEach(potion => {
@@ -75,9 +73,9 @@ describe('shops', () => {
       });
 
       it('does not contain locked quest premium hatching potions', async () => {
-        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
+        clock = sinon.useFakeTimers(new Date('2024-04-01'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.length).to.eql(3);
+        expect(potions.items.length).to.eql(2);
         expect(potions.items.filter(x => x.key === 'Bronze' || x.key === 'BlackPearl').length).to.eql(0);
       });
 
@@ -343,16 +341,6 @@ describe('shops', () => {
       const backgrounds = shopCategories.find(cat => cat.identifier === 'backgrounds').items;
       expect(backgrounds.length).to.be.greaterThan(0);
     });
-
-    it('does not add an end date to steampunk gear', () => {
-      const categories = shopCategories.filter(cat => cat.identifier.startsWith('30'));
-      categories.forEach(category => {
-        expect(category.end).to.not.exist;
-        category.items.forEach(item => {
-          expect(item.end).to.not.exist;
-        });
-      });
-    });
   });
 
   describe('customizationShop', () => {

test/common/ops/buy/purchase.test.js

@@ -233,17 +233,6 @@ describe('shared.ops.purchase', () => {
       expect(user.items.hatchingPotions[key]).to.eql(1);
     });
 
-    it('purchases event hatching potion', async () => {
-      clock.restore();
-      clock = sandbox.useFakeTimers(moment('2022-04-10').valueOf());
-      const type = 'hatchingPotions';
-      const key = 'Veggie';
-
-      await purchase(user, { params: { type, key } });
-
-      expect(user.items.hatchingPotions[key]).to.eql(1);
-    });
-
     it('purchases hatching potion if user completed quest', async () => {
       const type = 'hatchingPotions';
       const key = 'Bronze';

test/content/index.test.js

@@ -42,23 +42,23 @@ describe('content index', () => {
     expect(Object.keys(juneGear).length, '').to.equal(Object.keys(julyGear).length - 3);
   });
 
-  it('Releases pets when appropriate without needing restarting', () => {
+  it('Releases pets gear when appropriate without needing restarting', () => {
     clock = sinon.useFakeTimers(new Date('2024-06-20'));
     const junePets = content.petInfo;
     expect(junePets['Chameleon-Base']).to.not.exist;
     clock.restore();
-    clock = sinon.useFakeTimers(new Date('2024-07-18'));
+    clock = sinon.useFakeTimers(new Date('2024-07-10'));
     const julyPets = content.petInfo;
     expect(julyPets['Chameleon-Base']).to.exist;
     expect(Object.keys(junePets).length, '').to.equal(Object.keys(julyPets).length - 10);
   });
 
-  it('Releases mounts when appropriate without needing restarting', () => {
+  it('Releases mounts gear when appropriate without needing restarting', () => {
     clock = sinon.useFakeTimers(new Date('2024-06-20'));
     const juneMounts = content.mountInfo;
     expect(juneMounts['Chameleon-Base']).to.not.exist;
     clock.restore();
-    clock = sinon.useFakeTimers(new Date('2024-07-18'));
+    clock = sinon.useFakeTimers(new Date('2024-07-10'));
     const julyMounts = content.mountInfo;
     expect(julyMounts['Chameleon-Base']).to.exist;
     expect(Object.keys(juneMounts).length, '').to.equal(Object.keys(julyMounts).length - 10);

test/content/schedule.test.js

@@ -18,19 +18,12 @@ function validateMatcher (matcher, checkedDate) {
 
 describe('Content Schedule', () => {
   let switchoverTime;
-  let clock;
 
   beforeEach(() => {
     switchoverTime = nconf.get('CONTENT_SWITCHOVER_TIME_OFFSET') || 0;
     clearCachedMatchers();
   });
 
-  afterEach(() => {
-    if (clock) {
-      clock.restore();
-    }
-  });
-
   it('assembles scheduled items on january 15th', () => {
     const date = new Date('2024-01-15');
     const matchers = getAllScheduleMatchingGroups(date);
@@ -112,14 +105,8 @@ describe('Content Schedule', () => {
     expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-05-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
 
-  it('sets the end date if its on the release day before switchover', () => {
-    const date = new Date('2024-05-07T07:00:00.000+00:00');
-    const matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-05-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
-  });
-
-  it('sets the end date if its on the release day after switchover', () => {
-    const date = new Date('2024-05-07T09:00:00.000+00:00');
+  it('sets the end date if its on the release day', () => {
+    const date = new Date('2024-05-07T07:00:00.000Z');
     const matchers = getAllScheduleMatchingGroups(date);
     expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-06-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
@@ -136,54 +123,12 @@ describe('Content Schedule', () => {
     expect(matchers.seasonalGear.end).to.eql(moment.utc(`2024-06-21T${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 matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
-  });
-
-  it('uses correct date for first hours of the month', () => {
-    // if the date is checked before CONTENT_SWITCHOVER_TIME_OFFSET,
-    // it should be considered the previous month
-    const date = new Date('2024-05-01T02:00:00.000Z');
-    const matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.petQuests.items).to.contain('snake');
-    expect(matchers.petQuests.items).to.not.contain('horse');
-    expect(matchers.timeTravelers.match('202304'), '202304').to.be.true;
-    expect(matchers.timeTravelers.match('202404'), '202404').to.be.false;
-    expect(matchers.timeTravelers.match('202305'), '202305').to.be.false;
-  });
-
-  it('uses correct date after switchover time', () => {
-    // if the date is checked after CONTENT_SWITCHOVER_TIME_OFFSET,
-    // it should be considered the current
-    const date = new Date('2024-05-01T09:00:00.000Z');
-    const matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.petQuests.items).to.contain('snake');
-    expect(matchers.petQuests.items).to.not.contain('horse');
-    expect(matchers.timeTravelers.match('202304'), '202304').to.be.false;
-    expect(matchers.timeTravelers.match('202305'), '202305').to.be.true;
-    expect(matchers.timeTravelers.match('202405'), '202405').to.be.false;
-  });
-
-  it('uses UTC timezone', () => {
-    // if the date is checked after CONTENT_SWITCHOVER_TIME_OFFSET,
-    // it should be considered the current
-    clock = sinon.useFakeTimers(new Date('2024-05-01T05:00:00.000-04:00'));
-    const matchers = getAllScheduleMatchingGroups();
-    expect(matchers.petQuests.items).to.contain('snake');
-    expect(matchers.petQuests.items).to.not.contain('horse');
-    expect(matchers.timeTravelers.match('202304'), '202304').to.be.false;
-    expect(matchers.timeTravelers.match('202305'), '202305').to.be.true;
-    expect(matchers.timeTravelers.match('202405'), '202405').to.be.false;
-  });
-
   it('contains content for repeating events', () => {
     const date = new Date('2024-04-15');
     const matchers = getAllScheduleMatchingGroups(date);
     expect(matchers.premiumHatchingPotions).to.exist;
-    expect(matchers.premiumHatchingPotions.items.length).to.equal(5);
-    expect(matchers.premiumHatchingPotions.items.indexOf('Veggie')).to.not.equal(-1);
+    expect(matchers.premiumHatchingPotions.items.length).to.equal(4);
+    expect(matchers.premiumHatchingPotions.items.indexOf('Garden')).to.not.equal(-1);
     expect(matchers.premiumHatchingPotions.items.indexOf('Porcelain')).to.not.equal(-1);
   });
 
@@ -300,33 +245,27 @@ describe('Content Schedule', () => {
     it('allows sets matching the month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202307'), '202307').to.be.true;
-      expect(matcher.match('202207'), '202207').to.be.true;
+      expect(matcher.match('202307')).to.be.true;
+      expect(matcher.match('202207')).to.be.true;
     });
 
     it('disallows sets not matching the month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202306'), '202306').to.be.false;
-      expect(matcher.match('202402'), '202402').to.be.false;
+      expect(matcher.match('202306')).to.be.false;
+      expect(matcher.match('202402')).to.be.false;
     });
 
     it('disallows sets from current month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202407'), '202407').to.be.false;
+      expect(matcher.match('202407')).to.be.false;
     });
 
     it('disallows sets from the future', () => {
       const date = new Date('2024-07-08');
-      const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202507'), '202507').to.be.false;
-    });
-
-    it('matches sets released in the earlier half of the year', () => {
-      const date = new Date('2024-07-08');
-      const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202401'), '202401').to.be.true;
+      const matcher = getAllScheduleMatchingGroups(date).backgrounds;
+      expect(matcher.match('202507')).to.be.false;
     });
   });
 });

test/content/time-travelers.test.js

@@ -45,7 +45,7 @@ describe('time-travelers store', () => {
 
   describe('on may 1st', () => {
     beforeEach(() => {
-      date = new Date('2024-05-01T09:00:00.000Z');
+      date = new Date('2024-05-01');
     });
     it('returns the correct gear', () => {
       const items = timeTravelers.timeTravelerStore(user, date);

website/client/src/app.vue

@@ -27,15 +27,73 @@
         </div>
       </div>
     </div>
-    <snackbars />
-    <router-view v-if="!isUserLoggedIn || isStaticPage" />
-    <user-main v-else />
+    <div
+      id="app"
+      :class="{
+        'casting-spell': castingSpell,
+      }"
+    >
+      <!-- <banned-account-modal /> -->
+      <amazon-payments-modal v-if="!isStaticPage" />
+      <payments-success-modal />
+      <sub-cancel-modal-confirm v-if="isUserLoaded" />
+      <sub-canceled-modal v-if="isUserLoaded" />
+      <bug-report-modal v-if="isUserLoaded" />
+      <bug-report-success-modal v-if="isUserLoaded" />
+      <external-link-modal />
+      <birthday-modal />
+      <snackbars />
+      <router-view v-if="!isUserLoggedIn || isStaticPage" />
+      <template v-else>
+        <template v-if="isUserLoaded">
+          <chat-banner />
+          <damage-paused-banner />
+          <gems-promo-banner />
+          <gift-promo-banner />
+          <birthday-banner />
+          <notifications-display />
+          <app-menu />
+          <div
+            class="container-fluid"
+            :class="{'no-margin': noMargin}"
+          >
+            <app-header />
+            <buyModal
+              :item="selectedItemToBuy || {}"
+              :with-pin="true"
+              :generic-purchase="genericPurchase(selectedItemToBuy)"
+              @buyPressed="customPurchase($event)"
+            />
+            <selectMembersModal
+              :item="selectedSpellToBuy || {}"
+              :group="user.party"
+              @memberSelected="memberSelected($event)"
+            />
+            <div :class="{sticky: user.preferences.stickyHeader}">
+              <router-view />
+            </div>
+          </div>
+          <app-footer v-if="!hideFooter" />
+          <audio
+            id="sound"
+            ref="sound"
+            autoplay="autoplay"
+          ></audio>
+        </template>
+      </template>
+    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
+  #app {
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+  }
+
   #loading-screen-inapp {
     #melior {
       color: $white;
@@ -105,20 +163,68 @@
 
 <script>
 import axios from 'axios';
+import { loadProgressBar } from 'axios-progress-bar';
 
-import * as Analytics from '@/libs/analytics';
+import birthdayModal from '@/components/news/birthdayModal';
+import AppMenu from './components/header/menu';
+import AppHeader from './components/header/index';
+import ChatBanner from './components/header/banners/chatBanner';
+import DamagePausedBanner from './components/header/banners/damagePaused';
+import GemsPromoBanner from './components/header/banners/gemsPromo';
+import GiftPromoBanner from './components/header/banners/giftPromo';
+import BirthdayBanner from './components/header/banners/birthdayBanner';
+import AppFooter from './components/appFooter';
+import notificationsDisplay from './components/notifications';
+import snackbars from './components/snackbars/notifications';
 import { mapState } from '@/libs/store';
-import userMain from '@/pages/user-main';
-import snackbars from '@/components/snackbars/notifications';
+import * as Analytics from '@/libs/analytics';
+import BuyModal from './components/shops/buyModal.vue';
+import SelectMembersModal from '@/components/selectMembersModal.vue';
+import notifications from '@/mixins/notifications';
+import { setup as setupPayments } from '@/libs/payments';
+import amazonPaymentsModal from '@/components/payments/amazonModal';
+import paymentsSuccessModal from '@/components/payments/successModal';
+import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
+import subCanceledModal from '@/components/payments/canceledModal';
+import externalLinkModal from '@/components/externalLinkModal.vue';
+
+import spellsMixin from '@/mixins/spells';
+import {
+  CONSTANTS,
+  getLocalSetting,
+  removeLocalSetting,
+} from '@/libs/userlocalManager';
+
+const bugReportModal = () => import(/* webpackChunkName: "bug-report-modal" */'@/components/bugReportModal');
+const bugReportSuccessModal = () => import(/* webpackChunkName: "bug-report-success-modal" */'@/components/bugReportSuccessModal');
 
 const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   name: 'App',
   components: {
+    AppMenu,
+    AppHeader,
+    AppFooter,
+    birthdayModal,
+    ChatBanner,
+    DamagePausedBanner,
+    GemsPromoBanner,
+    GiftPromoBanner,
+    BirthdayBanner,
+    notificationsDisplay,
     snackbars,
-    userMain,
+    BuyModal,
+    SelectMembersModal,
+    amazonPaymentsModal,
+    paymentsSuccessModal,
+    subCancelModalConfirm,
+    subCanceledModal,
+    bugReportModal,
+    bugReportSuccessModal,
+    externalLinkModal,
   },
+  mixins: [notifications, spellsMixin],
   data () {
     return {
       selectedItemToBuy: null,
@@ -132,25 +238,71 @@ export default {
     };
   },
   computed: {
-    ...mapState(['isUserLoggedIn', 'isUserLoaded', 'notificationsRemoved']),
+    ...mapState(['isUserLoggedIn', 'browserTimezoneUtcOffset', 'isUserLoaded', 'notificationsRemoved']),
     ...mapState({ user: 'user.data' }),
     isStaticPage () {
       return this.$route.meta.requiresLogin === false;
     },
+    castingSpell () {
+      return this.$store.state.spellOptions.castingSpell;
+    },
+    noMargin () {
+      return ['privateMessages'].includes(this.$route.name);
+    },
+    hideFooter () {
+      return ['privateMessages'].includes(this.$route.name);
+    },
   },
   created () {
-    // Setup listener for title
-    this.$store.watch(state => state.title, title => {
-      document.title = title;
+    this.$root.$on('playSound', sound => {
+      const theme = this.user.preferences.sound;
+
+      if (!theme || theme === 'off') {
+        return;
+      }
+
+      const file = `/static/audio/${theme}/${sound}`;
+
+      if (this.audioSuffix === null) {
+        this.audioSource = document.createElement('source');
+        if (this.$refs.sound.canPlayType('audio/ogg')) {
+          this.audioSuffix = '.ogg';
+          this.audioSource.type = 'audio/ogg';
+        } else {
+          this.audioSuffix = '.mp3';
+          this.audioSource.type = 'audio/mp3';
+        }
+        this.audioSource.src = file + this.audioSuffix;
+        this.$refs.sound.appendChild(this.audioSource);
+      } else {
+        this.audioSource.src = file + this.audioSuffix;
+      }
+
+      this.$refs.sound.load();
     });
-    this.$store.watch(state => state.isUserLoaded, () => {
-      if (this.isUserLoaded) {
-        this.hideLoadingScreen();
+
+    // @TODO: I'm not sure these should be at the app level.
+    // Can we move these back into shop/inventory or maybe they need a lateral move?
+    this.$root.$on('buyModal::showItem', item => {
+      this.selectedItemToBuy = item;
+      this.$root.$emit('bv::show::modal', 'buy-modal');
+    });
+
+    this.$root.$on('bv::modal::hidden', event => {
+      if (event.componentId === 'buy-modal') {
+        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
       }
     });
-    this.$nextTick(() => {
-      // Load external scripts after the app has been rendered
-      Analytics.load();
+
+    this.$root.$on('selectMembersModal::showItem', item => {
+      this.selectedSpellToBuy = item;
+      this.$root.$emit('bv::show::modal', 'select-member-modal');
+    });
+
+    // @TODO split up this file, it's too big
+
+    loadProgressBar({
+      showSpinner: false,
     });
 
     axios.interceptors.response.use(response => { // Set up Response interceptors
@@ -262,20 +414,79 @@ export default {
 
       return Promise.reject(error);
     });
+
+    // Setup listener for title
+    this.$store.watch(state => state.title, title => {
+      document.title = title;
+    });
+    this.$nextTick(() => {
+      // Load external scripts after the app has been rendered
+      Analytics.load();
+    });
+
+    if (this.isUserLoggedIn && !this.isStaticPage) {
+      // Load the user and the user tasks
+      Promise.all([
+        this.$store.dispatch('user:fetch'),
+        this.$store.dispatch('tasks:fetchUserTasks'),
+      ]).then(() => {
+        this.$store.state.isUserLoaded = true;
+        Analytics.setUser();
+        Analytics.updateUser();
+        return axios.get(
+          '/api/v4/i18n/browser-script',
+          {
+            language: this.user.preferences.language,
+            headers: {
+              'Cache-Control': 'no-cache',
+              Pragma: 'no-cache',
+              Expires: '0',
+            },
+          },
+        );
+      }).then(() => {
+        const i18nData = window && window['habitica-i18n'];
+        this.$loadLocale(i18nData);
+        this.hideLoadingScreen();
+
+        // Adjust the timezone offset
+        const browserTimezoneOffset = -this.browserTimezoneUtcOffset;
+        if (this.user.preferences.timezoneOffset !== browserTimezoneOffset) {
+          this.$store.dispatch('user:set', {
+            'preferences.timezoneOffset': browserTimezoneOffset,
+          });
+        }
+
+        let appState = getLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+        if (appState) {
+          appState = JSON.parse(appState);
+          if (appState.paymentCompleted) {
+            removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+            this.$root.$emit('habitica:payment-success', appState);
+          }
+        }
+        this.$nextTick(() => {
+          // Load external scripts after the app has been rendered
+          setupPayments();
+        });
+      }).catch(err => {
+        console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console
+      });
+    } else {
+      this.hideLoadingScreen();
+    }
+  },
+  beforeDestroy () {
+    this.$root.$off('playSound');
+    this.$root.$off('buyModal::showItem');
+    this.$root.$off('selectMembersModal::showItem');
   },
   mounted () {
     // Remove the index.html loading screen and now show the inapp loading
     const loadingScreen = document.getElementById('loading-screen');
     if (loadingScreen) document.body.removeChild(loadingScreen);
-
-    if (this.isStaticPage || !this.isUserLoggedIn) {
-      this.hideLoadingScreen();
-    }
   },
   methods: {
-    hideLoadingScreen () {
-      this.loading = false;
-    },
     checkForBannedUser (error) {
       const AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
       const parseSettings = JSON.parse(AUTH_SETTINGS);
@@ -296,10 +507,57 @@ export default {
       this.$store.dispatch('auth:logout', { redirectToLogin: true });
       return true;
     },
+    itemSelected (item) {
+      this.selectedItemToBuy = item;
+    },
+    genericPurchase (item) {
+      if (!item) return false;
+
+      if (['card', 'debuffPotion'].includes(item.purchaseType)) return false;
+
+      return true;
+    },
+    customPurchase (item) {
+      if (item.purchaseType === 'card') {
+        this.selectedSpellToBuy = item;
+
+        // hide the dialog
+        this.$root.$emit('bv::hide::modal', 'buy-modal');
+        // remove the dialog from our modal-stack,
+        // the default hidden event is delayed
+        this.$root.$emit('bv::modal::hidden', {
+          target: {
+            id: 'buy-modal',
+          },
+        });
+
+        this.$root.$emit('bv::show::modal', 'select-member-modal');
+      }
+
+      if (item.purchaseType === 'debuffPotion') {
+        this.castStart(item, this.user);
+      }
+    },
+    async memberSelected (member) {
+      await this.castStart(this.selectedSpellToBuy, member);
+
+      this.selectedSpellToBuy = null;
+
+      if (this.user.party._id) {
+        this.$store.dispatch('party:getMembers', { forceLoad: true });
+      }
+
+      this.$root.$emit('bv::hide::modal', 'select-member-modal');
+    },
+    hideLoadingScreen () {
+      this.loading = false;
+    },
   },
 };
 </script>
 
+<style src="intro.js/minified/introjs.min.css"></style>
+<style src="axios-progress-bar/dist/nprogress.css"></style>
 <style src="@/assets/scss/index.scss" lang="scss"></style>
 <style src="@/assets/scss/sprites.scss" lang="scss"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>

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

@@ -174,30 +174,6 @@
   }
 }
 
-.btn-warning {
-  background: $orange-10;
-  color: $white !important;
-
-  &:hover:not(:disabled):not(.disabled) {
-    background: $orange-100;
-    color: $white;
-  }
-
-  &:focus {
-    background: $orange-10;
-    border-color: $purple-400;
-  }
-
-  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
-    box-shadow: none;
-    border-color: $purple-400;
-  }
-
-  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
-    background: $orange-10;
-  }
-}
-
 .btn-success {
   background: $green-50;
   border: 1px solid transparent;

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

@@ -23,14 +23,16 @@
         {{ $t('foundNewItems') }}
       </h2>
       <div class="d-flex justify-content-center">
-        <Sprite
+        <div
           class="item-box ml-auto mr-3"
-          :image-name="eggClass"
-        />
-        <Sprite
+          :class="eggClass"
+        >
+        </div>
+        <div
           class="item-box mr-auto"
-          :image-name="potionClass"
-        />
+          :class="potionClass"
+        >
+        </div>
       </div>
       <p
         v-once
@@ -101,12 +103,8 @@
 
 <script>
 import closeIcon from '@/assets/svg/close.svg';
-import Sprite from '@/components/ui/sprite.vue';
 
 export default {
-  components: {
-    Sprite,
-  },
   data () {
     return {
       icons: Object.freeze({

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

@@ -19,10 +19,10 @@
       </div>
       <div class="inner-content">
         <div class="achievement-background d-flex align-items-center">
-          <Sprite
+          <div
             class="icon"
-            :image-name="achievementClass"
-          />
+            :class="achievementClass"
+          ></div>
         </div>
         <h4
           class="title"
@@ -99,12 +99,8 @@
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
 import svgClose from '@/assets/svg/close.svg';
-import Sprite from '@/components/ui/sprite.vue';
 
 export default {
-  components: {
-    Sprite,
-  },
   props: ['data'],
   data () {
     return {

website/client/src/components/admin-panel/index.vue

@@ -1,41 +1,30 @@
 <template>
-  <div class="row standard-page col-12 d-flex justify-content-center">
-    <div class="admin-panel-content">
+  <div class="row standard-page">
+    <div class="well col-12">
       <h1>Admin Panel</h1>
-      <form
-        class="form-inline"
-        @submit.prevent="searchUsers(userIdentifier)"
-      >
-        <div class="input-group col pl-0 pr-0">
+
+      <div>
+        <form
+          class="form-inline"
+          @submit.prevent="loadHero(userIdentifier)"
+        >
           <input
             v-model="userIdentifier"
-            class="form-control"
+            class="form-control uidField"
             type="text"
-            :placeholder="'UserID, username, email, or leave blank for your account'"
+            :placeholder="'User ID or Username; blank for your account'"
           >
-          <div class="input-group-append">
-            <button
-              class="btn btn-primary"
-              type="button"
-              @click="loadUser(userIdentifier)"
-            >
-              Load User
-            </button>
-            <button
-              class="btn btn-secondary"
-              type="button"
-              @click="searchUsers(userIdentifier)"
-            >
-              Search
-            </button>
-          </div>
-        </div>
-      </form>
+          <input
+            type="submit"
+            value="Load User"
+            class="btn btn-secondary"
+          >
+        </form>
+      </div>
 
-      <router-view
-        class="mt-3"
-        @changeUserIdentifier="changeUserIdentifier"
-      />
+      <div>
+        <router-view @changeUserIdentifier="changeUserIdentifier" />
+      </div>
     </div>
   </div>
 </template>
@@ -44,15 +33,6 @@
   .uidField {
     min-width: 45ch;
   }
-
-  .input-group-append {
-    width:auto;
-  }
-
-  .admin-panel-content {
-    flex: 0 0 800px;
-    max-width: 800px;
-  }
 </style>
 
 <script>
@@ -82,24 +62,7 @@ export default {
       // (useful if we want to re-fetch the user after making changes).
       this.userIdentifier = newId;
     },
-    async searchUsers (userIdentifier) {
-      if (!userIdentifier || userIdentifier === '') {
-        this.loadUser();
-        return;
-      }
-      this.$router.push({
-        name: 'adminPanelSearch',
-        params: { userIdentifier },
-      }).catch(failure => {
-        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
-          // the admin has requested that the same user be displayed again so reload the page
-          // (e.g., if they changed their mind about changes they were making)
-          this.$router.go();
-        }
-      });
-    },
-
-    async loadUser (userIdentifier) {
+    async loadHero (userIdentifier) {
       const id = userIdentifier || this.user._id;
 
       this.$router.push({

website/client/src/components/admin-panel/search.vue

@@ -1,155 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="noUsersFound"
-      class="alert alert-warning"
-      role="alert"
-    >
-      Could not find any matching users.
-    </div>
-    <loading-spinner class="mx-auto mb-2" dark-color="true" v-if="isSearching" />
-    <div
-      v-if="users.length > 0"
-      class="list-group"
-    >
-      <a
-        v-for="user in users"
-        :key="user._id"
-        href="#"
-        class="list-group-item list-group-item-action"
-        @click="loadUser(user._id)"
-      >
-        <div class="d-flex w-100 justify-content-between">
-          <h5 class="mb-1">{{ user.profile.name }}</h5>
-          <small>{{ user._id }}</small>
-        </div>
-        <p
-          class="mb-1"
-          :class="{'highlighted-value': matchValueToIdentifier(user.auth.local.username)}"
-        >
-          @{{ user.auth.local.username }}</p>
-        <p class="mb-0">
-          <span
-            v-for="email in userEmails(user)"
-            :key="email"
-            :class="{'highlighted-value': matchValueToIdentifier(email)}"
-          >
-            {{ email }}
-          </span>
-        </p>
-      </a>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .highlighted-value {
-    font-weight: bold;
-  }
-</style>
-
-<script>
-import VueRouter from 'vue-router';
-import { mapState } from '@/libs/store';
-import LoadingSpinner from '../ui/loadingSpinner';
-
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-export default {
-  components: {
-    LoadingSpinner,
-  },
-  data () {
-    return {
-      userIdentifier: '',
-      users: [],
-      noUsersFound: false,
-      isSearching: false,
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-  },
-  beforeRouteUpdate (to, from, next) {
-    this.userIdentifier = to.params.userIdentifier;
-    next();
-  },
-  watch: {
-    userIdentifier () {
-      this.isSearching = true;
-      this.$store.dispatch('adminPanel:searchUsers', { userIdentifier: this.userIdentifier }).then(users => {
-        this.isSearching = false;
-        if (users.length === 1) {
-          this.loadUser(users[0]._id);
-        } else {
-          const matchIndex = users.findIndex(user => this.isExactMatch(user));
-          if (matchIndex !== -1) {
-            users.splice(0, 0, users.splice(matchIndex, 1)[0]);
-          }
-          this.users = users;
-          this.noUsersFound = users.length === 0;
-        }
-      });
-      this.$emit('changeUserIdentifier', this.userIdentifier); // change user identifier in Admin Panel's form
-    },
-  },
-  mounted () {
-    this.userIdentifier = this.$route.params.userIdentifier;
-  },
-  methods: {
-    matchValueToIdentifier (value) {
-      return value.toLowerCase().includes(this.userIdentifier.toLowerCase());
-    },
-    userEmails (user) {
-      const allEmails = [];
-      if (user.auth.local.email) allEmails.push(user.auth.local.email);
-      if (user.auth.google && user.auth.google.emails) {
-        const emails = user.auth.google.emails;
-        allEmails.push(...this.findSocialEmails(emails));
-      }
-      if (user.auth.apple && user.auth.apple.emails) {
-        const emails = user.auth.apple.emails;
-        allEmails.push(...this.findSocialEmails(emails));
-      }
-      if (user.auth.facebook && user.auth.facebook.emails) {
-        const emails = user.auth.facebook.emails;
-        allEmails.push(...this.findSocialEmails(emails));
-      }
-      return allEmails;
-    },
-    findSocialEmails (emails) {
-      if (typeof emails === 'string') return [emails];
-      if (Array.isArray(emails)) return emails.map(email => email.value);
-      if (typeof emails === 'object') return [emails.value];
-      return [];
-    },
-    async loadUser (userIdentifier) {
-      const id = userIdentifier || this.user._id;
-
-      this.$router.push({
-        name: 'adminPanelUser',
-        params: { userIdentifier: id },
-      }).catch(failure => {
-        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
-          // the admin has requested that the same user be displayed again so reload the page
-          // (e.g., if they changed their mind about changes they were making)
-          this.$router.go();
-        }
-      });
-    },
-    isExactMatch (user) {
-      return user._id === this.userIdentifier
-        || user.auth.local.username === this.userIdentifier
-        || (user.auth.google && user.auth.google.emails && user.auth.google.emails.findIndex(
-          email => email.value === this.userIdentifier,
-        ) !== -1)
-        || (user.auth.apple && user.auth.apple.emails && user.auth.apple.emails.findIndex(
-          email => email.value === this.userIdentifier,
-        ) !== -1)
-        || (user.auth.facebook && user.auth.facebook.emails && user.auth.facebook.emails.findIndex(
-          email => email.value === this.userIdentifier,
-        ) !== -1);
-    },
-  },
-};
-</script>

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

@@ -1,18 +1,13 @@
 <template>
-  <div class="card mt-2">
-    <div class="card-header">
-      <h3
-        class="mb-0 mt-0"
-        :class="{'open': expand}"
-        @click="expand = !expand"
-      >
-        Achievements
-      </h3>
-    </div>
-    <div
-      v-if="expand"
-      class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
     >
+      Achievements
+    </h3>
+    <div v-if="expand">
       <ul>
         <li
           v-for="item in achievements"

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

@@ -1,18 +1,13 @@
 <template>
-  <div class="card mt-2">
-    <div class="card-header">
-      <h3
-        class="mb-0 mt-0"
-        :class="{'open': expand}"
-        @click="expand = !expand"
-      >
-        Current Avatar Appearance, Drop Count Today
-      </h3>
-    </div>
-    <div
-      v-if="expand"
-      class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
     >
+      Current Avatar Appearance, Drop Count Today
+    </h3>
+    <div v-if="expand">
       <div>Drops Today: {{ items.lastDrop.count }}</div>
       <div>Most Recent Drop: {{ items.lastDrop.date | formatDate }}</div>
       <div>Use Costume: {{ preferences.costume ? 'on' : 'off' }}</div>

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

@@ -1,129 +1,160 @@
 <template>
-  <form @submit.prevent="saveHero({ hero, msg: 'Contributor details', clearData: true })">
-    <div class="card mt-2">
-      <div class="card-header">
-        <h3
-          class="mb-0 mt-0"
-          :class="{ 'open': expand }"
-          @click="expand = !expand"
-        >
-          Contributor Details
-        </h3>
-      </div>
-      <div
-        v-if="expand"
-        class="card-body"
-      >
-        <div class="mb-4">
-          <h3 class="mt-0">
-            Permissions
-          </h3>
-          <div
-            v-for="permission in permissionList"
-            :key="permission.key"
-            class="col-sm-9 offset-sm-3"
-          >
-            <div class="custom-control custom-checkbox">
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
+    >
+      Contributor Details
+    </h3>
+    <div v-if="expand">
+      <form @submit.prevent="saveHero({hero, msg: 'Contributor details', clearData: true})">
+        <div>
+          <label>Permissions</label>
+          <div class="checkbox">
+            <label>
               <input
-                v-model="hero.permissions[permission.key]"
-                :disabled="!hasPermission(user, permission.key)"
-                class="custom-control-input"
+                v-model="hero.permissions.fullAccess"
+                :disabled="!hasPermission(user, 'fullAccess')"
                 type="checkbox"
               >
-              <label class="custom-control-label">
-                {{ permission.name }}<br>
-                <small class="text-secondary">{{ permission.description }}</small>
-              </label>
-            </div>
+              Full Admin Access (Allows access to everything. EVERYTHING)
+            </label>
+          </div>
+          <div class="checkbox">
+            <label>
+              <input
+                v-model="hero.permissions.userSupport"
+                :disabled="!hasPermission(user, 'fullAccess')"
+                type="checkbox"
+              >
+              User Support (Access this form, access purchase history)
+            </label>
+          </div>
+          <div class="checkbox">
+            <label>
+              <input
+                v-model="hero.permissions.news"
+                :disabled="!hasPermission(user, 'fullAccess')"
+                type="checkbox"
+              >
+              News poster (Bailey CMS)
+            </label>
+          </div>
+          <div class="checkbox">
+            <label>
+              <input
+                v-model="hero.permissions.moderator"
+                :disabled="!hasPermission(user, 'fullAccess')"
+                type="checkbox"
+              >
+              Community Moderator (ban and mute users, access chat flags, manage social spaces)
+            </label>
+          </div>
+          <div class="checkbox">
+            <label>
+              <input
+                v-model="hero.permissions.challengeAdmin"
+                :disabled="!hasPermission(user, 'fullAccess')"
+                type="checkbox"
+              >
+              Challenge Admin (can create official habitica challenges and admin all challenges)
+            </label>
+          </div>
+          <div class="checkbox">
+            <label>
+              <input
+                v-model="hero.permissions.coupons"
+                :disabled="!hasPermission(user, 'fullAccess')"
+                type="checkbox"
+              >
+              Coupon Creator (can manage coupon codes)
+            </label>
           </div>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Title</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.contributor.text"
-              class="form-control textField"
-              type="text"
-            >
-            <small>
-              Common titles:
-              <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher,
-                Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>.
-              <br>
-              Rare titles:
-              Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson,
-              Statistician, Tinker, Transcriber, Troubadour.
-            </small>
-          </div>
+        <div class="form-group">
+          <label>Title</label>
+          <input
+            v-model="hero.contributor.text"
+            class="form-control textField"
+            type="text"
+          >
+          <small>
+            Common titles:
+            <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher,
+              Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>.
+            <br>
+            Rare titles:
+            Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson,
+            Statistician, Tinker, Transcriber, Troubadour.
+          </small>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Tier</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.contributor.level"
-              class="form-control levelField"
-              type="number"
-            >
-            <small>
-              1-7 for normal contributors, 8 for moderators, 9 for staff.
-              This determines which items, pets, mounts are available, and name-tag coloring.
-            </small>
-          </div>
+        <div class="form-group form-inline">
+          <label>Tier</label>
+          <input
+            v-model="hero.contributor.level"
+            class="form-control levelField"
+            type="number"
+          >
+          <small>
+            1-7 for normal contributors, 8 for moderators, 9 for staff.
+            This determines which items, pets, mounts are available, and name-tag coloring.
+            Tiers 8 and 9 are automatically given admin status.
+          </small>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Contributions</label>
-          <div class="col-sm-9">
-            <textarea
-              v-model="hero.contributor.contributions"
-              class="form-control"
-              cols="5"
-              rows="5"
-            >
-              </textarea>
-            <div
-              v-markdown="hero.contributor.contributions"
-              class="markdownPreview"
-            ></div>
-          </div>
+        <div
+          v-if="hero.secret.text"
+          class="form-group"
+        >
+          <label>Moderation Notes</label>
+          <div
+            v-markdown="hero.secret.text"
+            class="markdownPreview"
+          ></div>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Moderation Notes</label>
-          <div class="col-sm-9">
-            <textarea
-              v-model="hero.secret.text"
-              class="form-control"
-              cols="5"
-              rows="3"
-            ></textarea>
-            <div
-              v-markdown="hero.secret.text"
-              class="markdownPreview"
-            ></div>
-          </div>
+        <div class="form-group">
+          <label>Contributions</label>
+          <textarea
+            v-model="hero.contributor.contributions"
+            class="form-control"
+            cols="5"
+            rows="5"
+          ></textarea>
+          <div
+            v-markdown="hero.contributor.contributions"
+            class="markdownPreview"
+          ></div>
+        </div>
+        <div class="form-group">
+          <label>Edit Moderation Notes</label>
+          <textarea
+            v-model="hero.secret.text"
+            class="form-control"
+            cols="5"
+            rows="3"
+          ></textarea>
+          <div
+            v-markdown="hero.secret.text"
+            class="markdownPreview"
+          ></div>
         </div>
-      </div>
-      <div
-        v-if="expand"
-        class="card-footer"
-      >
         <input
           type="submit"
-          value="Save"
-          class="btn btn-primary mt-1"
+          value="Save and Clear Data"
+          class="btn btn-primary"
         >
-      </div>
+      </form>
     </div>
-  </form>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.levelField {
-  min-width: 10ch;
-}
-
-.textField {
-  min-width: 50ch;
-}
+  .levelField {
+    min-width: 10ch;
+  }
+  .textField {
+    min-width: 50ch;
+  }
 </style>
 
 <script>
@@ -133,39 +164,6 @@ import saveHero from '../mixins/saveHero';
 import { mapState } from '@/libs/store';
 import { userStateMixin } from '../../../mixins/userState';
 
-const permissionList = [
-  {
-    key: 'fullAccess',
-    name: 'Full Admin Access',
-    description: 'Allows access to everything. EVERYTHING',
-  },
-  {
-    key: 'userSupport',
-    name: 'User Support',
-    description: 'Access this form, access purchase history',
-  },
-  {
-    key: 'news',
-    name: 'News Poster',
-    description: 'Bailey CMS',
-  },
-  {
-    key: 'moderator',
-    name: 'Community Moderator',
-    description: 'Ban and mute users, access chat flags, manage social spaces',
-  },
-  {
-    key: 'challengeAdmin',
-    name: 'Challenge Admin',
-    description: 'Can create official habitica challenges and admin all challenges',
-  },
-  {
-    key: 'coupons',
-    name: 'Coupon Creator',
-    description: 'Can manage coupon codes',
-  },
-];
-
 function resetData (self) {
   self.expand = self.hero.contributor.level;
 }
@@ -194,7 +192,6 @@ export default {
   data () {
     return {
       expand: false,
-      permissionList,
     };
   },
   watch: {

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

@@ -1,187 +1,145 @@
 <template>
-  <form @submit.prevent="saveHero({ hero, msg: 'Authentication' })">
-    <div class="card mt-2">
-      <div class="card-header">
-        <h3
-          class="mb-0 mt-0"
-          :class="{'open': expand}"
-          @click="expand = !expand"
-        >
-          Timestamps, Time Zone, Authentication, Email Address
-          <span
-            v-if="errorsOrWarningsExist"
-          >- ERRORS / WARNINGS EXIST</span>
-        </h3>
-      </div>
-      <div
-        v-if="expand"
-        class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
+    >
+      Timestamps, Time Zone, Authentication, Email Address
+      <span
+        v-if="errorsOrWarningsExist"
+      >- ERRORS / WARNINGS EXIST</span>
+    </h3>
+    <div v-if="expand">
+      <p
+        v-if="errorsOrWarningsExist"
+        class="errorMessage"
       >
-        <p
-          v-if="errorsOrWarningsExist"
-          class="errorMessage"
-        >
-          See error(s) below.
-        </p>
+        See error(s) below.
+      </p>
 
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Account created:</label>
-          <strong class="col-sm-9 col-form-label">
-            {{ hero.auth.timestamps.created | formatDate }}</strong>
+      <div>
+        Account created:
+        <strong>{{ hero.auth.timestamps.created | formatDate }}</strong>
+      </div>
+      <div v-if="hero.flags.thirdPartyTools">
+        User has employed <strong>third party tools</strong>. Last known usage:
+        <strong>{{ hero.flags.thirdPartyTools | formatDate }}</strong>
+      </div>
+      <div v-if="cronError">
+        "lastCron" value:
+        <strong>{{ hero.lastCron | formatDate }}</strong>
+        <br>
+        <span class="errorMessage">
+          ERROR: cron probably crashed before finishing
+          ("auth.timestamps.loggedin" and "lastCron" dates are different).
+        </span>
+      </div>
+      <div class="form-inline">
+        <div>
+          Most recent cron:
+          <strong>{{ hero.auth.timestamps.loggedin | formatDate }}</strong>
+          ("auth.timestamps.loggedin")
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Used third party tools:</label>
+        <button
+          class="btn btn-primary ml-2"
+          @click="resetCron()"
+        >
+          Reset Cron to Yesterday
+        </button>
+      </div>
+      <div class="subsection-start">
+        Time zone:
+        <strong>{{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
+      </div>
+      <div>
+        Custom Day Start time (CDS):
+        <strong>{{ hero.preferences.dayStart }}</strong>
+      </div>
+      <div v-if="timezoneDiffError || timezoneMissingError">
+        Time zone at previous cron:
+        <strong>{{ hero.preferences.timezoneOffsetAtLastCron | formatTimeZone }}</strong>
 
-          <div class="col-sm-9 col-form-label">
-            <strong v-if="hero.flags.thirdPartyTools">
-              Yes - {{ hero.flags.thirdPartyTools | formatDate }}</strong>
-            <strong v-else>No</strong>
+        <div class="errorMessage">
+          <div v-if="timezoneDiffError">
+            ERROR: the player's current time zone is different than their time zone when
+            their previous cron ran. This can be because:
+            <ul>
+              <li>daylight savings started or stopped <sup>*</sup></li>
+              <li>the player changed zones due to travel <sup>*</sup></li>
+              <li>the player has devices set to different zones <sup>**</sup></li>
+              <li>the player uses a VPN with varying zones <sup>**</sup></li>
+              <li>something similarly unpleasant is happening. <sup>**</sup></li>
+            </ul>
+            <p>
+              <em>* The problem should fix itself in about a day.</em><br>
+              <em>** One of these causes is probably happening if the time zones stay
+                different for more than a day.</em>
+            </p>
+          </div>
+
+          <div v-if="timezoneMissingError">
+            ERROR: One of the player's time zones is missing.
+            This is expected and okay if it's the "Time zone at previous cron"
+            AND if it's their first day in Habitica.
+            Otherwise an error has occurred.
           </div>
         </div>
-        <div v-if="cronError" class="form-group row">
-          <label class="col-sm-3 col-form-label">lastCron value:</label>
-          <strong>{{ hero.lastCron | formatDate }}</strong>
+      </div>
+
+      <div class="subsection-start form-inline">
+        API Token: &nbsp;
+        <form @submit.prevent="changeApiToken()">
+          <input
+            type="submit"
+            value="Change API Token"
+            class="btn btn-primary"
+          >
+        </form>
+        <div
+          v-if="tokenModified"
+          class="form-inline"
+        >
+          <strong>API Token has been changed. Tell the player something like this:</strong>
           <br>
-          <span class="errorMessage">
-            ERROR: cron probably crashed before finishing
-            ("auth.timestamps.loggedin" and "lastCron" dates are different).
-          </span>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Most recent cron:</label>
-
-          <div class="col-sm-9 col-form-label">
-            <strong>
-              {{ hero.auth.timestamps.loggedin | formatDate }}</strong>
-            <button
-              class="btn btn-warning btn-sm ml-4"
-              @click="resetCron()"
-            >
-              Reset Cron to Yesterday
-            </button>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Time zone:</label>
-          <strong class="col-sm-9 col-form-label">
-            {{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Custom Day Start time (CDS)</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.preferences.dayStart"
-              class="form-control levelField"
-              type="number"
-            >
-          </div>
-        </div>
-        <div v-if="timezoneDiffError || timezoneMissingError">
-          Time zone at previous cron:
-          <strong>{{ hero.preferences.timezoneOffsetAtLastCron | formatTimeZone }}</strong>
-
-          <div class="errorMessage">
-            <div v-if="timezoneDiffError">
-              ERROR: the player's current time zone is different than their time zone when
-              their previous cron ran. This can be because:
-              <ul>
-                <li>daylight savings started or stopped <sup>*</sup></li>
-                <li>the player changed zones due to travel <sup>*</sup></li>
-                <li>the player has devices set to different zones <sup>**</sup></li>
-                <li>the player uses a VPN with varying zones <sup>**</sup></li>
-                <li>something similarly unpleasant is happening. <sup>**</sup></li>
-              </ul>
-              <p>
-                <em>* The problem should fix itself in about a day.</em><br>
-                <em>** One of these causes is probably happening if the time zones stay
-                  different for more than a day.</em>
-              </p>
-            </div>
-
-            <div v-if="timezoneMissingError">
-              ERROR: One of the player's time zones is missing.
-              This is expected and okay if it's the "Time zone at previous cron"
-              AND if it's their first day in Habitica.
-              Otherwise an error has occurred.
-            </div>
-          </div>
-        </div>
-
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">API Token</label>
-          <div class="col-sm-9">
-            <button
-              value="Change API Token"
-              class="btn btn-danger"
-              @click="changeApiToken()"
-            >
-              Change API Token
-            </button>
-            <div
-              v-if="tokenModified"
-            >
-              <strong>API Token has been changed. Tell the player something like this:</strong>
-              <br>
-              I've given you a new API Token.
-              You'll need to log out of the website and mobile app then log back in
-              otherwise they won't work correctly.
-              If you have trouble logging out, for the website go to
-              https://habitica.com/static/clear-browser-data and click the red button there,
-              and for the Android app, clear its data.
-              For the iOS app, if you can't log out you might need to uninstall it,
-              reboot your phone, then reinstall it.
-            </div>
-          </div>
-        </div>
-
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Local Authentication E-Mail</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.auth.local.email"
-              class="form-control"
-              type="text"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Google authentication</label>
-          <div class="col-sm-9">
-            <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
-            <span v-else><strong>None</strong></span>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Facebook authentication</label>
-          <div class="col-sm-9">
-            <pre v-if="authMethodExists('facebook')">{{ hero.auth.facebook }}</pre>
-            <span v-else><strong>None</strong></span>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Apple ID authentication</label>
-          <div class="col-sm-9">
-            <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
-            <span v-else><strong>None</strong></span>
-          </div>
-        </div>
-        <div class="subsection-start">
-          Full "auth" object for checking above is correct:
-          <pre>{{ hero.auth }}</pre>
+          I've given you a new API Token.
+          You'll need to log out of the website and mobile app then log back in
+          otherwise they won't work correctly.
+          If you have trouble logging out, for the website go to
+          https://habitica.com/static/clear-browser-data and click the red button there,
+          and for the Android app, clear its data.
+          For the iOS app, if you can't log out you might need to uninstall it,
+          reboot your phone, then reinstall it.
         </div>
       </div>
-      <div
-        v-if="expand"
-        class="card-footer"
-      >
-        <input
-          type="submit"
-          value="Save"
-          class="btn btn-primary mt-1"
-        >
+
+      <div class="subsection-start">
+        Local authentication:
+        <span v-if="hero.auth.local.email">Yes, &nbsp;
+          <strong>{{ hero.auth.local.email }}</strong></span>
+        <span v-else><strong>None</strong></span>
+      </div>
+      <div>
+        Google authentication:
+        <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
+        <span v-else><strong>None</strong></span>
+      </div>
+      <div>
+        Facebook authentication:
+        <pre v-if="authMethodExists('facebook')">{{ hero.auth.facebook }}</pre>
+        <span v-else><strong>None</strong></span>
+      </div>
+      <div>
+        Apple ID authentication:
+        <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
+        <span v-else><strong>None</strong></span>
+      </div>
+      <div class="subsection-start">
+        Full "auth" object for checking above is correct:
+        <pre>{{ hero.auth }}</pre>
       </div>
     </div>
-  </form>
+  </div>
 </template>
 
 <script>

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

@@ -1,18 +1,13 @@
 <template>
-  <div class="card mt-2">
-    <div class="card-header">
-      <h3
-        class="mb-0 mt-0"
-        :class="{'open': expand}"
-        @click="expand = !expand"
-      >
-        Customizations
-      </h3>
-    </div>
-    <div
-      v-if="expand"
-      class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
     >
+      Customizations
+    </h3>
+    <div v-if="expand">
       <div
         v-for="itemType in itemTypes"
         :key="itemType"

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

@@ -1,18 +1,13 @@
 <template>
-  <div class="card mt-2">
-    <div class="card-header">
-      <h3
-        class="mb-0 mt-0"
-        :class="{'open': expand}"
-        @click="expand = !expand"
-      >
-        Items
-      </h3>
-    </div>
-    <div
-      v-if="expand"
-      class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
     >
+      Items
+    </h3>
+    <div v-if="expand">
       <div>
         The sections below display each item's key (bolded if the player has ever owned it),
         followed by the item's English name.

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

@@ -1,21 +1,16 @@
 <template>
-  <div class="card mt-2">
-    <div class="card-header">
-      <h3
-        class="mb-0 mt-0"
-        :class="{'open': expand}"
-        @click="expand = !expand"
-      >
-        Party, Quest
-        <span
-          v-if="errorsOrWarningsExist"
-        >- ERRORS / WARNINGS EXIST</span>
-      </h3>
-    </div>
-    <div
-      v-if="expand"
-      class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
     >
+      Party, Quest
+      <span
+        v-if="errorsOrWarningsExist"
+      >- ERRORS / WARNINGS EXIST</span>
+    </h3>
+    <div v-if="expand">
       <div
         v-if="errorsOrWarningsExist"
         class="errorMessage"

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

@@ -1,132 +1,87 @@
 <template>
-  <form @submit.prevent="saveHero({hero, msg: 'Privileges or Gems or Moderation Notes'})">
-    <div class="card mt-2">
-      <div class="card-header">
-        <h3
-          class="mb-0 mt-0"
-          :class="{'open': expand}"
-          @click="expand = !expand"
-        >
-          Priviliges, Gem Balance
-        </h3>
-      </div>
-      <div
-        v-if="expand"
-        class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
+    >
+      Privileges, Gem Balance
+    </h3>
+    <div v-if="expand">
+      <p
+        v-if="errorsOrWarningsExist"
+        class="errorMessage"
       >
-        <p
-          v-if="errorsOrWarningsExist"
-          class="errorMessage"
-        >
-          Player has had privileges removed or has moderation notes.
-        </p>
-        <div
-          v-if="hero.flags"
-          class="form-group row"
-        >
-          <div class="col-sm-9 offset-sm-3">
-            <div class="custom-control custom-checkbox">
-              <input
-                id="chatShadowMuted"
-                v-model="hero.flags.chatShadowMuted"
-                class="custom-control-input"
-                type="checkbox"
-              >
-              <label
-                class="custom-control-label"
-                for="chatShadowMuted"
-              >
-                Shadow Mute
-              </label>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="hero.flags"
-          class="form-group row"
-        >
-          <div class="col-sm-9 offset-sm-3">
-            <div class="custom-control custom-checkbox">
-              <input
-                id="chatRevoked"
-                v-model="hero.flags.chatRevoked"
-                class="custom-control-input"
-                type="checkbox"
-              >
-              <label
-                class="custom-control-label"
-                for="chatRevoked"
-              >
-                Mute (Revoke Chat Privileges)
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-sm-9 offset-sm-3">
-            <div class="custom-control custom-checkbox">
-              <input
-                id="blocked"
-                v-model="hero.auth.blocked"
-                class="custom-control-input"
-                type="checkbox"
-              >
-              <label
-                class="custom-control-label"
-                for="blocked"
-              >
-                Ban / Block
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Balance
+        Player has had privileges removed or has moderation notes.
+      </p>
+
+      <form @submit.prevent="saveHero({hero, msg: 'Privileges or Gems or Moderation Notes'})">
+        <div class="checkbox">
+          <label>
+            <input
+              v-if="hero.flags"
+              v-model="hero.flags.chatShadowMuted"
+              type="checkbox"
+            > Shadow Mute
           </label>
-          <div class="col-sm-9">
+        </div>
+        <div class="checkbox">
+          <label>
+            <input
+              v-if="hero.flags"
+              v-model="hero.flags.chatRevoked"
+              type="checkbox"
+            > Mute (Revoke Chat Privileges)
+          </label>
+        </div>
+        <div class="checkbox">
+          <label>
+            <input
+              v-model="hero.auth.blocked"
+              type="checkbox"
+            > Ban / Block
+          </label>
+        </div>
+        <div class="form-inline">
+          <label>
+            Balance
             <input
               v-model="hero.balance"
               class="form-control balanceField"
               type="number"
               step="0.25"
             >
+          </label>
+          <span>
             <small>
               Balance is in USD, not in Gems.
               E.g., if this number is 1, it means 4 Gems.
               Arrows change Balance by 0.25 (i.e., 1 Gem per click).
               Do not use when awarding tiers; tier gems are automatic.
             </small>
-          </div>
+          </span>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Moderation Notes</label>
-          <div class="col-sm-9">
-            <textarea
-              v-model="hero.secret.text"
-              class="form-control"
-              cols="5"
-              rows="5"
-            ></textarea>
-            <div
-              v-markdown="hero.secret.text"
-              class="markdownPreview"
-            ></div>
-          </div>
+        <div class="form-group">
+          <label>Moderation Notes</label>
+          <textarea
+            v-model="hero.secret.text"
+            class="form-control"
+            cols="5"
+            rows="5"
+          ></textarea>
+          <div
+            v-markdown="hero.secret.text"
+            class="markdownPreview"
+          ></div>
         </div>
-      </div>
-      <div
-        v-if="expand"
-        class="card-footer"
-      >
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary mt-1"
+          class="btn btn-primary"
         >
-      </div>
+      </form>
     </div>
-  </form>
+  </div>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,19 +1,14 @@
 <template>
-  <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
-    <div class="card mt-2">
-      <div class="card-header">
-        <h3
-          class="mb-0 mt-0"
-          :class="{ 'open': expand }"
-          @click="expand = !expand"
-        >
-          Subscription, Monthly Perks
-        </h3>
-      </div>
-      <div
-        v-if="expand"
-        class="card-body"
-      >
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
+    >
+      Subscription, Monthly Perks
+    </h3>
+    <div v-if="expand">
+      <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
         <div v-if="hero.purchased.plan.paymentMethod">
           Payment method:
           <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
@@ -28,72 +23,46 @@
         </div>
         <div
           v-if="hero.purchased.plan.dateCreated"
-          class="form-group row"
+          class="form-inline"
         >
-          <label class="col-sm-3 col-form-label">
+          <label>
             Creation date:
+            <input
+              v-model="hero.purchased.plan.dateCreated"
+              class="form-control"
+              type="text"
+            > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
           </label>
-          <div class="col-sm-9">
-            <div class="input-group">
-              <input
-                v-model="hero.purchased.plan.dateCreated"
-                class="form-control"
-                type="text"
-              >
-              <div class="input-group-append">
-                <strong class="input-group-text">
-                  {{ dateFormat(hero.purchased.plan.dateCreated) }}
-                </strong>
-              </div>
-            </div>
-          </div>
         </div>
         <div
           v-if="hero.purchased.plan.dateCurrentTypeCreated"
-          class="form-group row"
+          class="form-inline"
         >
-          <label class="col-sm-3 col-form-label">
-            Current sub start date:
+          <label>
+            Start date for current subscription type:
+            <input
+              v-model="hero.purchased.plan.dateCurrentTypeCreated"
+              class="form-control"
+              type="text"
+            >
           </label>
-          <div class="col-sm-9">
-            <div class="input-group">
-              <input
-                v-model="hero.purchased.plan.dateCurrentTypeCreated"
-                class="form-control"
-                type="text"
-              >
-              <div class="input-group-append">
-                <strong class="input-group-text">
-                  {{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
-                </strong>
-              </div>
-            </div>
-          </div>
+          <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
+        <div class="form-inline">
+          <label>
             Termination date:
-          </label>
-          <div class="col-sm-9">
-            <div class="input-group">
+            <div>
               <input
                 v-model="hero.purchased.plan.dateTerminated"
                 class="form-control"
                 type="text"
-              >
-              <div class="input-group-append">
-                <strong class="input-group-text">
-                  {{ dateFormat(hero.purchased.plan.dateTerminated) }}
-                </strong>
-              </div>
+              > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateTerminated) }}</strong>
             </div>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Consecutive months:
           </label>
-          <div class="col-sm-9">
+        </div>
+        <div class="form-inline">
+          <label>
+            Consecutive months:
             <input
               v-model="hero.purchased.plan.consecutive.count"
               class="form-control"
@@ -101,13 +70,11 @@
               min="0"
               step="1"
             >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Perk offset months:
           </label>
-          <div class="col-sm-9">
+        </div>
+        <div class="form-inline">
+          <label>
+            Perk offset months:
             <input
               v-model="hero.purchased.plan.consecutive.offset"
               class="form-control"
@@ -115,34 +82,26 @@
               min="0"
               step="1"
             >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Perk month count:
           </label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.purchased.plan.perkMonthCount"
-              class="form-control"
-              type="number"
-              min="0"
-              max="2"
-              step="1"
-            >
-          </div>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Next Mystic Hourglass:
-          </label>
-          <strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong>
+        <div class="form-inline">
+          Perk month count:
+          <input
+            v-model="hero.purchased.plan.perkMonthCount"
+            class="form-control"
+            type="number"
+            min="0"
+            max="2"
+            step="1"
+          >
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
+        <div>
+          Next Mystic Hourglass:
+          <strong>{{ nextHourglassDate }}</strong>
+        </div>
+        <div class="form-inline">
+          <label>
             Mystic Hourglasses:
-          </label>
-          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.trinkets"
               class="form-control"
@@ -150,13 +109,11 @@
               min="0"
               step="1"
             >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Gem cap increase:
           </label>
-          <div class="col-sm-9">
+        </div>
+        <div class="form-inline">
+          <label>
+            Gem cap increase:
             <input
               v-model="hero.purchased.plan.consecutive.gemCapExtra"
               class="form-control"
@@ -165,21 +122,15 @@
               max="25"
               step="5"
             >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Total Gem cap:
           </label>
-          <strong class="col-sm-9 col-form-label">
-            {{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}
-          </strong>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
+        <div>
+          Total Gem cap:
+          <strong>{{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}</strong>
+        </div>
+        <div class="form-inline">
+          <label>
             Gems bought this month:
-          </label>
-          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.gemsBought"
               class="form-control"
@@ -188,64 +139,43 @@
               :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
               step="1"
             >
-          </div>
+          </label>
         </div>
-        <div v-if="hero.purchased.plan.extraMonths > 0">
+        <div
+          v-if="hero.purchased.plan.extraMonths > 0"
+        >
           Additional credit (applied upon cancellation):
           <strong>{{ hero.purchased.plan.extraMonths }}</strong>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Mystery Items:
-          </label>
-          <div class="col-sm-9 col-form-label">
-            <span v-if="hero.purchased.plan.mysteryItems.length > 0">
-              <span
-                v-for="(item, index) in hero.purchased.plan.mysteryItems"
-                :key="index"
-              >
-                <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
-                  {{ item }},
-                </strong>
-                <strong v-else> {{ item }} </strong>
-              </span>
+        <div>
+          Mystery Items:
+          <span
+            v-if="hero.purchased.plan.mysteryItems.length > 0"
+          >
+            <span
+              v-for="(item, index) in hero.purchased.plan.mysteryItems"
+              :key="index"
+            >
+              <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
+                {{ item }},
+              </strong>
+              <strong v-else> {{ item }} </strong>
             </span>
-            <span v-else>
-              <strong>None</strong>
-            </span>
-          </div>
+          </span>
+          <span v-else>
+            <strong>None</strong>
+          </span>
         </div>
-      </div>
-      <div
-        v-if="expand"
-        class="card-footer"
-      >
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
         >
-      </div>
+      </form>
     </div>
-  </form>
+  </div>
 </template>
 
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-.input-group-append {
-  width: auto;
-
-  .input-group-text {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    font-weight: 600;
-    font-size: 0.8rem;
-    color: $gray-200;
-  }
-}
-</style>
-
 <script>
 import moment from 'moment';
 import { getPlanContext } from '@/../../common/script/cron';

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

@@ -1,18 +1,13 @@
 <template>
-  <div class="card mt-2">
-    <div class="card-header">
-      <h3
-        class="mb-0 mt-0"
-        :class="{'open': expand}"
-        @click="toggleTransactionsOpen"
-      >
-        Transactions
-      </h3>
-    </div>
-    <div
-      v-if="expand"
-      class="card-body"
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="toggleTransactionsOpen"
     >
+      Transactions
+    </h3>
+    <div v-if="expand">
       <purchase-history-table
         :gem-transactions="gemTransactions"
         :hourglass-transactions="hourglassTransactions"

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

@@ -1,66 +1,52 @@
 <template>
-  <form @submit.prevent="saveHero({hero, msg: 'Users Profile'})">
-    <div class="card mt-2">
-      <div class="card-header">
-        <h3
-          class="mb-0 mt-0"
-          :class="{'open': expand}"
-          @click="expand = !expand"
-        >
-          User Profile
-        </h3>
-      </div>
-      <div
-        v-if="expand"
-        class="card-body"
-      >
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Display name</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.profile.name"
-              class="form-control"
-              type="text"
-            >
-          </div>
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
+    >
+      Users Profile
+    </h3>
+    <div v-if="expand">
+      <form @submit.prevent="saveHero({hero, msg: 'Users Profile'})">
+        <div class="form-group">
+          <label>Display name</label>
+          <input
+            v-model="hero.profile.name"
+            class="form-control textField"
+            type="text"
+          >
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Photo URL</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.profile.imageUrl"
-              class="form-control"
-              type="text"
-            >
-          </div>
+        <div class="form-group">
+          <label>Photo URL</label>
+          <input
+            v-model="hero.profile.imageUrl"
+            class="form-control textField"
+            type="text"
+          >
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">About</label>
-          <div class="col-sm-9">
+        <div class="form-group">
+          <label>About</label>
+          <div class="row about-row">
             <textarea
               v-model="hero.profile.blurb"
-              class="form-control"
+              class="form-control col"
               rows="10"
             ></textarea>
             <div
               v-markdown="hero.profile.blurb"
-              class="markdownPreview"
+              class="markdownPreview col"
             ></div>
           </div>
         </div>
-      </div>
-      <div
-        v-if="expand"
-        class="card-footer"
-      >
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary mt-1"
+          class="btn btn-primary"
         >
-      </div>
+      </form>
     </div>
-  </form>
+  </div>
 </template>
 
 <style lang="scss" scoped>

website/client/src/components/appFooter.vue

@@ -291,7 +291,6 @@
       </div>
 
       <div
-        class="time-travel"
         v-if="TIME_TRAVEL_ENABLED && user.permissions && user.permissions.fullAccess"
         :key="lastTimeJump"
       >
@@ -310,11 +309,9 @@
         <div class="my-2">
           Time Traveling! It is {{ new Date().toLocaleDateString() }}
           <a
-            class="btn btn-warning btn-small"
+            class="btn btn-warning mr-1"
             @click="resetTime()"
-          >
-            Reset
-        </a>
+          >Reset</a>
         </div>
         <a
           class="btn btn-secondary mr-1"
@@ -402,10 +399,6 @@
               tooltip="+1000 to boss quests. 300 items to collection quests"
               @click="addQuestProgress()"
             >Quest Progress Up</a>
-            <a
-              class="btn btn-secondary"
-              @click="bossRage()"
-            >+ Boss Rage 😡</a>
             <a
               class="btn btn-secondary"
               @click="makeAdmin()"
@@ -513,8 +506,6 @@ li {
   grid-area: debug-pop;
    }
 
-.time-travel { grid-area: time-travel;}
-
 footer {
   background-color: $gray-500;
   color: $gray-50;
@@ -535,8 +526,7 @@ footer {
     "donate-text donate-text donate-text donate-button social"
     "hr hr hr hr hr"
     "copyright copyright melior privacy-terms privacy-terms"
-    "time-travel time-travel time-travel time-travel time-travel"
-    "debug-toggle debug-toggle debug-toggle debug-toggle debug-toggle";
+    "debug-toggle debug-toggle debug-toggle blank blank";
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: auto;
 
@@ -740,7 +730,6 @@ h3 {
       "privacy-policy privacy-policy"
       "mobile-terms mobile-terms"
       "melior melior"
-      "time-travel time-travel"
       "debug-toggle debug-toggle";
     grid-template-columns: repeat(2, 2fr);
     grid-template-rows: auto;
@@ -971,10 +960,6 @@ export default {
       //  @TODO:  Notification.text('Quest progress increased');
       //  @TODO:  User.sync();
     },
-    async bossRage () {
-      await axios.post('/api/v4/debug/boss-rage');
-    },
-
     async makeAdmin () {
       await axios.post('/api/v4/debug/make-admin');
       // @TODO: Notification.text('You are now an admin!

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

@@ -224,7 +224,7 @@
 <script>
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/es/lib/isEmail';
+import isEmail from 'validator/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
 import googleIcon from '@/assets/svg/google.svg';

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

@@ -607,7 +607,7 @@
 import axios from 'axios';
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/es/lib/isEmail';
+import isEmail from 'validator/lib/isEmail';
 import DOMPurify from 'dompurify';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';

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

@@ -6,7 +6,6 @@
     <div
       v-for="option in items"
       :key="option.key"
-      :id="option.imageName"
       class="outer-option-background"
       :class="{
         premium: Boolean(option.gem),
@@ -15,28 +14,18 @@
         hide: option.hide }"
       @click="option.click(option)"
     >
-      <b-popover
-        :target="option.imageName"
-        triggers="hover focus"
-        placement="bottom"
-        :prevent-overflow="false"
-      >
-        <strong> {{ option.text }} </strong>
-      </b-popover>
       <div class="option">
-        <Sprite
-          v-if="!option.none"
-          class="sprite"
-          :prefix="option.isGear ? 'shop' : 'icon'"
-          :imageName="option.imageName"
-          :image-name="option.imageName"
-        />
+        <div
+          class="sprite customize-option"
+          :class="option.class"
+        >
           <div
-            v-else
+            v-if="option.none"
             class="redline-outer"
           >
             <div class="redline"></div>
           </div>
+        </div>
       </div>
     </div>
   </div>
@@ -46,12 +35,8 @@
 import gem from '@/assets/svg/gem.svg';
 import gold from '@/assets/svg/gold.svg';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
-import Sprite from '@/components/ui/sprite.vue';
 
 export default {
-  components: {
-    Sprite,
-  },
   mixins: [
     avatarEditorUtilities,
   ],
@@ -90,7 +75,7 @@ export default {
     cursor: pointer;
 
     &.premium {
-      height: 120px;
+      height: 112px;
       width: 96px;
       margin-left: 8px;
       margin-right: 8px;
@@ -107,9 +92,21 @@ export default {
       box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
       background-color: $white;
 
+      .sprite.customize-option.shirt {
+        margin-left: -3px !important;
+        // otherwise its overriden by the .outer-option-background:not(.none) { rules
+      }
+
+      .sprite.customize-option.skin {
+        margin-left: -8px !important;
+        // otherwise its overriden by the .outer-option-background:not(.none) { rules
+      }
+
       .option {
         border: none;
         border-radius: 2px;
+        padding-left: 6px;
+        padding-top: 4px;
       }
 
       &:hover {
@@ -135,14 +132,14 @@ export default {
       }
 
       .redline-outer {
-        height: 68px;
-        width: 68px;
+        height: 60px;
+        width: 60px;
         position: absolute;
         bottom: 0;
         margin: 0 auto 0 0;
 
         .redline {
-          width: 68px;
+          width: 60px;
           height: 4px;
           display: block;
           background: red;
@@ -151,6 +148,7 @@ export default {
           top: 0;
           margin-top: 30px;
           margin-bottom: 20px;
+          margin-left: -1px;
         }
       }
     }
@@ -166,9 +164,10 @@ export default {
   }
   .option {
     vertical-align: bottom;
-    height: 76px;
-    width: 76px;
+    height: 64px;
+    width: 64px;
 
+    margin: 12px 8px;
     border: 4px solid transparent;
     border-radius: 10px;
     position: relative;
@@ -183,6 +182,44 @@ export default {
     .sprite.customize-option {
       margin-top: 0;
       margin-left: 0;
+
+      &.skin {
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+      &.chair {
+        margin-left: -1px;
+        margin-top: -1px;
+
+        &.button_chair_black {
+          // different sprite margin?
+          margin-top: -3px;
+        }
+
+        &.handleless {
+          margin-left: -5px;
+          margin-top: -5px;
+        }
+      }
+      &.color, &.bangs, &.beard, &.flower, &.mustache {
+        background-position-x: -6px;
+        background-position-y: -12px;
+      }
+
+      &.hair.base {
+        background-position-x: -6px;
+        background-position-y: -4px;
+      }
+
+      &.headAccessory {
+        margin-top: 0;
+        margin-left: -4px;
+      }
+
+      &.headband {
+        margin-top: -6px;
+        margin-left: -27px;
+      }
     }
   }
 </style>

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

@@ -75,7 +75,6 @@
 
 <script>
 import appearance from '@/../../common/script/content/appearance';
-import upperFirst from 'lodash/upperFirst';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
@@ -83,6 +82,9 @@ import customizeBanner from './customize-banner';
 import customizeOptions from './customize-options';
 import subMenu from './sub-menu';
 
+const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
+const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
+
 export default {
   components: {
     customizeBanner,
@@ -104,6 +106,17 @@ export default {
         headAccessory: ['bearEars', 'cactusEars', 'foxEars', 'lionEars', 'pandaEars', 'pigEars', 'tigerEars', 'wolfEars'],
       },
       chairKeys: ['none', 'black', 'blue', 'green', 'pink', 'red', 'yellow', 'handleless_black', 'handleless_blue', 'handleless_green', 'handleless_pink', 'handleless_red', 'handleless_yellow'],
+      specialShirtKeys,
+      items: [
+        {
+          id: 'size',
+          label: this.$t('size'),
+        },
+        {
+          id: 'shirt',
+          label: this.$t('shirt'),
+        },
+      ],
     };
   },
   computed: {
@@ -154,7 +167,6 @@ export default {
       ];
       const noneOption = this.createGearItem(0, 'eyewear', 'base');
       noneOption.none = true;
-      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -166,36 +178,42 @@ export default {
         option.active = this.user.preferences.costume
           ? this.user.items.gear.costume.eyewear === newKey
           : this.user.items.gear.equipped.eyewear === newKey;
-        option.imageName = `eyewear_special_${key}`;
-        option.isGear = true;
+        option.class = `eyewear_special_${key}`;
         option.click = () => {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
 
           return this.equip(newKey, type);
         };
-        option.text = this.$t(`eyewearSpecial${upperFirst(key)}Text`);
         options.push(option);
       }
 
       return options;
     },
+    freeShirts () {
+      return freeShirtKeys.map(s => this.mapKeysToFreeOption(s, 'shirt'));
+    },
+    specialShirts () {
+      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+      const keys = this.specialShirtKeys;
+      const options = keys.map(key => this.mapKeysToOption(key, 'shirt'));
+      return options;
+    },
     headbands () {
       const keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
-      const noneOption = this.createGearItem(0, 'headAccessory', 'base');
+      const noneOption = this.createGearItem(0, 'headAccessory', 'base', 'headband');
       noneOption.none = true;
-      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
 
       for (const key of keys) {
-        const option = this.createGearItem(key, 'headAccessory', 'special');
+        const option = this.createGearItem(key, 'headAccessory', 'special', 'headband');
         const newKey = `headAccessory_special_${key}`;
         option.click = () => {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
           return this.equip(newKey, type);
         };
-        option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
+
         options.push(option);
       }
 
@@ -209,9 +227,8 @@ export default {
           option.none = true;
         }
         option.active = this.user.preferences.chair === key;
-        option.imageName = `chair_${key}`;
+        option.class = `button_chair_${key} chair ${key.includes('handleless_') ? 'handleless' : ''}`;
         option.click = () => this.set({ 'preferences.chair': key });
-        option.text = appearance.chair[key].text();
         return option;
       });
       return options;
@@ -225,11 +242,8 @@ export default {
           option.none = true;
         }
         option.active = this.user.preferences.hair.flower === key;
-        if (key !== 0) {
-          option.imageName = `hair_flower_${key}`;
-        }
+        option.class = `icon_hair_flower_${key} flower`;
         option.click = () => this.set({ 'preferences.hair.flower': key });
-        option.text = appearance.hair.flower[key].text();
         return option;
       });
       return options;
@@ -257,7 +271,6 @@ export default {
 
       const noneOption = this.createGearItem(0, category, 'base', category);
       noneOption.none = true;
-      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -271,15 +284,10 @@ export default {
           option.active = this.user.preferences.costume
             ? this.user.items.gear.costume[category] === newKey
             : this.user.items.gear.equipped[category] === newKey;
-
+          option.class = `headAccessory_special_${option.key} ${category}`;
           if (category === 'back') {
-            option.text = this.$t(`back${upperFirst(key)}Text`);
-            option.imageName = `back_special_${option.key}`;
-          } else {
-            option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
-            option.imageName = `headAccessory_special_${option.key}`;
+            option.class = `icon_back_special_${option.key} back`;
           }
-          option.isGear = true;
           option.click = () => {
             const type = this.user.preferences.costume ? 'costume' : 'equipped';
             return this.equip(newKey, type);
@@ -295,7 +303,7 @@ export default {
 
       return keys.join(',');
     },
-    createGearItem (key, gearType, subGearType) {
+    createGearItem (key, gearType, subGearType, additionalClass) {
       const newKey = `${gearType}_${subGearType ? `${subGearType}_` : ''}${key}`;
       const option = {};
       option.key = key;
@@ -303,7 +311,6 @@ export default {
       const currentlyEquippedValue = this.user.items.gear[visibleGearType][gearType];
 
       option.active = currentlyEquippedValue === newKey;
-      option.isGear = true;
 
       if (key === 0) {
         // if key is the "none" option check if a property
@@ -311,7 +318,7 @@ export default {
         option.active = option.active || !currentlyEquippedValue;
       }
 
-      option.imageName = `${newKey}`;
+      option.class = `${newKey} ${additionalClass}`;
       option.click = () => {
         const type = this.user.preferences.costume ? 'costume' : 'equipped';
         const currentlyEquipped = this.user.items.gear[type][gearType];

website/client/src/components/bugReportModal.vue

@@ -167,7 +167,7 @@ label {
 
 <script>
 import axios from 'axios';
-import isEmail from 'validator/es/lib/isEmail';
+import isEmail from 'validator/lib/isEmail';
 import closeX from '@/components/ui/closeX';
 import { mapState } from '@/libs/store';
 import { MODALS } from '@/libs/consts';

website/client/src/components/creatorIntro.vue

@@ -220,10 +220,10 @@
               :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
-              <Sprite
+              <div
                 class="background"
-                :image-name="`icon_background_${bg.key}`"
-              />
+                :class="`icon_background_${bg.key}`"
+              ></div>
               <b-popover
                 :target="bg.key"
                 triggers="hover focus"
@@ -254,10 +254,10 @@
               :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
-              <Sprite
+              <div
                 class="background"
-                :image-name="`icon_background_${bg.key}`"
-              />
+                :class="`icon_background_${bg.key}`"
+              ></div>
               <b-popover
                 :target="bg.key"
                 triggers="hover focus"
@@ -286,10 +286,10 @@
               :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
-              <Sprite
+              <div
                 class="background"
-                :image-name="`icon_background_${bg.key}`"
-              />
+                :class="`icon_background_${bg.key}`"
+              ></div>
               <b-popover
                 :target="bg.key"
                 triggers="hover focus"
@@ -818,10 +818,9 @@
 
         .background {
           border-radius: 4px;
-          object-position: -4px -4px;
-          object-fit: none;
           width: 60px;
           height: 60px;
+          background-position: -4px -4px;
         }
 
         .deselect {
@@ -1014,7 +1013,6 @@ import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
 import svgClose from '@/assets/svg/close.svg';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
-import Sprite from './ui/sprite';
 
 export default {
   components: {
@@ -1026,7 +1024,6 @@ export default {
     hairSettings,
     skinSettings,
     usernameForm,
-    Sprite,
   },
   mixins: [guide, notifications, avatarEditorUtilities],
   data () {

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

@@ -122,8 +122,8 @@
 <script>
 import clone from 'lodash/clone';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/es/lib/isEmail';
-import isUUID from 'validator/es/lib/isUUID';
+import isEmail from 'validator/lib/isEmail';
+import isUUID from 'validator/lib/isUUID';
 import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
 import positiveIcon from '@/assets/svg/positive.svg';

website/client/src/components/header/menu.vue

@@ -16,10 +16,10 @@
         class="brand"
         aria-label="Habitica"
       >
-        <router-link to="/">
+      <router-link to="/">
           <div
-            class="logo svg-icon svg color gryphon pl-2 mr-3"
-            v-html="icons.melior"
+          class="logo svg-icon svg color gryphon"
+          v-html="icons.melior"
           ></div>
           <div class="svg-icon"></div>
         </router-link>
@@ -349,15 +349,15 @@
           >
             <div
               v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')"
-              class="top-menu-icon svg-icon mr-1"
+              class="top-menu-icon svg-icon"
               v-html="icons.hourglasses"
             ></div>
             <span>{{ userHourglasses }}</span>
           </div>
-          <div class="item-with-icon gem">
+          <div class="item-with-icon">
             <a
               v-b-tooltip.hover.bottom="$t('gems')"
-              class="top-menu-icon svg-icon gem mr-2"
+              class="top-menu-icon svg-icon gem"
               :aria-label="$t('gems')"
               href="#buy-gems"
               @click.prevent="showBuyGemsModal()"
@@ -368,7 +368,7 @@
           <div class="item-with-icon gold">
             <div
               v-b-tooltip.hover.bottom="$t('gold')"
-              class="top-menu-icon svg-icon mr-2"
+              class="top-menu-icon svg-icon"
               :aria-label="$t('gold')"
               v-html="icons.gold"
             ></div>
@@ -409,180 +409,6 @@ body.modal-open #habitica-menu {
   @import '~@/assets/scss/utils.scss';
   @import '~@/assets/scss/variables.scss';
 
-  .menu-toggle {
-    border: none;
-  }
-
-  #menu_collapse {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .topbar {
-    z-index: 1080;
-    background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right top no-repeat;
-    min-height: 56px;
-    box-shadow: 0 1px 2px 0 rgba($black, 0.24);
-
-    a {
-      color: white !important;
-    }
-  }
-
-  .logo {
-    color: $white;
-    height: 32px;
-    object-fit: contain;
-    width: 32px;
-  }
-
-  .quick-menu {
-    display: flex;
-    margin-left: auto;
-  }
-
-  .currency-tray {
-    display: flex;
-  }
-
-  .topbar-item {
-    font-size: 16px;
-    color: $white !important;
-    font-weight: bold;
-    transition: none;
-
-    .topbar-dropdown  {
-        overflow: hidden;
-        max-height: 0;
-
-        .topbar-dropdown-item {
-          line-height: 1.5;
-          font-size: 16px;
-        }
-    }
-
-    >a {
-      padding: .8em 1em !important;
-    }
-
-    &.down {
-      color: $white !important;
-      background: $purple-200;
-
-      .topbar-dropdown {
-        margin-top: 0; // Remove gap between navbar and drop-down.
-        background: $purple-200;
-        border-radius: 0px;
-        border: none;
-        box-shadow: none;
-        padding: 0px;
-
-        border-bottom-right-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        .topbar-dropdown-item {
-          font-size: 16px;
-          box-shadow: none;
-          color: $white;
-          border: none;
-          line-height: 1.5;
-          display: list-item;
-
-          &.active {
-            background: $purple-300;
-          }
-
-          &:hover {
-            background: $purple-300;
-            text-decoration: none;
-
-            &:last-child {
-              border-bottom-right-radius: 5px;
-              border-bottom-left-radius: 5px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .dropdown + .dropdown {
-    margin-left: 0px;
-  }
-
-  .item-with-icon {
-    color: $white;
-    font-size: 16px;
-    font-weight: normal;
-    white-space: nowrap;
-
-    span {
-      font-weight: bold;
-    }
-
-    &.gem {
-      margin-left: 12px;
-    }
-
-    &.gold {
-      margin-left: 12px;
-      margin-right: 36px;
-    }
-
-    &:focus ::v-deep .top-menu-icon.svg-icon,
-    &:hover ::v-deep .top-menu-icon.svg-icon {
-      color: $white;
-    }
-
-    & ::v-deep .top-menu-icon.svg-icon {
-      color: $header-color;
-      vertical-align: bottom;
-      display: inline-block;
-      width: 24px;
-      height: 24px;
-      margin-right: 12px;
-      margin-left: 12px;
-    }
-  }
-
-  a.item-with-icon:focus {
-    outline: none;
-  }
-
-  @keyframes rotateGemColors {
-    /* Gems are green by default, so we rotate through ROYGBIV starting with green. */
-    20% {
-      fill: #46A7D9; /* Blue */
-    }
-    40% {
-      fill: #925CF3; /* Purple */
-    }
-    60% {
-      fill: #DE3F3F; /* Red */
-    }
-    80% {
-      fill: #FA8537; /* Orange */
-    }
-    100% {
-      fill: #FFB445; /* Yellow */
-    }
-  }
-
-  .gem:hover {
-    cursor: pointer;
-
-    & ::v-deep path:nth-child(1) {
-      animation: rotateGemColors 3s linear infinite alternate;
-    }
-  }
-
-  .message-count.top-count {
-    background-color: $red-50;
-    position: absolute;
-    right: 0;
-    top: -0.5em;
-    padding: .2em;
-  }
   @media only screen and (max-width: 1200px) {
     .chevron {
       display: none
@@ -590,13 +416,12 @@ body.modal-open #habitica-menu {
 
     .gryphon {
       background-size: cover;
-      color: $white;
       height: 32px;
+      color: $white;
       margin: 0 auto;
-      top: -10px;
-      padding-left: 8px;
-      position: relative;
       width: 32px;
+      top: -10px;
+      position: relative;
     }
 
     .logo {
@@ -720,23 +545,193 @@ body.modal-open #habitica-menu {
     .desktop-only {
       display: none !important;
     }
+  }
 
-    .navbar-toggler {
-      padding-left: 8px;
-      padding-right: 8px;
+  .menu-toggle {
+    border: none;
+  }
+
+  #menu_collapse {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .topbar {
+    z-index: 1080;
+    background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right top no-repeat;
+    min-height: 56px;
+    box-shadow: 0 1px 2px 0 rgba($black, 0.24);
+
+    a {
+      color: white !important;
+    }
+  }
+
+  .logo {
+    color: $white;
+    height: 32px;
+    object-fit: contain;
+    width: 32px;
+  }
+
+  .quick-menu {
+    display: flex;
+    margin-left: auto;
+  }
+
+  .currency-tray {
+    display: flex;
+  }
+
+  .topbar-item {
+    font-size: 16px;
+    color: $white !important;
+    font-weight: bold;
+    transition: none;
+
+    .topbar-dropdown  {
+        overflow: hidden;
+        max-height: 0;
+
+        .topbar-dropdown-item {
+          line-height: 1.5;
+          font-size: 16px;
+        }
     }
 
-    .item-with-icon {
-      margin-left: 0px;
-      margin-right: 16px;
+    >a {
+      padding: .8em 1em !important;
+    }
 
-      & ::v-deep .top-menu-icon.svg-icon {
-        margin-right: 0px;
-        margin-left: 0px;
+    &.down {
+      color: $white !important;
+      background: $purple-200;
+
+      .topbar-dropdown {
+        margin-top: 0; // Remove gap between navbar and drop-down.
+        background: $purple-200;
+        border-radius: 0px;
+        border: none;
+        box-shadow: none;
+        padding: 0px;
+
+        border-bottom-right-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        .topbar-dropdown-item {
+          font-size: 16px;
+          box-shadow: none;
+          color: $white;
+          border: none;
+          line-height: 1.5;
+          display: list-item;
+
+          &.active {
+            background: $purple-300;
+          }
+
+          &:hover {
+            background: $purple-300;
+            text-decoration: none;
+
+            &:last-child {
+              border-bottom-right-radius: 5px;
+              border-bottom-left-radius: 5px;
+            }
+          }
+        }
       }
     }
   }
 
+  .dropdown + .dropdown {
+    margin-left: 0px;
+  }
+
+  .item-with-icon {
+    color: $white;
+    font-size: 16px;
+    font-weight: normal;
+    white-space: nowrap;
+
+    span {
+      font-weight: bold;
+    }
+
+    &.gold {
+      margin-right: 24px;
+    }
+
+    &:focus ::v-deep .top-menu-icon.svg-icon,
+    &:hover ::v-deep .top-menu-icon.svg-icon {
+      color: $white;
+    }
+
+    & ::v-deep .top-menu-icon.svg-icon {
+      color: $header-color;
+      vertical-align: bottom;
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin-right: 12px;
+      margin-left: 12px;
+    }
+  }
+
+  a.item-with-icon:focus {
+    outline: none;
+  }
+
+  .menu-icon {
+    margin-left: 24px;
+  }
+
+  @keyframes rotateGemColors {
+    /* Gems are green by default, so we rotate through ROYGBIV starting with green. */
+    20% {
+      fill: #46A7D9; /* Blue */
+    }
+    40% {
+      fill: #925CF3; /* Purple */
+    }
+    60% {
+      fill: #DE3F3F; /* Red */
+    }
+    80% {
+      fill: #FA8537; /* Orange */
+    }
+    100% {
+      fill: #FFB445; /* Yellow */
+    }
+  }
+
+  .gem:hover {
+    cursor: pointer;
+
+    & ::v-deep path:nth-child(1) {
+      animation: rotateGemColors 3s linear infinite alternate;
+    }
+  }
+
+  .message-count {
+    background-color: $blue-50;
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
+    float: right;
+    color: $white;
+    text-align: center;
+    font-weight: bold;
+    font-size: 12px;
+  }
+
+  .message-count.top-count {
+    background-color: $red-50;
+    position: absolute;
+    right: 0;
+    top: -0.5em;
+    padding: .2em;
+  }
 </style>
 
 <script>

website/client/src/components/header/messageCount.functional.vue

@@ -12,13 +12,13 @@
 .message-count {
   background-color: $red-50;
   border-radius: 50%;
-  color: $white;
-  font-size: 12px;
-  font-weight: bold;
   height: 20px;
-  left: 24px;
-  text-align: center;
   width: 20px;
+  float: right;
+  color: $white;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
 
   svg {
     width: 12px;
@@ -36,11 +36,4 @@
 .message-count.top-count-gray {
   background-color: $gray-200;
 }
-
-@media only screen and (max-width: 992px) {
-
-  .message-count {
-    left: 12px;
-  }
-}
 </style>

website/client/src/components/header/userDropdown.vue

@@ -14,7 +14,7 @@
           :top="true"
         />
         <div
-          class="top-menu-icon svg-icon mr-2"
+          class="top-menu-icon svg-icon user"
           v-html="icons.user"
         ></div>
       </div>
@@ -105,11 +105,6 @@
 
 <style lang='scss' scoped>
 @import '~@/assets/scss/colors.scss';
-@media only screen and (max-width: 992px) {
-  .item-with-icon.item-user {
-    margin-right: 0px;
-  }
-}
 
 .user-dropdown {
   width: 14.75em;

website/client/src/components/inventory/item.vue

@@ -21,10 +21,10 @@
         <slot
           name="itemBadge"
           :item="item"
-        ></slot><Sprite
+        ></slot><span
           class="item-content"
-          :image-name="itemContentClass"
-        />
+          :class="itemContentClass"
+        ></span>
       </div><span
         v-if="label"
         class="item-label"
@@ -46,12 +46,8 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
-import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: {
-    Sprite,
-  },
   props: {
     item: {
       type: Object,

website/client/src/components/inventory/itemPopover.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-if="draggedItem"
-    class="draggedItemInfo mouse"
-    v-mousePosition="30"
-    @mouseMoved="mouseMoved($event)">
-      <Sprite
-        class="dragging-icon"
-        :image-name="imageName()"
-      />
-      <div class="popover">
-        <div
-          class="popover-content"
-        >
-          {{ $t(popoverTextKey, { [translationKey]: itemText() }) }}
-        </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .draggedItemInfo {
-    position: absolute;
-    left: -500px;
-
-    z-index: 1080;
-
-    &.mouse {
-      position: fixed;
-      pointer-events: none
-    }
-
-    .dragging-icon {
-      width: 68px;
-      margin: 0 auto 8px;
-      display: block;
-      transform: scale(1.5);
-    }
-
-    .popover {
-      position: static;
-      width: 180px;
-    }
-
-    .popover-content {
-      color: white;
-      margin: 15px;
-      text-align: center;
-    }
-  }
-</style>
-
-<script>
-import Sprite from '@/components/ui/sprite';
-import MouseMoveDirective from '@/directives/mouseposition.directive';
-
-export default {
-  name: 'ItemPopover',
-  components: {
-    Sprite,
-  },
-  directives: {
-    mousePosition: MouseMoveDirective,
-  },
-  props: {
-    draggedItem: {
-      type: Object,
-      default: null,
-    },
-    popoverTextKey: {
-      type: String,
-      default: '',
-    },
-    translationKey: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    imageName () {
-      if (this.draggedItem) {
-        if (this.draggedItem.class) {
-          return this.draggedItem.class;
-        }
-        if (this.draggedItem.target) {
-          return `Pet_Food_${this.draggedItem.key}`;
-        }
-      }
-      return '';
-    },
-    mouseMoved ($event) {
-      if (this.$refs.root) {
-        this.$refs.root.style.left = `${$event.x - 60}px`;
-        this.$refs.root.style.top = `${$event.y + 10}px`;
-      }
-    },
-    itemText () {
-      if (this.draggedItem) {
-        if (this.draggedItem.text) {
-          if (typeof this.draggedItem.text === 'function') {
-            return this.draggedItem.text();
-          }
-          return this.draggedItem.text;
-        }
-        return this.draggedItem.class;
-      }
-      return '';
-    },
-  },
-};
-
-</script>

website/client/src/components/inventory/items/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div
+    v-mousePosition="30"
     class="row"
+    @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
       <filter-sidebar>
@@ -97,7 +99,7 @@
                   {{ context.item.text }}
                 </h4>
                 <div
-                  v-if="!currentDraggingPotion"
+                  v-if="currentDraggingPotion == null"
                   class="popover-content-text"
                 >
                   {{ context.item.notes }}
@@ -146,7 +148,7 @@
                 <h4 class="popover-content-title">
                   {{ context.item.text }}
                 </h4>
-                <div class="popover-content-text" v-if="!currentDraggingEgg">
+                <div class="popover-content-text">
                   {{ context.item.notes }}
                 </div>
               </template>
@@ -222,24 +224,120 @@
       </div>
     </div>
     <hatchedPetDialog />
-    <ItemPopover
-      :dragged-item="currentDraggingEgg"
-      popoverTextKey="clickOnPotionToHatch"
-      translationKey="eggName" />
-    <ItemPopover
-      :dragged-item="currentDraggingPotion"
-      popoverTextKey="clickOnEggToHatch"
-      translationKey="potionName" />
+    <div
+      ref="draggingEggInfo"
+      class="eggInfo"
+    >
+      <div v-if="currentDraggingEgg != null">
+        <div
+          class="potion-icon"
+          :class="`Pet_Egg_${currentDraggingEgg.key}`"
+        ></div>
+        <div class="popover">
+          <div class="popover-content">
+            {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="eggClickMode"
+      ref="clickEggInfo"
+      class="eggInfo mouse"
+    >
+      <div v-if="currentDraggingEgg != null">
+        <div
+          class="potion-icon"
+          :class="`Pet_Egg_${currentDraggingEgg.key}`"
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
+            {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      ref="draggingPotionInfo"
+      class="hatchingPotionInfo"
+    >
+      <div v-if="currentDraggingPotion != null">
+        <div
+          class="potion-icon"
+          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
+            {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="potionClickMode"
+      ref="clickPotionInfo"
+      class="hatchingPotionInfo mouse"
+    >
+      <div v-if="currentDraggingPotion != null">
+        <div
+          class="potion-icon"
+          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
+            {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
+          </div>
+        </div>
+      </div>
+    </div>
     <questDetailModal :group="user.party" />
     <cards-modal :card-options="cardOptions" />
   </div>
 </template>
 
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .eggInfo, .hatchingPotionInfo {
+    position: absolute;
+    left: -500px;
+
+    z-index: 1080;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .potion-icon {
+      margin: 0 auto 8px;
+      transform: scale(1.5);
+    }
+
+    .popover {
+      position: inherit;
+      width: 180px;
+    }
+
+    .popover-content {
+      color: white;
+      margin: 15px;
+      text-align: center;
+    }
+  }
+
+</style>
+
 <script>
 import each from 'lodash/each';
 import throttle from 'lodash/throttle';
 import moment from 'moment';
-import ItemPopover from '@/components/inventory/itemPopover';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
 import CountBadge from '@/components/ui/countBadge';
@@ -256,6 +354,7 @@ import { createAnimal } from '@/libs/createAnimal';
 
 import notifications from '@/mixins/notifications';
 import DragDropDirective from '@/directives/dragdrop.directive';
+import MouseMoveDirective from '@/directives/mouseposition.directive';
 import FilterGroup from '@/components/ui/filterGroup';
 import Checkbox from '@/components/ui/checkbox';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
@@ -276,6 +375,8 @@ const groups = [
   allowedItems,
 }));
 
+let lastMouseMoveEvent = {};
+
 export default {
   name: 'Items',
   components: {
@@ -290,10 +391,10 @@ export default {
     cardsModal,
     QuestInfo,
     FilterSidebar,
-    ItemPopover,
   },
   directives: {
     drag: DragDropDirective,
+    mousePosition: MouseMoveDirective,
   },
   mixins: [notifications],
   data () {
@@ -304,7 +405,9 @@ export default {
       sortBy: 'quantity', // or 'AZ'
 
       currentDraggingEgg: null,
+      eggClickMode: false,
       currentDraggingPotion: null,
+      potionClickMode: false,
       cardOptions: {
         cardType: '',
         messageOptions: 0,
@@ -464,13 +567,22 @@ export default {
         }
 
         this.currentDraggingPotion = null;
+        this.potionClickMode = false;
         return;
       }
 
       if (this.currentDraggingEgg === null || this.currentDraggingEgg !== egg) {
         this.currentDraggingEgg = egg;
+        this.eggClickMode = true;
+
+        // Wait for the div.eggInfo.mouse node to be added to the DOM before
+        // changing its position.
+        this.$nextTick(() => {
+          this.mouseMoved(lastMouseMoveEvent);
+        });
       } else {
         this.currentDraggingEgg = null;
+        this.eggClickMode = false;
       }
     },
     onPotionClicked ($event, potion) {
@@ -480,12 +592,21 @@ export default {
         }
 
         this.currentDraggingEgg = null;
+        this.eggClickMode = false;
         return;
       }
       if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
         this.currentDraggingPotion = potion;
+        this.potionClickMode = true;
+
+        // Wait for the div.hatchingPotionInfo.mouse node to be added to the
+        // DOM before changing its position.
+        this.$nextTick(() => {
+          this.mouseMoved(lastMouseMoveEvent);
+        });
       } else {
         this.currentDraggingPotion = null;
+        this.potionClickMode = false;
       }
     },
 
@@ -519,6 +640,23 @@ export default {
         });
       }
     },
+
+    mouseMoved ($event) {
+      // Keep track of the last mouse position even in click mode so that we
+      // know where to position the dragged potion/egg info on item click.
+      lastMouseMoveEvent = $event;
+
+      // Update the potion/egg popover if we are already dragging it.
+      if (this.potionClickMode) {
+        // dragging potioninfo is 180px wide (90 would be centered)
+        this.$refs.clickPotionInfo.style.left = `${$event.x - 60}px`;
+        this.$refs.clickPotionInfo.style.top = `${$event.y + 10}px`;
+      } else if (this.eggClickMode) {
+        // dragging eggInfo is 180px wide (90 would be centered)
+        this.$refs.clickEggInfo.style.left = `${$event.x - 60}px`;
+        this.$refs.clickEggInfo.style.top = `${$event.y + 10}px`;
+      }
+    },
   },
 };
 </script>

website/client/src/components/inventory/stable/foodItem.vue

@@ -13,13 +13,13 @@
           :show="true"
           :count="itemCount"
         />
-        <Sprite
+        <span
           v-drag.food="item.key"
           class="item-content"
-          :image-name="`Pet_Food_${item.key}`"
+          :class="`Pet_Food_${item.key}`"
           @itemDragEnd="dragend($event)"
           @itemDragStart="dragstart($event)"
-        />
+        ></span>
       </div>
     </div>
     <b-popover
@@ -41,14 +41,12 @@
 <script>
 import { v4 as uuid } from 'uuid';
 import DragDropDirective from '@/directives/dragdrop.directive';
-import Sprite from '@/components/ui/sprite';
 
 import CountBadge from '@/components/ui/countBadge';
 
 export default {
   components: {
     CountBadge,
-    Sprite,
   },
   directives: {
     drag: DragDropDirective,

website/client/src/components/inventory/stable/hatchedPetDialog.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="inner-content">
         <div class="pet-background d-flex align-items-center">
-          <Sprite :image-name="pet.imageName" />
+          <div :class="pet.class"></div>
         </div>
         <h4 class="title">
           {{ pet.name }}
@@ -76,11 +76,10 @@
       height: 112px;
       border-radius: 4px;
       background-color: $gray-700;
+    }
 
-      img {
-        transform: scale(1.5);
-        margin: auto;
-      }
+    .Pet {
+      margin: auto;
     }
 
     .dialog-header {
@@ -104,12 +103,8 @@
 <script>
 import markdownDirective from '@/directives/markdown';
 import svgClose from '@/assets/svg/close.svg';
-import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: {
-    Sprite,
-  },
   directives: {
     markdown: markdownDirective,
   },

website/client/src/components/inventory/stable/hatchingModal.vue

@@ -6,10 +6,10 @@
     >
       <div class="potionEggGroup">
         <div class="potionEggBackground">
-          <Sprite :image-name="`Pet_HatchingPotion_${hatchablePet.potionKey}`" />
+          <div :class="`Pet_HatchingPotion_${hatchablePet.potionKey}`"></div>
         </div>
         <div class="potionEggBackground">
-          <Sprite :image-name="`Pet_Egg_${hatchablePet.eggKey}`" />
+          <div :class="`Pet_Egg_${hatchablePet.eggKey}`"></div>
         </div>
       </div>
       <h4 class="title">
@@ -105,7 +105,7 @@
         margin-right: 24px;
       }
 
-      img {
+      div {
         margin: 0 auto;
       }
     }
@@ -116,12 +116,8 @@
 import svgClose from '@/assets/svg/close.svg';
 
 import petMixin from '@/mixins/petMixin';
-import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: {
-    Sprite,
-  },
   mixins: [petMixin],
   props: ['hatchablePet'],
   data () {

website/client/src/components/inventory/stable/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div
+    v-mousePosition="30"
     class="row stable"
+    @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
       <filter-sidebar>
@@ -263,10 +265,43 @@
       </inventoryDrawer>
     </div>
     <hatchedPetDialog :hide-text="true" />
-    <ItemPopover
-      :dragged-item="currentDraggingFood"
-      popoverTextKey="clickOnPetToFeed"
-      translationKey="foodName" />
+    <div
+      ref="dragginFoodInfo"
+      class="foodInfo"
+    >
+      <div v-if="currentDraggingFood != null">
+        <div
+          class="food-icon"
+          :class="`Pet_Food_${currentDraggingFood.key}`"
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
+            {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="foodClickMode"
+      ref="clickFoodInfo"
+      class="foodInfo mouse"
+    >
+      <div v-if="currentDraggingFood != null">
+        <div
+          class="food-icon"
+          :class="`Pet_Food_${currentDraggingFood.key}`"
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
+            {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
+          </div>
+        </div>
+      </div>
+    </div>
     <mount-raised-modal />
     <welcome-modal />
     <hatching-modal :hatchable-pet.sync="hatchablePet" />
@@ -329,6 +364,34 @@
     margin-bottom: 0;
   }
 
+  .foodInfo {
+    position: absolute;
+    left: -500px;
+
+    z-index: 1080;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .food-icon {
+      margin: 0 auto 8px;
+      transform: scale(1.5);
+    }
+
+    .popover {
+      position: inherit;
+      width: 180px;
+    }
+
+    .popover-content {
+      color: white;
+      margin: 15px;
+      text-align: center;
+    }
+  }
+
   .hatchablePopover {
     width: 180px;
 
@@ -365,7 +428,6 @@ import _throttle from 'lodash/throttle';
 import groupBy from 'lodash/groupBy';
 import { mapState } from '@/libs/store';
 
-import ItemPopover from '@/components/inventory/itemPopover';
 import PetItem from './petItem';
 import MountItem from './mountItem.vue';
 import FoodItem from './foodItem';
@@ -378,6 +440,7 @@ import InventoryDrawer from '@/components/shared/inventoryDrawer';
 
 import ResizeDirective from '@/directives/resize.directive';
 import DragDropDirective from '@/directives/dragdrop.directive';
+import MouseMoveDirective from '@/directives/mouseposition.directive';
 
 import { createAnimal } from '@/libs/createAnimal';
 
@@ -419,11 +482,11 @@ export default {
     WelcomeModal,
     HatchingModal,
     InventoryDrawer,
-    ItemPopover,
   },
   directives: {
     resize: ResizeDirective,
     drag: DragDropDirective,
+    mousePosition: MouseMoveDirective,
   },
   mixins: [notifications, openedItemRowsMixin, petMixin, seasonalNPC],
   data () {

website/client/src/components/inventory/stable/mountItem.vue

@@ -13,11 +13,10 @@
           name="itemBadge"
           :item="item"
         ></slot>
-        <Sprite
+        <span
           class="item-content"
           :class="itemClass()"
-          :image-name="imageName()"
-        />
+        ></span>
       </div>
     </div>
     <b-popover
@@ -38,12 +37,8 @@
 import { v4 as uuid } from 'uuid';
 import { mapState } from '@/libs/store';
 import { isOwned } from '../../../libs/createAnimal';
-import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: {
-    Sprite,
-  },
   props: {
     item: {
       type: Object,
@@ -75,10 +70,7 @@ export default {
       return isOwned('mount', this.item, this.userItems);
     },
     itemClass () {
-      return this.isOwned() ? '' : 'GreyedOut';
-    },
-    imageName () {
-      return this.isOwned() ? `stable_Mount_Icon_${this.item.key}` : 'PixelPaw';
+      return this.isOwned() ? `Mount_Icon_${this.item.key}` : 'PixelPaw GreyedOut';
     },
   },
 };

website/client/src/components/inventory/stable/mountRaisedModal.vue

@@ -12,10 +12,10 @@
       </div>
       <div class="inner-content">
         <div class="pet-background">
-          <Sprite
+          <div
             class="mount"
-            :image-name="`Mount_Icon_${mount.key}`"
-          />
+            :class="`Mount_Icon_${mount.key}`"
+          ></div>
         </div>
         <h4 class="title">
           {{ mount.text() }}
@@ -82,12 +82,8 @@
 <script>
 import stable from '@/../../common/script/content/stable';
 import markdownDirective from '@/directives/markdown';
-import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: {
-    Sprite,
-  },
   directives: {
     markdown: markdownDirective,
   },

website/client/src/components/inventory/stable/petItem.vue

@@ -13,23 +13,19 @@
           name="itemBadge"
           :item="item"
         ></slot><span
-          v-if="isHatchable() && !item.isSpecial()"
+          v-if="mountOwned() && isHatchable() && !item.isSpecial()"
           class="item-content hatchAgain"
-        ><Sprite
+        ><span
           class="egg"
-          :image-name="eggClass"
-        /><Sprite
+          :class="eggClass"
+        ></span><span
           class="potion"
-          :image-name="potionClass"
-        />
-        </span>
-        <Sprite
-        v-else
+          :class="potionClass"
+        ></span></span><span
+          v-else
           class="item-content"
-          :class="itemClass()"
-          :image-name="imageName()"
-        />
-        <span
+          :class="getPetItemClass()"
+        ></span><span
           v-if="isAllowedToFeed() && progress() > 0"
           class="pet-progress-background"
         ><div
@@ -56,9 +52,9 @@
           v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })"
         ></div><div class="potionEggGroup">
           <div class="potionEggBackground">
-            <Sprite :image-name="potionClass" />
+            <div :class="potionClass"></div>
           </div><div class="potionEggBackground">
-            <Sprite :image-name="eggClass" />
+            <div :class="eggClass"></div>
           </div>
         </div>
       </div><div v-else>
@@ -122,12 +118,8 @@ import foolPet from '@/mixins/foolPet';
 import {
   isAllowedToFeed, isHatchable, isOwned, isSpecial,
 } from '../../../libs/createAnimal';
-import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: {
-    Sprite,
-  },
   mixins: [foolPet],
   props: {
     item: {
@@ -176,28 +168,22 @@ export default {
     isAllowedToFeed () {
       return isAllowedToFeed(this.item, this.userItems);
     },
-    itemClass () {
-      if (this.isOwned() || this.isHatchable()) {
-        return '';
-      }
-      return 'GreyedOut';
-    },
-    imageName () {
+    getPetItemClass () {
       if (this.isOwned() && some(
         this.currentEventList,
         event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'Fungi',
       )) {
-        if (this.isSpecial()) return `stable_${this.foolPet(this.item.key)}`;
+        if (this.isSpecial()) return `Pet ${this.foolPet(this.item.key)}`;
         const petString = `${this.item.eggKey}-${this.item.key}`;
-        return `stable_${this.foolPet(petString)}`;
+        return `Pet ${this.foolPet(petString)}`;
       }
 
       if (this.isOwned() || (this.mountOwned() && this.isHatchable())) {
-        return `stable_Pet-${this.item.key}`;
+        return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
       }
 
       if (!this.isOwned() && this.isSpecial()) {
-        return 'PixelPaw';
+        return 'GreyedOut PixelPaw';
       }
 
       if (this.isHatchable()) {
@@ -205,11 +191,11 @@ export default {
       }
 
       if (this.mountOwned()) {
-        return `stable_Pet-${this.item.key}`;
+        return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
       }
 
       // Can't hatch
-      return 'PixelPaw';
+      return 'GreyedOut PixelPaw';
     },
     progress () {
       return this.userItems.pets[this.item.key];

website/client/src/components/modifyInventory.vue

@@ -56,11 +56,11 @@
                   class="list-group-item"
                   ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]"
                 >
-                  <Sprite
+                  <div
                     class="pull-left"
-                    :imageName="'shop_' + item.key"
+                    :class="'shop_' + item.key"
                     style="margin-right: 10px"
-                  />
+                  ></div>
                   {{ item.text() }}
                   <div class="clearfix">
                     <label class="radio-inline">
@@ -330,9 +330,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <Sprite
+                  <div
                     class="pull-left"
-                    :imageName="mount.key"
+                    :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -363,9 +363,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <Sprite
+                  <div
                     class="pull-left"
-                    :imageName="mount.key"
+                    :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -396,9 +396,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <Sprite
+                  <div
                     class="pull-left"
-                    :imageName="mount.key"
+                    :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -429,9 +429,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <Sprite
+                  <div
                     class="pull-left"
-                    :imageName="mount.key"
+                    :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -503,11 +503,11 @@
                   ng-init="inv.hatchingPotions[item.key] = user.items.hatchingPotions[item.key]"
                 >
                   <div class="form-inline clearfix">
-                    <Sprite
+                    <div
                       class="pull-left"
                       :class="'Pet_HatchingPotion_' + item.key"
                       style="margin-right: 10px"
-                    />
+                    ></div>
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -565,11 +565,11 @@
                   ng-init="inv.eggs[item.key] = user.items.eggs[item.key]"
                 >
                   <div class="form-inline clearfix">
-                    <Sprite
+                    <div
                       class="pull-left"
-                      :image-name="'Pet_Egg_' + item.key"
+                      :class="'Pet_Egg_' + item.key"
                       style="margin-right: 10px"
-                     />
+                    ></div>
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -627,11 +627,11 @@
                   ng-init="inv.food[item.key] = user.items.food[item.key]"
                 >
                   <div class="form-inline clearfix">
-                    <Sprite
+                    <div
                       class="pull-left"
                       :class="'Pet_Food_' + item.key"
                       style="margin-right: 10px"
-                    />
+                    ></div>
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -690,11 +690,11 @@
                   ng-if="item.category !== 'world'"
                 >
                   <div class="form-inline clearfix">
-                    <Sprite
+                    <div
                       class="pull-left"
                       :class="'inventory_quest_scroll_' + item.key"
                       style="margin-right: 10px"
-                    />
+                    ></div>
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -730,13 +730,9 @@
 import axios from 'axios';
 
 import Content from '@/../../common/script/content';
-import Sprite from '@/components/ui/sprite.vue';
 import { mapState } from '@/libs/store';
 
 export default {
-  components: {
-    Sprite,
-  },
   data () {
     const showInv = {};
     const inv = {

website/client/src/components/payments/selectUserModal.vue

@@ -295,7 +295,7 @@ h2 {
 // import { nextTick } from 'vue'; // may not need this? I don't know!
 import debounce from 'lodash/debounce';
 import find from 'lodash/find';
-import isUUID from 'validator/es/lib/isUUID';
+import isUUID from 'validator/lib/isUUID';
 import moment from 'moment';
 import { mapState } from '@/libs/store';
 import closeIcon from '@/assets/svg/close.svg';

website/client/src/components/settings/subscription.vue

@@ -46,10 +46,10 @@
           </div>
           <div class="row">
             <div class="col-2">
-              <Sprite
-                :image-name="currentMysterySet"
+              <div
+                :class="currentMysterySet"
                 class="mt-n1"
-              />
+              ></div>
             </div>
             <div class="col-10">
               <h3> {{ $t('monthlyMysteryItems') }} </h3>
@@ -628,7 +628,6 @@ import paymentsMixin from '../../mixins/payments';
 import notificationsMixin from '../../mixins/notifications';
 
 import subscriptionOptions from './subscriptionOptions.vue';
-import Sprite from '@/components/ui/sprite';
 
 import amazonPayLogo from '@/assets/svg/amazonpay.svg';
 import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
@@ -649,7 +648,6 @@ import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
 export default {
   components: {
     subscriptionOptions,
-    Sprite,
   },
   mixins: [paymentsMixin, notificationsMixin],
   data () {

website/client/src/components/shops/buyModal.vue

@@ -534,7 +534,7 @@
         color: $white;
         height: 2rem;
         line-height: 16px;
-        margin: 24px auto -24px;
+        margin: auto -1rem -1rem;
       }
 
     .gems-left {
@@ -715,12 +715,6 @@ export default {
       if (this.item.notes instanceof Function) {
         return this.item.notes();
       }
-      if (this.item.items) {
-        if (this.item.items[0].notes instanceof Function) {
-          return this.item.items[0].notes();
-        }
-        return this.item.items[0].notes;
-      }
       return this.item.notes;
     },
     gemsLeft () {
@@ -847,7 +841,7 @@ export default {
         }
         if (this.genericPurchase) {
           this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
-          await this.purchased(this.item.text);
+          this.purchased(this.item.text);
         }
       }
 

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

@@ -109,7 +109,6 @@
 </style>
 
 <script>
-import find from 'lodash/find';
 import shops from '@/../../common/script/libs/shops';
 import throttle from 'lodash/throttle';
 import { mapState } from '@/libs/store';
@@ -146,16 +145,9 @@ export default {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
     imageURLs () {
-      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
-      if (!currentEvent) {
-        return {
-          background: 'url(/static/npc/normal/customizations_background.png)',
-          npc: 'url(/static/npc/normal/customizations_npc.png)',
-        };
-      }
       return {
-        background: `url(/static/npc/${currentEvent.season}/customizations_background.png)`,
-        npc: `url(/static/npc/${currentEvent.season}/customizations_npc.png)`,
+        background: 'url(/static/npc/normal/customizations_background.png)',
+        npc: 'url(/static/npc/normal/customizations_npc.png)',
       };
     },
     categories () {

website/client/src/components/shops/itemWithLabel.vue

@@ -17,10 +17,10 @@
           :emptyItem="emptyItem"
         ></slot>
         <div class="image">
-          <Sprite
+          <div
             v-once
-            :image-name="item.class"
-          />
+            :class="item.class"
+          ></div>
           <slot
             name="itemImage"
             :item="item"
@@ -157,11 +157,9 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
-import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
-    Sprite,
   },
   props: {
     item: {

website/client/src/components/shops/market/keysToKennel.vue

@@ -38,6 +38,26 @@
   }
 </style>
 
+<style>
+  .key_to_pets {
+    background-image: url('~@/assets/images/keys/key-to-the-pet-kennels.png');
+    width: 68px;
+    height: 68px;
+  }
+
+  .key_to_mounts {
+    background-image: url('~@/assets/images/keys/key-to-the-mount-kennels.png');
+    width: 68px;
+    height: 68px;
+  }
+
+  .key_to_both {
+    background-image: url('~@/assets/images/keys/keys-to-the-kennels.png');
+    width: 68px;
+    height: 68px;
+  }
+</style>
+
 <script>
 import { beastCount, mountMasterProgress } from '@/../../common/script/count';
 import { mapState } from '@/libs/store';

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -28,12 +28,6 @@
           :item="item"
           :abbreviated="true"
         />
-        <div
-          v-if="item.addlNotes"
-          class="mx-4 mb-3"
-        >
-          {{ item.addlNotes }}
-        </div>
         <quest-rewards :quest="item" />
         <div
           v-if="!item.locked"
@@ -58,6 +52,12 @@
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
+          <div
+            v-if="item.addlNotes"
+            class="mb-3"
+          >
+            {{ item.addlNotes }}
+          </div>
           <div>
             <number-increment
               @updateQuantity="selectedAmountToBuy = $event"
@@ -82,7 +82,7 @@
           v-if="priceType === 'gems'
             && !enoughCurrency(priceType, item.value * selectedAmountToBuy)
             && !item.locked"
-          class="btn btn-primary mb-3"
+          class="btn btn-primary"
           @click="purchaseGems()"
         >
           {{ $t('purchaseGems') }}
@@ -177,6 +177,7 @@
 
     .inner-content {
       margin: 33px auto auto;
+      padding: 0px 24px;
     }
 
     .item-notes {
@@ -232,6 +233,8 @@
     }
 
     .purchase-amount {
+      margin-top: 24px;
+
       .how-many-to-buy {
         margin-bottom: 16px;
       }
@@ -498,6 +501,38 @@ export default {
     hideDialog () {
       this.$root.$emit('bv::hide::modal', 'buy-quest-modal');
     },
+    getDropIcon (drop) {
+      switch (drop.type) {
+        case 'gear':
+          return `shop_${drop.key}`;
+        case 'hatchingPotions':
+          return `Pet_HatchingPotion_${drop.key}`;
+        case 'food':
+          return `Pet_Food_${drop.key}`;
+        case 'eggs':
+          return `Pet_Egg_${drop.key}`;
+        case 'quests':
+          return `inventory_quest_scroll_${drop.key}`;
+        default:
+          return '';
+      }
+    },
+    getDropName (drop) {
+      switch (drop.type) {
+        case 'gear':
+          return this.content.gear.flat[drop.key].text();
+        case 'quests':
+          return this.content.quests[drop.key].text();
+        case 'hatchingPotions':
+          return this.$t('namedHatchingPotion', { type: this.content.hatchingPotions[drop.key].text() });
+        case 'food':
+          return this.content.food[drop.key].text();
+        case 'eggs':
+          return this.content.eggs[drop.key].text();
+        default:
+          return `Unknown type: ${drop.type}`;
+      }
+    },
     purchaseGems () {
       this.$root.$emit('bv::show::modal', 'buy-gems');
     },

website/client/src/components/shops/quests/quest-helper.mixin.js

@@ -19,9 +19,9 @@ export const QuestHelperMixin = {
         case 'quests':
           return `inventory_quest_scroll_${drop.key}`;
         case 'mounts':
-          return `Mount_Icon_${drop.key}`;
+          return `rewards_mount Mount_Icon_${drop.key}`;
         case 'pets':
-          return `stable_Pet-${drop.key}`;
+          return `rewards_pet Pet-${drop.key}`;
         default:
           return `shop_${drop.key}`;
       }

website/client/src/components/shops/quests/questDialogContent.vue

@@ -2,7 +2,7 @@
   <div class="quest-content">
     <div
       class="quest-image"
-      :class="item.purchaseType === 'bundles' ? `quest_bundle_${item.key}` : `quest_${item.key}`"
+      :class="'quest_' + item.key"
     ></div>
     <h3 class="text-center">
       {{ itemText }}
@@ -17,7 +17,7 @@
       <user-label :user="leader" />
     </div>
     <div
-      class="mx-4"
+      class="text"
       v-html="itemNotes"
     ></div>
     <questInfo
@@ -42,6 +42,12 @@
     margin-top: 24px;
   }
 
+  .text {
+    margin: 16px 16px;
+    overflow-y: auto;
+    text-overflow: ellipsis;
+  }
+
   .leader-label {
     font-size: 14px;
     font-weight: bold;

website/client/src/components/shops/quests/questInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="row mt-3"
+      class="row"
     >
       <div
         v-if="quest.collect"
@@ -25,10 +25,7 @@
         <dt>{{ $t('bossHP') + ':' }}</dt>
         <dd>{{ quest.boss.hp }}</dd>
       </div>
-      <div
-        class="table-row"
-        v-if="quest.purchaseType !== 'bundles'"
-      >
+      <div class="table-row">
         <dt>{{ $t('difficulty') + ':' }}</dt>
         <dd>
           <div
@@ -42,6 +39,7 @@
     </div>
     <div
       v-if="quest.end && !abbreviated"
+      class="m-auto"
     >
       {{ limitedString }}
     </div>

website/client/src/components/shops/quests/questRewards.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="quest.drop"
-    class="quest-rewards mb-3"
+    class="quest-rewards"
   >
     <div
       class="header d-flex align-items-center"
@@ -39,7 +39,7 @@
         label-class="purple"
       >
         <div slot="itemImage">
-          <Sprite :image-name="getDropIcon(drop)" />
+          <div :class="getDropIcon(drop)"></div>
         </div>
         <div slot="popoverContent">
           <quest-popover :item="drop" />
@@ -92,7 +92,7 @@
           :count="drop.amount"
         />
         <div slot="itemImage">
-          <Sprite :image-name="getDropIcon(drop)" />
+          <div :class="getDropIcon(drop)"></div>
         </div>
         <div slot="popoverContent">
           <equipmentAttributesPopover
@@ -133,7 +133,6 @@ import { QuestHelperMixin } from './quest-helper.mixin';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
 import QuestPopover from './questPopover';
 import CountBadge from '../../ui/countBadge';
-import Sprite from '../../ui/sprite';
 
 export default {
   components: {
@@ -142,7 +141,6 @@ export default {
     ItemWithLabel,
     SectionButton,
     EquipmentAttributesPopover,
-    Sprite,
   },
   mixins: [QuestHelperMixin],
   props: ['quest'],

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

@@ -480,7 +480,7 @@ export default {
     });
 
     await this.triggerGetWorldState();
-    this.currentEvent = _find(this.currentEventList, event => Boolean(event.season));
+    this.currentEvent = _find(this.currentEventList, event => Boolean(['winter', 'spring', 'summer', 'fall'].includes(event.season)));
     this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_background.png)`;
     this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_npc.png)`;
   },

website/client/src/components/shops/shopItem.vue

@@ -41,10 +41,10 @@
           class="suggestedDot"
         ></span>
         <div class="image">
-          <Sprite
+          <div
             v-once
-            :image-name="item.class"
-          />
+            :class="item.class"
+          ></div>
           <slot
             name="itemImage"
             :item="item"
@@ -281,13 +281,11 @@ import svgClock from '@/assets/svg/clock.svg';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
 
 import QuestInfo from './quests/questInfo.vue';
-import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
     EquipmentAttributesPopover,
     QuestInfo,
-    Sprite,
   },
   props: {
     item: {

website/client/src/components/snackbars/notification.vue

@@ -8,10 +8,10 @@
         v-if="notification.type === 'drop'"
         class="icon-item"
       >
-        <Sprite
-          :image-name="notification.icon"
+        <div
+          :class="notification.icon"
           class="icon-negative-margin"
-        />
+        ></div>
       </div>
 
       <div
@@ -231,13 +231,9 @@ import star from '@/assets/svg/star.svg';
 import mana from '@/assets/svg/mana.svg';
 import sword from '@/assets/svg/sword.svg';
 import CloseIcon from '../shared/closeIcon';
-import Sprite from '@/components/ui/sprite';
 
 export default {
-  components: {
-    CloseIcon,
-    Sprite,
-  },
+  components: { CloseIcon },
   props: ['notification', 'visibleAmount'],
   data () {
     return {

website/client/src/components/snackbars/notifications.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="notifications"
+    :class="notificationsTopPosClass"
     :style="{'--current-scrollY': notificationTopY}"
   >
     <transition-group
@@ -103,6 +104,7 @@ export default {
   computed: {
     ...mapState({
       notificationStore: 'notificationStore',
+      userSleeping: 'user.data.preferences.sleep',
       currentEventList: 'worldState.data.currentEventList',
     }),
     currentEvent () {
@@ -111,6 +113,18 @@ export default {
     isEventActive () {
       return Boolean(this.currentEvent?.event);
     },
+    notificationsTopPosClass () {
+      const base = 'notifications-top-pos-';
+      let modifier = '';
+
+      if (this.userSleeping) {
+        modifier = 'sleeping';
+      } else {
+        modifier = 'normal';
+      }
+
+      return `${base}${modifier} scroll-${this.scrollY}`;
+    },
     notificationBannerHeight () {
       let scrollPosToCheck = 56;
 

website/client/src/components/static/header.vue

@@ -139,6 +139,13 @@
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
+  @media only screen and (max-width : 750px) {
+    .login-button {
+      margin: 0 auto !important;
+      margin-top: 18px !important;
+    }
+  }
+
   .habitica-logo {
     height: 64px;
     margin: 28px auto 0px auto;
@@ -158,7 +165,7 @@
 
   nav.navbar {
     background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right no-repeat;
-    padding-left: 24px;
+    padding-left: 25px;
     padding-right: 12.5px;
     height: 56px;
     box-shadow: 0 1px 2px 0 rgba($black, 0.24);
@@ -258,16 +265,6 @@
       }
     }
   }
-
-  @media only screen and (max-width : 750px) {
-    .login-button {
-      margin: 0 auto !important;
-      margin-top: 18px !important;
-    }
-    .habitica-logo {
-      margin: 4px auto 0px auto;
-    }
-  }
 </style>
 
 <script>

website/client/src/components/static/home.vue

@@ -781,7 +781,7 @@
 <script>
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/es/lib/isEmail';
+import isEmail from 'validator/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
 import googlePlay from '@/assets/images/home/google-play-badge.svg';

website/client/src/components/tasks/spells.vue

@@ -8,10 +8,10 @@
       <div class="spell">
         <div class="spell-border">
           <div class="mana">
-            <Sprite
-            class="img"
-              :imageName="`shop_${spell.key}`"
-            />
+            <div
+              class="img"
+              :class="`shop_${spell.key} shop-sprite item-img`"
+            ></div>
           </div>
         </div>
         <div class="details">
@@ -75,9 +75,10 @@
                   class="spell"
                 >
                   <div class="details">
-                    <Sprite
-              :imageName="`shop_${skill.key}`"
-            />
+                    <div
+                      class="img"
+                      :class="`shop_${skill.key} shop-sprite item-img`"
+                    ></div>
                   </div>
                   <div
                     v-if="user.stats.lvl < skill.lvl"
@@ -400,12 +401,10 @@ import {
   setLocalSetting,
   getLocalSetting,
 } from '@/libs/userlocalManager';
-import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
     Drawer,
-    Sprite,
   },
   directives: {
     mousePosition: MouseMoveDirective,

website/client/src/components/ui/loadingSpinner.vue

@@ -2,7 +2,6 @@
   <div
     v-once
     class="loading-spinner"
-    :class="{'loading-spinner-purple': darkColor}"
     role="text"
     :aria-label="$t('loading')"
   >
@@ -40,10 +39,6 @@
     border-color: $white transparent transparent transparent;
   }
 
-  .loading-spinner-purple div {
-    border-color: $purple-200 transparent transparent transparent;
-  }
-
   .loading-spinner div:nth-child(1) {
     animation-delay: -0.45s;
   }
@@ -63,16 +58,3 @@
     }
   }
 </style>
-
-<script>
-
-export default {
-  props: {
-    darkColor: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-
-</script>