4.198.1

fix(countdowns): more-than-a-month edge case
Merge branch 'develop' into release
2026-05-12 11:39:44 -05:00 · 2021-07-01 16:00:13 -05:00 · 2021-07-01 16:00:00 -05:00 · 2021-07-01 15:50:18 -05:00 · 2021-06-29 15:45:33 -05:00 · 2021-06-29 15:45:12 -05:00
664 changed files with 39836 additions and 34521 deletions
@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20210525_pet_color_achievements';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {
+    migration: MIGRATION_NAME,
+  };
+
+  if (user && user.items && user.items.pets) {
+    const pets = user.items.pets;
+    if (pets['Wolf-CottonCandyBlue'] > 0
+      && pets['TigerCub-CottonCandyBlue'] > 0
+      && pets['PandaCub-CottonCandyBlue'] > 0
+      && pets['LionCub-CottonCandyBlue'] > 0
+      && pets['Fox-CottonCandyBlue'] > 0
+      && pets['FlyingPig-CottonCandyBlue'] > 0
+      && pets['Dragon-CottonCandyBlue'] > 0
+      && pets['Cactus-CottonCandyBlue'] > 0
+      && pets['BearCub-CottonCandyBlue'] > 0) {
+        set['achievements.violetsAreBlue'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Wolf-CottonCandyBlue']
+      && mounts['TigerCub-CottonCandyBlue']
+      && mounts['PandaCub-CottonCandyBlue']
+      && mounts['LionCub-CottonCandyBlue']
+      && mounts['Fox-CottonCandyBlue']
+      && mounts['FlyingPig-CottonCandyBlue']
+      && mounts['Dragon-CottonCandyBlue']
+      && mounts['Cactus-CottonCandyBlue']
+      && mounts['BearCub-CottonCandyBlue'] ) {
+        set['achievements.wildBlueYonder'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2021-05-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};
@@ -1,19 +1,19 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.192.1",
+  "version": "4.198.1",
  "main": "./website/server/index.js",
  "dependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-env": "^7.13.15",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.4",
    "@babel/register": "^7.13.16",
    "@google-cloud/trace-agent": "^5.1.3",
    "@parse/node-apn": "^4.1.1",
    "@slack/webhook": "^6.0.0",
    "accepts": "^1.3.5",
    "amazon-payments": "^0.2.8",
-    "amplitude": "^5.1.5",
-    "apidoc": "^0.26.0",
+    "amplitude": "^5.1.6",
+    "apidoc": "^0.28.1",
    "apple-auth": "^1.0.7",
    "bcrypt": "^5.0.1",
    "body-parser": "^1.18.3",
@@ -30,15 +30,15 @@
    "express": "^4.16.3",
    "express-basic-auth": "^1.1.5",
    "express-validator": "^5.2.0",
-    "glob": "^7.1.6",
+    "glob": "^7.1.7",
    "got": "^11.8.2",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-nodemon": "^2.5.0",
-    "gulp.spritesmith": "^6.9.0",
+    "gulp.spritesmith": "^6.12.1",
    "habitica-markdown": "^3.0.0",
-    "helmet": "^4.5.0",
+    "helmet": "^4.6.0",
    "image-size": "^1.0.0",
    "in-app-purchase": "^1.11.3",
    "js2xmlparser": "^4.0.1",
@@ -49,9 +49,9 @@
    "method-override": "^3.0.0",
    "moment": "^2.29.1",
    "moment-recur": "^1.0.7",
-    "mongoose": "^5.12.6",
+    "mongoose": "^5.12.10",
    "morgan": "^1.10.0",
-    "nconf": "^0.11.1",
+    "nconf": "^0.11.2",
    "node-gcm": "^1.0.4",
    "on-headers": "^1.0.2",
    "passport": "^0.4.1",
@@ -61,13 +61,13 @@
    "paypal-rest-sdk": "^1.8.1",
    "pp-ipn": "^1.1.0",
    "ps-tree": "^1.0.0",
-    "rate-limiter-flexible": "^2.2.1",
+    "rate-limiter-flexible": "^2.2.2",
    "redis": "^3.1.2",
    "regenerator-runtime": "^0.13.7",
    "remove-markdown": "^0.3.0",
    "rimraf": "^3.0.2",
-    "short-uuid": "^4.1.0",
-    "stripe": "^8.145.0",
+    "short-uuid": "^4.2.0",
+    "stripe": "^8.150.0",
    "superagent": "^6.1.0",
    "universal-analytics": "^0.4.23",
    "useragent": "^2.1.9",
@@ -122,7 +122,7 @@
    "monk": "^7.3.4",
    "require-again": "^2.0.0",
    "run-rs": "^0.7.4",
-    "sinon": "^9.2.4",
+    "sinon": "^10.0.0",
    "sinon-chai": "^3.6.0",
    "sinon-stub-promise": "^4.0.0"
  },
@@ -656,9 +656,11 @@ describe('webhooks', () => {
          id: 'group-id',
          name: 'some group',
          otherData: 'foo',
+          quest: {},
        },
        quest: {
          key: 'some-key',
+          questOwner: 'user-id',
        },
      };
    });
@@ -263,6 +263,7 @@ describe('POST /groups/:groupId/quests/invite/:questKey', () => {
        expect(body.group.id).to.eql(questingGroup.id);
        expect(body.group.name).to.eql(questingGroup.name);
        expect(body.quest.key).to.eql(PET_QUEST);
+        expect(body.quest.questOwner).to.eql(questingGroup.leader._id);
      });
    });
  });
@@ -61,15 +61,6 @@ describe('POST /groups/:groupId/quests/leave', () => {
        });
    });

-    it('returns an error when quest is not active', async () => {
-      await expect(partyMembers[0].post(`/groups/${questingGroup._id}/quests/leave`))
-        .to.eventually.be.rejected.and.eql({
-          code: 404,
-          error: 'NotFound',
-          message: t('noActiveQuestToLeave'),
-        });
-    });
-
    it('returns an error when quest leader attempts to leave', async () => {
      await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
      await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
@@ -97,18 +88,14 @@ describe('POST /groups/:groupId/quests/leave', () => {
    });
  });

