4.147.1

chore(news): Bailey
fix(sorting): remove leading article from umbrella
2026-05-12 11:39:44 -05:00 · 2020-07-01 16:36:57 -05:00 · 2020-07-01 16:36:51 -05:00 · 2020-06-30 11:55:01 -05:00 · 2020-06-29 15:15:28 -05:00 · 2020-06-29 15:15:19 -05:00
515 changed files with 38027 additions and 36494 deletions
@@ -13,8 +13,3 @@ Habitica uses [this Google form](https://docs.google.com/forms/d/e/1FAIpQLScPhrw
 # Contributing Code

 See [Contributing to Habitica](http://habitica.fandom.com/wiki/Contributing_to_Habitica#Coders_.28Web_.26_Mobile.29)
-
-## Issue Triage [![Open Source Helpers](https://www.codetriage.com/habitrpg/habitica/badges/users.svg)](https://www.codetriage.com/habitrpg/habitica)
-
-You can triage issues which may include reproducing bug reports or asking for vital information, such as version numbers or reproduction instructions. If you would like to start triaging issues, one easy way to get started is to [subscribe to habitrpg on CodeTriage](https://www.codetriage.com/habitrpg/habitica).
-
@@ -118,7 +118,7 @@ jobs:
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: sudo docker run --name mongo -d -p 27017:27017 mongo
+    - run: sudo docker run --name mongo -d -p 27017:27017 mongo:4.2
    - run: cp config.json.example config.json
    - name: npm install
      run: |
@@ -141,7 +141,7 @@ jobs:
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: sudo docker run --name mongo -d -p 27017:27017 mongo
+    - run: sudo docker run --name mongo -d -p 27017:27017 mongo:4.2
    - run: cp config.json.example config.json
    - name: npm install
      run: |
@@ -164,7 +164,7 @@ jobs:
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: sudo docker run --name mongo -d -p 27017:27017 mongo
+    - run: sudo docker run --name mongo -d -p 27017:27017 mongo:4.2
    - run: cp config.json.example config.json
    - name: npm install
      run: |
@@ -1,4 +1,4 @@
-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) [![Open Source Helpers](https://www.codetriage.com/habitrpg/habitica/badges/users.svg)](https://www.codetriage.com/habitrpg/habitica)
+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 which treats your life like a Role Playing Game. Level up as you succeed, lose HP as you fail, earn money to buy weapons and armor.
@@ -160,7 +160,7 @@ gulp.task('test:content:safe', gulp.series('test:prepare:build', cb => {
  pipe(runner);
 }));

-gulp.task('test:api:unit', done => {
+gulp.task('test:api:unit:run', done => {
  const runner = exec(
    testBin('istanbul cover --dir coverage/api-unit node_modules/mocha/bin/_mocha -- test/api/unit --recursive --require ./test/helpers/start-server'),
    err => {
@@ -174,7 +174,7 @@ gulp.task('test:api:unit', done => {
  pipe(runner);
 });

-gulp.task('test:api:unit:watch', () => gulp.watch(['website/server/libs/*', 'test/api/unit/**/*', 'website/server/controllers/**/*'], gulp.series('test:api:unit', done => done())));
+gulp.task('test:api:unit:watch', () => gulp.watch(['website/server/libs/*', 'test/api/unit/**/*', 'website/server/controllers/**/*'], gulp.series('test:api:unit:run', done => done())));

 gulp.task('test:api-v3:integration', done => {
  const runner = exec(
@@ -235,14 +235,22 @@ gulp.task('test', gulp.series(
  'test:sanity',
  'test:content',
  'test:common',
-  'test:api:unit',
+  'test:prepare:mongo',
+  'test:api:unit:run',
  'test:api-v3:integration',
  'test:api-v4:integration',
  done => done(),
 ));

 gulp.task('test:api-v3', gulp.series(
-  'test:api:unit',
+  'test:prepare:mongo',
+  'test:api:unit:run',
  'test:api-v3:integration',
  done => done(),
 ));
+
+gulp.task('test:api:unit', gulp.series(
+  'test:prepare:mongo',
+  'test:api:unit:run',
+  done => done(),
+));
@@ -45,7 +45,7 @@ async function fixGroupPlanMembers () {
    pause();
    groupPlanCount += 1;

-    const canonicalMemberCount = await dbUsers.count(
+    const canonicalMemberCount = await dbUsers.countDocuments(
      {
        $or:
          [
@@ -1,13 +1,13 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.143.1",
+  "version": "4.147.1",
  "main": "./website/server/index.js",
  "dependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/register": "^7.9.0",
-    "@google-cloud/trace-agent": "^4.2.5",
+    "@babel/core": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/register": "^7.10.3",
+    "@google-cloud/trace-agent": "^5.1.0",
    "@slack/client": "^4.12.0",
    "accepts": "^1.3.5",
    "amazon-payments": "^0.2.8",
@@ -15,7 +15,7 @@
    "apidoc": "^0.17.5",
    "apn": "^2.2.0",
    "apple-auth": "^1.0.6",
-    "bcrypt": "^3.0.8",
+    "bcrypt": "^5.0.0",
    "body-parser": "^1.18.3",
    "compression": "^1.7.4",
    "cookie-session": "^1.4.0",
@@ -30,31 +30,32 @@
    "express-basic-auth": "^1.1.5",
    "express-validator": "^5.2.0",
    "glob": "^7.1.6",
-    "got": "^10.7.0",
+    "got": "^11.3.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
-    "gulp-imagemin": "^6.2.0",
+    "gulp-imagemin": "^7.1.0",
    "gulp-nodemon": "^2.5.0",
    "gulp.spritesmith": "^6.9.0",
-    "habitica-markdown": "^2.0.0",
-    "helmet": "^3.22.0",
+    "habitica-markdown": "^2.0.2",
+    "helmet": "^3.23.1",
    "image-size": "^0.8.3",
    "in-app-purchase": "^1.11.3",
    "js2xmlparser": "^4.0.1",
    "jsonwebtoken": "^8.5.1",
-    "jwks-rsa": "^1.8.0",
+    "jwks-rsa": "^1.8.1",
    "lodash": "^4.17.15",
    "merge-stream": "^2.0.0",
    "method-override": "^3.0.0",
-    "moment": "^2.26.0",
+    "moment": "^2.27.0",
    "moment-recur": "^1.0.7",
-    "mongoose": "^5.9.15",
+    "mongoose": "^5.9.19",
    "morgan": "^1.10.0",
    "nconf": "^0.10.0",
    "node-gcm": "^1.0.2",
    "on-headers": "^1.0.2",
    "passport": "^0.4.1",
    "passport-facebook": "^3.0.0",
+    "passport-google-oauth2": "^0.2.0",
    "passport-google-oauth20": "1.0.0",
    "paypal-ipn": "3.0.0",
    "paypal-rest-sdk": "^1.8.1",
@@ -67,10 +68,10 @@
    "superagent": "^5.2.2",
    "universal-analytics": "^0.4.17",
    "useragent": "^2.1.9",
-    "uuid": "^3.4.0",
-    "validator": "^11.0.0",
+    "uuid": "^8.1.0",
+    "validator": "^13.1.1",
    "vinyl-buffer": "^1.0.1",
-    "winston": "^3.2.1",
+    "winston": "^3.3.0",
    "winston-loggly-bulk": "^3.1.0",
    "xml2js": "^0.4.23"
  },
@@ -108,13 +109,13 @@
    "axios": "^0.19.2",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
-    "chalk": "^3.0.0",
+    "chalk": "^4.1.0",
    "expect.js": "^0.3.1",
    "istanbul": "^1.1.0-alpha.1",
    "mocha": "^5.1.1",
    "monk": "^7.3.0",
    "require-again": "^2.0.0",
-    "sinon": "^7.2.4",
+    "sinon": "^9.0.2",
    "sinon-chai": "^3.5.0",
    "sinon-stub-promise": "^4.0.0"
  },
@@ -1,4 +1,5 @@
 import mongoose from 'mongoose';
+
 import highlightMentions from '../../../../website/server/libs/highlightMentions';

 describe('highlightMentions', () => {
@@ -101,12 +102,28 @@ describe('highlightMentions', () => {
      expect(result[0]).to.equal('http://www.medium.com/@user/blog [@user](/profile/111)');
    });

+    // https://spec.commonmark.org/0.29/#example-483
+    it('doesn\'t highlight user in a link without url', async () => {
+      const text = '[@user2]()';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
    // https://github.com/HabitRPG/habitica/issues/12217
    it('doesn\'t highlight user in link with url-escapable characters', async () => {
      const text = '[test](https://habitica.fandom.com/ru/@wiki/Снаряжение)';
      const result = await highlightMentions(text);
      expect(result[0]).to.equal(text);
    });
+
+    // https://github.com/HabitRPG/habitica/issues/12223
+    it('matches a link in between two the same links', async () => {
+      const text = '[here](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)\n@user\n[hier](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)';
+
+      const result = await highlightMentions(text);
+
+      expect(result[0]).to.equal('[here](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)\n[@user](/profile/111)\n[hier](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)');
+    });
  });

  describe('exceptions in code blocks', () => {
@@ -149,14 +166,6 @@ describe('highlightMentions', () => {

      expect(result[0]).to.equal('[@user](/profile/111) `@user`');
    });
-
-    it('matches a link in between two the same links', async () => {
-      const text = '[here](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)\n@user\n[hier](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)';
-
-      const result = await highlightMentions(text);
-
-      expect(result[0]).to.equal('[here](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)\n[@user](/profile/111)\n[hier](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)');
-    });
  });

  it('github issue 12118, method crashes when square brackets are used', async () => {
@@ -1,5 +1,3 @@
-import uuid from 'uuid';
-
 import {
  generateGroup,
 } from '../../../../../helpers/api-unit.helper';
@@ -7,6 +5,8 @@ import { model as User } from '../../../../../../website/server/models/user';
 import { model as Group } from '../../../../../../website/server/models/group';
 import amzLib from '../../../../../../website/server/libs/payments/amazon';
 import payments from '../../../../../../website/server/libs/payments/payments';
+import common from '../../../../../../website/common';
+

 describe('#upgradeGroupPlan', () => {
  let spy; let data; let user; let group; let
@@ -41,7 +41,7 @@ describe('#upgradeGroupPlan', () => {
    spy.resolves([]);

    uuidString = 'uuid-v4';
-    sinon.stub(uuid, 'v4').returns(uuidString);
+    sinon.stub(common, 'uuid').returns(uuidString);

    data.groupId = group._id;
    data.sub.quantity = 3;
@@ -49,7 +49,7 @@ describe('#upgradeGroupPlan', () => {

  afterEach(() => {
    amzLib.authorizeOnBillingAgreement.restore();
-    uuid.v4.restore();
+    common.uuid.restore();
  });

  it('charges for a new member', async () => {
@@ -16,6 +16,8 @@ describe('common.fns.randomDrop', () => {
    user = generateUser();
    user._tmp = user._tmp ? user._tmp : {};
    user.items.eggs.Wolf = 0;
+    user.items.food.Meat = 0;
+    user._id = `a${user._id.slice(1)}`;
    task = generateTodo({ userId: user._id });
    predictableRandom = sandbox.stub().returns(0.5);
  });
@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import unlock from '../../../website/common/script/ops/unlock';
 import i18n from '../../../website/common/script/i18n';
 import { generateUser } from '../../helpers/common.helper';
@@ -8,8 +9,10 @@ describe('shared.ops.unlock', () => {
  const unlockPath = 'shirt.convict,shirt.cross,shirt.fire,shirt.horizon,shirt.ocean,shirt.purple,shirt.rainbow,shirt.redblue,shirt.thunder,shirt.tropical,shirt.zombie';
  const unlockGearSetPath = 'items.gear.owned.headAccessory_special_bearEars,items.gear.owned.headAccessory_special_cactusEars,items.gear.owned.headAccessory_special_foxEars,items.gear.owned.headAccessory_special_lionEars,items.gear.owned.headAccessory_special_pandaEars,items.gear.owned.headAccessory_special_pigEars,items.gear.owned.headAccessory_special_tigerEars,items.gear.owned.headAccessory_special_wolfEars';
  const backgroundUnlockPath = 'background.giant_florals';
-  const unlockCost = 1.25;
-  const usersStartingGems = 5;
+  const backgroundSetUnlockPath = 'background.archery_range,background.giant_florals,background.rainbows_end';
+  const hairUnlockPath = 'hair.color.rainbow,hair.color.yellow,hair.color.green,hair.color.purple,hair.color.blue,hair.color.TRUred';
+  const facialHairUnlockPath = 'hair.mustache.1,hair.mustache.2,hair.beard.1,hair.beard.2,hair.beard.3';
+  const usersStartingGems = 50 / 4;

  beforeEach(() => {
    user = generateUser();
@@ -48,32 +51,100 @@ describe('shared.ops.unlock', () => {
  });

  it('returns an error when user already owns a full set', done => {
+    let expectedBalance;
+
    try {
      unlock(user, { query: { path: unlockPath } });
+      expectedBalance = user.balance;
      unlock(user, { query: { path: unlockPath } });
    } catch (err) {
      expect(err).to.be.an.instanceof(NotAuthorized);
      expect(err.message).to.equal(i18n.t('alreadyUnlocked'));
-      expect(user.balance).to.equal(3.75);
+      expect(user.balance).to.equal(expectedBalance);
      done();
    }
  });

  it('returns an error when user already owns a full set of gear', done => {
+    let expectedBalance;
+
    try {
      unlock(user, { query: { path: unlockGearSetPath } });
+      expectedBalance = user.balance;
      unlock(user, { query: { path: unlockGearSetPath } });
    } catch (err) {
      expect(err).to.be.an.instanceof(NotAuthorized);
      expect(err.message).to.equal(i18n.t('alreadyUnlocked'));
-      expect(user.balance).to.equal(3.75);
+      expect(user.balance).to.equal(expectedBalance);
      done();
    }
  });

-  xit('returns an error when user already owns items in a full set', done => {
+  it('returns an error if an item does not exists', done => {
    try {
-      unlock(user, { query: { path: unlockPath.split(',').splice(2).join(',') } });
+      unlock(user, { query: { path: 'background.invalid_background' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if there are items from multiple sets', done => {
+    try {
+      unlock(user, { query: { path: 'shirt.convict,skin.0ff591' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if gear is not from the animal set', done => {
+    try {
+      unlock(user, { query: { path: 'items.gear.owned.back_mystery_202004' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if the item is free', done => {
+    try {
+      unlock(user, { query: { path: 'shirt.black' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if an item does not belong to a set (appearances)', done => {
+    try {
+      unlock(user, { query: { path: 'shirt.pink' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error when user already owns items in a full set and it would be more expensive to buy the entire set', done => {
+    try {
+      // There are 11 shirts in the set, each cost 2 gems, the full set 5 gems
+      // In order for the full purchase not to be worth, we must own 9
+      const partialUnlockPaths = unlockPath.split(',');
+      unlock(user, { query: { path: partialUnlockPaths[0] } });
+      unlock(user, { query: { path: partialUnlockPaths[1] } });
+      unlock(user, { query: { path: partialUnlockPaths[2] } });
+      unlock(user, { query: { path: partialUnlockPaths[3] } });
+      unlock(user, { query: { path: partialUnlockPaths[4] } });
+      unlock(user, { query: { path: partialUnlockPaths[5] } });
+      unlock(user, { query: { path: partialUnlockPaths[6] } });
+      unlock(user, { query: { path: partialUnlockPaths[7] } });
+      unlock(user, { query: { path: partialUnlockPaths[8] } });
+
      unlock(user, { query: { path: unlockPath } });
    } catch (err) {
      expect(err).to.be.an.instanceof(NotAuthorized);
@@ -82,6 +153,22 @@ describe('shared.ops.unlock', () => {
    }
  });

+  it('does not return an error when user already owns items in a full set and it would not be more expensive to buy the entire set', () => {
+    // There are 11 shirts in the set, each cost 2 gems, the full set 5 gems
+    // In order for the full purchase to be worth, we can own already 8
+    const partialUnlockPaths = unlockPath.split(',');
+    unlock(user, { query: { path: partialUnlockPaths[0] } });
+    unlock(user, { query: { path: partialUnlockPaths[1] } });
+    unlock(user, { query: { path: partialUnlockPaths[2] } });
+    unlock(user, { query: { path: partialUnlockPaths[3] } });
+    unlock(user, { query: { path: partialUnlockPaths[4] } });
+    unlock(user, { query: { path: partialUnlockPaths[5] } });
+    unlock(user, { query: { path: partialUnlockPaths[6] } });
+    unlock(user, { query: { path: partialUnlockPaths[7] } });
+
+    unlock(user, { query: { path: unlockPath } });
+  });
+
  it('equips an item already owned', () => {
    expect(user.purchased.background.giant_florals).to.not.exist;

@@ -107,31 +194,143 @@ describe('shared.ops.unlock', () => {
    expect(user.preferences.background).to.equal('');
  });

-  it('unlocks a full set', () => {
+  it('unlocks a full set of appearance items', () => {
+    const initialShirts = Object.keys(user.purchased.shirt).length;
    const [, message] = unlock(user, { query: { path: unlockPath } });

    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.purchased.shirt.convict).to.be.true;
+    const individualPaths = unlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.shirt).length)
+      .to.equal(initialShirts + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
+  });
+
+  it('unlocks a full set of hair items', () => {
+    user.purchased.hair.color = {};
+
+    const initialHairColors = Object.keys(user.purchased.hair.color).length;
+    const [, message] = unlock(user, { query: { path: hairUnlockPath } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    const individualPaths = hairUnlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.hair.color).length)
+      .to.equal(initialHairColors + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
+  });
+
+  it('unlocks the facial hair set', () => {
+    user.purchased.hair.mustache = {};
+    user.purchased.hair.beard = {};
+
+    const initialMustache = Object.keys(user.purchased.hair.mustache).length;
+    const initialBeard = Object.keys(user.purchased.hair.mustache).length;
+    const [, message] = unlock(user, { query: { path: facialHairUnlockPath } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    const individualPaths = facialHairUnlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.hair.mustache).length + Object.keys(user.purchased.hair.beard).length) // eslint-disable-line max-len
+      .to.equal(initialMustache + initialBeard + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
  });

  it('unlocks a full set of gear', () => {
+    const initialGear = Object.keys(user.items.gear.owned).length;
    const [, message] = unlock(user, { query: { path: unlockGearSetPath } });

    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.items.gear.owned.headAccessory_special_wolfEars).to.be.true;
+
+    const individualPaths = unlockGearSetPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user, path)).to.be.true;
+    });
+    expect(Object.keys(user.items.gear.owned).length)
+      .to.equal(initialGear + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
  });

-  it('unlocks an item', () => {
+  it('unlocks a full set of backgrounds', () => {
+    const initialBackgrounds = Object.keys(user.purchased.background).length;
+    const [, message] = unlock(user, { query: { path: backgroundSetUnlockPath } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    const individualPaths = backgroundSetUnlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.background).length)
+      .to.equal(initialBackgrounds + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 3.75);
+  });
+
+  it('unlocks an item (appearance)', () => {
+    const path = unlockPath.split(',')[0];
+    const initialShirts = Object.keys(user.purchased.shirt).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    expect(Object.keys(user.purchased.shirt).length).to.equal(initialShirts + 1);
+    expect(get(user.purchased, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (hair color)', () => {
+    user.purchased.hair.color = {};
+
+    const path = hairUnlockPath.split(',')[0];
+    const initialColorHair = Object.keys(user.purchased.hair.color).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    expect(Object.keys(user.purchased.hair.color).length).to.equal(initialColorHair + 1);
+    expect(get(user.purchased, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (facial hair)', () => {
+    user.purchased.hair.mustache = {};
+    user.purchased.hair.beard = {};
+
+    const path = facialHairUnlockPath.split(',')[0];
+    const initialMustache = Object.keys(user.purchased.hair.mustache).length;
+    const initialBeard = Object.keys(user.purchased.hair.beard).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+
+    expect(Object.keys(user.purchased.hair.mustache).length).to.equal(initialMustache + 1);
+    expect(Object.keys(user.purchased.hair.beard).length).to.equal(initialBeard);
+
+    expect(get(user.purchased, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (gear)', () => {
+    const path = unlockGearSetPath.split(',')[0];
+    const initialGear = Object.keys(user.items.gear.owned).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    expect(Object.keys(user.items.gear.owned).length).to.equal(initialGear + 1);
+    expect(get(user, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (background)', () => {
+    const initialBackgrounds = Object.keys(user.purchased.background).length;
    const [, message] = unlock(user, { query: { path: backgroundUnlockPath } });

    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.purchased.background.giant_florals).to.be.true;
-  });
-
-  it('reduces a user\'s balance', () => {
-    const [, message] = unlock(user, { query: { path: unlockPath } });
-
-    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.balance).to.equal(usersStartingGems - unlockCost);
+    expect(Object.keys(user.purchased.background).length).to.equal(initialBackgrounds + 1);
+    expect(get(user.purchased, backgroundUnlockPath)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 1.75);
  });
 });
@@ -1,5 +1,5 @@
 import express from 'express';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import bodyParser from 'body-parser';

 const app = express();
@@ -30,7 +30,7 @@ app.post('/webhooks/:id', (req, res) => {
 // See http://stackoverflow.com/a/37054753/2601552
 const sockets = {};
 server.on('connection', socket => {
-  const id = uuid.v4();
+  const id = uuid();
  sockets[id] = socket;

  socket.once('close', () => {
@@ -31,14 +31,22 @@ import '../../src/assets/css/sprites/spritesmith-main-24.css';
 import '../../src/assets/css/sprites/spritesmith-main-25.css';
 import '../../src/assets/css/sprites/spritesmith-main-26.css';
 import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';

+// couldn't inject the languages easily,
+// so just a "$t()"  string to show that this will be translated
+Vue.prototype.$t = function translateString (...args) {
+  return `$t(${JSON.stringify(args)})`;
+};
+
+Vue.use(BootstrapVue);
+Vue.use(StoreModule);
+
 const req = require.context('../../src', true, /.stories.js$/);

 function loadStories () {
  req.keys().forEach(filename => req(filename));
 }

-Vue.use(StoreModule);
-
 configure(loadStories, module);
@@ -5,12 +5,12 @@
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
    "lint": "vue-cli-service lint .",
    "lint-no-fix": "vue-cli-service lint --no-fix .",
    "postinstall": "node ./scripts/npm-postinstall.js",
    "storybook:build": "vue-cli-service storybook:build -c config/storybook -o dist/storybook",
-    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js"
+    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
  },
  "dependencies": {
    "@storybook/addon-actions": "^5.3.19",
@@ -18,13 +18,13 @@
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/vue": "^5.3.19",
-    "@vue/cli-plugin-babel": "^4.3.1",
-    "@vue/cli-plugin-eslint": "^4.3.1",
-    "@vue/cli-plugin-router": "^4.3.1",
-    "@vue/cli-plugin-unit-mocha": "^4.3.1",
-    "@vue/cli-service": "^4.3.1",
+    "@vue/cli-plugin-babel": "^4.4.4",
+    "@vue/cli-plugin-eslint": "^4.4.4",
+    "@vue/cli-plugin-router": "^4.4.4",
+    "@vue/cli-plugin-unit-mocha": "^4.4.4",
+    "@vue/cli-service": "^4.4.4",
    "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^5.11.0",
+    "amplitude-js": "^6.2.0",
    "axios": "^0.19.2",
    "axios-progress-bar": "^1.2.0",
    "babel-eslint": "^10.1.0",
@@ -36,27 +36,27 @@
    "eslint-config-habitrpg": "^6.2.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-vue": "^6.2.2",
-    "habitica-markdown": "^2.0.0",
+    "habitica-markdown": "^2.0.2",
    "hellojs": "^1.18.4",
    "inspectpack": "^4.5.2",
    "intro.js": "^2.9.3",
    "jquery": "^3.5.1",
    "lodash": "^4.17.15",
-    "moment": "^2.26.0",
+    "moment": "^2.27.0",
    "nconf": "^0.10.0",
-    "sass": "^1.26.5",
+    "sass": "^1.26.8",
    "sass-loader": "^8.0.2",
-    "smartbanner.js": "^1.15.0",
+    "smartbanner.js": "^1.16.0",
    "svg-inline-loader": "^0.8.2",
-    "svg-url-loader": "^3.0.3",
+    "svg-url-loader": "^6.0.0",
    "svgo": "^1.3.2",
    "svgo-loader": "^2.2.1",
-    "uuid": "^3.4.0",
-    "validator": "^11.1.0",
+    "uuid": "^8.1.0",
+    "validator": "^13.1.1",
    "vue": "^2.6.11",
    "vue-cli-plugin-storybook": "^0.6.1",
    "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.2.0",
+    "vue-router": "^3.3.4",
    "vue-template-compiler": "^2.6.11",
    "vuedraggable": "^2.23.2",
    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#5d237615463a84a23dd6f3f77c6ab577d68593ec",
@@ -742,5 +742,6 @@ export default {
 <style src="@/assets/css/sprites/spritesmith-main-25.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-26.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-27.css"></style>
+<style src="@/assets/css/sprites/spritesmith-main-28.css"></style>
 <style src="@/assets/css/sprites.css"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>
@@ -1,60 +1,78 @@
-.promo_armoire_backgrounds_202005 {
+.promo_armoire_backgrounds_202006 {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -391px 0px;
+  background-position: -340px -524px;
  width: 423px;
  height: 147px;
 }
-.promo_fairy_sunshine_potions {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -391px -148px;
-  width: 423px;
-  height: 147px;
-}
-.promo_jungle_buddies_bundle {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -434px;
-  width: 423px;
-  height: 147px;
-}
-.promo_mystery_202005 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -434px;
-  width: 282px;
-  height: 147px;
-}
 .promo_mystery_202006 {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -241px -582px;
+  background-position: -424px -735px;
  width: 282px;
  height: 147px;
 }
+.promo_sand_sculpture_potions {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -735px;
+  width: 423px;
+  height: 147px;
+}
+.promo_splashy_skins {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -409px -337px;
+  width: 375px;
+  height: 186px;
+}
+.customize-option.promo_splashy_skins {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -434px -352px;
+  width: 60px;
+  height: 60px;
+}
+.promo_summer_splash_2019 {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -337px;
+  width: 408px;
+  height: 186px;
+}
+.promo_summer_splash_2020 {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -445px 0px;
+  width: 444px;
+  height: 198px;
+}
 .promo_take_this {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -815px -179px;
+  background-position: -1032px -389px;
  width: 96px;
  height: 69px;
 }
-.scene_casting_spells {
+.scene_achievement {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -211px;
-  width: 312px;
-  height: 222px;
-}
-.scene_pets_resting {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px 0px;
-  width: 390px;
+  background-position: 0px -524px;
+  width: 339px;
  height: 210px;
 }
-.scene_todos {
+.scene_hat_guild {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -582px;
-  width: 240px;
-  height: 195px;
+  background-position: 0px 0px;
+  width: 444px;
+  height: 336px;
 }
-.scene_vikte {
+.scene_hiking {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -815px 0px;
-  width: 157px;
-  height: 178px;
+  background-position: -890px 0px;
+  width: 258px;
+  height: 258px;
+}
+.scene_nakonana {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -890px -389px;
+  width: 141px;
+  height: 169px;
+}
+.scene_strength {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -890px -259px;
+  width: 192px;
+  height: 129px;
 }
@@ -1,8 +1,80 @@
-.quest_TEMPLATE_FOR_MISSING_IMAGE {
+.quest_amber {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -502px -1546px;
-  width: 221px;
-  height: 39px;
+  background-position: -1320px -220px;
+  width: 219px;
+  height: 219px;
+}
+.quest_armadillo {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1320px -660px;
+  width: 219px;
+  height: 219px;
+}
+.quest_atom1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1333px -1332px;
+  width: 250px;
+  height: 150px;
+}
+.quest_atom2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -642px -1534px;
+  width: 207px;
+  height: 138px;
+}
+.quest_atom3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -211px -1534px;
+  width: 216px;
+  height: 180px;
+}
+.quest_axolotl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -440px -232px;
+  width: 219px;
+  height: 219px;
+}
+.quest_badger {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -660px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_basilist {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -191px -1721px;
+  width: 189px;
+  height: 141px;
+}
+.quest_beetle {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: 0px -1332px;
+  width: 204px;
+  height: 201px;
+}
+.quest_bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -220px -452px;
+  width: 219px;
+  height: 219px;
+}
+.quest_bunny {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: 0px -1534px;
+  width: 210px;
+  height: 186px;
+}
+.quest_butterfly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -660px -452px;
+  width: 219px;
+  height: 219px;
+}
+.quest_cheetah {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px 0px;
+  width: 219px;
+  height: 219px;
 }
 .quest_cow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
@@ -12,43 +84,43 @@
 }
 .quest_dilatory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -892px;
+  background-position: 0px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_dilatoryDistress1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -1332px;
+  background-position: -1540px -1082px;
  width: 210px;
  height: 210px;
 }
 .quest_dilatoryDistress2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -875px;
+  background-position: -1762px -573px;
  width: 150px;
  height: 150px;
 }
 .quest_dilatoryDistress3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -232px;
+  background-position: -660px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_dilatory_derby {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px 0px;
+  background-position: -880px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_dolphin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -232px;
+  background-position: -880px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_dustbunnies {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -232px;
+  background-position: -1100px 0px;
  width: 219px;
  height: 219px;
 }
@@ -60,25 +132,31 @@
 }
 .quest_evilsanta {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -1026px;
+  background-position: -1762px -724px;
  width: 118px;
  height: 131px;
 }
 .quest_evilsanta2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -220px;
+  background-position: -1100px -660px;
  width: 219px;
  height: 219px;
 }
 .quest_falcon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -452px;
+  background-position: 0px -892px;
  width: 219px;
  height: 219px;
 }
 .quest_ferret {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -452px;
+  background-position: -220px -892px;
+  width: 219px;
+  height: 219px;
+}
+.quest_fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -440px -892px;
  width: 219px;
  height: 219px;
 }
@@ -90,19 +168,19 @@
 }
 .quest_ghost_stag {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -452px;
+  background-position: -880px -892px;
  width: 219px;
  height: 219px;
 }
 .quest_goldenknight1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px 0px;
+  background-position: -1100px -892px;
  width: 219px;
  height: 219px;
 }
 .quest_goldenknight2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1546px;
+  background-position: -1082px -1332px;
  width: 250px;
  height: 150px;
 }
@@ -114,289 +192,205 @@
 }
 .quest_gryphon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1091px -1332px;
+  background-position: -648px -1332px;
  width: 216px;
  height: 177px;
 }
 .quest_guineapig {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -672px;
+  background-position: -220px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_harpy {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -672px;
+  background-position: -1320px -880px;
  width: 219px;
  height: 219px;
 }
 .quest_hedgehog {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -431px -1332px;
+  background-position: -205px -1332px;
  width: 219px;
  height: 186px;
 }
 .quest_hippo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -672px;
+  background-position: -220px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_horse {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px 0px;
+  background-position: -440px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_kangaroo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px 0px;
+  background-position: -660px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_kraken {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -874px -1332px;
+  background-position: -865px -1332px;
  width: 216px;
  height: 177px;
 }
 .quest_lostMasterclasser1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -660px;
+  background-position: -1100px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -892px;
+  background-position: -880px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -892px;
+  background-position: 0px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -573px;
+  background-position: -1762px -422px;
  width: 150px;
  height: 150px;
 }
 .quest_mayhemMistiflying2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -892px;
+  background-position: -1320px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -892px;
+  background-position: -1320px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_monkey {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -892px;
+  background-position: -660px -892px;
  width: 219px;
  height: 219px;
 }
 .quest_moon1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -214px;
+  background-position: -1540px -648px;
  width: 216px;
  height: 216px;
 }
 .quest_moon2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -220px;
+  background-position: -1100px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_moon3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -440px;
+  background-position: -1100px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -660px;
+  background-position: -440px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -880px;
+  background-position: -220px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1112px;
+  background-position: -880px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_nudibranch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -1082px;
+  background-position: -1540px -865px;
  width: 216px;
  height: 216px;
 }
 .quest_octopus {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -651px -1332px;
+  background-position: -425px -1332px;
  width: 222px;
  height: 177px;
 }
 .quest_owl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -1112px;
+  background-position: -440px -452px;
  width: 219px;
  height: 219px;
 }
 .quest_peacock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -648px;
+  background-position: -1540px -431px;
  width: 216px;
  height: 216px;
 }
 .quest_penguin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1697px;
+  background-position: 0px -1721px;
  width: 190px;
  height: 183px;
 }
 .quest_pterodactyl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -1112px;
+  background-position: 0px -452px;
  width: 219px;
  height: 219px;
 }
 .quest_rat {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -1112px;
+  background-position: -660px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_robot {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -452px;
+  background-position: -220px -232px;
  width: 219px;
  height: 219px;
 }
 .quest_rock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -865px;
+  background-position: -1540px -214px;
  width: 216px;
  height: 216px;
 }
 .quest_rooster {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1525px -1332px;
+  background-position: -428px -1534px;
  width: 213px;
  height: 174px;
 }
 .quest_ruby {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -1112px;
+  background-position: 0px -232px;
  width: 219px;
  height: 219px;
 }
 .quest_sabretooth {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -1112px;
+  background-position: -440px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_seaserpent {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_silver {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_slime {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sloth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_snail {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1332px;
-  width: 219px;
-  height: 213px;
-}
-.quest_snake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1308px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_spider {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -251px -1546px;
-  width: 250px;
-  height: 150px;
-}
-.quest_squirrel {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -422px;
-  width: 150px;
-  height: 150px;
-}
-.quest_stoikalmCalamity2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_taskwoodsTerror1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -724px;
-  width: 150px;
-  height: 150px;
-}
-.quest_taskwoodsTerror2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -431px;
-  width: 216px;
-  height: 216px;
-}
-.quest_taskwoodsTerror3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px 0px;
+  background-position: -1320px -1112px;
  width: 219px;
  height: 219px;
 }
@@ -0,0 +1,414 @@
+.Pet-Wolf-RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -300px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -69px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -138px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -207px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -276px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -345px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -607px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -483px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -69px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -138px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -207px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -276px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -345px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -414px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -483px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -69px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -138px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -207px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -276px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -345px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -414px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -483px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -552px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -643px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -414px -400px;
+  width: 68px;
+  height: 68px;
+}
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#878190" fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
-</svg>
@@ -1,92 +1,193 @@
-@mixin btn-focus-hover-shadow () {
-  box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
-}
-
 .btn {
  cursor: pointer;
-  font-family: 'Roboto Condensed', sans-serif;
-  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
  font-weight: bold;
-  line-height: 1.5;
-  border: 1px solid transparent !important;
-  padding: 7.5px 15.5px;
+  line-height: 1.71;
+  border: 1px solid transparent;
+  padding: 0.25rem 1rem;
  border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
  color: $white;

-  &:focus:not(.btn-flat) {
-    outline: none;
+  &:hover, &:focus {
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+
+    &:disabled, &.disabled, &.btn-flat {
+      box-shadow: none;
+    }
+  }
+
+  &:focus {
    border-color: $purple-400;
-    @include btn-focus-hover-shadow();
  }

-  &:hover:not(.btn-flat):not(.disabled):not(:disabled) {
-    @include btn-focus-hover-shadow();
-    border-color: transparent;
+  &:active, &.active:not(.btn-flat), &:disabled, &.disabled {
+    box-shadow: none;
  }

-  &:active:not(.btn-flat), &.active:not(.btn-flat) {
-    box-shadow: none !important;
-    border: 1px solid transparent;
+  &:disabled, &.disabled {
+    cursor: default;
+    opacity: 0.75;
  }
 }

-.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
-  color: $white !important;
-}
-
-.btn:disabled, .btn.disabled {
-  box-shadow: none;
-  cursor: default;
-  opacity: 0.64;
-  border-color: transparent;
+.btn-front {
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 7.5px 15.5px;
 }

 .btn-primary {
  background: $purple-200;
+  border: 1px solid transparent;

-  &:disabled {
+  &:hover:not(:disabled):not(.disabled) {
+    background: #5d3b9c;
+    border: 1px solid transparent;
+  }
+
+  &:focus {
    background: $purple-200;
+    border-color: $purple-400;
  }

-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
-    background: #5d3b9c !important;
-    color: $white;
-  }
-}
-
-.btn-secondary, .dropdown > .btn-secondary {
-  color: $gray-50;
-  background: $white !important;
-
-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
-    color: $purple-200 !important;
+  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    box-shadow: none;
+    border-color: $purple-400;
  }

-  &:active, &:focus, &.active {
-    border-color: $purple-500 !important;
+  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
+    background: $purple-200;
+    border: 1px solid transparent;
  }

  &:disabled, &.disabled {
-    background: $gray-500 !important;
-    color: $gray-100 !important;
+    background: $purple-200;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
+  }
+}
+
+.btn-secondary,
+.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
+.show > .btn-secondary.dropdown-toggle:not(.btn-success)
+{
+  background: $white;
+  border: 1px solid transparent;
+  color: $gray-50;
+
+  &:focus, &:active {
+    color: $gray-50;
+    background: $white;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    &:active:focus,
+    &.active:focus {
+      color: $purple-300;
+      box-shadow: none;
+      border-color: $purple-400;
+    }
+
+    &:active,
+    &.active {
+      color: $purple-300;
+
+      &.dropdown-toggle {
+        color: $gray-50;
+      }
+
+
+      background: $white;
+      border: 1px solid transparent;
+    }
+
+    &:hover {
+      color: $purple-300;
+
+      &.dropdown-toggle {
+        color: $gray-50;
+      }
+
+      background: $white !important;
+      border: 1px solid transparent;
+    }
+  }
+
+  &:disabled, &.disabled {
+    color: $gray-50;
+    background: $white;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
+  }
+}
+
+.btn-danger {
+  background: $maroon-100;
+  border: 1px solid transparent;
+
+  &:hover:not(:disabled):not(.disabled) {
+    background: #e14e4e;
+    border: 1px solid transparent;
+  }
+
+  &:focus {
+    background: $maroon-100;
+    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: $maroon-100;
+    border: 1px solid transparent;
+  }
+
+  &:disabled, &.disabled {
+    background: $maroon-100;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
  }
 }

 .btn-success {
-  background: $green-100;
-
-  &:disabled {
-    background: $green-100;
-  }
-
-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
-    background: $green-50;
-  }
-}
-
-.show > .btn-success.dropdown-toggle {
  background: $green-50;
+  border: 1px solid transparent;
+
+  &:hover:not(:disabled):not(.disabled) {
+    background: #32bd8a;
+    border: 1px solid transparent;
+  }
+
+  &:focus {
+    background: $green-50;
+    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: $green-50;
+    border: 1px solid transparent;
+  }
+
+  &:disabled, &.disabled {
+    background: $green-50;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
+  }
 }

 .btn-info {
@@ -105,22 +206,6 @@
  }
 }

-.btn-danger {
-  background: $red-50;
-
-  &:disabled {
-    background: $red-50;
-  }
-
-  &:hover:not(:disabled):not(.disabled) {
-    background: $red-100;
-  }
-
-  &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
-    background: $red-100;
-  }
-}
-
 .btn-show-more {
  display: block;
  width: 50%;
@@ -41,4 +41,9 @@
  img {
    max-width: 100%;
  }
+  
+  blockquote {
+    padding: 0 16px;
+    border-left: 4px solid #e1e0e3;
+  }
 }
@@ -1,34 +1,56 @@
+@mixin habit-controls($disabled-color, $active-color) {
+  &-habit-control-disabled {
+    .habit-option-button {
+      border: 2px solid $disabled-color;
+    }
+    &:hover {
+      .habit-option-button {
+        border: 2px solid $active-color;
+      }
+      .habit-option-icon, .habit-option-label { color: $active-color !important; }
+    }
+  }
+}
+
+@mixin modal-text-input($color) {
+  &-text::placeholder { color: $color !important; }
+  &-input {
+    border: 0 !important;
+
+    &:focus, &:active {
+      box-shadow: 0 0 0 1px $color !important;
+    }
+  }
+}
+
 .task {
  &-worst { // dark red
    &-control {
      &-bg {
        background: $maroon-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-bg-noninteractive {
-        background: $maroon-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: $maroon-500 !important; }
-      &-checkbox { color: $maroon-100 !important; }
-      &-icon { color: #6c0406 !important; }
+      &-bg-noninteractive { background: $maroon-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($red-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $red-1 !important; }
    }

    &-modal {
      &-bg { background: $maroon-100 !important; }
      &-icon { color: $maroon-100 !important; }
-      &-text { color: $maroon-50 !important; }
+      &-text { color: $red-1 !important; }
+      &-content {
+        --svg-color: #{$maroon-100};
+      }
+      @include modal-text-input($red-1);
      &-option-disabled:hover {
        .svg-icon { color: $maroon-100 !important; }
        .option-item-label { color: $maroon-50 !important; }
      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $maroon-100 !important; }
-        .option-item-label { color: $maroon-50 !important; }
-      }
+      @include habit-controls($gray-300, $maroon-100);
    }
  }

@@ -36,32 +58,30 @@
    &-control {
      &-bg {
        background: $red-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-bg-noninteractive {
-        background: $red-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: $red-500 !important; }
-      &-checkbox { color: $red-100 !important; }
-      &-icon { color: #6c0406 !important; }
+      &-bg-noninteractive { background: $red-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($red-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $red-1 !important; }
    }

    &-modal {
      &-bg { background: $red-100 !important; }
      &-icon { color: $red-100 !important; }
-      &-text { color: $red-10 !important; }
+      &-text { color: $red-1 !important; }
+      &-content {
+        --svg-color: #{$red-100};
+      }
+      @include modal-text-input($red-1);
      &-option-disabled:hover {
        .svg-icon { color: $red-100 !important; }
        .option-item-label { color: $red-10 !important; }
      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $red-100 !important; }
-        .option-item-label { color: $red-10 !important; }
-      }
+
+      @include habit-controls($gray-300, $red-100);
    }
  }

@@ -69,43 +89,30 @@
    &-control {
      &-bg {
        background: $orange-100 !important;
-
-        &:hover {
-          .habit-control { background: #b75a1c !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($orange-1, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-bg-noninteractive {
-        background: $orange-100 !important;
-      }
-      &-inner-habit { background: rgba(183, 90, 28, 0.4) !important; }
-      &-inner-daily-todo { background: $orange-500 !important; }
-      &-checkbox { color: $orange-100 !important; }
-      &-icon { color: #7f3300 !important; }
+      &-bg-noninteractive { background: $orange-100 !important; }
+      &-inner-habit { background: rgba($orange-1, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($orange-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $orange-1 !important; }
    }

    &-modal {
-      &-bg {
-        background: $orange-100 !important;
-
-        .form-control {
-          background: rgba(183, 90, 28, 0.4) !important;
-
-          &:focus, &:active, &:hover {
-            background-color: #b75a1c !important;
-          }
-        }
-      }
+      &-bg { background: $orange-100 !important; }
      &-icon { color: $orange-100 !important; }
-      &-text { color: #b75a1c !important; }
+      &-text { color: $orange-1 !important; }
+      &-content {
+        --svg-color: #{$orange-100};
+      }
+      @include modal-text-input($orange-1);
      &-option-disabled:hover {
        .svg-icon { color: $orange-100 !important; }
-        .option-item-label { color: #b75a1c !important; }
-      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $orange-100 !important; }
-        .option-item-label { color: #b75a1c !important; }
+        .option-item-label { color: $orange-1 !important; }
      }
+
+      @include habit-controls($gray-300, $orange-100);
    }
  }

@@ -113,42 +120,30 @@
    &-control {
      &-bg {
        background: $yellow-100 !important;
-        &:hover {
-          .habit-control { background: #bf7d1a !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($yellow-1, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-bg-noninteractive {
-        background: $yellow-100 !important;
-      }
-      &-inner-habit { background: rgba(183, 90, 28, 0.32) !important; }
-      &-inner-daily-todo { background: $yellow-500 !important; }
-      &-checkbox { color: $yellow-100 !important; }
-      &-icon { color: #794b00 !important; }
+      &-bg-noninteractive { background: $yellow-100 !important; }
+      &-inner-habit { background: rgba($yellow-1, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($yellow-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $yellow-1 !important; }
    }

    &-modal {
-      &-bg {
-        background: $yellow-100 !important;
-
-        .form-control {
-          background: rgba(183, 90, 28, 0.4) !important;
-
-          &:focus, &:active, &:hover {
-            background-color: #bf7d1a !important;
-          }
-        }
-      }
+      &-bg { background: $yellow-100 !important; }
      &-icon { color: $yellow-100 !important; }
-      &-text { color: #bf7d1a !important; }
+      &-text { color: $yellow-1 !important; }
+      @include modal-text-input($yellow-1);
      &-option-disabled:hover {
        .svg-icon { color: $yellow-100 !important; }
        .option-item-label { color: #bf7d1a !important; }
      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $yellow-100 !important; }
-        .option-item-label { color: #bf7d1a !important; }
+      &-content {
+        --svg-color: #{$yellow-100};
      }
+
+      @include habit-controls($gray-300, $yellow-100);
    }
  }

@@ -156,32 +151,31 @@
    &-control {
      &-bg {
        background: $green-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-bg-noninteractive {
-        background: $green-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: #77f4c7 !important; }
-      &-checkbox { color: $green-10 !important; }
-      &-icon { color: #005737 !important; }
+      &-bg-noninteractive { background: $green-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($green-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $green-1 !important; }
    }

    &-modal {
      &-bg { background: $green-100 !important; }
      &-icon { color: $green-10 !important; }
-      &-text { color: #1ca372 !important; }
+      &-text { color: $green-1 !important; }
+      &-content {
+        --svg-color: #{$green-100};
+      }
+
+      @include modal-text-input($green-1);
      &-option-disabled:hover {
        .svg-icon { color: $green-10 !important; }
        .option-item-label { color: #1ca372 !important; }
      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $green-10 !important; }
-        .option-item-label { color: #1ca372 !important; }
-      }
+
+      @include habit-controls($gray-300, $green-100);
    }
  }

@@ -189,32 +183,30 @@
    &-control {
      &-bg {
        background: $teal-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-bg-noninteractive {
-        background: $teal-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: #8dedf6 !important; }
-      &-checkbox { color: $teal-100 !important; }
-      &-icon { color: #005158 !important; }
+      &-bg-noninteractive { background: $teal-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($teal-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $teal-1 !important; }
    }

    &-modal {
      &-bg { background: $teal-100 !important; }
      &-icon { color: $teal-100 !important; }
-      &-text { color: $teal-10 !important; }
+      &-text { color: $teal-1 !important; }
+      &-content {
+        --svg-color: #{$teal-100};
+      }
+      @include modal-text-input($teal-1);
      &-option-disabled:hover {
        .svg-icon { color: $teal-100 !important; }
        .option-item-label { color: $teal-10 !important; }
      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $teal-100 !important; }
-        .option-item-label { color: $teal-10 !important; }
-      }
+
+      @include habit-controls($gray-300, $teal-100);
    }
  }

@@ -222,32 +214,31 @@
    &-control {
      &-bg {
        background: $blue-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-bg-noninteractive {
-        background: $blue-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: $blue-500 !important; }
-      &-checkbox { color: $blue-100 !important; }
-      &-icon { color: #033f5e !important; }
+      &-bg-noninteractive { background: $blue-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($blue-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $blue-1 !important; }
    }

    &-modal {
      &-bg { background: $blue-100 !important; }
      &-icon { color: $blue-100 !important; }
-      &-text { color: $blue-10 !important; }
+      &-text { color: $blue-1 !important; }
+      &-content {
+        --svg-color: #{$blue-100};
+      }
+
+      @include modal-text-input($blue-1);
      &-option-disabled:hover {
        .svg-icon { color: $blue-50 !important; }
        .option-item-label { color: $blue-10 !important; }
      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $blue-50 !important; }
-        .option-item-label { color: $blue-10 !important; }
-      }
+
+      @include habit-controls($gray-300, $blue-100);
    }
  }

@@ -255,42 +246,43 @@
    &-control {
      &-bg {
        background: $purple-task !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: #ffffff80 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
      &-checkbox { color: $purple-task !important; }
    }

    &-modal {
      &-bg { background: $purple-300 !important; }
      &-icon { color: $purple-300 !important; }
-      &-text { color: $purple-200 !important; }
+      &-text { color: $black !important; }
+      &-content {
+        --svg-color: #{$purple-300};
+      }
+
+      @include modal-text-input($black);
      &-option-disabled:hover {
        .svg-icon { color: $purple-300 !important; }
        .option-item-label { color: $purple-200 !important; }
      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $purple-300 !important; }
-        .option-item-label { color: $purple-200 !important; }
-      }
+
+      @include habit-controls($gray-300, $purple-300);
    }
  }

  &-reward {
    &-control {
      &-bg {
-        background: rgba(255, 217, 160, 0.32) !important;
-        .small-text { color: $orange-10 !important; }
+        background: rgba($yellow-100, 0.15) !important;
+        .small-text { color: $yellow-1 !important; }

-        &:hover { background: rgba(255, 217, 160, 0.48) !important; }
+        &:hover { background: rgba($yellow-100, 0.25) !important; }
      }
      &-bg-noninteractive {
-        background: rgba(255, 217, 160, 0.32) !important;
-        .small-text { color: $orange-10 !important; }
+        background: rgba($yellow-100, 0.15) !important;
+        .small-text { color: $yellow-1 !important; }
      }
    }
  }
@@ -300,8 +292,12 @@
      &-control {
        &-bg { background: $gray-600; }
        &-inner {
-          color: rgba(26, 24, 29, 0.12) !important;
-          border: 1px solid rgba(26, 24, 29, 0.12);
+          border: 1px solid $gray-300;
+          opacity: 0.75;
+
+          .negative, .positive {
+            color: $gray-200;
+          }
        }
      }
    }
@@ -309,13 +305,14 @@
    &-daily-todo {
      &-control {
        &-bg {
-          background: $gray-400 !important;
-          &:hover {
-            .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-          }
+          background: $gray-200 !important;
+          .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
        }
-        &-inner { background: $gray-500 !important; }
-        &-checkbox { color: $gray-400 !important; }
+        &-bg-noninteractive {
+          background: $gray-200 !important;
+        }
+        &-inner { background: rgba($white, 0.5) !important; }
+        &-checkbox { color: $gray-10 !important; }
        &-content {
          background: $gray-600;

@@ -337,6 +334,24 @@
  border-radius: 100px;
  color: $white;

+  &-negative {
+    &-enabled {
+      padding-top: 13px;
+    }
+    &-disabled {
+      padding-top: 12px;
+    }
+  }
+
+  &-positive {
+    &-enabled {
+      padding-top: 9px;
+    }
+    &-disabled {
+      padding-top: 8px;
+    }
+  }
+
  .svg-icon {
    width: 10px;
    height: 10px;
@@ -347,14 +362,10 @@
    margin-top: 7px;
    height: 12px;
    width: 10px;
-  }

-  .positive {
-    margin-top: 9px;
-  }
-
-  .negative {
-    margin-top: 13px;
+    &.disabled {
+      color: $gray-10;
+    }
  }
 }

@@ -2,11 +2,11 @@
 // possible values are: normal, fall, habitoween, thanksgiving, winter, nye, birthday, valentines, normal, summer
 // more to be added on future seasons

-$npc_market_flavor: 'normal';
-$npc_quests_flavor: 'normal';
-$npc_seasonal_flavor: 'normal';
-$npc_timetravelers_flavor: 'normal';
-$npc_tavern_flavor: 'normal';
+$npc_market_flavor: 'summer';
+$npc_quests_flavor: 'summer';
+$npc_seasonal_flavor: 'summer';
+$npc_timetravelers_flavor: 'summer';
+$npc_tavern_flavor: 'summer';

 $restingToolbarHeight: 40px;
 $menuToolbarHeight: 56px;
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9">
+    <path fill="none" fill-rule="evenodd" stroke="#878190" stroke-width="2.5" d="M13 1L7 7 1 1"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16">
+    <path fill="#878190" fill-rule="evenodd" d="M2 12c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zM2 6c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zM2 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2z"/>
+</svg>
@@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="7" viewBox="0 0 7 7">
+    <g fill="none" fill-rule="evenodd" stroke="#878190" stroke-width="1.5">
+        <path d="M0 5l5-5M5 5L0 0" transform="translate(1 1)"/>
+    </g>
 </svg>
@@ -225,30 +225,30 @@ export default {
    classGear (heroClass) {
      if (heroClass === 'rogue') {
        return {
-          armor: 'armor_rogue_5',
-          head: 'head_rogue_5',
-          shield: 'shield_rogue_6',
-          weapon: 'weapon_rogue_6',
+          armor: 'armor_special_summer2020Rogue',
+          head: 'head_special_summer2020Rogue',
+          shield: 'shield_special_summer2020Rogue',
+          weapon: 'weapon_special_summer2020Rogue',
        };
      } if (heroClass === 'wizard') {
        return {
-          armor: 'armor_wizard_5',
-          head: 'head_wizard_5',
-          weapon: 'weapon_wizard_6',
+          armor: 'armor_special_summer2020Mage',
+          head: 'head_special_summer2020Mage',
+          weapon: 'weapon_special_summer2020Mage',
        };
      } if (heroClass === 'healer') {
        return {
-          armor: 'armor_healer_5',
-          head: 'head_healer_5',
-          shield: 'shield_healer_5',
-          weapon: 'weapon_healer_6',
+          armor: 'armor_special_summer2020Healer',
+          head: 'head_special_summer2020Healer',
+          shield: 'shield_special_summer2020Healer',
+          weapon: 'weapon_special_summer2020Healer',
        };
      }
      return {
-        armor: 'armor_warrior_5',
-        head: 'head_warrior_5',
-        shield: 'shield_warrior_5',
-        weapon: 'weapon_warrior_6',
+        armor: 'armor_special_summer2020Warrior',
+        head: 'head_special_summer2020Warrior',
+        shield: 'shield_special_summer2020Warrior',
+        weapon: 'weapon_special_summer2020Warrior',
      };
    },
    selectionBox (selectedClass, heroClass) {
@@ -317,7 +317,7 @@ import Vue from 'vue';
 import findIndex from 'lodash/findIndex';
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';

 import { mapState } from '@/libs/store';
 import memberSearchDropdown from '@/components/members/memberSearchDropdown';
@@ -33,7 +33,7 @@
      </p>
      <div
        ref="markdownContainer"
-        class="text"
+        class="text markdown"
        v-html="parseMarkdown(msg.text)"
      ></div>
      <hr>
@@ -166,7 +166,6 @@
      color: #4e4a57;
      text-align: left !important;
      min-height: 0rem;
-      margin-bottom: -0.5rem;
    }
  }

@@ -13,7 +13,7 @@
        <b-form-input
          v-model="workingGroup.name"
          type="text"
-          :placeholder="$t('newGuildPlaceholder')"
+          :placeholder="isParty ? $t('newPartyPlaceholder') : $t('newGuildPlaceholder')"
        />
      </div>
      <div class="form-group">
@@ -161,8 +161,8 @@
              >
                <span class="dropdown-icon-item">
                  <div
-                    class="svg-icon inline"
-                    v-html="icons.removeIcon"
+                    class="svg-icon inline block-icon"
+                    v-html="icons.blockIcon"
                  ></div>
                  <span class="text">{{ $t('removeManager2') }}</span>
                </span>
@@ -181,8 +181,8 @@
              >
                <span class="dropdown-icon-item">
                  <div
-                    class="svg-icon inline"
-                    v-html="icons.removeIcon"
+                    class="svg-icon inline block-icon"
+                    v-html="icons.blockIcon"
                  ></div>
                  <span class="text">{{ $t('removeMember') }}</span>
                </span>
@@ -231,8 +231,8 @@
                <span class="dropdown-icon-item">
                  <div
                    v-if="isLeader"
-                    class="svg-icon inline"
-                    v-html="icons.removeIcon"
+                    class="svg-icon inline block-icon"
+                    v-html="icons.blockIcon"
                  ></div>
                  <span class="text">{{ $t('removeInvite') }}</span>
                </span>
@@ -279,6 +279,8 @@
 </style>

 <style lang='scss' scoped>
+  @import '~@/assets/scss/colors.scss';
+
  .apply-options {
    padding: 1em;
    margin: 0;
@@ -366,6 +368,10 @@
    border-bottom: 2px solid #4f2a93;
    cursor: pointer;
  }
+
+  .block-icon {
+    color:  $gray-200;
+  }
 </style>

 <script>
@@ -376,7 +382,7 @@ import { mapState } from '@/libs/store';
 import removeMemberModal from '@/components/members/removeMemberModal';
 import loadingGryphon from '@/components/ui/loadingGryphon';
 import MemberDetails from '../memberDetails';
-import removeIcon from '@/assets/members/remove.svg';
+import blockIcon from '@/assets/svg/block.svg';
 import messageIcon from '@/assets/members/message.svg';
 import starIcon from '@/assets/members/star.svg';
 import dots from '@/assets/svg/dots.svg';
@@ -438,7 +444,7 @@ export default {
      ],
      searchTerm: '',
      icons: Object.freeze({
-        removeIcon,
+        blockIcon,
        messageIcon,
        starIcon,
        dots,
@@ -19,10 +19,10 @@
      />
      <div
        v-if="hasParty"
-        class="view-party d-flex align-items-center"
+        class="view-party d-none d-md-flex align-items-center"
      >
        <button
-          class="btn btn-primary view-party-button"
+          class="btn btn-primary"
          @click="showPartyMembers()"
        >
          {{ $t('viewParty') }}
@@ -32,7 +32,7 @@
        v-if="hasParty"
        ref="partyMembersDiv"
        v-resize="1500"
-        class="party-members d-flex"
+        class="party-members d-none d-md-flex "
        @resized="setPartyMembersWidth($event)"
      >
        <!-- eslint-disable vue/no-use-v-if-with-v-for -->
@@ -51,7 +51,7 @@
      </div>
      <div
        v-else
-        class="no-party d-flex justify-content-center text-center"
+        class="no-party d-none d-md-flex  justify-content-center text-center mr-4"
      >
        <div class="align-self-center">
          <h3>{{ $t('battleWithFriends') }}</h3>
@@ -83,7 +83,6 @@
    color: $header-color;
    flex-wrap: nowrap;
    position: relative;
-    max-height: 10.25rem;
  }

  .hide-header {
@@ -119,12 +118,6 @@
      margin-top: 16px;
    }
  }
-
-  @media only screen and (max-width: 768px) {
-    .view-party-button {
-      display: none;
-    }
-  }
 </style>

 <script>
@@ -45,7 +45,7 @@
 </template>

 <script>
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';

 export default {
  props: {
@@ -79,7 +79,7 @@ export default {
  },
  data () {
    return Object.freeze({
-      itemId: uuid.v4(),
+      itemId: uuid(),
    });
  },
  methods: {
@@ -419,6 +419,11 @@ export default {
        cardType: '',
        messageOptions: 0,
      },
+      quantitySnapshot: {
+        eggs: null,
+        hatchingPotions: null,
+        food: null,
+      },
    };
  },
  computed: {
@@ -443,7 +448,9 @@ export default {
          if (itemQuantity > 0 && isAllowed) {
            const item = contentItems[itemKey];

-            const isSearched = !searchText || item.text().toLowerCase().indexOf(searchText) !== -1;
+            const isSearched = !searchText || item.text()
+              .toLowerCase()
+              .indexOf(searchText) !== -1;
            if (isSearched) {
              itemsArray.push({
                ...item,
@@ -458,12 +465,16 @@ export default {
          }
        });

-        itemsArray.sort((a, b) => {
-          if (this.sortBy === 'quantity') {
-            return b.quantity - a.quantity;
-          } // AZ
-          return a.text.localeCompare(b.text);
-        });
+        if (this.sortBy === 'quantity') {
+          // Store original quantities, to avoid reordering when using items.
+          const quantitySnapshot = this.quantitySnapshot[groupKey] || Object.fromEntries(
+            itemsArray.map(item => [item.key, item.quantity]),
+          );
+          itemsArray.sort((a, b) => quantitySnapshot[b.key] - quantitySnapshot[a.key]);
+          this.quantitySnapshot[groupKey] = quantitySnapshot;
+        } else {
+          itemsArray.sort((a, b) => a.text.localeCompare(b.text));
+        }
      });

      const specialArray = itemsByType.special;
@@ -39,7 +39,7 @@
 </template>

 <script>
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import DragDropDirective from '@/directives/dragdrop.directive';

 import CountBadge from '@/components/ui/countBadge';
@@ -71,7 +71,7 @@ export default {
  },
  data () {
    return Object.freeze({
-      itemId: uuid.v4(),
+      itemId: uuid(),
    });
  },
  methods: {
@@ -154,6 +154,7 @@
          <!-- eslint-enable vue/no-use-v-if-with-v-for -->
          <div
            v-for="item in group"
+            v-show="show('pet', item)"
            :key="item.key"
            v-drag.drop.food="item.key"
            class="pet-group"
@@ -216,6 +217,7 @@
          <!-- eslint-enable vue/no-use-v-if-with-v-for -->
          <div
            v-for="item in group"
+            v-show="show('mount', item)"
            :key="item.key"
            class="pet-group"
          >
@@ -225,6 +227,7 @@
              :popover-position="'top'"
              :show-popover="true"
              @click="selectMount(item)"
+
            >
              <span slot="popoverContent">
                <h4 class="popover-content-title">{{ item.name }}</h4>
@@ -688,6 +691,11 @@ export default {
    setShowMore (key) {
      this.$_openedItemRows_toggleByType(key, !this.$_openedItemRows_isToggled(key));
    },
+    show (type, item) {
+      return item.canFind === undefined
+        || isOwned(type, item, this.userItems)
+        || item.canFind;
+    },
    getAnimalList (animalGroup, type) {
      const { key } = animalGroup;

@@ -706,11 +714,14 @@ export default {
            const eggKey = specialKey.split('-')[0];
            const potionKey = specialKey.split('-')[1];

+            const { canFind, text } = this.content[`${type}Info`][specialKey];
+
            animals.push({
              key: specialKey,
              eggKey,
              potionKey,
-              name: this.content[`${type}Info`][specialKey].text(),
+              name: text(),
+              canFind,
              isOwned () {
                return isOwned(type, this, userItems);
              },
@@ -34,7 +34,7 @@
 </template>

 <script>
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { mapState } from '@/libs/store';
 import { isOwned } from '../../../libs/createAnimal';

@@ -54,7 +54,7 @@ export default {
  },
  data () {
    return Object.freeze({
-      itemId: uuid.v4(),
+      itemId: uuid(),
    });
  },
  computed: {
@@ -106,7 +106,7 @@
 </style>

 <script>
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { mapState } from '@/libs/store';
 import {
  isAllowedToFeed, isHatchable, isOwned, isSpecial,
@@ -135,7 +135,7 @@ export default {
  },
  data () {
    return Object.freeze({
-      itemId: uuid.v4(),
+      itemId: uuid(),
    });
  },
  computed: {
@@ -34,7 +34,7 @@
            <span class="dropdown-icon-item">
              <div
                class="svg-icon inline"
-                v-html="icons.remove"
+                v-html="icons.block"
              ></div><span class="text">{{ $t(isBlocked ? 'unblock' : 'block') }}</span></span>
          </b-dropdown-item>
        </b-dropdown>
@@ -65,7 +65,7 @@ import moment from 'moment';
 import userLabel from '../userLabel';

 import dots from '@/assets/svg/dots.svg';
-import remove from '@/assets/svg/remove.svg';
+import block from '@/assets/svg/block.svg';

 import { mapState } from '@/libs/store';

@@ -90,7 +90,7 @@ export default {
    return {
      icons: Object.freeze({
        dots,
-        remove,
+        block,
      }),
    };
  },
@@ -20,7 +20,7 @@
      <span v-if="msg.client && user.contributor.level >= 4"> ({{ msg.client }})</span>
    </p>
    <div
-      class="text"
+      class="text markdown"
      v-html="parseMarkdown(msg.text)"
    ></div>
    <div
@@ -120,7 +120,6 @@
      color: $gray-50;
      text-align: left !important;
      min-height: 0rem;
-      margin-bottom: -0.5rem;
    }
  }

@@ -7,7 +7,7 @@

 <script>
 import axios from 'axios';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { mapState } from '@/libs/store';
 import paymentsMixin from '@/mixins/payments';

@@ -59,7 +59,7 @@ export default {
    },
  },
  beforeMount () {
-    this.buttonId = `AmazonPayButton-${uuid.v4()}`;
+    this.buttonId = `AmazonPayButton-${uuid()}`;
  },
  mounted () {
    this.amazonPaymentsInit(this.amazonData);
@@ -147,7 +147,7 @@
 import sortBy from 'lodash/sortBy';

 import MemberDetails from './memberDetails';
-import removeIcon from '@/assets/members/remove.svg';
+import removeIcon from '@/assets/svg/remove.svg';
 import messageIcon from '@/assets/members/message.svg';
 import starIcon from '@/assets/members/star.svg';

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

 <script>
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';

 import moment from 'moment';
 import svgGem from '@/assets/svg/gem.svg';
@@ -290,7 +290,7 @@ export default {
  },
  data () {
    return Object.freeze({
-      itemId: uuid.v4(),
+      itemId: uuid(),
      icons: {
        gems: svgGem,
        gold: svgGold,
--- a/Show More
+++ b/Show More