4.147.3

fix #12364 , profile of logged in user did not show up correctly
fix(lint): let Curly breathe
2026-05-09 11:11:17 -05:00 · 2020-07-03 14:36:01 +02:00 · 2020-07-03 14:35:29 +02:00 · 2020-07-02 16:50:41 -05:00 · 2020-07-02 20:56:19 +00:00 · 2020-07-02 13:58:50 -05:00
564 changed files with 23346 additions and 22137 deletions
@@ -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: |
@@ -2,6 +2,10 @@
  "name": "Habitica V3 API Documentation",
  "title": "Habitica",
  "url": "https://habitica.com",
+  "header": {
+    "title": "Introduction",
+    "filename": "apidoc/header.md"
+  },
  "template": {
    "withCompare": false
  }
@@ -0,0 +1,5 @@
+# Introduction
+
+This webpage includes the documentation for version 3 of the [Habitica](https://habitica.com) API.
+
+If you're developing a 3rd party tool that uses the Habitica API you should read the [Guidance for Comrades](https://habitica.fandom.com/wiki/Guidance_for_Comrades) and in particular the section called [Rules for Third-Party Tools](https://habitica.fandom.com/wiki/Guidance_for_Comrades#Rules_for_Third-Party_Tools) which includes suggestions on how to best use the API and the rules to follow when interacting with it. 
@@ -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(),
+));
@@ -12,7 +12,6 @@ const SLACK_CONFIG = {
 const LOCALES = './website/common/locales/';
 const ENGLISH_LOCALE = `${LOCALES}en/`;

-
 function getArrayOfLanguages () {
  const languages = fs.readdirSync(LOCALES);
  languages.shift(); // Remove README.md from array of languages
@@ -32,13 +32,11 @@
 *
 */

-
 // CONFIGURATION:
 // - Change the uuid below to be the user's uuid.
 // - Change ALL instances of "todos" to "habits"/"dailys"/"rewards" as
 //   needed. Do not miss any of them!

-
 const uuid = '30fb2640-7121-4968-ace5-f385e60ea6c5';

 db.users.aggregate([
@@ -2,7 +2,6 @@
 // @authorName = 'TheHollidayInn'; // in case script author needs to know when their ...
 // @authorUuid = ''; // ... own data is done

-
 /*
 * This migration moves chat off of groups and into their own model
 */
@@ -38,7 +37,6 @@ async function moveGroupChatToModel (skip = 0) {
    return chatpromises;
  });

-
  const reducedPromises = promises.reduce((acc, curr) => {
    acc = acc.concat(curr); // eslint-disable-line no-param-reassign
    return acc;
@@ -45,7 +45,7 @@ async function fixGroupPlanMembers () {
    pause();
    groupPlanCount += 1;

-    const canonicalMemberCount = await dbUsers.count(
+    const canonicalMemberCount = await dbUsers.countDocuments(
      {
        $or:
          [
@@ -25,7 +25,6 @@ const monk = require('monk'); // eslint-disable-line import/no-extraneous-depend

 const dbUsers = monk(connectionString).get('users', { castIds: false });

-
 function processUsers (lastId) {
  // specify a query to limit the affected users (empty for all users):
  const query = {
@@ -86,7 +85,6 @@ function updateUser (user) {

  const set = { migration: migrationName, 'flags.armoireEmpty': false };

-
  if (user.flags.armoireEmpty) {
    // this user believes their armoire has no more items in it
    if (
@@ -121,5 +121,4 @@ function exiting (code, msg) {
  process.exit(code);
 }

-
 processUsers();
@@ -9,7 +9,6 @@ const authorUuid = 'ed4c688c-6652-4a92-9d03-a5a79844174a'; // ... own data is do
 */
 const connectionString = 'mongodb://localhost:27017/habitrpg?auto_reconnect=true'; // FOR TEST DATABASE

-
 const dbUsers = monk(connectionString).get('users', { castIds: false });

 function processUsers (lastId) {
@@ -1,21 +1,21 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.144.1",
+  "version": "4.147.3",
  "main": "./website/server/index.js",
  "dependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/register": "^7.10.1",
-    "@google-cloud/trace-agent": "^5.0.0",
+    "@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",
    "amplitude": "^3.5.0",
-    "apidoc": "^0.17.5",
+    "apidoc": "^0.23.0",
    "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.3",
    "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.18",
+    "mongoose": "^5.9.20",
    "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",
@@ -64,13 +65,13 @@
    "rimraf": "^3.0.2",
    "short-uuid": "^3.0.0",
    "stripe": "^7.15.0",
-    "superagent": "^5.2.2",
+    "superagent": "^5.3.1",
    "universal-analytics": "^0.4.17",
    "useragent": "^2.1.9",
-    "uuid": "^3.4.0",
-    "validator": "^11.0.0",
+    "uuid": "^8.2.0",
+    "validator": "^13.1.1",
    "vinyl-buffer": "^1.0.1",
-    "winston": "^3.2.1",
+    "winston": "^3.3.3",
    "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"
  },
@@ -35,15 +35,14 @@ async function deleteAmplitudeData (userId, email) {

 async function deleteHabiticaData (user, email) {
  const truncatedEmail = email.slice(0, email.indexOf('@'));
+  const set = {
+    'auth.local.hashed_password': '$2a$10$QDnNh1j1yMPnTXDEOV38xOePEWFd4X8DSYwAM8XTmqmacG5X0DKjW',
+    'auth.local.passwordHashMethod': 'bcrypt',
+  };
+  if (!user.auth.local.email) set['auth.local.email'] = `${truncatedEmail}@example.com`;
  await User.update(
    { _id: user._id },
-    {
-      $set: {
-        'auth.local.email': user.auth.local.email ? email : `${truncatedEmail}@example.com`,
-        'auth.local.hashed_password': '$2a$10$QDnNh1j1yMPnTXDEOV38xOePEWFd4X8DSYwAM8XTmqmacG5X0DKjW',
-        'auth.local.passwordHashMethod': 'bcrypt',
-      },
-    },
+    { $set: set },
  );
  const response = await axios.delete(
    `${BASE_URL}/api/v3/user`,
@@ -78,6 +77,7 @@ async function processEmailAddress (email) {

  const socialUsers = await User.find(
    {
+      'auth.local.email': { $not: emailRegex },
      $or: [
        { 'auth.facebook.emails.value': email },
        { 'auth.google.emails.value': email },
@@ -56,7 +56,6 @@ describe('Base model plugin', () => {
    expect(sanitized).not.to.have.property('usuallySettable');
  });

-
  it('can make fields private', () => {
    schema.plugin(baseModel, {
      private: ['amPrivate'],
@@ -1,5 +1,3 @@
-import uuid from 'uuid';
-
 import {
  generateGroup,
 } from '../../../../../helpers/api-unit.helper';
@@ -7,6 +5,7 @@ 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 +40,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 +48,7 @@ describe('#upgradeGroupPlan', () => {

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

  it('charges for a new member', async () => {
@@ -1,4 +1,3 @@
-
 import path from 'path';
 import nconf from 'nconf';
 import setupNconf from '../../../../website/server/libs/setupNconf';
@@ -16,7 +16,6 @@ describe('response middleware', () => {
    next = generateNext();
  });

-
  it('attaches respond method to res', () => {
    responseMiddleware(req, res, next);

@@ -769,7 +769,6 @@ describe('Group Model', () => {
        expect(res.t).to.not.be.called;
      });

-
      it('does not throw an error if only user ids are passed in', async () => {
        await Group.validateInvitations({ uuids: ['user-id', 'user-id2'] }, res);
        expect(res.t).to.not.be.called;
@@ -432,7 +432,6 @@ describe('User Model', () => {
      user = new User();
    });

-
    it('returns false if user does not have customer id', () => {
      expect(user.isSubscribed()).to.be.undefined;
    });
@@ -558,7 +557,6 @@ describe('User Model', () => {
    });
  });

-
  context('hasCancelled', () => {
    let user;
    beforeEach(() => {
@@ -299,7 +299,6 @@ describe('Webhook Model', () => {
        });
      });

-
      context('type is globalActivity', () => {
        let config;

@@ -2,6 +2,8 @@ import { v4 as generateUUID } from 'uuid';
 import {
  generateUser,
  translate as t,
+  createAndPopulateGroup,
+  generateChallenge,
 } from '../../../../helpers/api-integration/v3';

 describe('GET /tasks/:id', () => {
@@ -11,55 +13,158 @@ describe('GET /tasks/:id', () => {
    user = await generateUser();
  });

-  context('task can be accessed', async () => {
-    let task;
+  context('general', () => {
+    context('task cannot be accessed', () => {
+      it('cannot get a non-existent task', async () => {
+        const dummyId = generateUUID();

-    beforeEach(async () => {
-      task = await user.post('/tasks/user', {
-        text: 'test habit',
-        type: 'habit',
-        alias: 'alias',
+        await expect(user.get(`/tasks/${dummyId}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
      });
    });
-
-    it('gets specified task', async () => {
-      const getTask = await user.get(`/tasks/${task._id}`);
-
-      expect(getTask).to.eql(task);
-    });
-
-    it('can use alias to retrieve task', async () => {
-      const getTask = await user.get(`/tasks/${task.alias}`);
-
-      expect(getTask).to.eql(task);
-    });
-
-    // TODO after challenges are implemented
-    it('can get active challenge task that user does not own'); // Yes?
  });

-  context('task cannot be accessed', () => {
-    it('cannot get a non-existent task', async () => {
-      const dummyId = generateUUID();
+  context('user', () => {
+    context('task can be accessed', async () => {
+      let task;

-      await expect(user.get(`/tasks/${dummyId}`)).to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('taskNotFound'),
+      beforeEach(async () => {
+        task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+          alias: 'alias',
+        });
+      });
+
+      it('gets specified task', async () => {
+        const getTask = await user.get(`/tasks/${task._id}`);
+
+        expect(getTask).to.eql(task);
+      });
+
+      it('can use alias to retrieve task', async () => {
+        const getTask = await user.get(`/tasks/${task.alias}`);
+
+        expect(getTask).to.eql(task);
      });
    });

-    it('cannot get a task owned by someone else', async () => {
-      const anotherUser = await generateUser();
-      const task = await user.post('/tasks/user', {
+    context('task cannot be accessed', () => {
+      it('cannot get a task owned by someone else', async () => {
+        const anotherUser = await generateUser();
+        const task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+        });
+
+        await expect(anotherUser.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
+      });
+    });
+  });
+
+  context('challenge', () => {
+    let challenge; let task; let leader; let member;
+
+    before(async () => {
+      const populatedGroup = await createAndPopulateGroup({
+        members: 1,
+      });
+
+      const guild = populatedGroup.group;
+      leader = populatedGroup.groupLeader;
+      member = populatedGroup.members[0]; // eslint-disable-line prefer-destructuring
+
+      challenge = await generateChallenge(leader, guild);
+      await leader.post(`/challenges/${challenge._id}/join`);
+
+      task = await leader.post(`/tasks/challenge/${challenge._id}`, {
        text: 'test habit',
        type: 'habit',
      });
+    });

-      await expect(anotherUser.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('taskNotFound'),
+    context('task can be accessed', async () => {
+      it('can get challenge task if member of that challenge', async () => {
+        await member.post(`/challenges/${challenge._id}/join`);
+
+        const getTask = await member.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+
+      it('can get challenge task if leader of that challenge', async () => {
+        const getTask = await leader.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+
+      it('can get challenge task if admin', async () => {
+        const admin = await generateUser({
+          'contributor.admin': true,
+        });
+
+        const getTask = await admin.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+    });
+
+    context('task cannot be accessed', () => {
+      it('cannot get a task in a challenge i am not part of', async () => {
+        await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
+      });
+    });
+  });
+
+  context('group', () => {
+    let group; let task; let members; let leader;
+
+    before(async () => {
+      const groupData = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'Test Guild',
+          type: 'guild',
+        },
+        members: 1,
+      });
+
+      group = groupData.group;
+      members = groupData.members;
+      leader = groupData.groupLeader;
+
+      task = await leader.post(`/tasks/group/${group._id}`, {
+        text: 'test habit',
+        type: 'habit',
+      });
+    });
+
+    context('task can be accessed', async () => {
+      it('can get group task if leader of that group', async () => {
+        const getTask = await leader.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+
+      it('can get group task if member of that group', async () => {
+        const getTask = await members[0].get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+    });
+
+    context('task cannot be accessed', () => {
+      it('cannot get a task in a group i am not part of', async () => {
+        await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
      });
    });
  });
@@ -179,7 +179,6 @@ describe('GET /tasks/user', () => {
    expect(dailys2[0].isDue).to.be.false;
  });

-
  xit('returns dailies with isDue for the date specified and will add CDS offset if time is not supplied and assumes timezones', async () => {
    const timezone = 240;
    await user.update({
@@ -687,7 +687,6 @@ describe('POST /tasks/user', () => {
      });
    });

-
    it('can create checklists', async () => {
      const task = await user.post('/tasks/user', {
        text: 'test daily',
@@ -4,8 +4,12 @@ import {
 } from '../../../../../helpers/api-integration/v3';

 describe('PUT /tasks/:id', () => {
-  let user; let guild; let member; let member2; let
-    task;
+  let user;
+  let guild;
+  let member;
+  let member2;
+  let habit;
+  let todo;

  function findAssignedTask (memberTask) {
    return memberTask.group.id === guild._id;
@@ -25,7 +29,7 @@ describe('PUT /tasks/:id', () => {
    member = members[0]; // eslint-disable-line prefer-destructuring
    member2 = members[1]; // eslint-disable-line prefer-destructuring

-    task = await user.post(`/tasks/group/${guild._id}`, {
+    habit = await user.post(`/tasks/group/${guild._id}`, {
      text: 'test habit',
      type: 'habit',
      up: false,
@@ -33,12 +37,18 @@ describe('PUT /tasks/:id', () => {
      notes: 1976,
    });

-    await user.post(`/tasks/${task._id}/assign/${member._id}`);
-    await user.post(`/tasks/${task._id}/assign/${member2._id}`);
+    todo = await user.post(`/tasks/group/${guild._id}`, {
+      text: 'test todo',
+      type: 'todo',
+      notes: 1976,
+    });
+
+    await user.post(`/tasks/${habit._id}/assign/${member._id}`);
+    await user.post(`/tasks/${habit._id}/assign/${member2._id}`);
  });

  it('updates a group task', async () => {
-    const savedHabit = await user.put(`/tasks/${task._id}`, {
+    const savedHabit = await user.put(`/tasks/${habit._id}`, {
      notes: 'some new notes',
    });

@@ -51,14 +61,14 @@ describe('PUT /tasks/:id', () => {
      managerId: member._id,
    });

-    // change the todo
-    task = await member.put(`/tasks/${task._id}`, {
+    // change the habit
+    habit = await member.put(`/tasks/${habit._id}`, {
      text: 'new text!',
      requiresApproval: true,
    });

    const memberTasks = await member2.get('/tasks/user');
-    const syncedTask = find(memberTasks, memberTask => memberTask.group.taskId === task._id);
+    const syncedTask = find(memberTasks, memberTask => memberTask.group.taskId === habit._id);

    // score up to trigger approval
    await expect(member2.post(`/tasks/${syncedTask._id}/score/up`))
@@ -69,9 +79,39 @@ describe('PUT /tasks/:id', () => {
      });
  });

+  it('member updates a group task value - not allowed', async () => {
+    // change the todo
+    await expect(member.put(`/tasks/${habit._id}`, {
+      text: 'new text!',
+    })).to.eventually.be.rejected.and.to.eql({
+      code: 401,
+      error: 'NotAuthorized',
+      message: t('onlyGroupLeaderCanEditTasks'),
+    });
+  });
+
+  it('member updates the collapseChecklist property - change is allowed', async () => {
+    // change the todo
+    await member.put(`/tasks/${todo._id}`, {
+      collapseChecklist: true,
+    });
+  });
+
+  it('member updates the collapseChecklist and another property - change not allowed', async () => {
+    // change the todo
+    await expect(member.put(`/tasks/${todo._id}`, {
+      collapseChecklist: true,
+      title: 'test',
+    })).to.eventually.be.rejected.and.to.eql({
+      code: 401,
+      error: 'NotAuthorized',
+      message: t('onlyGroupLeaderCanEditTasks'),
+    });
+  });
+
  it('updates a group task with checklist', async () => {
    // add a new todo
-    task = await user.post(`/tasks/group/${guild._id}`, {
+    habit = await user.post(`/tasks/group/${guild._id}`, {
      text: 'todo',
      type: 'todo',
      checklist: [
@@ -81,13 +121,13 @@ describe('PUT /tasks/:id', () => {
      ],
    });

-    await user.post(`/tasks/${task._id}/assign/${member._id}`);
+    await user.post(`/tasks/${habit._id}/assign/${member._id}`);

    // change the checklist text
-    task = await user.put(`/tasks/${task._id}`, {
+    habit = await user.put(`/tasks/${habit._id}`, {
      checklist: [
        {
-          id: task.checklist[0].id,
+          id: habit.checklist[0].id,
          text: 'checklist 1 - edit',
        },
        {
@@ -96,18 +136,17 @@ describe('PUT /tasks/:id', () => {
      ],
    });

-    expect(task.checklist.length).to.eql(2);
+    expect(habit.checklist.length).to.eql(2);
  });

  it('updates the linked tasks', async () => {
-    await user.put(`/tasks/${task._id}`, {
+    await user.put(`/tasks/${habit._id}`, {
      text: 'some new text',
      up: false,
      down: false,
      notes: 'some new notes',
    });

-
    const memberTasks = await member.get('/tasks/user');
    const syncedTask = find(memberTasks, findAssignedTask);

@@ -117,7 +156,7 @@ describe('PUT /tasks/:id', () => {
  });

  it('updates the linked tasks for all assigned users', async () => {
-    await user.put(`/tasks/${task._id}`, {
+    await user.put(`/tasks/${habit._id}`, {
      text: 'some new text',
      up: false,
      down: false,
@@ -144,14 +183,13 @@ describe('PUT /tasks/:id', () => {
      managerId: member2._id,
    });

-    await member2.put(`/tasks/${task._id}`, {
+    await member2.put(`/tasks/${habit._id}`, {
      text: 'some new text',
      up: false,
      down: false,
      notes: 'some new notes',
    });

-
    const memberTasks = await member.get('/tasks/user');
    const syncedTask = find(memberTasks, findAssignedTask);

@@ -1,4 +1,3 @@
-
 import { v4 as generateUUID } from 'uuid';
 import { find } from 'lodash';
 import {
@@ -325,7 +324,6 @@ describe('POST /user/class/cast/:spellId', () => {
    expect(result.user.stats.mp).to.equal(10);
  });

-
  // TODO find a way to have sinon working in integration tests
  // it doesn't work when tests are running separately from server
  it('passes correct target to spell when targetType === \'tasks\'');
@@ -4,7 +4,6 @@ import {
  translate as t,
 } from '../../../../helpers/api-integration/v3';

-
 describe('PUT /user', () => {
  let user;

@@ -53,7 +52,6 @@ describe('PUT /user', () => {
      expect(user.tags.length).to.be.eql(userTags.length + 1);
    });

-
    it('validates profile.name', async () => {
      await expect(user.put('/user', {
        'profile.name': ' ', // string should be trimmed
@@ -10,7 +10,6 @@ import {
  sha1Encrypt as sha1EncryptPassword,
 } from '../../../../../../website/server/libs/password';

-
 describe('POST /user/auth/local/login', () => {
  let api;
  let user;
@@ -9,7 +9,6 @@ import {
  sha1Encrypt as sha1EncryptPassword,
 } from '../../../../../../website/server/libs/password';

-
 const ENDPOINT = '/user/auth/update-email';

 describe('PUT /user/auth/update-email', () => {
@@ -1,4 +1,3 @@
-
 import { v4 as generateUUID } from 'uuid';
 import { find } from 'lodash';
 import {
@@ -310,7 +309,6 @@ describe('POST /user/class/cast/:spellId', () => {
    expect(result.user.stats.mp).to.equal(10);
  });

-
  // TODO find a way to have sinon working in integration tests
  // it doesn't work when tests are running separately from server
  it('passes correct target to spell when targetType === \'tasks\'');
@@ -130,7 +130,6 @@ describe('POST /user/reset', () => {
      },
    });

-
    await hero.post('/user/reset');

    const heroRes = await admin.get(`/hall/heroes/${hero.auth.local.username}`);
@@ -4,7 +4,6 @@ import {
  translate as t,
 } from '../../../helpers/api-integration/v4';

-
 describe('PUT /user', () => {
  let user;

@@ -53,7 +52,6 @@ describe('PUT /user', () => {
      expect(user.tags.length).to.be.eql(userTags.length + 1);
    });

-
    it('profile.name cannot be an empty string or null', async () => {
      await expect(user.put('/user', {
        'profile.name': ' ', // string should be trimmed
@@ -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,4 +1,3 @@
-
 import {
  generateUser,
 } from '../../helpers/common.helper';
@@ -36,7 +35,6 @@ describe('getDebuffPotionItems', () => {
    user.stats.buffs.snowball = true;
    user.stats.buffs.shinySeed = true;

-
    const result = getDebuffPotionItems(user);

    expect(result).to.be.an('array').that.deep.include.members([
@@ -1,4 +1,3 @@
-
 import {
  generateUser,
 } from '../../helpers/common.helper';
@@ -27,7 +26,6 @@ describe('setDebuffPotionItems', () => {
    const firstSetResult = [...setDebuffPotionItems(user).pinnedItems];
    const secondSetResult = [...setDebuffPotionItems(user).pinnedItems];

-
    expect(firstSetResult).to.be.deep.equal(secondSetResult);
  });

@@ -90,7 +90,6 @@ describe('shops', () => {
        },
      });

-
      const shopWizardItems = shared.shops.getMarketGearCategories(userWithItems).find(x => x.identifier === 'wizard').items.filter(x => x.klass === 'wizard' && (x.owned === false || x.owned === undefined));
      expect(shopWizardItems.length).to.eql(0);
    });
@@ -122,7 +121,6 @@ describe('shops', () => {
        },
      });

-
      const shopWizardItems = shared.shops.getMarketGearCategories(userWithItems).find(x => x.identifier === 'wizard').items.filter(x => x.klass === 'wizard' && (x.owned === false || x.owned === undefined));
      expect(shopWizardItems.find(item => item.key === 'weapon_wizard_5').locked).to.eql(false);
      expect(shopWizardItems.find(item => item.key === 'weapon_wizard_6').locked).to.eql(true);
@@ -75,7 +75,6 @@ describe('shared.ops.buyGem', () => {
      expect(user.stats.gp).to.equal(goldPoints - planGemLimits.convRate * 2);
    });

-
    context('Failure conditions', () => {
      it('returns an error when key is not provided', done => {
        try {
@@ -141,7 +141,6 @@ describe('shared.ops.buyQuest', () => {
    }
  });

-
  it('does not buy Gem-premium Quests', done => {
    user.stats.gp = 9999;
    try {
@@ -43,7 +43,6 @@ describe('shared.ops.purchase', () => {
      }
    });

-
    it('returns error when unknown type is provided', done => {
      try {
        purchase(user, { params: { type: 'randomType', key: 'gem' } });
@@ -96,7 +95,6 @@ describe('shared.ops.purchase', () => {
      }
    });

-
    it('returns error when item is not found', done => {
      const params = { key: 'notExisting', type: 'food' };

@@ -29,7 +29,6 @@ describe('shared.ops.reset', () => {
    tasksToRemove = [habit, todo, daily, reward];
  });

-
  it('resets a user', () => {
    const [, message] = reset(user);

@@ -10,6 +10,8 @@ describe('shared.ops.unlock', () => {
  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 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(() => {
@@ -206,6 +208,40 @@ describe('shared.ops.unlock', () => {
    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 } });
@@ -246,6 +282,37 @@ describe('shared.ops.unlock', () => {
    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;
@@ -377,7 +377,6 @@ describe('shouldDo', () => {
        m: false,
      };

-
      [0, 1, 2, 3, 4, 5, 6].forEach(weekday => {
        day = moment().add(1, 'weeks').day(weekday).toDate();

@@ -1,9 +1,10 @@
 import express from 'express';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import bodyParser from 'body-parser';
+import http from 'http';

 const app = express();
-const server = require('http').createServer(app);
+const server = http.createServer(app);

 const PORT = process.env.TEST_WEBHOOK_APP_PORT || 3099; // eslint-disable-line no-process-env

@@ -30,7 +31,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', () => {
@@ -10,7 +10,6 @@ import {

 export { translate } from './translate';

-
 export function generateUser (options = {}) {
  const user = new User(options).toObject();

@@ -1,6 +1,7 @@
 import i18n from '../../website/common/script/i18n';
+import { translations } from '../../website/server/libs/i18n';

-i18n.translations = require('../../website/server/libs/i18n').translations;
+i18n.translations = translations;

 const STRING_ERROR_MSG = 'Error processing the string. Please see Help > Report a Bug.';
 const STRING_DOES_NOT_EXIST_MSG = /^String '.*' not found.$/;
@@ -1,5 +1,4 @@
-
-const glob = require('glob').sync;
+import { sync as glob } from 'glob';

 describe('Locales files', () => {
  it('do not contain duplicates of any keys', () => {
@@ -1,6 +1,5 @@
-
-const glob = require('glob').sync;
-const readFile = require('fs').readFileSync;
+import { sync as glob } from 'glob';
+import { readFileSync as readFile } from 'fs';

 const IMPORT_REGEX = /(import|require).*common\/script/;

@@ -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);
@@ -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.4.1",
-    "@vue/cli-plugin-eslint": "^4.4.1",
-    "@vue/cli-plugin-router": "^4.4.1",
-    "@vue/cli-plugin-unit-mocha": "^4.4.1",
-    "@vue/cli-service": "^4.4.1",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-plugin-router": "^4.4.6",
+    "@vue/cli-plugin-unit-mocha": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
    "@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.8",
+    "sass": "^1.26.9",
    "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.2.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.3.2",
+    "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,24 +1,78 @@
 .promo_armoire_backgrounds_202006 {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -259px 0px;
+  background-position: -340px -524px;
  width: 423px;
  height: 147px;
 }
 .promo_mystery_202006 {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -259px;
+  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: -259px -148px;
+  background-position: -1032px -389px;
  width: 96px;
  height: 69px;
 }
-.scene_hiking {
+.scene_achievement {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -524px;
+  width: 339px;
+  height: 210px;
+}
+.scene_hat_guild {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
  background-position: 0px 0px;
+  width: 444px;
+  height: 336px;
+}
+.scene_hiking {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  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,120 +1,186 @@
-.quest_bunny {
+.quest_amber {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1546px;
-  width: 210px;
-  height: 186px;
+  background-position: -1320px -220px;
+  width: 219px;
+  height: 219px;
 }
-.quest_butterfly {
+.quest_armadillo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
  background-position: -1320px -660px;
  width: 219px;
  height: 219px;
 }
-.quest_cheetah {
+.quest_atom1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px 0px;
-  width: 219px;
-  height: 219px;
+  background-position: -1333px -1332px;
+  width: 250px;
+  height: 150px;
 }
-.quest_cow {
+.quest_atom2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1760px 0px;
-  width: 174px;
-  height: 213px;
+  background-position: -642px -1534px;
+  width: 207px;
+  height: 138px;
 }
-.quest_dilatory {
+.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_dilatoryDistress1 {
+.quest_badger {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -222px -1332px;
-  width: 210px;
-  height: 210px;
-}
-.quest_dilatoryDistress2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1760px -422px;
-  width: 150px;
-  height: 150px;
-}
-.quest_dilatoryDistress3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -452px;
+  background-position: -660px 0px;
  width: 219px;
  height: 219px;
 }
-.quest_dilatory_derby {
+.quest_basilist {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -232px;
-  width: 219px;
-  height: 219px;
+  background-position: -191px -1721px;
+  width: 189px;
+  height: 141px;
 }
-.quest_dolphin {
+.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_dustbunnies {
+.quest_bunny {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -452px;
+  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_egg {
+.quest_cheetah {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1760px -214px;
-  width: 165px;
-  height: 207px;
-}
-.quest_evilsanta {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1760px -875px;
-  width: 118px;
-  height: 131px;
-}
-.quest_evilsanta2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -220px;
+  background-position: -880px 0px;
  width: 219px;
  height: 219px;
 }
-.quest_falcon {
+.quest_cow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -440px;
-  width: 219px;
-  height: 219px;
+  background-position: -1762px 0px;
+  width: 174px;
+  height: 213px;
 }
-.quest_ferret {
+.quest_dilatory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
  background-position: 0px -672px;
  width: 219px;
  height: 219px;
 }
-.quest_frog {
+.quest_dilatoryDistress1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1332px;
-  width: 221px;
-  height: 213px;
+  background-position: -1540px -1082px;
+  width: 210px;
+  height: 210px;
 }
-.quest_ghost_stag {
+.quest_dilatoryDistress2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -672px;
-  width: 219px;
-  height: 219px;
+  background-position: -1762px -573px;
+  width: 150px;
+  height: 150px;
 }
-.quest_goldenknight1 {
+.quest_dilatoryDistress3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
  background-position: -660px -672px;
  width: 219px;
  height: 219px;
 }
+.quest_dilatory_derby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px -440px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dolphin {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px -672px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dustbunnies {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1100px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_egg {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1762px -214px;
+  width: 165px;
+  height: 207px;
+}
+.quest_evilsanta {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1762px -724px;
+  width: 118px;
+  height: 131px;
+}
+.quest_evilsanta2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1100px -660px;
+  width: 219px;
+  height: 219px;
+}
+.quest_falcon {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: 0px -892px;
+  width: 219px;
+  height: 219px;
+}
+.quest_ferret {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  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;
+}
+.quest_frog {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1540px 0px;
+  width: 221px;
+  height: 213px;
+}
+.quest_ghost_stag {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px -892px;
+  width: 219px;
+  height: 219px;
+}
+.quest_goldenknight1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1100px -892px;
+  width: 219px;
+  height: 219px;
+}
 .quest_goldenknight2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -462px -1546px;
+  background-position: -1082px -1332px;
  width: 250px;
  height: 150px;
 }
@@ -126,271 +192,205 @@
 }
 .quest_gryphon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -876px -1332px;
+  background-position: -648px -1332px;
  width: 216px;
  height: 177px;
 }
 .quest_guineapig {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -440px;
+  background-position: -220px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_harpy {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -660px;
+  background-position: -1320px -880px;
  width: 219px;
  height: 219px;
 }
 .quest_hedgehog {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -433px -1332px;
+  background-position: -205px -1332px;
  width: 219px;
  height: 186px;
 }
 .quest_hippo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -892px;
+  background-position: -220px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_horse {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -892px;
+  background-position: -440px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_kangaroo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -892px;
+  background-position: -660px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_kraken {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1093px -1332px;
+  background-position: -865px -1332px;
  width: 216px;
  height: 177px;
 }
 .quest_lostMasterclasser1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -892px;
+  background-position: -1100px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px 0px;
+  background-position: -880px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -220px;
+  background-position: 0px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1760px -724px;
+  background-position: -1762px -422px;
  width: 150px;
  height: 150px;
 }
 .quest_mayhemMistiflying2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px 0px;
+  background-position: -1320px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -880px;
+  background-position: -1320px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_monkey {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1112px;
+  background-position: -660px -892px;
  width: 219px;
  height: 219px;
 }
 .quest_moon1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -437px;
+  background-position: -1540px -648px;
  width: 216px;
  height: 216px;
 }
 .quest_moon2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -1112px;
+  background-position: -1100px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_moon3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -1112px;
+  background-position: -1100px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -1112px;
+  background-position: -440px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -1112px;
+  background-position: -220px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -1112px;
+  background-position: -880px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_nudibranch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -871px;
+  background-position: -1540px -865px;
  width: 216px;
  height: 216px;
 }
 .quest_octopus {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -653px -1332px;
+  background-position: -425px -1332px;
  width: 222px;
  height: 177px;
 }
 .quest_owl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px 0px;
+  background-position: -440px -452px;
  width: 219px;
  height: 219px;
 }
 .quest_peacock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -220px;
+  background-position: -1540px -431px;
  width: 216px;
  height: 216px;
 }
 .quest_penguin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1733px;
+  background-position: 0px -1721px;
  width: 190px;
  height: 183px;
 }
 .quest_pterodactyl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -1112px;
+  background-position: 0px -452px;
  width: 219px;
  height: 219px;
 }
 .quest_rat {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -440px;
+  background-position: -660px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_robot {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -892px;
+  background-position: -220px -232px;
  width: 219px;
  height: 219px;
 }
 .quest_rock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -654px;
+  background-position: -1540px -214px;
  width: 216px;
  height: 216px;
 }
 .quest_rooster {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1527px -1332px;
+  background-position: -428px -1534px;
  width: 213px;
  height: 174px;
 }
 .quest_ruby {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -892px;
+  background-position: 0px -232px;
  width: 219px;
  height: 219px;
 }
 .quest_sabretooth {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -220px;
+  background-position: -440px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_seaserpent {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_silver {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_slime {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sloth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_snail {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -1088px;
-  width: 219px;
-  height: 213px;
-}
-.quest_snake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1310px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_spider {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -211px -1546px;
-  width: 250px;
-  height: 150px;
-}
-.quest_squirrel {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1760px -573px;
-  width: 150px;
-  height: 150px;
-}
-.quest_stoikalmCalamity2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px 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%;
@@ -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>
--- a/Show More
+++ b/Show More