-  it('leaves a quest', async () => {
-    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
-    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
-    await partyMembers[1].post(`/groups/${questingGroup._id}/quests/accept`);
-
-    const leaveResult = await partyMembers[0].post(`/groups/${questingGroup._id}/quests/leave`);
+  async function letPartyMemberLeaveAndCheckChanges (partyMember) {
+    const leaveResult = await partyMember.post(`/groups/${questingGroup._id}/quests/leave`);
    await Promise.all([
-      partyMembers[0].sync(),
+      partyMember.sync(),
      questingGroup.sync(),
    ]);

-    expect(partyMembers[0].party.quest).to.eql({
+    expect(partyMember.party.quest).to.eql({
      key: null,
      progress: {
        up: 0,
@@ -120,6 +107,29 @@ describe('POST /groups/:groupId/quests/leave', () => {
      RSVPNeeded: false,
    });
    expect(questingGroup.quest).to.deep.equal(leaveResult);
-    expect(questingGroup.quest.members[partyMembers[0]._id]).to.be.false;
+    expect(questingGroup.quest.members[partyMember._id]).to.be.false;
+  }
+
+  it('leaves an active quest', async () => {
+    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
+    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
+    await partyMembers[1].post(`/groups/${questingGroup._id}/quests/accept`);
+
+    await questingGroup.sync();
+
+    expect(questingGroup.quest.active).to.eql(true);
+
+    await letPartyMemberLeaveAndCheckChanges(partyMembers[0]);
+  });
+
+  it('leaves an inactive quest ', async () => {
+    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
+    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
+
+    await questingGroup.sync();
+
+    expect(questingGroup.quest.active).to.eql(false);
+
+    await letPartyMemberLeaveAndCheckChanges(partyMembers[0]);
  });
 });
@@ -31,19 +31,45 @@ import '../../src/assets/css/sprites/spritesmith-main-23.css';
 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 '../../src/assets/css/sprites/spritesmith-main-27.css';
+import '../../src/assets/css/sprites/spritesmith-main-28.css';
+import '../../src/assets/css/sprites/spritesmith-main-29.css';
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';
+import getStore from '@/store';
+
+import i18n from '../../../common/script/i18n';

 // couldn't inject the languages easily,
 // so just a "$t()" string to show that this will be translated
-Vue.prototype.$t = function translateString (...args) {
+i18n.t = function translateString (...args) {
  return `$t(${JSON.stringify(args)})`;
 };
+Vue.prototype.$t = i18n.t;

 Vue.use(BootstrapVue);
 Vue.use(StoreModule);

+const store = getStore();
+store.state.user.data = {
+  stats: {},
+  tags: [],
+  items: {
+    quests: {
+      moon1: 3,
+    },
+  },
+  party: {
+    quest: {
+
+    },
+  },
+};
+
+Vue.prototype.$store = store;
+
+
 const req = require.context('../../src', true, /.stories.js$/);

 function loadStories () {
@@ -3,11 +3,12 @@
    display: inline-block;
 }

-.content {
-    color: white;
-    background: grey;
-}
-
 .inline-block {
    display: inline-block;
 }
+
+.component-showcase {
+    position: absolute;
+    margin: 20px;
+    width: calc(100% - 40px);
+}
@@ -1,3 +1,5 @@
+import { v4 as generateUUID } from 'uuid';
+
 export const userStyles = {
  contributor: {
    admin: true,
@@ -72,4 +74,11 @@ export const userStyles = {
    maxHealth: 50,
    maxMP: 158,
  },
+  profile: {
+    name: 'user',
+  },
+  _id: generateUUID(),
+  flags: {
+    classSelected: true,
+  },
 };
@@ -14,37 +14,37 @@
  },
  "dependencies": {
    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-knobs": "^6.1.15",
+    "@storybook/addon-knobs": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/addon-notes": "^5.3.21",
    "@storybook/vue": "^6.2.9",
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-eslint": "^4.5.11",
-    "@vue/cli-plugin-router": "^4.5.12",
-    "@vue/cli-plugin-unit-mocha": "^4.5.11",
-    "@vue/cli-service": "^4.5.12",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-plugin-router": "^4.5.13",
+    "@vue/cli-plugin-unit-mocha": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
    "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^8.1.0",
+    "amplitude-js": "^8.3.0",
    "axios": "^0.21.1",
    "axios-progress-bar": "^1.2.0",
    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "chai": "^4.3.4",
-    "core-js": "^3.11.1",
+    "core-js": "^3.12.1",
    "eslint": "^6.8.0",
    "eslint-config-habitrpg": "^6.2.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-vue": "^6.2.2",
    "habitica-markdown": "^3.0.0",
    "hellojs": "^1.19.3",
-    "inspectpack": "^4.6.1",
+    "inspectpack": "^4.7.1",
    "intro.js": "^3.4.0",
-    "jquery": "^3.5.1",
+    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "nconf": "^0.11.2",
-    "sass": "^1.32.11",
+    "sass": "^1.34.0",
    "sass-loader": "^8.0.2",
    "smartbanner.js": "^1.16.0",
    "svg-inline-loader": "^0.8.2",
@@ -63,6 +63,6 @@
    "webpack": "^4.46.0"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12"
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2"
  }
 }
@@ -1,846 +1,816 @@
-.background_holiday_hearth {
+.background_heart_shaped_bubbles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px 0px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_market {
+.background_heather_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px 0px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_wreath {
+.background_herding_sheep_in_autumn {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px 0px;
  width: 141px;
  height: 147px;
 }
-.background_hot_air_balloon {
+.background_holiday_hearth {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -148px;
  width: 141px;
  height: 147px;
 }
-.background_hot_spring {
+.background_holiday_market {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -148px;
  width: 141px;
  height: 147px;
 }
-.background_ice_cave {
+.background_holiday_wreath {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -148px;
  width: 141px;
  height: 147px;
 }
-.background_iceberg {
+.background_hot_air_balloon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px 0px;
  width: 141px;
  height: 147px;
 }
-.background_icicle_bridge {
+.background_hot_spring {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -148px;
  width: 141px;
  height: 147px;
 }
-.background_idyllic_cabin {
+.background_ice_cave {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -296px;
  width: 141px;
  height: 147px;
 }
-.background_in_a_classroom {
+.background_iceberg {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -296px;
  width: 141px;
  height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_icicle_bridge {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -296px;
  width: 141px;
  height: 147px;
 }
-.background_in_the_armory {
+.background_idyllic_cabin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -296px;
  width: 141px;
  height: 147px;
 }
-.background_inside_an_ornament {
+.background_in_a_classroom {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px 0px;
  width: 141px;
  height: 147px;
 }
-.background_island_waterfalls {
+.background_in_an_ancient_tomb {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -148px;
  width: 141px;
  height: 147px;
 }
-.background_jungle_canopy {
+.background_in_the_armory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -296px;
  width: 141px;
  height: 147px;
 }
-.background_kelp_forest {
+.background_inside_an_ornament {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -444px;
  width: 141px;
  height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_island_waterfalls {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -444px;
  width: 141px;
  height: 147px;
 }
-.background_lighthouse_shore {
+.background_jungle_canopy {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -444px;
  width: 141px;
  height: 147px;
 }
-.background_lilypad {
+.background_kelp_forest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -444px;
  width: 141px;
  height: 147px;
 }
-.background_magic_beanstalk {
+.background_lake_with_floating_lanterns {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -444px;
  width: 141px;
  height: 147px;
 }
-.background_magical_candles {
+.background_lighthouse_shore {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px 0px;
  width: 141px;
  height: 147px;
 }
-.background_magical_museum {
+.background_lilypad {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -148px;
  width: 141px;
  height: 147px;
 }
-.background_marble_temple {
+.background_magic_beanstalk {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -296px;
  width: 141px;
  height: 147px;
 }
-.background_market {
+.background_magical_candles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -444px;
  width: 141px;
  height: 147px;
 }
-.background_meandering_cave {
+.background_magical_museum {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -592px;
  width: 141px;
  height: 147px;
 }
-.background_medieval_kitchen {
+.background_marble_temple {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -592px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_castle {
+.background_market {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -592px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_clouds {
+.background_meandering_cave {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -592px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_lake {
+.background_medieval_kitchen {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -592px;
  width: 141px;
  height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_midnight_castle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -592px;
  width: 141px;
  height: 147px;
 }
-.background_mistiflying_circus {
+.background_midnight_clouds {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px 0px;
  width: 141px;
  height: 147px;
 }
-.background_monster_makers_workshop {
+.background_midnight_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -148px;
  width: 141px;
  height: 147px;
 }
-.background_mountain_lake {
+.background_mist_shrouded_mountain {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -296px;
  width: 141px;
  height: 147px;
 }
-.background_mountain_pyramid {
+.background_mistiflying_circus {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -444px;
  width: 141px;
  height: 147px;
 }
-.background_mystical_observatory {
+.background_monster_makers_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -592px;
  width: 141px;
  height: 147px;
 }
-.background_night_dunes {
+.background_mountain_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -740px;
  width: 141px;
  height: 147px;
 }
-.background_ocean_sunrise {
+.background_mountain_pyramid {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -740px;
  width: 141px;
  height: 147px;
 }
-.background_old_fashioned_bakery {
+.background_mystical_observatory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -740px;
  width: 141px;
  height: 147px;
 }
-.background_on_tree_branch {
+.background_night_dunes {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -740px;
  width: 141px;
  height: 147px;
 }
-.background_open_waters {
+.background_ocean_sunrise {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -740px;
  width: 141px;
  height: 147px;
 }
-.background_orchard {
+.background_old_fashioned_bakery {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -740px;
  width: 141px;
  height: 147px;
 }
-.background_pagodas {
+.background_on_tree_branch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -740px;
  width: 141px;
  height: 147px;
 }
-.background_park_with_statue {
+.background_open_waters {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px 0px;
  width: 141px;
  height: 147px;
 }
-.background_pirate_flag {
+.background_orchard {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -148px;
  width: 141px;
  height: 147px;
 }
-.background_pixelists_workshop {
+.background_pagodas {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -296px;
  width: 141px;
  height: 147px;
 }
-.background_potion_shop {
+.background_park_with_statue {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -444px;
  width: 141px;
  height: 147px;
 }
-.background_productivity_plaza {
+.background_pirate_flag {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -592px;
  width: 141px;
  height: 147px;
 }
-.background_pumpkin_carriage {
+.background_pixelists_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -740px;
  width: 141px;
  height: 147px;
 }
-.background_pumpkin_patch {
+.background_potion_shop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -888px;
  width: 141px;
  height: 147px;
 }
-.background_purple {
+.background_productivity_plaza {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -888px;
  width: 141px;
  height: 147px;
 }
-.background_pyramids {
+.background_pumpkin_carriage {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainbow_meadow {
+.background_pumpkin_patch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainbows_end {
+.background_purple {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainforest {
+.background_pyramids {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainy_barnyard {
+.background_rainbow_meadow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainy_city {
+.background_rainbows_end {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -888px;
  width: 141px;
  height: 147px;
 }
-.background_red {
+.background_rainforest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px 0px;
  width: 141px;
  height: 147px;
 }
-.background_relaxation_river {
+.background_rainy_barnyard {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -148px;
  width: 141px;
  height: 147px;
 }
-.background_resting_in_the_inn {
+.background_rainy_city {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -296px;
  width: 141px;
  height: 147px;
 }
-.background_river_of_lava {
+.background_red {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -444px;
  width: 141px;
  height: 147px;
 }
-.background_rolling_hills {
+.background_relaxation_river {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -592px;
  width: 141px;
  height: 147px;
 }
-.background_rose_garden {
+.background_resting_in_the_inn {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -740px;
  width: 141px;
  height: 147px;
 }
-.background_rowboat {
+.background_river_of_lava {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -888px;
  width: 141px;
  height: 147px;
 }
-.background_salt_lake {
+.background_rolling_hills {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_sandcastle {
+.background_rose_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_school_of_fish {
+.background_rowboat {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_scribes_workshop {
+.background_salt_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_seafarer_ship {
+.background_sandcastle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_seaside_cliffs {
+.background_school_of_fish {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_shimmering_ice_prism {
+.background_scribes_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_shimmery_bubbles {
+.background_seafarer_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_slimy_swamp {
+.background_seaside_cliffs {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_snowglobe {
+.background_shimmering_ice_prism {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px 0px;
  width: 141px;
  height: 147px;
 }
-.background_snowman_army {
+.background_shimmery_bubbles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -148px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_day_fireplace {
+.background_slimy_swamp {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -296px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_pines {
+.background_snowglobe {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -444px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_sunrise {
+.background_snowman_army {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -592px;
  width: 141px;
  height: 147px;
 }
-.background_south_pole {
+.background_snowy_day_fireplace {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -740px;
  width: 141px;
  height: 147px;
 }
-.background_sparkling_snowflake {
+.background_snowy_pines {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -888px;
  width: 141px;
  height: 147px;
 }
-.background_spider_web {
+.background_snowy_sunrise {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_splash_in_a_puddle {
+.background_south_pole {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spooky_hotel {
+.background_sparkling_snowflake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spooky_scarecrow_field {
+.background_spider_web {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spring_rain {
+.background_splash_in_a_puddle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spring_thaw {
+.background_spooky_hotel {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stable {
+.background_spooky_scarecrow_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stained_glass {
+.background_spring_rain {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_starry_skies {
+.background_spring_thaw {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_starry_winter_night {
+.background_stable {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stoikalm_volcanoes {
+.background_stained_glass {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stone_circle {
+.background_starry_skies {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px 0px;
  width: 141px;
  height: 147px;
 }
-.background_stormy_rooftops {
+.background_starry_winter_night {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -148px;
  width: 141px;
  height: 147px;
 }
-.background_stormy_ship {
+.background_stoikalm_volcanoes {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -296px;
  width: 141px;
  height: 147px;
 }
-.background_strange_sewers {
+.background_stone_circle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -444px;
  width: 141px;
  height: 147px;
 }
-.background_strawberry_patch {
+.background_stormy_rooftops {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -592px;
  width: 141px;
  height: 147px;
 }
-.background_succulent_garden {
+.background_stormy_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -740px;
  width: 141px;
  height: 147px;
 }
-.background_summer_fireworks {
+.background_strange_sewers {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -888px;
  width: 141px;
  height: 147px;
 }
-.background_sunken_ship {
+.background_strawberry_patch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_meadow {
+.background_succulent_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_oasis {
+.background_summer_fireworks {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_savannah {
+.background_sunken_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_swarming_darkness {
+.background_sunset_meadow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_swimming_among_jellyfish {
+.background_sunset_oasis {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tar_pits {
+.background_sunset_savannah {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tavern {
+.background_swarming_darkness {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tea_party {
+.background_swimming_among_jellyfish {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_terraced_rice_field {
+.background_tar_pits {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_throne_room {
+.background_tavern {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_thunderstorm {
+.background_tea_party {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tide_pool {
+.background_terraced_rice_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tornado {
+.background_throne_room {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px 0px;
  width: 141px;
  height: 147px;
 }
-.background_toymakers_workshop {
+.background_thunderstorm {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -148px;
  width: 141px;
  height: 147px;
 }
-.background_training_grounds {
+.background_tide_pool {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -296px;
  width: 141px;
  height: 147px;
 }
-.background_treasure_room {
+.background_tornado {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -444px;
  width: 141px;
  height: 147px;
 }
-.background_tree_roots {
+.background_toymakers_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -592px;
  width: 141px;
  height: 147px;
 }
-.background_treehouse {
+.background_training_grounds {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -740px;
  width: 141px;
  height: 147px;
 }
-.background_tulip_garden {
+.background_treasure_room {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -888px;
  width: 141px;
  height: 147px;
 }
-.background_twinkly_lights {
+.background_tree_roots {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_twinkly_party_lights {
+.background_treehouse {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_underwater_ruins {
+.background_tulip_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_underwater_vents {
+.background_twinkly_lights {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_valentines_day_feasting_hall {
+.background_twinkly_party_lights {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_viking_ship {
+.background_underwater_ruins {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_violet {
+.background_underwater_vents {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_volcano {
+.background_valentines_day_feasting_hall {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_waterfall_rock {
+.background_viking_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_wedding_arch {
+.background_violet {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_windmills {
+.background_volcano {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_windy_autumn {
+.background_water_mill {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_winter_fireworks {
+.background_waterfall_rock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_winter_night {
+.background_wedding_arch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_winter_nocturne {
+.background_windmills {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_winter_storefront {
+.background_windy_autumn {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px 0px;
  width: 141px;
  height: 147px;
 }
-.background_winter_town {
+.background_winter_fireworks {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -148px;
  width: 141px;
  height: 147px;
 }
-.background_wintry_castle {
+.background_winter_night {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -296px;
  width: 141px;
  height: 147px;
 }
-.background_yellow {
+.background_winter_nocturne {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -444px;
  width: 141px;
  height: 147px;
 }
-.icon_background_afternoon_picnic {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -592px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_airship {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1773px -592px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_alpine_slopes {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -661px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_amid_ancient_ruins {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1773px -661px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_among_cattails {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -730px;
-  width: 68px;
-  height: 68px;
-}
@@ -1,48 +1,708 @@
+.weapon_special_2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1724px -1079px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1724px -1179px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_aetherCrystals {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -988px;
+  width: 114px;
+  height: 90px;
+}
+.weapon_special_bardInstrument {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1724px -1279px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_fencingFoil {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1724px -1379px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_lunarScythe {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: 0px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_mammothRiderSpear {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -91px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_nomadsScimitar {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -182px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_pageBanner {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -273px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_roguishRainbowMessage {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -364px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_skeletonKey {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -455px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_tachi {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -546px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_taskwoodsLantern {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -637px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_tridentOfCrashingTides {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -728px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_0 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -819px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -910px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1001px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1092px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_4 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1183px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_5 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1274px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_6 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1365px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_0 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1456px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1547px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1638px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1729px -1523px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_4 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: 0px -1614px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_5 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -91px -1614px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_6 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -182px -1614px;
+  width: 90px;
+  height: 90px;
+}
+.Pet_Currency_Gem {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -925px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_Currency_Gem1x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1804px -363px;
+  width: 15px;
+  height: 13px;
+}
+.Pet_Currency_Gem2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1528px -1227px;
+  width: 30px;
+  height: 26px;
+}
+.PixelPaw-Gold {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1348px -1174px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -507px -1246px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw002 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -559px -1246px;
+  width: 51px;
+  height: 51px;
+}
+.avatar_floral_healer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -1079px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_rogue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -1179px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_warrior {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -1279px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_wizard {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -1379px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_snowball_healer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -564px;
+  width: 120px;
+  height: 105px;
+}
+.avatar_snowball_rogue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -670px;
+  width: 120px;
+  height: 105px;
+}
+.avatar_snowball_warrior {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -776px;
+  width: 120px;
+  height: 105px;
+}
+.avatar_snowball_wizard {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -882px;
+  width: 120px;
+  height: 105px;
+}
+.empty_bottles {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -442px -1246px;
+  width: 64px;
+  height: 54px;
+}
+.ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -273px -1614px;
+  width: 90px;
+  height: 90px;
+}
+.inventory_present {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1100px -875px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_01 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1745px -776px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_02 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1745px -882px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_03 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1739px -988px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_04 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -220px -203px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_05 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -220px -272px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_06 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -220px -341px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_07 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -660px -435px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_08 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -660px -504px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_09 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -660px -573px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_10 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -880px -655px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_11 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -880px -724px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_12 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -880px -793px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1100px -944px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_congrats {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1100px -1013px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_fortify {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1538px -1315px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_getwell {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1538px -1384px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_goodluck {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -166px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_greeting {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -235px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -304px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_opaquePotion {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -373px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_seafoam {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -442px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_shinySeed {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -511px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_snowball {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -580px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_spookySparkles {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -649px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_thankyou {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -718px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_trinket {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -787px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_valentine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -856px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.knockout {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1407px -1227px;
+  width: 120px;
+  height: 47px;
+}
+.pet_key {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -994px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.rebirth_orb {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1063px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.seafoam_star {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -364px -1614px;
+  width: 90px;
+  height: 90px;
+}
+.shop_armoire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1132px -1454px;
+  width: 68px;
+  height: 68px;
+}
+.zzz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1775px -322px;
+  width: 40px;
+  height: 40px;
+}
+.zzz_light {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1775px -281px;
+  width: 40px;
+  height: 40px;
+}
+.notif_inventory_present_01 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1775px -363px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_02 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1775px -392px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_03 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1745px -845px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_04 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1774px -845px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_05 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1745px -951px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_06 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1774px -951px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_07 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1624px -1479px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_08 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1653px -1479px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_09 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1682px -1479px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_10 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1711px -1479px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_11 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1740px -1479px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_12 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1769px -1479px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_special_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1584px -1227px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_congrats {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1449px -1275px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_getwell {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1470px -1275px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_goodluck {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1798px -1479px;
+  width: 20px;
+  height: 26px;
+}
+.notif_inventory_special_greeting {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1491px -1275px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1559px -1227px;
+  width: 24px;
+  height: 26px;
+}
+.notif_inventory_special_thankyou {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1407px -1275px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_valentine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1428px -1275px;
+  width: 20px;
+  height: 24px;
+}
+.npc_bailey {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -638px -1614px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1745px -564px;
+  width: 63px;
+  height: 93px;
+}
+.npc_bailey_fall {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -455px -1614px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_habitoween {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -699px -1614px;
+  width: 54px;
+  height: 72px;
+}
+.npc_bailey_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1745px -670px;
+  width: 54px;
+  height: 93px;
+}
+.npc_bailey_spring {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -516px -1614px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_summer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1743px -432px;
+  width: 71px;
+  height: 101px;
+}
+.npc_bailey_thanksgiving {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -577px -1614px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_valentines {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1201px -1454px;
+  width: 63px;
+  height: 66px;
+}
+.npc_bailey_winter {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1348px -1095px;
+  width: 54px;
+  height: 78px;
+}
 .npc_matt {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1517px -1535px;
+  background-position: -1624px 0px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1152px -1095px;
  width: 195px;
  height: 138px;
 }
 .npc_matt_fall {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1375px -1315px;
+  background-position: -166px -1315px;
  width: 195px;
  height: 138px;
 }
 .npc_matt_habitoween {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -341px -1535px;
+  background-position: -362px -1315px;
  width: 195px;
  height: 138px;
 }
 .npc_matt_nye {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -537px -1535px;
+  background-position: -558px -1315px;
  width: 195px;
  height: 138px;
 }
 .npc_matt_spring {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -733px -1535px;
+  background-position: -754px -1315px;
  width: 195px;
  height: 138px;
 }
 .npc_matt_summer {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -929px -1535px;
+  background-position: -950px -1315px;
  width: 195px;
  height: 138px;
 }
 .npc_matt_thanksgiving {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1125px -1535px;
+  background-position: -1146px -1315px;
  width: 195px;
  height: 138px;
 }
 .npc_matt_winter {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1321px -1535px;
+  background-position: -1342px -1315px;
  width: 195px;
  height: 138px;
 }
@@ -54,19 +714,19 @@
 }
 .banner_flair_dysheartener {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1963px -444px;
+  background-position: -1743px -534px;
  width: 69px;
  height: 18px;
 }
 .phobia_dysheartener {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1187px -880px;
+  background-position: -1407px -844px;
  width: 201px;
  height: 195px;
 }
 .quest_alligator {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -1079px;
+  background-position: -1407px -428px;
  width: 201px;
  height: 213px;
 }
@@ -84,19 +744,19 @@
 }
 .quest_atom1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -665px -1315px;
+  background-position: -442px -1095px;
  width: 250px;
  height: 150px;
 }
 .quest_atom2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1167px -1315px;
+  background-position: -944px -1095px;
  width: 207px;
  height: 138px;
 }
 .quest_atom3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -747px -440px;
+  background-position: -967px -660px;
  width: 216px;
  height: 180px;
 }
@@ -114,19 +774,19 @@
 }
 .quest_basilist {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1844px 0px;
+  background-position: -1624px -139px;
  width: 189px;
  height: 141px;
 }
 .quest_beetle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -1293px;
+  background-position: -1407px -642px;
  width: 204px;
  height: 201px;
 }
 .quest_blackPearl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px 0px;
+  background-position: -1407px 0px;
  width: 216px;
  height: 216px;
 }
@@ -138,7 +798,7 @@
 }
 .quest_bunny {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -967px -660px;
+  background-position: -1407px -1040px;
  width: 210px;
  height: 186px;
 }
@@ -156,7 +816,7 @@
 }
 .quest_cow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1535px;
+  background-position: -307px -220px;
  width: 174px;
  height: 213px;
 }
@@ -168,13 +828,13 @@
 }
 .quest_dilatoryDistress1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -868px;
+  background-position: -1407px -217px;
  width: 210px;
  height: 210px;
 }
 .quest_dilatoryDistress2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1844px -142px;
+  background-position: -1624px -281px;
  width: 150px;
  height: 150px;
 }
@@ -204,13 +864,13 @@
 }
 .quest_egg {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -175px -1535px;
+  background-position: 0px -1315px;
  width: 165px;
  height: 207px;
 }
 .quest_evilsanta {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1844px -444px;
+  background-position: -1624px -432px;
  width: 118px;
  height: 131px;
 }
@@ -240,7 +900,7 @@
 }
 .quest_frog {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -1315px;
+  background-position: -220px -1095px;
  width: 221px;
  height: 213px;
 }
@@ -258,7 +918,7 @@
 }
 .quest_goldenknight2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -916px -1315px;
+  background-position: -693px -1095px;
  width: 250px;
  height: 150px;
 }
@@ -270,7 +930,7 @@
 }
 .quest_gryphon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -527px -220px;
+  background-position: -747px -440px;
  width: 216px;
  height: 177px;
 }
@@ -288,7 +948,7 @@
 }
 .quest_hedgehog {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1407px -1100px;
+  background-position: -1187px -880px;
  width: 219px;
  height: 186px;
 }
@@ -312,7 +972,7 @@
 }
 .quest_kraken {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -307px -220px;
+  background-position: -527px -220px;
  width: 216px;
  height: 177px;
 }
@@ -322,99 +982,3 @@
  width: 219px;
  height: 219px;
 }
-.quest_lostMasterclasser2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -1095px;
-  width: 219px;
-  height: 219px;
-}
-.quest_lostMasterclasser3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -1095px;
-  width: 219px;
-  height: 219px;
-}
-.quest_mayhemMistiflying1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1844px -293px;
-  width: 150px;
-  height: 150px;
-}
-.quest_mayhemMistiflying2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -1095px;
-  width: 219px;
-  height: 219px;
-}
-.quest_mayhemMistiflying3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -1095px;
-  width: 219px;
-  height: 219px;
-}
-.quest_monkey {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -1095px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moon1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -217px;
-  width: 216px;
-  height: 216px;
-}
-.quest_moon2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1407px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moon3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1407px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1407px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1407px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1407px -880px;
-  width: 219px;
-  height: 219px;
-}
-.quest_nudibranch {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -434px;
-  width: 216px;
-  height: 216px;
-}
-.quest_octopus {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -442px -1315px;
-  width: 222px;
-  height: 177px;
-}
-.quest_owl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1315px;
-  width: 219px;
-  height: 219px;
-}
-.quest_peacock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -651px;
-  width: 216px;
-  height: 216px;
-}
@@ -39,6 +39,7 @@
 // shared dropdown-item styles
 .dropdown-item {
  // header items & not selectList-items
+
  padding-left: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
@@ -53,14 +54,13 @@
    background-color: inherit;
  }

-
  &:active, &:hover, &:focus, &.active {
    background-color: inherit !important;
-    color: $purple-300 !important;
+    color: var(--hover-color, $purple-300) !important;
  }

  &:hover {
-    background-color: rgba($purple-600, 0.25) !important;
+    background-color: var(--hover-background, rgba($purple-600, 0.25)) !important;
  }

  &.dropdown-inactive {
@@ -71,6 +71,21 @@
      color: inherit !important;
    }
  }
+
+  .with-icon {
+    display: flex;
+    align-items: center;
+
+    .svg-icon {
+      margin: 0 0.5rem 0 0;
+    }
+  }
+
+  &:not(:hover) {
+    .with-icon .svg-icon {
+      color: $gray-200;
+    }
+  }
 }

 .dropdown + .dropdown {
@@ -16,6 +16,12 @@
      fill: currentColor;
    }
  }
+
+  &.color-stroke {
+    svg path {
+      stroke: currentColor;
+    }
+  }
 }

 .icon-16 {
@@ -33,6 +39,11 @@
  height: 24px;
 }

+.icon-48 {
+  width: 48px;
+  height: 48px;
+}
+
 .icon-10 {
  width: 10px;
  height: 10px;
@@ -107,5 +107,5 @@
 }

 .questPopover {
-  width: 200px;
+  min-width: 200px;
 }
@@ -41,88 +41,6 @@
  }
 }

-#start-quest-modal, #buy-quest-modal {
-  @media only screen and (max-width: 1200px) {
-    .modal-dialog {
-      max-width: 33%;
-
-      .left-panel {
-        left: initial;
-        width: 100%;
-        right: 100%;
-
-        .col-4 {
-          width: 100px;
-        }
-      }
-
-      .side-panel, .right-sidebar {
-        left: calc(100% - 10px);
-        max-width: 100%;
-        right: initial;
-
-        .questRewards {
-          width: 90%;
-
-          .reward-item {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  @media only screen and (max-width: 1000px) {
-    .modal-dialog {
-      max-width: 80%;
-      width: 80% !important;
-
-      .modal-body {
-        flex-direction: column;
-        display: flex;
-
-        div:nth-child(1) { order: 3; }
-        div:nth-child(2) { order: 1; }
-        div:nth-child(3) { order: 4; }
-        div:nth-child(4) { order: 5; }
-        div:nth-child(5) { order: 2; }
-
-        .left-panel {
-          border-radius: 8px;
-          position: static;
-          right: initial;
-          margin: 20px 0;
-          height: auto;
-          width: 100%;
-          z-index: 0;
-          order: 3;
-
-          .col-4 {
-            max-width: 100px;
-          }
-        }
-
-        .side-panel, .right-sidebar {
-          margin: 20px 0 0 0;
-          position: static;
-          box-shadow: none;
-          height: auto;
-          width: 100%;
-          z-index: 0;
-          order: 2;
-          left: 0;
-
-          .questRewards {
-            padding: 0 2em 2em 2em;
-            width: 100%;
-            z-index: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
 #subscription-cancel-modal, #subscription-canceled-modal {
  .modal-content {
    background: transparent;
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path fill="#F74E52" d="M0 2L3.333 0 8 2.533 12.667 0 16 2 16 8 12.667 12.667 8 16 3.333 12.667 0 8z" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FF6165" d="M4.267 11.733L1.333 7.6 1.333 2.733 3.333 1.533 8 4.067 12.667 1.533 14.667 2.733 14.667 7.6 11.733 11.733 8 14.333z" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L11.733 11.733 8 14.333z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L4.267 11.733 8 14.333z" opacity=".35" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M4.267 11.733L1.333 7.6 8 9.667z" opacity=".25" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M11.733 11.733L14.667 7.6 8 9.667z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L12.667 1.533 14.667 2.733 14.667 7.6z" opacity=".35" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L3.333 1.533 1.333 2.733 1.333 7.6z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L3.333 1.533 8 4.067z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L12.667 1.533 8 4.067z" opacity=".25" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M5.733 10.267L3.333 6.933 3.333 3.867 3.4 3.867 8 6.333 12.6 3.867 12.667 3.867 12.667 6.933 10.267 10.267 8 11.933z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <path id="xnmy9c4dda" d="M11 6H6V3L0 8l6 5v-3h5V6zm5-4v12c0 1.104-.896 2-2 2H9v-2h5V2H9V0h5c1.104 0 2 .896 2 2z"/>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="17"><defs><path id="a" d="M10 13v1H6v-1h4zm0-2v1H6v-1h4zM8 2l5 6h-3v2H6V8H3l5-6z"/></defs><g transform="rotate(-90 8 8)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#BDA8FF" xlink:href="#a"/><g fill="#878190" mask="url(#b)"><path d="M0 0h16v16H0z"/></g></g></svg>
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9" height="14" viewBox="0 0 9 14">
+    <defs>
+        <path id="lvd11k063a" d="M3.75 13.36L5.487 15.125 12.25 8.25 5.487 1.375 3.75 3.14 8.776 8.25z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-640 -837) translate(496 56) rotate(90 -311.5 468.5)">
+                    <use fill="#46a7d9" fill-rule="nonzero" transform="rotate(90 8 8.25)" xlink:href="#lvd11k063a"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -1,18 +1,26 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
-    <g fill="none" fill-rule="nonzero">
-        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
-        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
-        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
-        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
-        <path fill="#5AE4B2" d="M6.667 5.2v8.4L1.733 6.2z"/>
-        <path fill="#1B996B" d="M11.6 6.2l-4.933 7.4V5.2z" opacity=".35"/>
-        <path fill="#F47825" d="M13.333 6L6.667 0 0 6l1.333 2L0 10l6.667 6 6.666-6L12 8z"/>
-        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
-        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
-        <path fill="#FFF" d="M6.667 5.2v8.4L5.37 11.653 1.733 6.2zM6.667 10.8V2.4l1.296 1.947L11.6 9.8z" opacity=".25"/>
-        <path fill="#B4591B" d="M11.6 6.2l-4.933 7.4V5.2zM1.733 9.8l4.934 1v3.4z" opacity=".35"/>
-        <path fill="#FFF" d="M6.667 10.8l4.933-1-4.933 4.4z" opacity=".5"/>
-        <path fill="#FFF" d="M1.733 9.8l4.934-7.4v8.4z" opacity=".25"/>
-        <path fill="#FFF" d="M3.5 9.533L4.54 8 3.5 6.467l3.167-2.8 3.166 2.8L8.793 8l1.04 1.533-3.166 2.8z" opacity=".5"/>
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <g>
+                        <path fill="#24CC8F" d="M0 6L5.833 0 11.667 6 5.833 16z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#24CC8F" d="M0 6L5.833 0 11.667 6 5.833 16z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M10.15 6.2L5.833 5.2 5.833 1.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L1.517 6.2 5.833 1.8z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#5AE4B2" d="M5.833 5.2L5.833 13.6 1.517 6.2z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#1B996B" d="M10.15 6.2L5.833 13.6 5.833 5.2z" opacity=".35" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#F47825" d="M11.667 6L5.833 0 0 6 1.167 8 0 10 5.833 16 11.667 10 10.5 8z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M10.15 6.2L5.833 5.2 5.833 1.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L1.517 6.2 5.833 1.8z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L5.833 13.6 4.699 11.653 1.517 6.2zM5.833 10.8L5.833 2.4 6.968 4.347 10.15 9.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#B4591B" d="M10.15 6.2L5.833 13.6 5.833 5.2zM1.517 9.8L5.833 10.8 5.833 14.2z" opacity=".35" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 10.8L10.15 9.8 5.833 14.2z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M1.517 9.8L5.833 2.4 5.833 10.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M3.063 9.533L3.973 8 3.063 6.467 5.833 3.667 8.604 6.467 7.694 8 8.604 9.533 5.833 12.333z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
    </g>
 </svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+        <path id="re6owe1t5a" d="M7 10l1.06 1.94L10 13l-1.94 1.06L7 16l-1.06-1.94L4 13l1.94-1.06L7 10zm5.5-6l1.237 2.263L16 7.5l-2.263 1.237L12.5 11l-1.237-2.263L9 7.5l2.263-1.237L12.5 4zM4 0l1.414 2.586L8 4 5.414 5.414 4 8 2.586 5.414 0 4l2.586-1.414L4 0z"/>
+</svg>
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <defs>
+        <path id="rt3mruthma" d="M11.2 13.2c0-1.231-.467-2.35-1.23-3.2h1.23c1.765 0 3.2 1.435 3.2 3.2h-3.2zm-9.6 0c0-1.765 1.435-3.2 3.2-3.2h1.6c1.765 0 3.2 1.435 3.2 3.2h-8zm4-9.6C6.926 3.6 8 4.674 8 6c0 1.326-1.074 2.4-2.4 2.4-1.326 0-2.4-1.074-2.4-2.4 0-1.326 1.074-2.4 2.4-2.4zm3.452.415C9.436 3.754 9.9 3.6 10.4 3.6c1.326 0 2.4 1.074 2.4 2.4 0 1.326-1.074 2.4-2.4 2.4-.5 0-.964-.154-1.348-.415.34-.587.548-1.26.548-1.985 0-.726-.209-1.398-.548-1.985zm4.154 4.829C13.942 8.118 14.4 7.112 14.4 6c0-2.206-1.794-4-4-4-.904 0-1.73.313-2.4.82C7.33 2.314 6.504 2 5.6 2c-2.206 0-4 1.794-4 4 0 1.112.458 2.118 1.194 2.844C1.146 9.604 0 11.266 0 13.2c0 .884.716 1.6 1.6 1.6h12.8c.884 0 1.6-.716 1.6-1.6 0-1.934-1.146-3.596-2.794-4.356z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-1228 -1456) translate(1216 1416) translate(12 40)">
+                    <mask id="6szqyv7o1b" fill="#fff">
+                        <use xlink:href="#rt3mruthma"/>
+                    </mask>
+                    <use fill="#878190" xlink:href="#rt3mruthma"/>
+                    <g fill="#878190" mask="url(#6szqyv7o1b)">
+                        <path d="M0 0H16V16H0z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -18,11 +18,11 @@
        v-if="questData.completion && typeof questData.completion === 'function'"
        v-html="questData.completion()"
      ></p>
-      <div class="quest-rewards text-center">
+      <div class="text-center">
        <h3 v-once>
          {{ $t('paymentYouReceived') }}
        </h3>
-        <questDialogDrops :item="questData" />
+        <quest-rewards :quest="questData" />
      </div>
    </div>
    <div class="modal-footer">
@@ -36,27 +36,32 @@
  </b-modal>
 </template>

-<style scoped>
+<style scoped lang="scss">
  .quest {
    margin: 0 auto;
  }
-
-  .quest-rewards .questRewards {
-    margin: 0 auto;
-  }
+</style>
+
+<style lang="scss">
+ #quest-completed {
+   .quest-rewards {
+     margin-left: -2rem;
+     margin-right: -2rem;
+   }
+ }
 </style>

 <script>
 import * as quests from '@/../../common/script/content/quests';
-import questDialogDrops from '@/components/shops/quests/questDialogDrops';

 import { mapState } from '@/libs/store';
 import percent from '@/../../common/script/libs/percent';
 import { MAX_HEALTH as maxHealth } from '@/../../common/script/constants';
+import QuestRewards from '../shops/quests/questRewards';

 export default {
  components: {
-    questDialogDrops,
+    QuestRewards,
  },
  data () {
    return {
@@ -31,7 +31,8 @@
      </div>
      <div class="row">
        <div
-          v-if="!loading && filteredChallenges.length === 0"
+          v-if="!loading &&
+          this.filteredChallenges.length === 0"
          class="no-challenges text-center col-md-6 offset-3"
        >
          <h2 v-once>
@@ -41,7 +42,7 @@
      </div>
      <div class="row">
        <div
-          v-for="challenge in filteredChallenges"
+          v-for="challenge in this.filteredChallenges"
          :key="challenge._id"
          class="col-12 col-md-6"
        >
@@ -170,9 +171,6 @@ export default {
  },
  computed: {
    ...mapState({ user: 'user.data' }),
-    filteredChallenges () {
-      return this.challenges;
-    },
  },
  mounted () {
    this.$store.dispatch('common:setTitle', {
@@ -6,11 +6,11 @@
    />
    <div
      v-if="challenges.length === 0"
-      class="row no-quest-section"
+      class="row no-challenge-section"
    >
      <div class="col-12 text-center">
        <div
-          class="svg-icon challenge-icon"
+          class="svg-icon challenge-icon color"
          v-html="icons.challengeIcon"
        ></div>
        <h4 v-once>
@@ -51,23 +51,27 @@
 <style lang="scss" scoped>
  @import '~@/assets/scss/colors.scss';

-  .no-quest-section {
+  .no-challenge-section {
    padding: 2em;
-    color: $gray-300;

    h4 {
-      color: $gray-300;
+      margin-bottom: 0;
    }

    p {
-      margin-bottom: 2em;
+      margin-bottom: 1em;
+      color: $gray-100;
+      font-size: 0.75rem;
+      line-height: 1.33;
    }

-    .svg-icon {
-      height: 30px;
-      width: 30px;
-      margin: 0 auto;
-      margin-bottom: 2em;
+    .challenge-icon {
+      width: 1.125rem;
+      height: 1.25rem;
+      margin: 0 auto 0.5em;
+      object-fit: contain;
+      border-radius: 2px;
+      color: $gray-200;
    }
  }
 </style>
@@ -51,7 +51,7 @@
      </div>
      <div class="row">
        <div
-          v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
+          v-if="!loading && challenges.length > 0 && this.filteredChallenges.length === 0"
          class="no-challenges text-center col-md-6 offset-3"
        >
          <h2 v-once>
@@ -61,7 +61,7 @@
      </div>
      <div class="row">
        <div
-          v-for="challenge in filteredChallenges"
+          v-for="challenge in this.filteredChallenges"
          :key="challenge._id"
          class="col-12 col-md-6"
        >
@@ -197,25 +197,6 @@ export default {
  },
  computed: {
    ...mapState({ user: 'user.data' }),
-    filteredChallenges () {
-      const { filters } = this;
-      const { user } = this;
-
-      return this.challenges.filter(challenge => {
-        let isMember = true;
-
-        const filteringRole = filters.roles && filters.roles.length > 0;
-        if (filteringRole && filters.roles.indexOf('participating') !== -1) {
-          isMember = this.isMemberOfChallenge(user, challenge);
-        }
-
-        if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
-          isMember = !this.isMemberOfChallenge(user, challenge);
-        }
-
-        return isMember;
-      });
-    },
  },
  mounted () {
    this.$store.dispatch('common:setTitle', {
@@ -34,42 +34,19 @@
          </div>
        </div>
      </filter-group>
-      <filter-group :title="$t('role')">
-        <div
-          v-for="group in roleOptions"
-          :key="group.key"
-          class="form-check"
-        >
-          <div class="custom-control custom-checkbox">
-            <input
-              :id="group.key"
-              v-model="roleFilters"
-              class="custom-control-input"
-              type="checkbox"
-              :value="group.key"
-            >
-            <label
-              v-once
-              class="custom-control-label"
-              :for="group.key"
-            >{{ $t(group.label) }}</label>
-          </div>
-        </div>
-      </filter-group>
      <filter-group
-        v-if="$route.name !== 'findChallenges'"
        :title="$t('membership')"
        class="form-group"
      >
        <div
-          v-for="group in roleOptions"
+          v-for="group in membershipOptions"
          :key="group.key"
          class="form-check"
        >
          <div class="custom-control custom-checkbox">
            <input
              :id="group.key"
-              v-model="roleFilters"
+              v-model="membershipFilters"
              class="custom-control-input"
              type="checkbox"
              :value="group.key"
@@ -176,8 +153,8 @@ export default {
          key: 'time_management',
        },
      ],
-      roleFilters: [],
-      roleOptions: [
+      membershipFilters: [],
+      membershipOptions: [
        {
          label: 'participating',
          key: 'participating',
@@ -186,10 +163,6 @@ export default {
          label: 'not_participating',
          key: 'not_participating',
        },
-        // {
-        //   label: 'either',
-        //   key: 'either',
-        // },
      ],
      ownershipFilters: [],
      ownershipOptions: [
@@ -213,10 +186,10 @@ export default {
    categoryFilters: function categoryFilters () {
      this.emitFilters();
    },
-    roleFilters: function roleFilters () {
+    ownershipFilters: function ownershipFilters () {
      this.emitFilters();
    },
-    ownershipFilters: function ownershipFilters () {
+    membershipFilters: function membershipFilters () {
      this.emitFilters();
    },
    searchTerm: throttle(function searchTerm (newSearch) {
@@ -229,8 +202,8 @@ export default {
    emitFilters () {
      this.$emit('filter', {
        categories: this.categoryFilters,
-        roles: this.roleFilters,
        ownership: this.ownershipFilters,
+        membership: this.membershipFilters,
      });
    },
  },
@@ -139,8 +139,7 @@ export default {
        || /\s/.test(lastFocusChar) // End Search
        || (lastFocusChar === '@' && delCharsBool) // Cancel Search
      ) {
-        this.searchActive = false;
-        this.searchResults = [];
+        this.cancel();
      } else {
        if (lastFocusChar === '@') this.searchActive = true;
        if (this.searchActive) {
@@ -158,7 +157,6 @@ export default {
  },
  methods: {
    solveSearchResults (textFocus) {
-      if (!this.searchActive) return [];
      const regexRes = this.atRegex.exec(textFocus);
      if (!regexRes) return [];
      this.currentSearch = regexRes[1]; // eslint-disable-line vue/no-side-effects-in-computed-properties, max-len, prefer-destructuring
@@ -173,9 +171,8 @@ export default {
    resetDefaults () {
      // Mounted is not called when switching between group pages because they have the
      // the same parent component. So, reset the data
-      this.searchActive = false;
+      this.cancel();
      this.tmpSelections = [];
-      this.resetSelection();
    },
    grabUserNames () {
      const usersThatMessage = groupBy(this.chat, 'user');
@@ -225,10 +222,9 @@ export default {
      const newCaret = newText.length;
      newText += text.substring(oldCaret, text.length);
      this.$emit('select', newText, newCaret);
-      this.resetSelection();

      // Made selection, shut off searching
-      this.searchActive = false;
+      this.cancel();
    },
    setHover (result) {
      this.resetSelection();
@@ -268,7 +264,9 @@ export default {
      }
    },
    cancel () {
+      // Resets search back to normal (while in the same chat zone)
      this.searchActive = false;
+      this.searchResults = [];
      this.resetSelection();
    },
  },
@@ -47,7 +47,7 @@
        class="btn btn-success btn-success"
        @click="upgradeGroup()"
      >
-        {{ $t('upgrade') }}
+        {{ $t('upgradeToGroup') }}
      </button>
      <div
        v-if="!group.purchased.plan.dateTerminated
@@ -92,7 +92,7 @@ b-dropdown(:text="$t('sort')", right=true)
 import MugenScroll from 'vue-mugen-scroll';
 import debounce from 'lodash/debounce';
 import PublicGuildItem from './publicGuildItem';
-import Sidebar from './sidebar';
+import Sidebar from './groupSidebar';
 import groupUtilities from '@/mixins/groupsUtilities';

 import positiveIcon from '@/assets/svg/positive.svg';
@@ -0,0 +1,362 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import {
+  collectionQuestLeaderParticipating,
+  collectionQuestNotParticipating,
+  createStory,
+  groupBossQuestParticipating,
+  groupBossQuestRage,
+  groupCollectionQuest,
+  groupCollectionQuestPending,
+} from './group.stories.utils';
+
+storiesOf('Group Components|Party/Quest States', module)
+  .add('Not a Member', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true"
+                       :is-leader="false" :is-member="false"
+                       class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: {
+          leader: {
+
+          },
+          quest: {
+          },
+          purchased: {
+          },
+        },
+      };
+    },
+    user: {
+      data: {
+        _id: 'some-user',
+        party: {
+
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Member/No Quest', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true"
+                       :is-leader="false" :is-member="true"
+                       class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: {
+          leader: {
+
+          },
+          quest: {
+          },
+          purchased: {
+          },
+        },
+      };
+    },
+    user: {
+      data: {
+        _id: 'some-user',
+        party: {
+
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Leader/No Quest', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true"
+                       :is-leader="true" :is-member="true"
+                       class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: {
+          description: 'Some text',
+          leader: {
+
+          },
+          quest: {
+          },
+          purchased: {
+          },
+          privacy: 'private',
+        },
+      };
+    },
+    user: {
+      data: {
+        _id: 'some-user',
+        party: {
+
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Quest Owner/Quest Not Started', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: groupCollectionQuest(false),
+      };
+    },
+    user: {
+      data: {
+        _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+        party: {
+
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Member/Quest accepted/Quest Not Started', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: groupCollectionQuest(false),
+      };
+    },
+    user: {
+      data: {
+        _id: 'just-a-member',
+        party: {
+
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Member/Quest accepted/Started', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: groupCollectionQuest(true),
+      };
+    },
+    user: {
+      data: {
+        _id: 'just-a-member',
+        party: {
+
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Member/Quest Invite Pending', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true"
+                       :is-member="true"
+                       class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: groupCollectionQuestPending,
+      };
+    },
+    user: {
+      data: {
+        _id: 'some-user',
+        party: {
+          quest: {
+            RSVPNeeded: true,
+          },
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Collection Quest/Quest Owner Participating', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" :is-leader="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: collectionQuestLeaderParticipating,
+      };
+    },
+    user: {
+      data: {
+        _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+        party: {
+          quest: {
+            progress: {
+              up: 0,
+              down: 0,
+              collectedItems: 2,
+              collect: {},
+            },
+          },
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Collection Quest/Not Participating', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: collectionQuestNotParticipating,
+      };
+    },
+    user: {
+      data: {
+        _id: 'not-the-leader',
+        party: {
+          quest: {
+            progress: {
+              up: 0,
+              down: 0,
+              collectedItems: 2,
+              collect: {},
+            },
+          },
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Boss Quest/Participating', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: groupBossQuestParticipating,
+      };
+    },
+    user: {
+      data: {
+        _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+        party: {
+          quest: {
+            progress: {
+              up: 20,
+              down: 0,
+              collectedItems: 2,
+              collect: {},
+            },
+          },
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Boss Quest/Participating - No Pending', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: groupBossQuestParticipating,
+      };
+    },
+    user: {
+      data: {
+        _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+        party: {
+          quest: {
+            progress: {
+              up: 0,
+              down: 0,
+              collectedItems: 2,
+              collect: {},
+            },
+          },
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Boss Quest/Rage Enabled', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: groupBossQuestRage,
+      };
+    },
+    user: {
+      data: {
+        _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+        party: {
+          quest: {
+            progress: {
+              up: 20,
+              down: 0,
+              collectedItems: 2,
+              collect: {},
+            },
+          },
+        },
+      },
+    },
+    challengeOptions: {},
+  }))
+  .add('Not a party', () => createStory({
+    template: `
+      <div class="component-showcase">
+        <right-sidebar :group="group" :is-party="false" :is-member="true" class="col-12"/>
+      </div>
+    `,
+    data () {
+      return {
+        group: {
+          quest: {},
+          leader: {
+
+          },
+        },
+      };
+    },
+    user: {
+      data: {
+        _id: 'some-user',
+        party: {
+
+        },
+      },
+    },
+    challengeOptions: {},
+  }));
@@ -0,0 +1,342 @@
+import rightSidebar from '@/components/groups/rightSidebar';
+import getters from '@/store/getters';
+import content from '../../../../common/script/content';
+
+export function createStory ({
+  template,
+  data,
+  user = null,
+  challengeOptions = {},
+}) {
+  return {
+    components: { rightSidebar },
+    template,
+    data,
+    store: {
+      getters,
+      dispatch (id) {
+        if (id === 'challenges:getGroupChallenges') {
+          return [];
+        }
+
+        return null;
+      },
+      state: {
+        content,
+        user: {
+          data: {
+            party: {},
+          },
+          ...user,
+        },
+        challengeOptions,
+      },
+    },
+  };
+}
+
+export const groupBossQuestParticipating = {
+  leaderOnly: { challenges: false, getGems: false },
+  quest: {
+    progress: { collect: {}, hp: 30 },
+    active: true,
+    members: { 'acc2950e-9919-49bc-be7f-0ec4103e9f2b': true },
+    extra: {},
+    key: 'moon2',
+    leader: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+  },
+  tasksOrder: {
+    habits: [], dailys: [], todos: [], rewards: [],
+  },
+  purchased: {
+    plan: {
+      consecutive: {
+        count: 0, offset: 0, gemCapExtra: 0, trinkets: 0,
+      },
+      quantity: 1,
+      extraMonths: 0,
+      gemsBought: 0,
+      mysteryItems: [],
+    },
+  },
+  privacy: 'private',
+  chat: [],
+  memberCount: 1,
+  challengeCount: 0,
+  balance: 0,
+  _id: '6b125aa8-ef98-4307-b5b4-181091b747c9',
+  type: 'party',
+  name: 'Testings Party',
+  managers: {},
+  categories: [],
+  leader: {
+    auth: { local: { username: 'test' } },
+    flags: { verifiedUsername: true },
+    profile: { name: 'Testing' },
+    _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+    id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+  },
+  summary: 'Testings Party',
+  id: '6b125aa8-ef98-4307-b5b4-181091b747c9',
+};
+
+export const groupBossQuestRage = {
+  leaderOnly: { challenges: false, getGems: false },
+  quest: {
+    progress: { collect: {}, hp: 30, rage: 20.33434535 },
+    active: true,
+    members: { 'acc2950e-9919-49bc-be7f-0ec4103e9f2b': true },
+    extra: {},
+    key: 'dilatoryDistress2',
+    leader: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+  },
+  tasksOrder: {
+    habits: [], dailys: [], todos: [], rewards: [],
+  },
+  purchased: {
+    plan: {
+      consecutive: {
+        count: 0, offset: 0, gemCapExtra: 0, trinkets: 0,
+      },
+      quantity: 1,
+      extraMonths: 0,
+      gemsBought: 0,
+      mysteryItems: [],
+    },
+  },
+  privacy: 'private',
+  chat: [],
+  memberCount: 1,
+  challengeCount: 0,
+  balance: 0,
+  _id: '6b125aa8-ef98-4307-b5b4-181091b747c9',
+  type: 'party',
+  name: 'Testings Party',
+  managers: {},
+  categories: [],
+  leader: {
+    auth: { local: { username: 'test' } },
+    flags: { verifiedUsername: true },
+    profile: { name: 'Testing' },
+    _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+    id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
+  },
+  summary: 'Testings Party',
+  id: '6b125aa8-ef98-4307-b5b4-181091b747c9',
+};
+
+export function groupCollectionQuest (active) {
+  return {
+    leaderOnly: { challenges: false, getGems: false },
+    quest: {
+      progress: { collect: {} },
+      active,
+      members: {
+        '05ca98f4-4706-47b5-8d02-142e6e78ba2e': true,
+        'just-a-member': true,
+        'b3b0be03-3f62-49ae-b776-b16419ef32cf': null,
+      },
+      extra: {},
+      key: 'atom1',
+      leader: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+    },
+    tasksOrder: {
+      habits: ['320496be-d663-4711-a7da-03205a2204b2'],
+      dailys: ['0c6a3ecd-dbaf-4a34-bb61-1a2ecd3daa0e', '686e7766-9cef-4b77-8c8f-f4d6c5b63a85'],
+      todos: ['76b3ef3e-1b01-4f24-a37e-0320f31d8132'],
+      rewards: ['76dad8ea-0d95-47c3-ad9a-8e136ad80b7f'],
+    },
+    purchased: {
+      active: true,
+      plan: {
+        consecutive: {
+          count: 0, offset: 0, gemCapExtra: 0, trinkets: 0,
+        },
+        quantity: 3,
+        extraMonths: 0,
+        gemsBought: 0,
+        mysteryItems: [],
+        customerId: 'group-unlimited',
+        dateCreated: null,
+        dateTerminated: null,
+        dateUpdated: null,
+        owner: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+        paymentMethod: 'Group Unlimited',
+        planId: 'group_monthly',
+        subscriptionId: '',
+      },
+    },
+    privacy: 'private',
+    chat: [],
+    memberCount: 3,
+    challengeCount: 0,
+    balance: 0,
+    _id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+    type: 'party',
+    name: 'Party',
+    managers: {},
+    categories: [],
+    leader: {
+      auth: { local: { username: 'test2' } },
+      flags: { verifiedUsername: true },
+      profile: { name: 'MyDisplay2' },
+      _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+      id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+    },
+    summary: 'Party',
+    id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+  };
+}
+
+export const groupCollectionQuestPending = {
+  leaderOnly: { challenges: false, getGems: false },
+  quest: {
+    progress: { collect: {} },
+    active: false,
+    members: { '05ca98f4-4706-47b5-8d02-142e6e78ba2e': true, 'b3b0be03-3f62-49ae-b776-b16419ef32cf': null },
+    extra: {},
+    key: 'atom1',
+    leader: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+  },
+  tasksOrder: {
+    habits: ['320496be-d663-4711-a7da-03205a2204b2'],
+    dailys: ['0c6a3ecd-dbaf-4a34-bb61-1a2ecd3daa0e', '686e7766-9cef-4b77-8c8f-f4d6c5b63a85'],
+    todos: ['76b3ef3e-1b01-4f24-a37e-0320f31d8132'],
+    rewards: ['76dad8ea-0d95-47c3-ad9a-8e136ad80b7f'],
+  },
+  purchased: { active: true },
+  privacy: 'private',
+  chat: [],
+  memberCount: 2,
+  challengeCount: 0,
+  balance: 0,
+  _id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+  type: 'party',
+  name: "MyDisplay2's Party",
+  managers: {},
+  categories: [],
+  leader: {
+    auth: { local: { username: 'test2' } },
+    flags: { verifiedUsername: true },
+    profile: { name: 'MyDisplay2' },
+    _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+    id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+  },
+  summary: "MyDisplay2's Party",
+  id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+};
+
+
+export const collectionQuestLeaderParticipating = {
+  leaderOnly: { challenges: false, getGems: false },
+  quest: {
+    progress: { collect: { fireCoral: 4, blueFins: 0 } },
+    active: true,
+    members: { '05ca98f4-4706-47b5-8d02-142e6e78ba2e': true },
+    extra: {},
+    key: 'dilatoryDistress1',
+    leader: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+  },
+  tasksOrder: {
+    habits: ['320496be-d663-4711-a7da-03205a2204b2'],
+    dailys: ['0c6a3ecd-dbaf-4a34-bb61-1a2ecd3daa0e', '686e7766-9cef-4b77-8c8f-f4d6c5b63a85'],
+    todos: ['76b3ef3e-1b01-4f24-a37e-0320f31d8132'],
+    rewards: ['76dad8ea-0d95-47c3-ad9a-8e136ad80b7f'],
+  },
+  purchased: {
+    active: true,
+    plan: {
+      consecutive: {
+        count: 0, offset: 0, gemCapExtra: 0, trinkets: 0,
+      },
+      quantity: 3,
+      extraMonths: 0,
+      gemsBought: 0,
+      mysteryItems: [],
+      customerId: 'group-unlimited',
+      dateCreated: null,
+      dateTerminated: null,
+      dateUpdated: null,
+      owner: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+      paymentMethod: 'Group Unlimited',
+      planId: 'group_monthly',
+      subscriptionId: '',
+    },
+  },
+  privacy: 'private',
+  chat: [],
+  memberCount: 2,
+  challengeCount: 0,
+  balance: 0,
+  _id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+  type: 'party',
+  name: "MyDisplay2's Party",
+  managers: {},
+  categories: [],
+  leader: {
+    auth: { local: { username: 'test2' } },
+    flags: { verifiedUsername: true },
+    profile: { name: 'MyDisplay2' },
+    _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+    id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+  },
+  summary: "MyDisplay2's Party",
+  id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+};
+
+export const collectionQuestNotParticipating = {
+  leaderOnly: { challenges: false, getGems: false },
+  quest: {
+    progress: { collect: { fireCoral: 4, blueFins: 3 } },
+    active: true,
+    members: { },
+    extra: {},
+    key: 'dilatoryDistress1',
+    leader: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+  },
+  tasksOrder: {
+    habits: ['320496be-d663-4711-a7da-03205a2204b2'],
+    dailys: ['0c6a3ecd-dbaf-4a34-bb61-1a2ecd3daa0e', '686e7766-9cef-4b77-8c8f-f4d6c5b63a85'],
+    todos: ['76b3ef3e-1b01-4f24-a37e-0320f31d8132'],
+    rewards: ['76dad8ea-0d95-47c3-ad9a-8e136ad80b7f'],
+  },
+  purchased: {
+    active: true,
+    plan: {
+      consecutive: {
+        count: 0, offset: 0, gemCapExtra: 0, trinkets: 0,
+      },
+      quantity: 3,
+      extraMonths: 0,
+      gemsBought: 0,
+      mysteryItems: [],
+      customerId: 'group-unlimited',
+      dateCreated: null,
+      dateTerminated: null,
+      dateUpdated: null,
+      owner: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+      paymentMethod: 'Group Unlimited',
+      planId: 'group_monthly',
+      subscriptionId: '',
+    },
+  },
+  privacy: 'private',
+  chat: [],
+  memberCount: 2,
+  challengeCount: 0,
+  balance: 0,
+  _id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+  type: 'party',
+  name: "MyDisplay2's Party",
+  managers: {},
+  categories: [],
+  leader: {
+    auth: { local: { username: 'test2' } },
+    flags: { verifiedUsername: true },
+    profile: { name: 'MyDisplay2' },
+    _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+    id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
+  },
+  summary: "MyDisplay2's Party",
+  id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
+};
@@ -4,9 +4,9 @@
    class="row"
  >
    <group-form-modal v-if="isParty" />
-    <start-quest-modal :group="group" />
-    <quest-details-modal :group="group" />
+    <quest-detail-modal :group="group" />
    <participant-list-modal :group="group" />
+    <invitation-list-modal :group="group" />
    <group-gems-modal />
    <div class="col-12 col-sm-8 standard-page">
      <div class="row">
@@ -96,99 +96,21 @@
        </template>
      </chat>
    </div>
-    <div class="col-12 col-sm-4 sidebar">
-      <div
-        class="row"
-        :class="{'guild-background': !isParty}"
-      >
-        <div class="col-12 buttons-wrapper">
-          <div class="button-container">
-            <button
-              v-if="isLeader && !group.purchased.active && group.privacy === 'private'"
-              class="btn btn-success btn-success"
-              @click="upgradeGroup()"
-            >
-              {{ $t('upgrade') }}
-            </button>
-          </div>
-          <div class="button-container">
-            <button
-              v-if="isLeader || isAdmin"
-              v-once
-              class="btn btn-primary"
-              b-btn="b-btn"
-              @click="updateGuild"
-            >
-              {{ $t('edit') }}
-            </button>
-          </div>
-          <div class="button-container">
-            <button
-              v-if="!isMember"
-              class="btn btn-success btn-success"
-              @click="join()"
-            >
-              {{ $t('join') }}
-            </button>
-          </div>
-          <div class="button-container">
-            <button
-              v-once
-              class="btn btn-primary"
-              @click="showInviteModal()"
-            >
-              {{ $t('invite') }}
-            </button>
-            <!-- @TODO: hide the invitation button
-              if there's an active group plan and the player is not the leader-->
-          </div>
-          <div class="button-container">
-            <!-- @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader')
-             {{$t('messageGuildLeader')}} // Suggest making the button
-              visible to the leader too - useful for them to test how
-               the feature works or to send a note to themself. -- Alys-->
-          </div>
-          <div class="button-container">
-            <!-- @TODO: V2 button.btn.btn-primary(v-once,
-              v-if='isMember && !isParty') {{$t('donateGems')}}
-              // Suggest removing the isMember restriction
-               - it's okay if non-members donate to a public
-               guild. Also probably allow it for parties
-               if parties can buy imagery. -- Alys-->
-          </div>
-        </div>
-      </div>
-      <div class="px-3 py-3">
-        <quest-sidebar-section
-          v-if="isParty"
-          :group="group"
-        />
-        <sidebar-section
-          v-if="!isParty"
-          :title="$t('guildSummary')"
-        >
-          <p v-markdown="group.summary"></p>
-        </sidebar-section>
-        <sidebar-section :title="$t('groupDescription')">
-          <p v-markdown="group.description"></p>
-        </sidebar-section>
-        <sidebar-section
-          :title="$t('challenges')"
-          :tooltip="$t('challengeDetails')"
-        >
-          <group-challenges :group="group" />
-        </sidebar-section>
-      </div>
-      <div class="text-center">
-        <button
-          v-if="isMember"
-          class="btn btn-danger"
-          @click="clickLeave()"
-        >
-          {{ isParty ? $t('leaveParty') : $t('leaveGroup') }}
-        </button>
-      </div>
-    </div>
+    <right-sidebar
+      :is-admin="isAdmin"
+      :is-leader="isLeader"
+      :is-member="isMember"
+      :is-party="isParty"
+      :group="group"
+      :search-id="searchId"
+      class="col-12 col-sm-4"
+      @leave="clickLeave()"
+      @join="join()"
+      @messageLeader="messageLeader()"
+      @upgradeGroup="upgradeGroup"
+      @updateGuild="updateGuild"
+      @showInviteModal="showInviteModal()"
+    />
  </div>
 </template>

@@ -199,24 +121,12 @@
    .standard-page {
      max-width: calc(100% - 430px);
    }
-
-    .sidebar {
-      max-width: 430px !important;
-    }
  }

  h1 {
    color: $purple-200;
  }

-  .button-container {
-    margin-bottom: 1em;
-
-    button {
-      width: 100%;
-    }
-  }
-
  .item-with-icon {
    border-radius: 2px;
    background-color: #ffffff;
@@ -254,11 +164,6 @@
    cursor: pointer;
  }

-  .sidebar {
-    background-color: $gray-600;
-    padding-bottom: 2em;
-  }
-
  .buttons-wrapper {
    padding: 2.8em 24px 0em 24px;
  }
@@ -278,11 +183,6 @@
    }
  }

-  .guild-background {
-    background-image: url('~@/assets/images/groups/grassy-meadow-backdrop.png');
-    height: 246px;
-  }
-
  textarea {
    height: 150px;
    width: 100%;
@@ -390,16 +290,11 @@ import groupUtilities from '@/mixins/groupsUtilities';
 import styleHelper from '@/mixins/styleHelper';
 import { mapState, mapGetters } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
-import startQuestModal from './startQuestModal';
-import questDetailsModal from './questDetailsModal';
 import participantListModal from './participantListModal';
 import groupFormModal from './groupFormModal';
-import groupChallenges from '../challenges/groupChallenges';
 import groupGemsModal from '@/components/groups/groupGemsModal';
-import questSidebarSection from '@/components/groups/questSidebarSection';
 import markdownDirective from '@/directives/markdown';
 import chat from './chat';
-import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';

 import deleteIcon from '@/assets/svg/delete.svg';
@@ -413,17 +308,18 @@ import questBackground from '@/assets/svg/quest-background-border.svg';
 import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg';
 import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg';
 import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
+import QuestDetailModal from './questDetailModal';
+import RightSidebar from '@/components/groups/rightSidebar';
+import InvitationListModal from './invitationListModal';

 export default {
  components: {
-    startQuestModal,
+    InvitationListModal,
+    QuestDetailModal,
+    RightSidebar,
    groupFormModal,
-    groupChallenges,
-    questDetailsModal,
    participantListModal,
    groupGemsModal,
-    questSidebarSection,
-    sidebarSection,
    userLink,
    chat,
  },
@@ -657,6 +553,9 @@ export default {
    showGroupGems () {
      this.$root.$emit('bv::show::modal', 'group-gems-modal');
    },
+    messageLeader () {
+      window.open(`/private-messages?uuid=${this.group.leader.id}`);
+    },
  },
 };
 </script>
@@ -0,0 +1,273 @@
+<template>
+  <b-modal
+    id="invitation-list"
+    size="md"
+    :hide-header="true"
+    :hide-footer="true"
+  >
+    <div class="dialog-close">
+      <close-icon @click="close()" />
+    </div>
+    <h2 class="text-center textCondensed" v-once>
+      {{ $t('invitations') }}
+    </h2>
+    <div
+      v-for="member in members"
+      :key="member._id"
+      class="member-row"
+    >
+      <div class="class-icon">
+        <class-badge
+          v-if="member.stats"
+          :member-class="member.stats.class"
+          :badge-size="40"
+        />
+      </div>
+      <div class="usernames">
+        <user-label :user="member" class="user-label" /> <br>
+        <span class="username">
+          @{{ member.auth.local.username }}
+        </span>
+      </div>
+      <div :class="{
+        'status': true,
+        'accepted': member.accepted === true,
+        'declined': member.accepted === false,
+        'pending': member.accepted === null
+      }">
+        <div
+          v-if="member.accepted === true"
+          class="accepted float-right"
+        >
+          {{ $t('accepted') }}
+        </div>
+        <div
+          v-if="member.accepted === false"
+          class="declined float-right"
+        >
+          {{ $t('declined') }}
+        </div>
+        <div
+          v-if="member.accepted === null"
+          class="pending float-right"
+        >
+          {{ $t('pending') }}
+        </div>
+        <div class="circle">
+          <div
+            v-if="member.accepted === true"
+            class="svg-icon color"
+            v-html="icons.check"
+          ></div>
+          <div
+            v-if="member.accepted === false"
+            class="svg-icon color"
+            v-html="icons.close"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang='scss'>
+  @import '~@/assets/scss/colors.scss';
+
+  #invitation-list {
+    .modal-header {
+      background-color: $gray-600;
+      border-radius: 8px 8px 0 0;
+      box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+    }
+
+    .modal-footer {
+      background-color: #edecee;
+      border-radius: 0 0 8px 8px;
+    }
+
+    .small-text, .character-name {
+      color: #878190;
+    }
+
+    .no-padding-left {
+      padding-left: 0;
+    }
+
+    .modal-body {
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+    }
+
+    .member-details {
+      margin: 0;
+    }
+
+    .modal-content {
+      // so that the rounded corners still apply
+      overflow: hidden;
+    }
+
+    .user-label {
+      font-size: 14px;
+    }
+
+    .username {
+      font-size: 12px;
+    }
+  }
+</style>
+
+<style lang='scss' scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .header-wrap {
+    width: 100%;
+  }
+
+  h2 {
+    color: $purple-300;
+    margin-top: 1rem;
+  }
+
+  .member-row {
+    padding: 0.75rem 1.5rem;
+
+    background-color: $gray-700;
+    display: flex;
+    flex-direction: row;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $gray-500;
+    }
+  }
+
+  .class-icon {
+    margin-right: 1rem;
+  }
+
+  .usernames {
+    flex: 3;
+  }
+
+  .status {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .class-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .circle {
+    height: 2rem;
+    width: 2rem;
+
+    margin-left: 0.5rem;
+    border: 2px solid $gray-300;
+    border-radius: 1rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .accepted {
+    color: $green-10;
+
+    .circle {
+      border-color: $green-50;
+      background: $green-50;
+
+      color: white;
+
+      .svg-icon {
+        height: 10px;
+        width: 13px;
+      }
+    }
+  }
+
+  .pending {
+    color: $gray-100;
+  }
+
+  .declined {
+    color: $maroon-10;
+
+    .circle {
+      border-color: $maroon-100;
+      background: $maroon-100;
+
+      color: white;
+
+      .svg-icon {
+        height: 12px;
+        width: 12px;
+
+        ::v-deep {
+          path {
+            stroke: white;
+          }
+        }
+      }
+    }
+  }
+
+  #invitation-list_modal_body {
+    padding: 0;
+    max-height: 450px;
+
+    .member-details {
+      margin: 0;
+    }
+  }
+</style>
+
+<script>
+import { mapGetters } from '@/libs/store';
+
+import CloseIcon from '../shared/closeIcon';
+import ClassBadge from '../members/classBadge';
+import UserLabel from '../userLabel';
+
+import svgClose from '@/assets/svg/close.svg';
+import svgCheck from '@/assets/svg/check.svg';
+
+export default {
+  components: {
+    UserLabel,
+    ClassBadge,
+    CloseIcon,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+        check: svgCheck,
+      }),
+    };
+  },
+  props: ['group'],
+  computed: {
+    ...mapGetters({
+      partyMembers: 'party:members',
+    }),
+    members () {
+      const partyMembers = this.partyMembers || [];
+      return partyMembers.map(member => ({
+        ...member,
+        accepted: this.group.quest.members[member._id],
+      }));
+    },
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'invitation-list');
+    },
+  },
+};
+</script>
@@ -114,7 +114,7 @@ import groupUtilities from '@/mixins/groupsUtilities';


 import PublicGuildItem from './publicGuildItem';
-import Sidebar from './sidebar';
+import Sidebar from './groupSidebar';

 import greyBadgeIcon from '@/assets/svg/grey-badge.svg';
 import positiveIcon from '@/assets/svg/positive.svg';
@@ -2,8 +2,15 @@
  <b-modal
    id="participant-list"
    size="md"
+    :hide-header="true"
    :hide-footer="true"
  >
+    <div class="dialog-close">
+      <close-icon @click="close()" />
+    </div>
+    <h2 class="text-center textCondensed" v-once>
+      {{ $t('participantsTitle') }}
+    </h2>
    <div
      slot="modal-header"
      class="header-wrap"
@@ -29,20 +36,12 @@
    <div
      v-for="member in participants"
      :key="member._id"
-      class="row"
+      class="member-row"
    >
-      <div class="col-12 no-padding-left">
-        <member-details :member="member" />
+      <div class="no-padding-left">
+        <member-details-new :member="member" />
      </div>
    </div>
-    <div class="modal-footer">
-      <button
-        class="btn btn-primary"
-        @click="close()"
-      >
-        {{ $t('close') }}
-      </button>
-    </div>
  </b-modal>
 </template>

@@ -70,23 +69,49 @@
    .modal-body {
      padding-left: 0;
      padding-right: 0;
+      padding-bottom: 0;
    }

    .member-details {
      margin: 0;
    }
+
+    .modal-content {
+      // so that the rounded corners still apply
+      overflow: hidden;
+    }
  }
 </style>

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

-  h1 {
-    color: #4f2a93;
+  h2 {
+    color: $purple-300;
+    margin-top: 1rem;
  }

+  .member-row {
+    background-color: $gray-700;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $gray-500;
+    }
+  }
+
+  .member-row {
+    ::v-deep {
+      .col-4 {
+        padding-left: 0;
+      }
+    }
+  }
+
+
  #participant-list_modal_body {
    padding: 0;
    max-height: 450px;
@@ -100,11 +125,13 @@
 <script>
 import { mapGetters } from '@/libs/store';

-import MemberDetails from '../memberDetails';
+import MemberDetailsNew from '../memberDetailsNew';
+import CloseIcon from '../shared/closeIcon';

 export default {
  components: {
-    MemberDetails,
+    CloseIcon,
+    MemberDetailsNew,
  },
  props: ['group'],
  computed: {
@@ -113,7 +140,10 @@ export default {
    }),
    participants () {
      const partyMembers = this.partyMembers || [];
-      return partyMembers.filter(member => this.group.quest.members[member._id] === true);
+      const membersAccepted = partyMembers
+        .filter(member => this.group.quest.members[member._id] === true);
+
+      return membersAccepted;
    },
  },
  methods: {
@@ -0,0 +1,89 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { quests } from '@/../../common/script/content/quests';
+import content from '@/../../common/script/content';
+import questDetailModal from './questDetailModal';
+import questCompleted from '../achievements/questCompleted';
+
+const stories = storiesOf('Quests/Dialog', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('selectQuestDialog', () => ({
+    components: { questDetailModal },
+    data () {
+      return {
+        quest: quests.goldenknight2,
+        questWithDrop: quests.moon1,
+      };
+    },
+    template: `  
+      <div> 
+        <quest-detail-modal :group="{}"></quest-detail-modal>
+      </div>
+    `,
+    mounted () {
+      this.$root.$emit('bv::show::modal', 'quest-detail-modal');
+    },
+  }))
+  .add('questDetailModal', () => ({
+    components: { questDetailModal },
+    data () {
+      return {
+        quest: quests.goldenknight2,
+        questWithDrop: quests.moon1,
+      };
+    },
+    template: `  
+      <div>
+        <quest-detail-modal :group="{}"></quest-detail-modal>
+      </div>
+    `,
+    mounted () {
+      this.$root.$emit('bv::show::modal', 'quest-detail-modal', {
+        key: 'moon1',
+        from: 'sidebar',
+      });
+    },
+  }))
+  .add('quest-completed', () => ({
+    components: { questCompleted },
+    data () {
+      return {
+        quest: quests.goldenknight2,
+        questWithDrop: quests.moon1,
+      };
+    },
+    template: `
+      <div>
+      <quest-completed></quest-completed>
+      </div>
+    `,
+    mounted () {
+      this.$root.$emit('bv::show::modal', 'quest-completed');
+    },
+    store: {
+      state: {
+        content,
+        user: {
+          data: {
+            stats: {},
+            tags: [],
+            items: {
+              quests: {
+                moon1: 3,
+              },
+            },
+            party: {
+              quest: {
+                completed: 'vice3',
+              },
+            },
+          },
+        },
+      },
+    },
+  }));
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="17"><defs><path id="a" d="M10 13v1H6v-1h4zm0-2v1H6v-1h4zM8 2l5 6h-3v2H6V8H3l5-6z"/></defs><g transform="rotate(-90 8 8)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#BDA8FF" xlink:href="#a"/><g fill="#878190" mask="url(#b)"><path d="M0 0h16v16H0z"/></g></g></svg>`