4.277.2

* refactor(notifs): universal routing for migrations

* fix(lint): remove whitespace

* chore(content): update migration for new scheme

* fix(migration): account for cake

* chore(images): update sprite CSS

---------

Co-authored-by: SabreCat <sabe@habitica.com>

config.json.example

@@ -86,5 +86,6 @@
   "RATE_LIMITER_ENABLED": "false",
   "REDIS_HOST": "aaabbbcccdddeeefff",
   "REDIS_PORT": "1234",
-  "REDIS_PASSWORD": "12345678"
+  "REDIS_PASSWORD": "12345678",
+  "TRUSTED_DOMAINS": "localhost,habitica.com"
 }

migrations/archive/2023/20230522_pet_group_achievements.js

@@ -0,0 +1,158 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20230522_pet_group_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['Parrot-Base']
+      && pets['Parrot-CottonCandyBlue']
+      && pets['Parrot-CottonCandyPink']
+      && pets['Parrot-Desert']
+      && pets['Parrot-Golden']
+      && pets['Parrot-Red']
+      && pets['Parrot-Shade']
+      && pets['Parrot-Skeleton']
+      && pets['Parrot-White']
+      && pets['Parrot-Zombie']
+      && pets['Rooster-Base']
+      && pets['Rooster-CottonCandyBlue']
+      && pets['Rooster-CottonCandyPink']
+      && pets['Rooster-Desert']
+      && pets['Rooster-Golden']
+      && pets['Rooster-Red']
+      && pets['Rooster-Shade']
+      && pets['Rooster-Skeleton']
+      && pets['Rooster-White']
+      && pets['Rooster-Zombie']
+      && pets['Triceratops-Base']
+      && pets['Triceratops-CottonCandyBlue']
+      && pets['Triceratops-CottonCandyPink']
+      && pets['Triceratops-Desert']
+      && pets['Triceratops-Golden']
+      && pets['Triceratops-Red']
+      && pets['Triceratops-Shade']
+      && pets['Triceratops-Skeleton']
+      && pets['Triceratops-White']
+      && pets['Triceratops-Zombie']
+      && pets['TRex-Base']
+      && pets['TRex-CottonCandyBlue']
+      && pets['TRex-CottonCandyPink']
+      && pets['TRex-Desert']
+      && pets['TRex-Golden']
+      && pets['TRex-Red']
+      && pets['TRex-Shade']
+      && pets['TRex-Skeleton']
+      && pets['TRex-White']
+      && pets['TRex-Zombie']
+      && pets['Pterodactyl-Base']
+      && pets['Pterodactyl-CottonCandyBlue']
+      && pets['Pterodactyl-CottonCandyPink']
+      && pets['Pterodactyl-Desert']
+      && pets['Pterodactyl-Golden']
+      && pets['Pterodactyl-Red']
+      && pets['Pterodactyl-Shade']
+      && pets['Pterodactyl-Skeleton']
+      && pets['Pterodactyl-White']
+      && pets['Pterodactyl-Zombie']
+      && pets['Owl-Base']
+      && pets['Owl-CottonCandyBlue']
+      && pets['Owl-CottonCandyPink']
+      && pets['Owl-Desert']
+      && pets['Owl-Golden']
+      && pets['Owl-Red']
+      && pets['Owl-Shade']
+      && pets['Owl-Skeleton']
+      && pets['Owl-White']
+      && pets['Owl-Zombie']
+      && pets['Velociraptor-Base']
+      && pets['Velociraptor-CottonCandyBlue']
+      && pets['Velociraptor-CottonCandyPink']
+      && pets['Velociraptor-Desert']
+      && pets['Velociraptor-Golden']
+      && pets['Velociraptor-Red']
+      && pets['Velociraptor-Shade']
+      && pets['Velociraptor-Skeleton']
+      && pets['Velociraptor-White']
+      && pets['Velociraptor-Zombie']
+      && pets['Penguin-Base']
+      && pets['Penguin-CottonCandyBlue']
+      && pets['Penguin-CottonCandyPink']
+      && pets['Penguin-Desert']
+      && pets['Penguin-Golden']
+      && pets['Penguin-Red']
+      && pets['Penguin-Shade']
+      && pets['Penguin-Skeleton']
+      && pets['Penguin-White']
+      && pets['Penguin-Zombie']
+      && pets['Falcon-Base']
+      && pets['Falcon-CottonCandyBlue']
+      && pets['Falcon-CottonCandyPink']
+      && pets['Falcon-Desert']
+      && pets['Falcon-Golden']
+      && pets['Falcon-Red']
+      && pets['Falcon-Shade']
+      && pets['Falcon-Skeleton']
+      && pets['Falcon-White']
+      && pets['Falcon-Zombie']
+      && pets['Peacock-Base']
+      && pets['Peacock-CottonCandyBlue']
+      && pets['Peacock-CottonCandyPink']
+      && pets['Peacock-Desert']
+      && pets['Peacock-Golden']
+      && pets['Peacock-Red']
+      && pets['Peacock-Shade']
+      && pets['Peacock-Skeleton']
+      && pets['Peacock-White']
+      && pets['Peacock-Zombie']) {
+        set['achievements.dinosaurDynasty'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    // migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-04-15') },
+  };
+
+  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
+  }
+};

migrations/archive/2023/20230718_summer_splash_orcas.js

@@ -0,0 +1,79 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20230718_summer_splash_orcas';
+
+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 };
+  const push = {};
+
+  if (user && user.items && user.items.pets && typeof user.items.pets['Orca-Base'] !== 'undefined') {
+    return;
+  } else if (user && user.items && user.items.mounts && typeof user.items.mounts['Orca-Base'] !== 'undefined') {
+    set['items.pets.Orca-Base'] = 5;
+    push.notifications = {
+      type: 'ITEM_RECEIVED',
+      data: {
+        icon: 'notif_orca_pet',
+        title: 'Orcas for Summer Splash!',
+        text: 'To celebrate Summer Splash, we\'ve given you an Orca Pet!',
+        destination: 'stable',
+      },
+      seen: false,
+    };
+  } else {
+    set['items.mounts.Orca-Base'] = true;
+    push.notifications = {
+      type: 'ITEM_RECEIVED',
+      data: {
+        icon: 'notif_orca_mount',
+        title: 'Orcas for Summer Splash!',
+        text: 'To celebrate Summer Splash, we\'ve given you an Orca Mount!',
+        destination: 'stable',
+      },
+      seen: false,
+    };
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await user.updateOne({ $set: set, $push: push }).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2023-06-18')},
+  };
+
+  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)
+      .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],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2023/20230731_naming_day.js

@@ -0,0 +1,155 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20230731_naming_day';
+import { v4 as uuid } from 'uuid';
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  let set;
+  let push;
+  const inc = {
+    'items.food.Cake_Base': 1,
+    'items.food.Cake_CottonCandyBlue': 1,
+    'items.food.Cake_CottonCandyPink': 1,
+    'items.food.Cake_Desert': 1,
+    'items.food.Cake_Golden': 1,
+    'items.food.Cake_Red': 1,
+    'items.food.Cake_Shade': 1,
+    'items.food.Cake_Skeleton': 1,
+    'items.food.Cake_White': 1,
+    'items.food.Cake_Zombie': 1,
+    'achievements.habiticaDays': 1,
+  };
+
+  if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.back_special_namingDay2020 !== 'undefined') {
+    set = { migration: MIGRATION_NAME };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_cake',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you some cake!',
+          destination: '/inventory/items',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.body_special_namingDay2018 !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.back_special_namingDay2020': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_back',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Tail and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.head_special_namingDay2017 !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.body_special_namingDay2018': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_body',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Cloak and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.pets && typeof user.items.pets['Gryphon-RoyalPurple'] !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.head_special_namingDay2017': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_head',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Helm and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.mounts && typeof user.items.mounts['Gryphon-RoyalPurple'] !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.pets.Gryphon-RoyalPurple': 5 };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_pet',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Pet and cake!',
+          destination: '/inventory/stable',
+        },
+        seen: false,
+      },
+    };
+  } else {
+    set = { migration: MIGRATION_NAME, 'items.mounts.Gryphon-RoyalPurple': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_mount',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Mount and cake!',
+          destination: '/inventory/stable',
+        },
+        seen: false,
+      },
+    };
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  if (push) {
+    return await user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
+  } else {
+    return await user.updateOne({ $set: set, $inc: inc }).exec();
+  }
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-07-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)
+      .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
+  }
+};

package.json

@@ -1,12 +1,12 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.267.0",
+  "version": "4.277.2",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/register": "^7.18.9",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/register": "^7.22.5",
     "@google-cloud/trace-agent": "^7.1.2",
     "@parse/node-apn": "^5.1.3",
     "@slack/webhook": "^6.1.0",
@@ -14,9 +14,9 @@
     "amazon-payments": "^0.2.9",
     "amplitude": "^6.0.0",
     "apidoc": "^0.54.0",
-    "apple-auth": "^1.0.7",
+    "apple-auth": "^1.0.9",
     "bcrypt": "^5.1.0",
-    "body-parser": "^1.20.1",
+    "body-parser": "^1.20.2",
     "bootstrap": "^4.6.0",
     "compression": "^1.7.4",
     "cookie-session": "^2.0.0",
@@ -42,7 +42,7 @@
     "image-size": "^1.0.2",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^5.0.0",
-    "jsonwebtoken": "^8.5.1",
+    "jsonwebtoken": "^9.0.0",
     "jwks-rsa": "^2.1.5",
     "lodash": "^4.17.21",
     "merge-stream": "^2.0.0",
@@ -67,16 +67,16 @@
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
     "short-uuid": "^4.2.2",
-    "stripe": "^11.10.0",
-    "superagent": "^8.0.6",
+    "stripe": "^12.9.0",
+    "superagent": "^8.0.9",
     "universal-analytics": "^0.5.3",
     "useragent": "^2.1.9",
     "uuid": "^9.0.0",
     "validator": "^13.9.0",
     "vinyl-buffer": "^1.0.1",
-    "winston": "^3.8.2",
+    "winston": "^3.9.0",
     "winston-loggly-bulk": "^3.2.1",
-    "xml2js": "^0.4.23"
+    "xml2js": "^0.6.0"
   },
   "private": true,
   "engines": {
@@ -110,7 +110,7 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^1.2.2",
+    "axios": "^1.3.6",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
@@ -122,7 +122,7 @@
     "monk": "^7.3.4",
     "require-again": "^2.0.0",
     "run-rs": "^0.7.7",
-    "sinon": "^15.0.1",
+    "sinon": "^15.1.2",
     "sinon-chai": "^3.7.0",
     "sinon-stub-promise": "^4.0.0"
   },

test/api/unit/libs/payments/payments.test.js

@@ -748,9 +748,19 @@ describe('payments/index', () => {
       });
 
       it('does not add to plans.consecutive.offset if 1 month subscription', async () => {
+        data.sub.key = 'basic_earned';
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.extraMonths).to.eql(0);
+        expect(user.purchased.plan.consecutive.offset).to.eql(0);
+      });
+
+      it('resets plans.consecutive.offset if 1 month subscription', async () => {
+        user.purchased.plan.consecutive.offset = 1;
+        await user.save();
+        data.sub.key = 'basic_earned';
+        await api.createSubscription(data);
+
+        expect(user.purchased.plan.consecutive.offset).to.eql(0);
       });
 
       it('adds 5 to plan.consecutive.gemCapExtra for 3 month block', async () => {

test/api/unit/middlewares/cronMiddleware.js

@@ -242,7 +242,7 @@ describe('cron middleware', () => {
 
     sandbox.spy(cronLib, 'recoverCron');
 
-    sandbox.stub(User, 'update')
+    sandbox.stub(User, 'updateOne')
       .withArgs({
         _id: user._id,
         $or: [

test/api/unit/models/group.test.js

@@ -1732,7 +1732,7 @@ describe('Group Model', () => {
         });
 
         it('updates participting members (not including user)', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateMany');
 
           await party.startQuest(nonParticipatingMember);
 
@@ -1740,7 +1740,7 @@ describe('Group Model', () => {
             questLeader._id, participatingMember._id, sleepingParticipatingMember._id,
           ];
 
-          expect(User.update).to.be.calledWith(
+          expect(User.updateMany).to.be.calledWith(
             { _id: { $in: members } },
             {
               $set: {
@@ -1753,11 +1753,11 @@ describe('Group Model', () => {
         });
 
         it('updates non-user quest leader and decrements quest scroll', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateOne');
 
           await party.startQuest(participatingMember);
 
-          expect(User.update).to.be.calledWith(
+          expect(User.updateOne).to.be.calledWith(
             { _id: questLeader._id },
             {
               $inc: {
@@ -1819,29 +1819,29 @@ describe('Group Model', () => {
         };
 
         it('doesn\'t retry successful operations', async () => {
-          sandbox.stub(User, 'update').returns(successfulMock);
+          sandbox.stub(User, 'updateOne').returns(successfulMock);
 
           await party.finishQuest(quest);
 
-          expect(User.update).to.be.calledThrice;
+          expect(User.updateOne).to.be.calledThrice;
         });
 
         it('stops retrying when a successful update has occurred', async () => {
-          const updateStub = sandbox.stub(User, 'update');
+          const updateStub = sandbox.stub(User, 'updateOne');
           updateStub.onCall(0).returns(failedMock);
           updateStub.returns(successfulMock);
 
           await party.finishQuest(quest);
 
-          expect(User.update.callCount).to.equal(4);
+          expect(User.updateOne.callCount).to.equal(4);
         });
 
         it('retries failed updates at most five times per user', async () => {
-          sandbox.stub(User, 'update').returns(failedMock);
+          sandbox.stub(User, 'updateOne').returns(failedMock);
 
           await expect(party.finishQuest(quest)).to.eventually.be.rejected;
 
-          expect(User.update.callCount).to.eql(15); // for 3 users
+          expect(User.updateOne.callCount).to.eql(15); // for 3 users
         });
       });
 
@@ -2088,17 +2088,17 @@ describe('Group Model', () => {
 
       context('Party quests', () => {
         it('updates participating members with rewards', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateOne');
           await party.finishQuest(quest);
 
-          expect(User.update).to.be.calledThrice;
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledThrice;
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: questLeader._id,
           });
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: participatingMember._id,
           });
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: sleepingParticipatingMember._id,
           });
         });
@@ -2173,11 +2173,11 @@ describe('Group Model', () => {
         });
 
         it('updates all users with rewards', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateMany');
           await party.finishQuest(tavernQuest);
 
-          expect(User.update).to.be.calledOnce;
-          expect(User.update).to.be.calledWithMatch({});
+          expect(User.updateMany).to.be.calledOnce;
+          expect(User.updateMany).to.be.calledWithMatch({});
         });
 
         it('sets quest completed to the world quest key', async () => {

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

@@ -2,7 +2,6 @@ import { v4 as generateUUID } from 'uuid';
 import {
   generateUser,
   createAndPopulateGroup,
-  checkExistence,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
 
@@ -258,47 +257,6 @@ describe('POST /group/:groupId/join', () => {
         await expect(user.get('/user')).to.eventually.have.nested.property('items.quests.basilist', 2);
       });
 
-      it('deletes previous party where the user was the only member', async () => {
-        const userToInvite = await generateUser();
-        const oldParty = await userToInvite.post('/groups', { // add user to a party
-          name: 'Another Test Party',
-          type: 'party',
-        });
-
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(true);
-        await user.post(`/groups/${party._id}/invite`, {
-          uuids: [userToInvite._id],
-        });
-        await userToInvite.post(`/groups/${party._id}/join`);
-
-        await expect(user.get('/user')).to.eventually.have.nested.property('party._id', party._id);
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(false);
-      });
-
-      it('does not allow user to leave a party if a quest was active and they were the only member', async () => {
-        const userToInvite = await generateUser();
-        const oldParty = await userToInvite.post('/groups', { // add user to a party
-          name: 'Another Test Party',
-          type: 'party',
-        });
-
-        await userToInvite.update({
-          [`items.quests.${PET_QUEST}`]: 1,
-        });
-        await userToInvite.post(`/groups/${oldParty._id}/quests/invite/${PET_QUEST}`);
-
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(true);
-        await user.post(`/groups/${party._id}/invite`, {
-          uuids: [userToInvite._id],
-        });
-
-        await expect(userToInvite.post(`/groups/${party._id}/join`)).to.eventually.be.rejected.and.eql({
-          code: 401,
-          error: 'NotAuthorized',
-          message: t('messageCannotLeaveWhileQuesting'),
-        });
-      });
-
       it('invites joining member to active quest', async () => {
         await user.update({
           [`items.quests.${PET_QUEST}`]: 1,

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

@@ -1,6 +1,7 @@
 import { v4 as generateUUID } from 'uuid';
 import nconf from 'nconf';
 import {
+  createAndPopulateGroup,
   generateUser,
   generateGroup,
   translate as t,
@@ -581,20 +582,7 @@ describe('Post /groups/:groupId/invite', () => {
         });
     });
 
-    it('allow inviting a user to a party if they are partying solo', async () => {
-      const userToInvite = await generateUser();
-      await userToInvite.post('/groups', { // add user to a party
-        name: 'Another Test Party',
-        type: 'party',
-      });
-
-      await inviter.post(`/groups/${party._id}/invite`, {
-        uuids: [userToInvite._id],
-      });
-      expect((await userToInvite.get('/user')).invitations.parties[0].id).to.equal(party._id);
-    });
-
-    it('allow inviting a user to 2 different parties', async () => {
+    it('allows inviting a user to 2 different parties', async () => {
       // Create another inviter
       const inviter2 = await generateUser();
 
@@ -635,29 +623,48 @@ describe('Post /groups/:groupId/invite', () => {
       });
       expect((await userToInvite.get('/user')).invitations.parties[0].id).to.equal(party._id);
     });
+  });
+
+  describe('party size limits', () => {
+    let party;
+    let partyLeader;
+
+    beforeEach(async () => {
+      group = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'Test Party',
+          type: 'party',
+          privacy: 'private',
+        },
+        // Generate party with 20 members
+        members: PARTY_LIMIT_MEMBERS - 10,
+      });
+      party = group.group;
+      partyLeader = group.groupLeader;
+    });
 
     it('allows 30 members in a party', async () => {
       const invitesToGenerate = [];
-      // Generate 29 users to invite (29 + leader = 30 members)
-      for (let i = 0; i < PARTY_LIMIT_MEMBERS - 1; i += 1) {
+      // Generate 10 new invites
+      for (let i = 1; i < 10; i += 1) {
         invitesToGenerate.push(generateUser());
       }
       const generatedInvites = await Promise.all(invitesToGenerate);
       // Invite users
-      expect(await inviter.post(`/groups/${party._id}/invite`, {
+      expect(await partyLeader.post(`/groups/${party._id}/invite`, {
         uuids: generatedInvites.map(invite => invite._id),
       })).to.be.an('array');
     }).timeout(10000);
 
-    it('does not allow 30+ members in a party', async () => {
+    it('does not allow >30 members in a party', async () => {
       const invitesToGenerate = [];
-      // Generate 30 users to invite (30 + leader = 31 members)
-      for (let i = 0; i < PARTY_LIMIT_MEMBERS; i += 1) {
+      // Generate 11 invites
+      for (let i = 1; i < 11; i += 1) {
         invitesToGenerate.push(generateUser());
       }
       const generatedInvites = await Promise.all(invitesToGenerate);
       // Invite users
-      await expect(inviter.post(`/groups/${party._id}/invite`, {
+      await expect(partyLeader.post(`/groups/${party._id}/invite`, {
         uuids: generatedInvites.map(invite => invite._id),
       }))
         .to.eventually.be.rejected.and.eql({

test/api/v4/user/POST-user_class_cast_spellId.test.js

@@ -202,18 +202,86 @@ describe('POST /user/class/cast/:spellId', () => {
     await group.groupLeader.post('/user/class/cast/mpheal');
 
     promises = [];
+    promises.push(group.groupLeader.sync());
     promises.push(group.members[0].sync());
     promises.push(group.members[1].sync());
     promises.push(group.members[2].sync());
     promises.push(group.members[3].sync());
     await Promise.all(promises);
 
+    expect(group.groupLeader.stats.mp).to.be.equal(170); // spell caster
     expect(group.members[0].stats.mp).to.be.greaterThan(0); // warrior
     expect(group.members[1].stats.mp).to.equal(0); // wizard
     expect(group.members[2].stats.mp).to.be.greaterThan(0); // rogue
     expect(group.members[3].stats.mp).to.be.greaterThan(0); // healer
   });
 
+  const spellList = [
+    {
+      className: 'warrior',
+      spells: [['smash', 'task'], ['defensiveStance'], ['valorousPresence'], ['intimidate']],
+    },
+    {
+      className: 'wizard',
+      spells: [['fireball', 'task'], ['mpheal'], ['earth'], ['frost']],
+    },
+    {
+      className: 'healer',
+      spells: [['heal'], ['brightness'], ['protectAura'], ['healAll']],
+    },
+    {
+      className: 'rogue',
+      spells: [['pickPocket', 'task'], ['backStab', 'task'], ['toolsOfTrade'], ['stealth']],
+    },
+  ];
+
+  spellList.forEach(async habitClass => {
+    describe(`For a ${habitClass.className}`, async () => {
+      habitClass.spells.forEach(async spell => {
+        describe(`Using ${spell[0]}`, async () => {
+          it('Deducts MP from spell caster', async () => {
+            const { groupLeader } = await createAndPopulateGroup({
+              groupDetails: { type: 'party', privacy: 'private' },
+              members: 3,
+            });
+            await groupLeader.update({
+              'stats.mp': 200, 'stats.class': habitClass.className, 'stats.lvl': 20, 'stats.hp': 40,
+            });
+            // need this for task spells and for stealth
+            const task = await groupLeader.post('/tasks/user', {
+              text: 'test habit',
+              type: 'daily',
+            });
+            if (spell.length === 2 && spell[1] === 'task') {
+              await groupLeader.post(`/user/class/cast/${spell[0]}?targetId=${task._id}`);
+            } else {
+              await groupLeader.post(`/user/class/cast/${spell[0]}`);
+            }
+            await groupLeader.sync();
+            expect(groupLeader.stats.mp).to.be.lessThan(200);
+          });
+          it('works without a party', async () => {
+            await user.update({
+              'stats.mp': 200, 'stats.class': habitClass.className, 'stats.lvl': 20, 'stats.hp': 40,
+            });
+            // need this for task spells and for stealth
+            const task = await user.post('/tasks/user', {
+              text: 'test habit',
+              type: 'daily',
+            });
+            if (spell.length === 2 && spell[1] === 'task') {
+              await user.post(`/user/class/cast/${spell[0]}?targetId=${task._id}`);
+            } else {
+              await user.post(`/user/class/cast/${spell[0]}`);
+            }
+            await user.sync();
+            expect(user.stats.mp).to.be.lessThan(200);
+          });
+        });
+      });
+    });
+  });
+
   it('cast bulk', async () => {
     let { group, groupLeader } = await createAndPopulateGroup({ // eslint-disable-line prefer-const
       groupDetails: { type: 'party', privacy: 'private' },

test/helpers/api-integration/requester.js

@@ -53,7 +53,8 @@ function _requestMaker (user, method, additionalSets = {}) {
     if (user && user._id && user.apiToken) {
       request
         .set('x-api-user', user._id)
-        .set('x-api-key', user.apiToken);
+        .set('x-api-key', user.apiToken)
+        .set('x-client', 'habitica-web');
     }
 
     if (!isEmpty(additionalSets)) {

website/client/.eslintrc.js

@@ -14,6 +14,8 @@ module.exports = {
     // TODO find a way to let eslint understand webpack aliases
     'import/no-unresolved': 'off',
     'import/extensions': 'off',
+    'vue/component-tags-order': 'off',
+    'vue/no-mutating-props': 'off',
     'vue/no-v-html': 'off',
     'vue/html-self-closing': ['error', {
       html: {

website/client/package-lock.json

@@ -1842,9 +1842,9 @@
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.20.7.tgz",
-      "integrity": "sha512-T+A7b1kfjtRM51ssoOfS1+wbyCVqorfyZhT99TvxxLMirPShD8CzKMRepMlCBGM5RpHMbn8s+5MMHnPstJH6mQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
@@ -1870,9 +1870,9 @@
           "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
         },
         "@babel/types": {
-          "version": "7.20.7",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
-          "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
+          "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
           "requires": {
             "@babel/helper-string-parser": "^7.19.4",
             "@babel/helper-validator-identifier": "^7.19.1",
@@ -13321,14 +13321,12 @@
         "emojis-list": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-          "optional": true
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "optional": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
@@ -13339,7 +13337,6 @@
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
           "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "optional": true,
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -13381,7 +13378,6 @@
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "optional": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -13390,7 +13386,6 @@
           "version": "npm:vue-loader@16.8.3",
           "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
           "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "optional": true,
           "requires": {
             "chalk": "^4.1.0",
             "hash-sum": "^2.0.0",
@@ -13401,7 +13396,6 @@
               "version": "4.1.2",
               "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
               "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-              "optional": true,
               "requires": {
                 "ansi-styles": "^4.1.0",
                 "supports-color": "^7.1.0"
@@ -16907,9 +16901,9 @@
       }
     },
     "core-js": {
-      "version": "3.27.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
-      "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w=="
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.0.tgz",
+      "integrity": "sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ=="
     },
     "core-js-compat": {
       "version": "3.11.0",
@@ -17958,9 +17952,9 @@
       }
     },
     "dompurify": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
-      "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
+      "integrity": "sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ=="
     },
     "domutils": {
       "version": "1.7.0",
@@ -21077,6 +21071,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -21437,9 +21436,9 @@
       "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
     },
     "intro.js": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-6.0.0.tgz",
-      "integrity": "sha512-ZUiR6BoLSvPSlLG0boewnWVgji1fE1gBvP/pyw5pgCKXEDQz1mMeUxarggClPNs71UTq364LwSk9zxz17A9gaQ=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-7.0.1.tgz",
+      "integrity": "sha512-1oqz6aOz9cGQ3CrtVYhCSo6AkjnXUn302kcIWLaZ3TI4kKssRXDwDSz4VRoGcfC1jN+WfaSJXRBrITz+QVEBzg=="
     },
     "invariant": {
       "version": "2.2.4",
@@ -22019,9 +22018,9 @@
       }
     },
     "jquery": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
-      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg=="
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
     },
     "js-message": {
       "version": "1.0.5",
@@ -27367,17 +27366,19 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.34.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
-      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
+      "version": "1.63.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz",
+      "integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==",
       "requires": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
       "dependencies": {
         "anymatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-          "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+          "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
           "requires": {
             "normalize-path": "^3.0.0",
             "picomatch": "^2.0.4"
@@ -27397,18 +27398,18 @@
           }
         },
         "chokidar": {
-          "version": "3.5.1",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-          "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+          "version": "3.5.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+          "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
           "requires": {
-            "anymatch": "~3.1.1",
+            "anymatch": "~3.1.2",
             "braces": "~3.0.2",
-            "fsevents": "~2.3.1",
-            "glob-parent": "~5.1.0",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
             "is-binary-path": "~2.1.0",
             "is-glob": "~4.0.1",
             "normalize-path": "~3.0.0",
-            "readdirp": "~3.5.0"
+            "readdirp": "~3.6.0"
           }
         },
         "fill-range": {
@@ -27447,9 +27448,9 @@
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
         },
         "readdirp": {
-          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-          "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
           "requires": {
             "picomatch": "^2.2.1"
           }
@@ -27801,9 +27802,9 @@
       }
     },
     "smartbanner.js": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.19.1.tgz",
-      "integrity": "sha512-x3alFTlk6pLuqrm9PrYQv1E+86CrEIgPf/KJ+nP5342BmOWstbdR8OwD3TPmM56zHQm4MEr/eoqbEcfTKdvdKw=="
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.19.2.tgz",
+      "integrity": "sha512-hwcGNp5Hza5PJHTmqP6H8q0XBYhloIQyJgdzv0ldz3HQSeEuKB2riVraQXdKuquE6ZU/0M0yubno53xJ/ZiQQg=="
     },
     "snapdragon": {
       "version": "0.8.2",
@@ -28175,9 +28176,9 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
     "stopword": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/stopword/-/stopword-2.0.7.tgz",
-      "integrity": "sha512-s+uLKAxrproCLrq0Wcd3JAIjlJLx6l80b2Rzt0u8+ra5SzGkHnNG8PS3DfGmYk2TrKePDVLL4SdKYwKpgSLc+w=="
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/stopword/-/stopword-2.0.8.tgz",
+      "integrity": "sha512-btlEC2vEuhCuvshz99hSGsY8GzaP5qzDPQm56j6rR/R38p8xdsOXgU5a6tIgvU/4hcCta1Vlo/2FVXA9m0f8XA=="
     },
     "store2": {
       "version": "2.10.0",
@@ -30271,9 +30272,9 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
     },
     "uuid-browser": {
       "version": "3.1.0",

website/client/package.json

@@ -32,8 +32,8 @@
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
     "chai": "^4.3.7",
-    "core-js": "^3.27.2",
-    "dompurify": "^2.4.3",
+    "core-js": "^3.31.0",
+    "dompurify": "^3.0.3",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
@@ -41,20 +41,20 @@
     "habitica-markdown": "^3.0.0",
     "hellojs": "^1.20.0",
     "inspectpack": "^4.7.1",
-    "intro.js": "^6.0.0",
-    "jquery": "^3.6.3",
+    "intro.js": "^7.0.1",
+    "jquery": "^3.7.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "nconf": "^0.12.0",
-    "sass": "^1.34.0",
+    "sass": "^1.63.4",
     "sass-loader": "^8.0.2",
-    "smartbanner.js": "^1.19.1",
-    "stopword": "^2.0.7",
+    "smartbanner.js": "^1.19.2",
+    "stopword": "^2.0.8",
     "svg-inline-loader": "^0.8.2",
     "svg-url-loader": "^7.1.1",
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.0",
     "validator": "^13.9.0",
     "vue": "^2.7.10",
     "vue-cli-plugin-storybook": "2.1.0",
@@ -66,6 +66,6 @@
     "webpack": "^4.46.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.20.7"
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0"
   }
 }

website/client/src/app.vue

@@ -35,11 +35,13 @@
       <sub-canceled-modal v-if="isUserLoaded" />
       <bug-report-modal v-if="isUserLoaded" />
       <bug-report-success-modal v-if="isUserLoaded" />
+      <external-link-modal />
       <birthday-modal />
       <snackbars />
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
       <template v-else>
         <template v-if="isUserLoaded">
+          <chat-banner />
           <damage-paused-banner />
           <gems-promo-banner />
           <gift-promo-banner />
@@ -158,6 +160,7 @@ import { loadProgressBar } from 'axios-progress-bar';
 import birthdayModal from '@/components/news/birthdayModal';
 import AppMenu from './components/header/menu';
 import AppHeader from './components/header/index';
+import ChatBanner from './components/header/banners/chatBanner';
 import DamagePausedBanner from './components/header/banners/damagePaused';
 import GemsPromoBanner from './components/header/banners/gemsPromo';
 import GiftPromoBanner from './components/header/banners/giftPromo';
@@ -175,6 +178,7 @@ import amazonPaymentsModal from '@/components/payments/amazonModal';
 import paymentsSuccessModal from '@/components/payments/successModal';
 import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
 import subCanceledModal from '@/components/payments/canceledModal';
+import externalLinkModal from '@/components/externalLinkModal.vue';
 
 import spellsMixin from '@/mixins/spells';
 import {
@@ -196,6 +200,7 @@ export default {
     AppHeader,
     AppFooter,
     birthdayModal,
+    ChatBanner,
     DamagePausedBanner,
     GemsPromoBanner,
     GiftPromoBanner,
@@ -210,6 +215,7 @@ export default {
     subCanceledModal,
     bugReportModal,
     bugReportSuccessModal,
+    externalLinkModal,
   },
   mixins: [notifications, spellsMixin],
   data () {

website/client/src/assets/scss/icon.scss

@@ -24,9 +24,9 @@
   }
 }
 
-.icon-16 {
-  width: 16px;
-  height: 16px;
+.icon-10 {
+  width: 10px;
+  height: 10px;
 }
 
 .icon-12 {
@@ -34,21 +34,26 @@
   height: 12px;
 }
 
+.icon-16 {
+  width: 16px;
+  height: 16px;
+}
+
 .icon-24 {
   width: 24px;
   height: 24px;
 }
 
+.icon-32 {
+  width: 32px;
+  height: 32px;
+}
+
 .icon-48 {
   width: 48px;
   height: 48px;
 }
 
-.icon-10 {
-  width: 10px;
-  height: 10px;
-}
-
 .inline {
   display: inline-block;
 }

website/client/src/assets/svg/sync-2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path id="b" d="m10,6h6V0h-2v2.72C12.49.99,10.3,0,8,0,3.59,0,0,3.59,0,8s3.59,8,8,8c2.69,0,5.2-1.35,6.68-3.6l-1.67-1.1c-1.11,1.69-2.99,2.71-5.01,2.7-3.31,0-6-2.69-6-6s2.69-6,6-6c1.72,0,3.33.74,4.46,2h-2.46v2Z" fill-rule="evenodd"/></svg>

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

@@ -22,6 +22,10 @@
         Account created:
         <strong>{{ hero.auth.timestamps.created | formatDate }}</strong>
       </div>
+      <div v-if="hero.flags.thirdPartyTools">
+        User has employed <strong>third party tools</strong>. Last known usage:
+        <strong>{{ hero.flags.thirdPartyTools | formatDate }}</strong>
+      </div>
       <div v-if="cronError">
         "lastCron" value:
         <strong>{{ hero.lastCron | formatDate }}</strong>

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

@@ -17,10 +17,18 @@
           Payment schedule ("basic-earned" is monthly):
           <strong>{{ hero.purchased.plan.planId }}</strong>
         </div>
+        <div v-if="hero.purchased.plan.planId == 'group_plan_auto'">
+          Group plan ID:
+          <strong>{{ hero.purchased.plan.owner }}</strong>
+        </div>
         <div v-if="hero.purchased.plan.dateCreated">
           Creation date:
           <strong>{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
         </div>
+        <div v-if="hero.purchased.plan.dateCurrentTypeCreated">
+          Start date for current subscription type:
+          <strong>{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
+        </div>
         <div>
           Termination date:
           <strong
@@ -46,9 +54,16 @@
           Perk offset months:
           <strong>{{ hero.purchased.plan.consecutive.offset }}</strong>
         </div>
-        <div>
+        <div class="form-inline">
           Perk month count:
-          <strong>{{ hero.purchased.plan.perkMonthCount }}</strong>
+          <input
+              v-model="hero.purchased.plan.perkMonthCount"
+              class="form-control"
+              type="number"
+              min="0"
+              max="2"
+              step="1"
+            >
         </div>
         <div>
           Next Mystic Hourglass:

website/client/src/components/appFooter.vue

@@ -213,7 +213,7 @@
             </a>
             <a
               class="social-circle"
-              href="https://twitter.com/habitica"
+              href="https://twitter.com/habitica/"
               target="_blank"
             >
               <div
@@ -223,7 +223,7 @@
             </a>
             <a
               class="social-circle"
-              href="https://www.facebook.com/Habitica"
+              href="https://www.facebook.com/Habitica/"
               target="_blank"
             >
               <div

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

@@ -322,6 +322,7 @@ import omit from 'lodash/omit';
 import { v4 as uuid } from 'uuid';
 
 import { userStateMixin } from '../../mixins/userState';
+import externalLinks from '../../mixins/externalLinks';
 import memberSearchDropdown from '@/components/members/memberSearchDropdown';
 import closeChallengeModal from './closeChallengeModal';
 import Column from '../tasks/column';
@@ -358,7 +359,7 @@ export default {
     userLink,
     groupLink,
   },
-  mixins: [challengeMemberSearchMixin, userStateMixin],
+  mixins: [challengeMemberSearchMixin, externalLinks, userStateMixin],
   props: ['challengeId'],
   data () {
     return {
@@ -414,6 +415,10 @@ export default {
   mounted () {
     if (!this.searchId) this.searchId = this.challengeId;
     if (!this.challenge._id) this.loadChallenge();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   async beforeRouteUpdate (to, from, next) {
     this.searchId = to.params.challengeId;

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

@@ -120,6 +120,7 @@ import { mapState } from '@/libs/store';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
+import externalLinks from '@/mixins/externalLinks';
 import challengeUtilities from '@/mixins/challengeUtilities';
 
 import positiveIcon from '@/assets/svg/positive.svg';
@@ -131,7 +132,7 @@ export default {
     challengeModal,
     MugenScroll,
   },
-  mixins: [challengeUtilities],
+  mixins: [challengeUtilities, externalLinks],
   data () {
     return {
       loading: true,
@@ -177,6 +178,10 @@ export default {
       section: this.$t('challenges'),
     });
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     updateSearch (eventData) {

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

@@ -81,6 +81,8 @@ import challengeModal from './challengeModal';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import challengeItem from './challengeItem';
 import challengeIcon from '@/assets/svg/challenge.svg';
 
@@ -92,6 +94,7 @@ export default {
   directives: {
     markdown: markdownDirective,
   },
+  mixins: [externalLinks],
   props: ['group'],
   data () {
     return {
@@ -118,6 +121,10 @@ export default {
   },
   mounted () {
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     async loadChallenges () {

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

@@ -145,6 +145,7 @@ import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
 import challengeUtilities from '@/mixins/challengeUtilities';
+import externalLinks from '@/mixins/externalLinks';
 
 import challengeIcon from '@/assets/svg/challenge.svg';
 import positiveIcon from '@/assets/svg/positive.svg';
@@ -156,7 +157,7 @@ export default {
     challengeModal,
     MugenScroll,
   },
-  mixins: [challengeUtilities],
+  mixins: [challengeUtilities, externalLinks],
   data () {
     return {
       icons: Object.freeze({
@@ -203,6 +204,10 @@ export default {
       section: this.$t('challenges'),
     });
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     updateSearch (eventData) {

website/client/src/components/creatorIntro.vue

@@ -183,10 +183,8 @@
           <div
             v-for="bg in backgroundShopSets[0].items"
             :key="bg.key"
+            :id="bg.key"
             class="col-2"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
@@ -195,6 +193,13 @@
             >
               <div class="small-rectangle"></div>
             </div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
         <div
@@ -211,16 +216,21 @@
             <div
               v-for="bg in backgroundShopSets[2].items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="unlock('background.' + bg.key)"
             >
               <div
                 class="background"
                 :class="`background_${bg.key}`"
               ></div>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -236,10 +246,8 @@
             <div
               v-for="bg in backgroundShopSets[1].items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
             >
@@ -270,6 +278,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -302,10 +317,8 @@
             <div
               v-for="bg in set.items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
             >
@@ -336,6 +349,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
             <div
               v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'"
@@ -358,16 +378,21 @@
           <div
             v-for="(bg) in ownedBackgrounds"
             :key="bg.key"
+            :id="bg.key"
             class="col-4 text-center customize-option background-button"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
               class="background"
               :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
             ></div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
       </div>

website/client/src/components/externalLinkModal.vue

@@ -0,0 +1,209 @@
+<template>
+  <b-modal
+    id="external-link-modal"
+    size="md"
+  >
+    <!-- HEADER -->
+    <div slot="modal-header">
+      <div
+        class="modal-close"
+        @click="close()"
+      >
+        <div
+          class="icon-close"
+          v-html="icons.close"
+        >
+        </div>
+      </div>
+      <div class="exclamation-container d-flex align-items-center justify-content-center">
+        <div
+          v-once
+          class="svg-icon svg-exclamation"
+          v-html="icons.exclamation"
+        ></div>
+      </div>
+      <h2>
+        {{ $t('leaveHabitica') }}
+      </h2>
+    </div>
+
+    <!-- BODY -->
+    <div
+      class="row leave-warning-text"
+      v-html="$t('leaveHabiticaText')"
+    >
+    </div>
+    <div
+      class="skip-modal"
+    >
+      {{ $t('skipExternalLinkModal') }}
+    </div>
+
+    <!-- FOOTER -->
+    <div slot="modal-footer">
+      <button
+        v-once
+        class="btn btn-primary"
+        @click="proceed()"
+      >
+        {{ $t('continue') }}
+      </button>
+      <div
+        v-once
+        class="close-link justify-content-center"
+        @click="close()"
+      >
+        {{ $t('cancel') }}
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+@import '~@/assets/scss/colors.scss';
+
+#external-link-modal {
+  &.modal {
+    display: flex !important;
+  }
+
+  .modal-md {
+    max-width: 448px;
+    min-width: 330px;
+    margin: auto;
+
+  .modal-close {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    cursor: pointer;
+
+    .icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
+
+      & svg {
+        fill: $yellow-1;
+        opacity: 0.75;
+      }
+       & :hover {
+        fill: $yellow-1;
+        opacity: 1;
+      }
+    }
+  }
+
+  .modal-content {
+    background: transparent;
+  }
+
+  .modal-header {
+    justify-content: center;
+    padding-top: 32px;
+    padding-bottom: 0px;
+    background: $yellow-100;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    border-bottom: none;
+
+    .exclamation-container {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: $yellow-1;
+      margin: 0 auto;
+      margin-bottom: 16px;
+    }
+
+    .svg-exclamation {
+      width: 8px;
+      color: $white;
+    }
+
+    h2 {
+      color: $yellow-1;
+      margin-bottom: 16px;
+    }
+  }
+
+  .modal-body {
+    padding: 16px 44px 20px 44px;
+    background: $white;
+
+    .leave-warning-text {
+      font-size: 0.875rem;
+      line-height: 1.71;
+      text-align: center;
+      margin-top:24px;
+    }
+
+    .skip-modal {
+      color: $gray-100;
+      font-size: 0.75rem;
+      text-align: center;
+      line-height: 1.33;
+      margin-top: 16px;
+      // padding-bottom: 24px;
+    }
+  }
+
+    .modal-footer {
+      background: $white;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      justify-content: center;
+      border-top: none;
+      padding-top: 0;
+    }
+    .close-link {
+      color: $purple-300;
+      line-height: 1.71;
+      font-size: 0.875rem;
+      cursor: pointer;
+      margin-top:16px;
+      margin-bottom: 8px;
+      text-align: center;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import exclamationIcon from '@/assets/svg/exclamation.svg';
+import closeIcon from '@/assets/svg/new-close.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: closeIcon,
+        exclamation: exclamationIcon,
+      }),
+      url: '',
+    };
+  },
+  mounted () {
+    this.$root.$on('habitica:external-link', url => {
+      this.url = url;
+      this.$root.$emit('bv::show::modal', 'external-link-modal');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:external-link');
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'external-link-modal');
+    },
+    proceed () {
+      window.open(this.url, '_blank').focus();
+      this.close();
+    },
+  },
+};
+</script>

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

@@ -87,6 +87,8 @@
 <script>
 import debounce from 'lodash/debounce';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
 import chatMessage from '../chat/chatMessages';
@@ -103,6 +105,7 @@ export default {
     communityGuidelines,
     chatMessage,
   },
+  mixins: [externalLinks],
   props: ['label', 'group', 'placeholder'],
   data () {
     return {
@@ -132,6 +135,10 @@ export default {
   },
   mounted () {
     this.textbox = this.$refs['user-entry'];
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a

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

@@ -11,9 +11,12 @@
       <div class="quest_screen"></div>
       <div class="row heading">
         <div class="col-12 text-center pr-5 pl-5">
-          <h2 v-once>
+          <h1
+            v-once
+            class="mb-2"
+          >
             {{ $t('playInPartyTitle') }}
-          </h2>
+          </h1>
           <p
             v-once
             class="mb-4"
@@ -22,67 +25,91 @@
           </p>
           <button
             v-once
-            class="btn btn-primary"
+            class="btn btn-primary px-4 mb-2"
             @click="createParty()"
           >
             {{ $t('createParty') }}
           </button>
         </div>
       </div>
+      <close-x
+        @close="close()"
+      />
     </div>
     <div class="row grey-row">
-      <div class="col-12 text-center">
+      <div class="col-12 text-center px-0">
         <div class="join-party"></div>
-        <h2 v-once>
-          {{ $t('wantToJoinPartyTitle') }}
-        </h2>
-        <p v-html="$t('wantToJoinPartyDescription')"></p>
-        <div
-          class="form-group"
-          @click="copyUsername"
+        <h1
+          v-once
+          class="mb-2"
         >
-          <div class="d-flex align-items-center">
-            <label
-              v-once
-              class="mr-3"
-            >{{ $t('username') }}</label>
-            <div class="flex-grow-1">
-              <div class="input-group-prepend input-group-text">
-                @
-                <div class="text">
-                  {{ user.auth.local.username }}
-                </div>
-                <div
-                  class="svg-icon copy-icon"
-                  v-html="icons.copy"
-                ></div>
-                <div
-                  v-once
-                  class="small"
-                >
-                  {{ $t('copy') }}
-                </div>
-              </div>
+          {{ $t('wantToJoinPartyTitle') }}
+        </h1>
+        <p
+          v-once
+          class="mb-4"
+          v-html="$t('partyFinderDescription')"
+        >
+        </p>
+        <div
+          v-if="seeking"
+        >
+          <div
+            class="green-bar mb-3"
+          >
+            {{ $t('currentlyLookingForParty') }}
+          </div>
+          <div class="d-flex justify-content-center">
+            <div
+              class="red-link"
+              @click="seekParty()"
+            >
+              {{ $t('leave') }}
             </div>
           </div>
         </div>
+        <button
+          v-else
+          class="btn btn-primary px-4 mt-2 mb-1"
+          @click="seekParty()"
+        >
+          {{ $t('lookForParty') }}
+        </button>
       </div>
     </div>
   </b-modal>
 </template>
 
-<style>
-  #create-party-modal .modal-body {
-    padding: 0rem 0.75rem;
-  }
+<style lang="scss">
+  #create-party-modal {
+    display: flex !important;
+    overflow-y: hidden;
 
-  #create-party-modal .modal-dialog {
-    width: 35.75rem;
-  }
+    @media (max-height: 770px) {
+      overflow-y: auto;
+    }
 
-  #create-party-modal .modal-header {
-    padding: 0;
-    border-bottom: 0px;
+    .modal-body {
+      padding: 0rem 0.75rem;
+    }
+
+    .modal-content {
+      border-radius: 8px;
+    }
+
+    .modal-dialog {
+      width: 566px;
+      margin: auto;
+
+      @media (max-height: 826px) {
+        margin-top: 56px;
+      }
+    }
+
+    .modal-header {
+      padding: 0;
+      border-bottom: 0px;
+    }
   }
 </style>
 
@@ -107,15 +134,27 @@
     cursor: pointer;
   }
 
+  .green-bar {
+    height: 32px;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1.71;
+    text-align: center;
+    color: $green-1;
+    background-color: $green-100;
+    border-radius: 2px;
+    padding: 4px 0px 4px 0px;
+  }
+
   .grey-row {
     background-color: $gray-700;
     color: #4e4a57;
     padding: 2em;
-    border-radius: 0px 0px 2px 2px;
+    border-radius: 0px 0px 8px 8px;
   }
 
-  h2 {
-    color: $gray-100;
+  h1 {
+    color: $purple-300;
   }
 
   .header-wrap {
@@ -132,10 +171,6 @@
       border-radius: 2px 2px 0 0;
       image-rendering: optimizequality;
     }
-
-    h2 {
-      color: $purple-200;
-    }
   }
 
   .heading {
@@ -182,6 +217,21 @@
     margin: 0.75rem auto 0.75rem 0.25rem;
   }
 
+  p {
+    line-height: 1.71;
+  }
+
+  .red-link {
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.71;
+    text-align: center;
+    color: $maroon-50;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   .small {
     color: $gray-200;
     margin: auto 0.5rem auto 0.25rem;
@@ -192,21 +242,29 @@
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
 import notifications from '@/mixins/notifications';
+import closeX from '../ui/closeX';
 
 import copyIcon from '@/assets/svg/copy.svg';
 
 export default {
+  components: {
+    closeX,
+  },
   mixins: [notifications],
   data () {
     return {
       icons: Object.freeze({
         copy: copyIcon,
       }),
+      seeking: false,
     };
   },
   computed: {
     ...mapState({ user: 'user.data' }),
   },
+  mounted () {
+    this.seeking = Boolean(this.user.party.seeking);
+  },
   methods: {
     async createParty () {
       const group = {
@@ -223,7 +281,10 @@ export default {
       });
 
       this.$root.$emit('bv::hide::modal', 'create-party-modal');
-      this.$router.push('/party');
+      await this.$router.push('/party');
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'create-party-modal');
     },
     copyUsername () {
       if (navigator.clipboard) {
@@ -238,6 +299,12 @@ export default {
       }
       this.text(this.$t('usernameCopied'));
     },
+    seekParty () {
+      this.$store.dispatch('user:set', {
+        'party.seeking': !this.user.party.seeking ? new Date() : null,
+      });
+      this.seeking = !this.seeking;
+    },
   },
 };
 </script>

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

@@ -542,7 +542,8 @@ export default {
       await this.$store.dispatch('guilds:leave', data);
 
       if (this.isParty) {
-        this.$router.push({ name: 'tasks' });
+        await this.$router.push({ name: 'tasks' });
+        window.location.reload(true);
       }
     },
     upgradeGroup () {

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

@@ -4,12 +4,12 @@
     <group-plan-creation-modal />
     <div>
       <div class="header">
-        <h1 class="text-center">
-          Need more for your Group?
+        <h1 v-once class="text-center">
+          {{ $t('groupPlanTitle') }}
         </h1>
         <div class="row">
           <div class="col-8 offset-2 text-center">
-            <h2 class="sub-text">
+            <h2 v-once class="sub-text">
               {{ $t('groupBenefitsDescription') }}
             </h2>
           </div>
@@ -24,8 +24,8 @@
                 src="~@/assets/images/group-plans/group-14@3x.png"
               >
               <hr>
-              <h2>{{ $t('teamBasedTasks') }}</h2>
-              <p>Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('teamBasedTasks') }} </h2>
+              <p v-once> {{ $t('teamBasedTasksListDesc') }} </p>
             </div>
           </div>
           <div class="col-4">
@@ -35,8 +35,8 @@
                 src="~@/assets/images/group-plans/group-12@3x.png"
               >
               <hr>
-              <h2>Group Management Controls</h2>
-              <p>Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('groupManagementControls') }} </h2>
+              <p v-once> {{ $t('groupManagementControlsDesc') }} </p>
             </div>
           </div>
           <div class="col-4">
@@ -46,8 +46,8 @@
                 src="~@/assets/images/group-plans/group-13@3x.png"
               >
               <hr>
-              <h2>In-Game Benefits</h2>
-              <p>Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('inGameBenefits') }} </h2>
+              <p v-once> {{ $t('inGameBenefitsDesc') }} </p>
             </div>
           </div>
         </div>

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

@@ -0,0 +1,344 @@
+<template>
+  <div>
+    <div class="d-flex justify-content-center">
+      <div
+        v-if="seekers.length > 0"
+        class="fit-content mx-auto mt-4"
+      >
+        <div class="d-flex align-items-center">
+          <h1 v-once class="my-auto mr-auto"> {{ $t('findPartyMembers') }}</h1>
+          <div
+            class="btn btn-secondary btn-sync ml-auto my-auto pl-2 pr-3 d-flex"
+            @click="refreshList()"
+          >
+            <div class="svg-icon icon-16 color my-auto mr-2" v-html="icons.sync"></div>
+            <div class="ml-auto"> {{ $t('refreshList') }} </div>
+          </div>
+        </div>
+        <div class="d-flex flex-wrap seeker-list">
+          <div
+            v-for="(seeker, index) in seekers"
+            :key="seeker._id"
+            class="seeker"
+          >
+            <div class="d-flex">
+              <avatar
+                :member="seeker"
+                :hideClassBadge="true"
+                @click.native="showMemberModal(seeker._id)"
+                class="mr-3 mb-2"
+              />
+              <div class="card-data">
+                <user-link
+                  :user-id="seeker._id"
+                  :name="seeker.profile.name"
+                  :backer="seeker.backer"
+                  :contributor="seeker.contributor"
+                />
+                <div class="small-with-border pb-2 mb-2">
+                  @{{ seeker.auth.local.username }} • {{ $t('level') }} {{ seeker.stats.lvl }}
+                </div>
+                <div
+                  class="d-flex"
+                >
+                  <strong v-once> {{ $t('classLabel') }} </strong>
+                  <span
+                    class="svg-icon d-inline-block icon-16 my-auto mx-2"
+                    v-html="icons[seeker.stats.class]"
+                  >
+                  </span>
+                  <strong
+                    :class="`${seeker.stats.class}-color`"
+                  >
+                    {{ $t(seeker.stats.class) }}
+                  </strong>
+                </div>
+                <div>
+                  <strong v-once class="mr-2"> {{ $t('checkinsLabel') }} </strong>
+                  {{ seeker.loginIncentives }}
+                </div>
+                <div>
+                  <strong v-once class="mr-2"> {{ $t('languageLabel') }} </strong>
+                  {{ displayLanguage(seeker.preferences.language) }}
+                </div>
+              </div>
+            </div>
+            <strong
+              v-if="!seeker.invited"
+              @click="inviteUser(seeker._id, index)"
+              class="btn btn-primary w-100"
+            >
+              {{ $t('inviteToParty') }}
+            </strong>
+            <div
+              v-else
+              @click="rescindInvite(seeker._id, index)"
+              class="btn btn-success w-100"
+              v-html="$t('invitedToYourParty')"
+            >
+            </div>
+          </div>
+          <mugen-scroll
+            v-show="loading"
+            :handler="infiniteScrollTrigger"
+            :should-handle="!loading && canLoadMore"
+            :threshold="1"
+          />
+        </div>
+      </div>
+      <div
+        v-if="seekers.length === 0 && !loading"
+        class="d-flex flex-column empty-state text-center my-5"
+      >
+        <div class="gray-circle mb-3 mx-auto d-flex">
+          <div
+            class="svg-icon icon-32 color m-auto"
+            v-html="icons.users"
+          >
+
+          </div>
+        </div>
+        <strong class="mb-1"> {{ $t('findMorePartyMembers') }} </strong>
+        <div v-html="$t('noOneLooking')"></div>
+      </div>
+    </div>
+    <h2
+      v-show="loading"
+      class="loading"
+      :class="seekers.length === 0 ? 'mt-3' : 'mt-0'"
+    >
+      {{ $t('loading') }}
+    </h2>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h1 {
+    color: $purple-300;
+  }
+
+  strong {
+    line-height: 1.71;
+  }
+  .avatar {
+    background-color: $gray-600;
+  }
+
+  .btn-success {
+    box-shadow: none;
+    color: $green-1;
+    font-weight: normal;
+
+    &:not(:disabled):not(.disabled):active {
+      color: $green-1;
+    }
+  }
+
+  .btn-sync {
+    min-width: 128px;
+    max-height: 32px;
+
+    .svg-icon {
+      color: $gray-200;
+    }
+  }
+
+  .card-data {
+    width: 267px;
+  }
+
+  .empty-state {
+    color: $gray-100;
+    line-height: 1.71;
+  }
+
+  .fit-content {
+    width: fit-content;
+  }
+
+  .gray-circle {
+    width: 64px;
+    height: 64px;
+    color: $gray-600;
+    background-color: $gray-200;
+    border-radius: 100px;
+
+    .icon-32 {
+      height: auto;
+    }
+  }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
+
+  .seeker-list {
+    max-width: 920px;
+
+    @media (max-width: 962px) {
+      max-width: 464px;
+    };
+
+    .seeker {
+      width: 448px;
+      margin-bottom: 24px;
+      padding: 8px;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+      background-color: $white;
+
+      &:first-of-type {
+        margin-top: 24px;
+      }
+
+      @media (min-width: 963px) {
+        &:nth-child(2) {
+          margin-top: 24px;
+        }
+        &:nth-child(even) {
+          margin-left: 24px;
+        }
+      }
+    }
+  }
+
+  .small-with-border {
+    border-bottom: 1px solid $gray-500;
+    color: $gray-100;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.33;
+  }
+
+  .healer-color {
+    color: $yellow-10;
+  }
+
+  .rogue-color {
+    color: $purple-200;
+  }
+
+  .warrior-color {
+    color: $red-50;
+  }
+
+  .wizard-color {
+    color: $blue-10;
+  }
+</style>
+
+<script>
+import debounce from 'lodash/debounce';
+import MugenScroll from 'vue-mugen-scroll';
+import Avatar from '../avatar';
+import userLink from '../userLink';
+import { mapState } from '@/libs/store';
+
+import syncIcon from '@/assets/svg/sync-2.svg';
+import usersIcon from '@/assets/svg/users.svg';
+import warriorIcon from '@/assets/svg/warrior.svg';
+import rogueIcon from '@/assets/svg/rogue.svg';
+import healerIcon from '@/assets/svg/healer.svg';
+import wizardIcon from '@/assets/svg/wizard.svg';
+
+export default {
+  components: {
+    Avatar,
+    MugenScroll,
+    userLink,
+  },
+  data () {
+    return {
+      canLoadMore: true,
+      loading: true,
+      page: 0,
+      party: {},
+      seekers: [],
+      icons: Object.freeze({
+        warrior: warriorIcon,
+        rogue: rogueIcon,
+        healer: healerIcon,
+        sync: syncIcon,
+        users: usersIcon,
+        wizard: wizardIcon,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({
+      availableLanguages: 'i18n.availableLanguages',
+      user: 'user.data',
+    }),
+  },
+  async mounted () {
+    try {
+      this.party = await this.$store.dispatch('guilds:getGroup', { groupId: this.user.party._id });
+    } catch {
+      this.$router.push('/');
+    }
+    if (!this.party._id || this.party.leader._id !== this.user._id) {
+      this.$router.push('/');
+    } else {
+      this.$store.dispatch('common:setTitle', {
+        section: this.$t('lookingForPartyTitle'),
+      });
+      this.seekers = await this.$store.dispatch('party:lookingForParty');
+      this.canLoadMore = this.seekers.length === 30;
+      this.loading = false;
+    }
+  },
+  methods: {
+    displayLanguage (languageCode) {
+      const language = this.availableLanguages.find(lang => lang.code === languageCode);
+      if (language) {
+        return language.name;
+      }
+      return languageCode;
+    },
+    infiniteScrollTrigger () {
+      if (this.canLoadMore) {
+        this.loading = true;
+      }
+
+      this.loadMore();
+    },
+    async inviteUser (userId, index) {
+      await this.$store.dispatch('guilds:invite', {
+        invitationDetails: {
+          inviter: this.user.profile.name,
+          uuids: [userId],
+        },
+        groupId: this.party._id,
+      });
+      this.seekers[index].invited = true;
+    },
+    loadMore: debounce(async function loadMoreDebounce () {
+      this.page += 1;
+      const addlSeekers = await this.$store.dispatch('party:lookingForParty', { page: this.page });
+      this.seekers = this.seekers.concat(addlSeekers);
+      this.canLoadMore = this.seekers.length % 30 === 0;
+      this.loading = false;
+    }, 1000),
+    async refreshList () {
+      this.loading = true;
+      this.page = 0;
+      this.seekers = await this.$store.dispatch('party:lookingForParty');
+      this.canLoadMore = this.seekers.length === 30;
+      this.loading = false;
+    },
+    async rescindInvite (userId, index) {
+      await this.$store.dispatch('members:removeMember', {
+        memberId: userId,
+        groupId: this.party._id,
+      });
+      this.seekers[index].invited = false;
+    },
+    showMemberModal (userId) {
+      this.$router.push({ name: 'userProfile', params: { userId } });
+    },
+  },
+};
+</script>

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

@@ -2,7 +2,7 @@
   <div class="sidebar px-4">
     <div>
       <div class="buttons-wrapper">
-        <div class="button-container button-with-menu-row">
+        <div class="button-container d-flex">
           <button
             v-if="!isMember"
             class="btn btn-success btn-success"
@@ -203,10 +203,6 @@ export default {
     }
   }
 
-  .button-with-menu-row {
-    display: flex;
-  }
-
   .menuIcon {
     width: 4px;
     height: 1rem;

website/client/src/components/hall/heroes.vue

@@ -258,13 +258,22 @@
                 :key="hero._id"
               >
                 <td>
-                  <user-link
+                  <div
                     v-if="hasPermission(hero, 'userSupport')"
-                    :user="hero"
-                    :popover="$t('gamemaster')"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                  />
+                    class="width-content"
+                  >
+                    <user-link
+                      :id="hero._id"
+                      :user="hero"
+                    />
+                    <b-popover
+                      :target="hero._id"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('gamemaster')"
+                    />
+                  </div>
                   <user-link
                     v-else
                     :user="hero"
@@ -302,6 +311,10 @@
   h4.expand-toggle::after {
     margin-left: 5px;
   }
+
+  .width-content {
+    width: fit-content;
+  }
 </style>
 
 <script>

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

@@ -6,13 +6,10 @@
     :style="{height}"
   >
     <slot name="content"></slot>
-    <div
+    <close-x
       v-if="canClose"
-      class="close-icon svg-icon icon-12"
-
-      @click="close()"
-      v-html="icons.close"
-    ></div>
+      @close="close()"
+    />
   </div>
 </template>
 
@@ -30,32 +27,24 @@ body.modal-open .habitica-top-banner {
   padding-left: 1.5rem;
   padding-right: 1.625rem;
   z-index: 1300;
-}
 
-.close-icon.svg-icon {
-  position: relative;
-  top: 0;
-  right: 0;
-  opacity: 0.48;
-
-  & ::v-deep svg path {
-    stroke: $white !important;
-  }
-
-  &:hover {
-    opacity: 0.75;
+  .modal-close {
+    position: unset;
   }
 }
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeX from '@/components/ui/closeX';
 import {
   clearBannerSetting, hideBanner, isBannerHidden, updateBannerHeight,
 } from '@/libs/banner.func';
 import { EVENTS } from '@/libs/events';
 
 export default {
+  components: {
+    closeX,
+  },
   props: {
     bannerId: {
       type: String,
@@ -82,9 +71,6 @@ export default {
   },
   data () {
     return {
-      icons: Object.freeze({
-        close: closeIcon,
-      }),
       hidden: false,
     };
   },
@@ -119,8 +105,6 @@ export default {
     close () {
       hideBanner(this.bannerId);
       this.hidden = true;
-
-      this.$root.$emit(EVENTS.BANNER_HIDDEN, this.bannerId);
     },
   },
 };

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

@@ -0,0 +1,67 @@
+<template>
+  <base-banner
+    banner-id="chat-warning"
+    banner-class="chat-banner"
+    class="chat-banner"
+    height="3rem"
+    v-if="showChatWarning"
+    :class="{faq: faqPage}"
+  >
+    <div
+      slot="content"
+      class="w-100 text-center"
+      v-html="$t('chatSunsetWarning')"
+    >
+    </div>
+  </base-banner>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .chat-banner {
+    width: 100%;
+    min-height: 48px;
+    padding: 8px;
+    color: $orange-1;
+    background-color: $orange-100;
+    line-height: 1.71;
+
+    a {
+      color: $orange-1;
+      text-decoration: underline;
+
+      &:hover {
+        color: $orange-1;
+      }
+    }
+
+    &.faq {
+      position: fixed;
+      top: 3.5rem;
+    }
+  }
+
+</style>
+
+<script>
+import BaseBanner from './base';
+
+export default {
+  components: {
+    BaseBanner,
+  },
+  computed: {
+    faqPage () {
+      return (this.$route.fullPath.indexOf('/faq')) !== -1;
+    },
+    showChatWarning () {
+      if (this.$route.fullPath.indexOf('/groups') !== -1) return true;
+      if (this.$route.fullPath.indexOf('/tavern-and-guilds') !== -1) return false;
+      if (this.$route.fullPath.indexOf('/tavern') !== -1) return true;
+      return this.faqPage;
+    },
+  },
+};
+
+</script>

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

@@ -51,20 +51,20 @@
       </div>
       <div
         v-else
-        class="no-party d-none d-md-flex  justify-content-center text-center mr-4"
+        class="no-party d-none d-md-flex justify-content-center text-center mr-4"
       >
         <div class="align-self-center">
-          <h3>{{ $t('battleWithFriends') }}</h3>
+          <h3>{{ user.party._id ? $t('questWithOthers') : $t('battleWithFriends') }}</h3>
           <span
             class="small-text"
-            v-html="$t('inviteFriendsParty')"
+            v-html="user.party._id ? $t('inviteFriendsParty') : $t('startPartyDetail')"
           ></span>
           <br>
           <button
             class="btn btn-primary"
             @click="createOrInviteParty()"
           >
-            {{ user.party._id ? $t('inviteFriends') : $t('startAParty') }}
+            {{ user.party._id ? $t('findPartyMembers') : $t('getStarted') }}
           </button>
         </div>
       </div>
@@ -122,6 +122,7 @@
 
 <script>
 import orderBy from 'lodash/orderBy';
+import * as Analytics from '@/libs/analytics';
 import { mapGetters, mapActions } from '@/libs/store';
 import MemberDetails from '../memberDetails';
 import createPartyModal from '../groups/createPartyModal';
@@ -232,10 +233,24 @@ export default {
         this.expandedMember = memberId;
       }
     },
-    createOrInviteParty () {
+    async createOrInviteParty () {
       if (this.user.party._id) {
-        this.$root.$emit('inviteModal::inviteToGroup', this.user.party);
+        await Analytics.track({
+          eventName: 'Header Party CTA',
+          eventAction: 'Header Party CTA',
+          eventCategory: 'behavior',
+          hitType: 'event',
+          state: 'Find Party Members',
+        });
+        this.$router.push('/looking-for-party');
       } else {
+        await Analytics.track({
+          eventName: 'Header Party CTA',
+          eventAction: 'Header Party CTA',
+          eventCategory: 'behavior',
+          hitType: 'event',
+          state: 'Get Started',
+        });
         this.$root.$emit('bv::show::modal', 'create-party-modal');
       }
     },

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

@@ -148,7 +148,7 @@
             </div>
           </li>
           <b-nav-item
-            v-if="user.party._id"
+            v-if="user.party._id && user._id !== partyLeaderId"
             class="topbar-item"
             :class="{'active': $route.path.startsWith('/party')}"
             tag="li"
@@ -156,6 +156,36 @@
           >
             {{ $t('party') }}
           </b-nav-item>
+          <li
+            v-if="user.party._id && user._id === partyLeaderId"
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/party')}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div>
+            <router-link
+              class="nav-link"
+              :to="{name: 'party'}"
+            >
+              {{ $t('party') }}
+            </router-link>
+            <div class="topbar-dropdown">
+              <router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'lookingForParty'}"
+              >
+                {{ $t('lookingForPartyTitle') }}
+              </router-link>
+            </div>
+          </li>
           <b-nav-item
             v-if="!user.party._id"
             class="topbar-item"
@@ -768,6 +798,7 @@ export default {
     return {
       isUserDropdownOpen: false,
       menuIsOpen: false,
+      partyLeaderId: null,
       icons: Object.freeze({
         gem: gemIcon,
         gold: goldIcon,
@@ -796,15 +827,21 @@ export default {
       };
     },
   },
-  mounted () {
-    this.getUserGroupPlans();
-    Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
-      link.addEventListener('click', this.closeMenu);
-    });
+  async mounted () {
+    await this.getUserGroupPlans();
+    await this.getUserParty();
+    if (document.getElementById('menu_collapse')) {
+      Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
+        link.addEventListener('click', this.closeMenu);
+      });
+    }
     Array.from(document.getElementsByClassName('topbar-item')).forEach(link => {
       link.addEventListener('mouseenter', this.dropdownDesktop);
       link.addEventListener('mouseleave', this.dropdownDesktop);
     });
+    this.$root.$on('update-party', () => {
+      this.getUserParty();
+    });
   },
   methods: {
     modForm () {
@@ -816,6 +853,12 @@ export default {
     async getUserGroupPlans () {
       await this.$store.dispatch('guilds:getGroupPlans');
     },
+    async getUserParty () {
+      if (this.user.party._id) {
+        await this.$store.dispatch('party:getParty');
+        this.partyLeaderId = this.$store.state.party.data.leader._id;
+      }
+    },
     openPartyModal () {
       this.$root.$emit('bv::show::modal', 'create-party-modal');
     },

website/client/src/components/header/notifications/itemReceived.vue

@@ -44,13 +44,13 @@ export default {
       if (!this.notification || !this.notification.data) {
         return;
       }
-      if (this.notification.data.destination === 'backgrounds') {
+      if (this.notification.data.destination.indexOf('backgrounds') !== -1) {
         this.$store.state.avatarEditorOptions.editingUser = true;
         this.$store.state.avatarEditorOptions.startingPage = 'backgrounds';
         this.$store.state.avatarEditorOptions.subpage = '2023';
         this.$root.$emit('bv::show::modal', 'avatar-modal');
       } else {
-        this.$router.push({ name: this.notification.data.destination || 'items' });
+        this.$router.push(this.notification.data.destination || '/inventory/items');
       }
     },
   },

website/client/src/components/header/notifications/partyInvitation.vue

@@ -34,11 +34,13 @@
 <script>
 import BaseNotification from './base';
 import { mapState } from '@/libs/store';
+import sync from '@/mixins/sync';
 
 export default {
   components: {
     BaseNotification,
   },
+  mixins: [sync],
   props: {
     notification: {
       type: Object,
@@ -73,6 +75,7 @@ export default {
       }
 
       await this.$store.dispatch('guilds:join', { groupId: group.id, type: 'party' });
+      this.sync();
       this.$router.push('/party');
     },
     reject () {

website/client/src/components/messages/messageCard.vue

@@ -139,6 +139,8 @@
 import axios from 'axios';
 import moment from 'moment';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import renderWithMentions from '@/libs/renderWithMentions';
 import { mapState } from '@/libs/store';
 import userLink from '../userLink';
@@ -150,6 +152,7 @@ export default {
   components: {
     userLink,
   },
+  mixins: [externalLinks],
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
@@ -179,6 +182,10 @@ export default {
   },
   mounted () {
     this.$emit('message-card-mounted');
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     report () {

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

@@ -126,7 +126,7 @@
 
           <!-- the word "total" -->
           <div class="buy-gem-total">
-            {{ $t('sendGiftTotal') }}
+            {{ $t('sendTotal') }}
           </div>
 
           <!-- the actual dollar amount -->

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

@@ -179,7 +179,9 @@ export default {
       let valid = true;
 
       for (const stat of canRestore) {
-        if (this.restoreValues.stats[stat] === '') {
+        if (this.restoreValues.stats[stat] === ''
+          || this.restoreValues.stats[stat] < 0
+        ) {
           this.restoreValues.stats[stat] = this.user.stats[stat];
           valid = false;
         }

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

@@ -128,7 +128,10 @@
         <hr>
       </div>
       <div>
-        <div class="checkbox">
+        <div
+          class="checkbox"
+          id="preferenceAdvancedCollapsed"
+        >
           <label>
             <input
               v-model="user.preferences.advancedCollapsed"
@@ -136,33 +139,22 @@
               class="mr-2"
               @change="set('advancedCollapsed')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('startAdvCollapsedPop')"
-            >{{ $t('startAdvCollapsed') }}</span>
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="user.preferences.dailyDueDefaultView"
-              type="checkbox"
-              class="mr-2"
-              @change="set('dailyDueDefaultView')"
-            >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('dailyDueDefaultViewPop')"
-            >{{ $t('dailyDueDefaultView') }}</span>
+            <span class="hint">
+              {{ $t('startAdvCollapsed') }}
+            </span>
+            <b-popover
+              target="preferenceAdvancedCollapsed"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('startAdvCollapsedPop')"
+            />
           </label>
         </div>
         <div
           v-if="party.memberCount === 1"
           class="checkbox"
+          id="preferenceDisplayInviteAtOneMember"
         >
           <label>
             <input
@@ -171,12 +163,9 @@
               class="mr-2"
               @change="set('displayInviteToPartyWhenPartyIs1')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('displayInviteToPartyWhenPartyIs1')"
-            >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
+            <span class="hint">
+              {{ $t('displayInviteToPartyWhenPartyIs1') }}
+            </span>
           </label>
         </div>
         <div class="checkbox">
@@ -217,32 +206,47 @@
         </div>
         <hr>
         <button
+          id="buttonShowBailey"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('showBaileyPop')"
           @click="showBailey()"
         >
           {{ $t('showBailey') }}
+          <b-popover
+            target="buttonShowBailey"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('showBaileyPop')"
+          />
         </button>
         <button
+          id="buttonFCV"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('fixValPop')"
           @click="openRestoreModal()"
         >
           {{ $t('fixVal') }}
+          <b-popover
+            target="buttonFCV"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('fixValPop')"
+          />
         </button>
         <button
           v-if="user.preferences.disableClasses == true"
+          id="buttonEnableClasses"
           class="btn btn-primary mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('enableClassPop')"
           @click="changeClassForUser(false)"
         >
           {{ $t('enableClass') }}
+          <b-popover
+            target="buttonEnableClasses"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('enableClassPop')"
+          />
         </button>
         <hr>
         <day-start-adjustment />
@@ -532,6 +536,10 @@
   input {
     color: $gray-50;
   }
+
+  .checkbox {
+    width: fit-content;
+  }
   .usersettings h5 {
     margin-top: 1em;
   }

website/client/src/components/shared/itemCost.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="item-cost">
+    <span
+      class="cost"
+      :class="getPriceClass()"
+    >
+      <span
+        class="svg-icon inline icon-24"
+        aria-hidden="true"
+        v-html="icons[getPriceClass()]"
+      >
+      </span>
+      <span
+        :class="getPriceClass()"
+      >{{ item.value }}</span>
+    </span>
+  </div>
+</template>
+
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
+
+.item-cost {
+ padding-bottom: 16px;
+}
+
+  .cost {
+    height: 40px;
+    font-size: 1.25rem;
+    font-weight: bold;
+    line-height: 1.4;
+    vertical-align: middle;
+
+    &.gems {
+      color: $gems-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(36, 204, 143, 0.15);
+    }
+
+    &.gold {
+      color: $gold-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(255, 190, 93, 0.15);
+    }
+
+    &.hourglasses {
+      color: $hourglass-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(41, 149, 205, 0.15);
+    }
+  }
+</style>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgGem from '@/assets/svg/gem.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+        gold: svgGold,
+        gems: svgGem,
+      }),
+      selectedAmountToBuy: 1,
+      selectedAmount: 1,
+    };
+  },
+  methods: {
+    getPriceClass () {
+      if (this.priceType && this.icons[this.priceType]) {
+        return this.priceType;
+      } if (this.item.currency && this.icons[this.item.currency]) {
+        return this.item.currency;
+      }
+      return 'gold';
+    },
+  },
+};
+</script>

website/client/src/components/shared/numberIncrement.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="d-flex flex-row align-items-center justify-content-center number-increment">
+    <!-- buy modal -->
+    <div
+      class="gray-circle"
+      @click="quantity <= 0
+        ? quantity = 0
+        : quantity--"
+    >
+      <div
+        class="icon-negative"
+        v-html="icons.svgNegative"
+      ></div>
+    </div>
+    <div class="input-group">
+      <div class="align-items-center">
+      </div>
+      <input
+        v-model="quantity"
+        class="form-control alignment"
+        step="1"
+        type="number"
+      >
+    </div>
+    <div
+      class="gray-circle"
+      @click="quantity++"
+    >
+      <div
+        class="icon-positive"
+        v-html="icons.svgPositive"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .number-increment {
+    padding-bottom: 0px;
+    }
+
+  .alignment {
+    text-align: center;
+  }
+
+  .input-group {
+    width: 94px;
+    height: 32px;
+    width: 48px;
+    margin: 0px 16px 0px 16px;
+    padding: 0;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    background-color: $white;
+  }
+
+  .gray-circle {
+    border-radius: 100%;
+    border: solid 2px $gray-300;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $purple-300;
+    }
+  }
+
+  .gray-circle:hover{
+    .icon-positive, .icon-negative {
+      & ::v-deep svg path {
+        fill: $purple-300;
+      }
+    }
+  }
+
+  .icon-positive, .icon-negative {
+    width: 10px;
+    height: 10px;
+    margin: 4px auto;
+
+    & ::v-deep svg path {
+      fill: $gray-300;
+    }
+  }
+
+/* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+/* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+
+</style>
+
+<script>
+// icons
+import svgGem from '@/assets/svg/gem.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        svgGem,
+        svgGold,
+        svgPositive,
+        svgNegative,
+      }),
+      item: { },
+      quantity: 1,
+    };
+  },
+  computed: {
+  },
+  watch: {
+    quantity () {
+      this.$emit('updateQuantity', this.quantity);
+    },
+  },
+  methods: {
+    setDefaults () {
+      this.input = 1;
+    },
+  },
+};
+
+</script>

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

@@ -22,10 +22,11 @@
   @import '~@/assets/scss/colors.scss';
 
 span {
-  font-weight: normal;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.33;
-  color: $gray-200;
+  color: $gray-100;
+  margin-bottom: 16px;
+  margin-top: -4px;
 
   display: inline-block;
 }

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

@@ -17,7 +17,7 @@
     </span>
     <div>
       <span
-        class="svg-icon icon-12 close-icon"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         tabindex="0"
         @click="hideDialog()"
@@ -45,6 +45,13 @@
               :sprites-margin="'0px auto 0px -24px'"
             />
           </div>
+          <item
+            v-else-if="item.key === 'gem'"
+            class="flat bordered-item"
+            :item="item"
+            :item-content-class="item.class"
+            :show-popover="false"
+          />
           <item
             v-else-if="item.key != 'gem'"
             class="flat bordered-item"
@@ -53,10 +60,20 @@
             :show-popover="false"
           />
         </slot>
+        <div
+          v-if="!showAvatar && user.items[item.purchaseType]"
+          class="owned"
+          :class="totalOwned"
+        >
+          <!-- eslint-disable-next-line max-len -->
+          <span class="owned-text">{{ $t('owned') }}: <span class="user-amount">{{ totalOwned }}</span></span>
+        </div>
         <h4 class="title">
           {{ itemText }}
         </h4>
-        <div v-html="itemNotes"></div>
+        <div class="item-notes">
+          {{ itemNotes }}
+        </div>
         <slot
           name="additionalInfo"
           :item="item"
@@ -69,60 +86,61 @@
           />
         </slot>
         <div
-          v-if="item.value > 0"
+          v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
           class="purchase-amount"
         >
-          <div
-            v-if="showAmountToBuy(item)"
-            class="how-many-to-buy"
-          >
-            <strong>{{ $t('howManyToBuy') }}</strong>
-          </div>
-          <div v-if="showAmountToBuy(item)">
-            <div class="box">
-              <input
-                v-model.number="selectedAmountToBuy"
-                class="form-control"
-                type="number"
-                min="0"
-                step="1"
-              >
-            </div>
-            <span :class="{'notEnough': notEnoughCurrency}">
+          <!-- this is where the pretty item cost element lives -->
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="getPriceClass()"
+            >
               <span
-                class="svg-icon inline icon-32"
+                class="svg-icon inline icon-24"
                 aria-hidden="true"
                 v-html="icons[getPriceClass()]"
-              ></span>
+              >
+              </span>
               <span
-                class="cost"
                 :class="getPriceClass()"
               >{{ item.value }}</span>
             </span>
           </div>
+
           <div
-            v-else
-            class="d-flex align-items-middle"
+            v-if="showAmountToBuy(item)"
+            class="how-many-to-buy"
           >
-            <span
-              class="svg-icon inline icon-32 ml-auto my-auto"
-              aria-hidden="true"
-              v-html="icons[getPriceClass()]"
-            ></span>
-            <span
-              class="cost mr-auto my-auto"
-              :class="getPriceClass()"
-            >{{ item.value }}</span>
+            {{ $t('howManyToBuy') }}
+          </div>
+          <div
+            v-if="showAmountToBuy(item)"
+          >
+            <number-increment
+              class="number-increment"
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+            <div
+              :class="{'notEnough': notEnoughCurrency}"
+              class="total"
+            >
+              <span class="total-text">{{ $t('sendTotal') }}</span>
+              <span
+                class="svg-icon total icon-24"
+                aria-hidden="true"
+                v-html="icons[getPriceClass()]"
+              ></span>
+              <span
+                class="total-text"
+                :class="getPriceClass()"
+              >{{ item.value * selectedAmountToBuy }}</span>
+            </div>
           </div>
         </div>
         <div
-          v-if="item.key === 'gem'"
-          class="gems-left"
+          v-if="item.key === 'gem' && gemsLeft < 1"
+          class="no-more-gems"
         >
-          <strong v-if="gemsLeft > 0">{{ gemsLeft }} {{ $t('gemsRemaining') }}</strong>
-          <strong v-if="gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
-        </div>
-        <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
           {{ $t('notEnoughGemsToBuy') }}
         </div>
         <div
@@ -147,7 +165,7 @@
           {{ $t('viewSubscriptions') }}
         </button>
         <button
-          v-else
+          v-else-if="!(item.key === 'gem' && gemsLeft < 1)"
           class="btn btn-primary"
           :disabled="item.key === 'gem' && gemsLeft === 0 ||
             attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked ||
@@ -165,6 +183,7 @@
     <countdown-banner
       v-if="item.event && item.owned == null"
       :end-date="endDate"
+      class="limitedTime available"
     />
     <div
       v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
@@ -179,12 +198,31 @@
       </div>
     </div>
     <div
-      slot="modal-footer"
-      class="d-flex"
+      v-if="item.key === 'gem'"
+      class="d-flex justify-content-center align-items-center"
     >
-      <span class="balance mr-auto">{{ $t('yourBalance') }}</span>
+      <div
+        v-if="gemsLeft > 0"
+        class="gems-left d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+      <div
+        v-if="gemsLeft === 0"
+        class="out-of-gems-banner d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+    </div>
+    <div
+      slot="modal-footer"
+      class="clearfix"
+    >
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="ml-auto"
+        class="currency-totals"
         :currency-needed="getPriceClass()"
         :amount-needed="item.value"
       />
@@ -200,11 +238,47 @@
     @include centeredModal();
 
     .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
       padding-bottom: 0px;
     }
 
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin: 24px 0 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
-      width: 330px;
+      width: 448px;
+      box-sizing: border-box;
+    }
+
+    .badge-dialog {
+      left: -8px;
+      top: -8px;
     }
 
     .avatar {
@@ -212,8 +286,71 @@
       margin: 0 auto;
     }
 
+   .owned {
+      height: 32px;
+      width: 141px;
+      margin-top: -36px;
+      margin-left: 153px;
+      padding-top: 6px;
+      background-color: $gray-600;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      display: block;
+      text-align: center;
+      position: relative;
+      z-index: 1;
+
+      .owned-text {
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.71;
+      }
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25.67px;
+      left: 1px;
+
+      &.shop_gem {
+        transform: scale(1.45, 1.45);
+        top: -2px;
+       left: 0px;
+      }
+    }
+
+    .title {
+      height: 28px;
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 25px;
+    }
+
+    .item-notes {
+       margin-top: 8px;
+       padding-left: 48.5px;
+       padding-right: 48.5px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
     .content {
       text-align: center;
+      width: 448px;
     }
 
     .item-wrapper {
@@ -221,15 +358,22 @@
     }
 
     .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
+      margin: 32px auto auto;
+    }
+
+    .btn-primary {
+      margin-top: 16px;
     }
 
     .purchase-amount {
-      margin-top: 24px;
+      margin-top: 0px;
 
       .how-many-to-buy {
-        margin-bottom: 16px;
+        font-weight: bold !important;
+      }
+
+      .number-increment {
+        margin-top: 16px;
       }
 
       .box {
@@ -255,31 +399,105 @@
         }
       }
     }
+    .no-more-gems {
+      color: $yellow-5;
+      font-size: 0.875em;
+      line-height: 1.33;
+      margin: 16px 48px 0 48px;
+    }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
       margin-right: 8px;
+      padding-top: 6px;
+    }
 
-      vertical-align: middle;
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+
+      &:hover {
+          color: $gray-100;
+      }
+    }
+
+    .attributes-group {
+      margin: 32px;
+      border-radius: 4px;
+      line-height: 1.71;
+      font-size: 0.875;
+    }
+
+    .attributesGrid {
+      margin-top: 28px;
+      border-radius: 2px;
+      background-color: $gray-500;
+    }
+
+    .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
     }
 
     .cost {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
       font-weight: bold;
-      line-height: 1.33;
-
-      vertical-align: middle;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
 
       &.gems {
-        color: $gems-color;
+        color: $green-10;
+        background-color: rgba(36, 204, 143, 0.15);
+        align-items: center;
       }
 
       &.gold {
-        color: $gold-color;
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+        background-color: rgba(41, 149, 205, 0.15);
+        align-items: center;
+      }
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      padding-top: 2px;
+      margin-top: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
       }
 
       &.hourglasses {
@@ -287,62 +505,84 @@
       }
     }
 
+  .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+  }
+
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-      min-width: 6rem;
+      margin-top: 16px;
+      padding: 4px 16px;
+      height: 32px;
 
       &:focus {
         border: 2px solid black;
       }
     }
 
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
-    }
+      .notEnough {
+        pointer-events: none;
+        opacity: 0.55;
+      }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-    }
+      .free-rebirth {
+        background-color: $yellow-5;
+        color: $white;
+        height: 2rem;
+        line-height: 16px;
+        margin: auto -1rem -1rem;
+      }
 
-    .notEnough {
-      pointer-events: none;
-      opacity: 0.55;
-    }
+      // .pt-015 {
+      //   padding-top: 0.15rem;
+      // }
 
-    .attributesGrid {
-      margin-top: 8px;
-      border-radius: 2px;
-      background-color: $gray-500;
-
-      margin: 10px 0 24px;
-    }
 
     .gems-left {
-      margin-top: .5em;
+      height: 32px;
+      background-color: $green-100;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      color: $green-1;
+      width: 100%;
+      margin-bottom: -24px;
     }
 
-    .free-rebirth {
-      background-color: $yellow-5;
+    .out-of-gems-banner {
+      height: 32px;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      background-color: $yellow-100;
+      color: $yellow-1;
+      width: 100%;
+      margin-bottom: -24px;
+    }
+
+    .limitedTime {
+      height: 32px;
+      width: 446px;
+      font-size: 0.75rem;
+      margin: 24px 0 0 0;
+      background-color: $purple-300;
       color: $white;
-      height: 2rem;
-      line-height: 16px;
-      margin: auto -1rem -1rem;
-    }
-
-    .pt-015 {
-      padding-top: 0.15rem;
+      margin-bottom: -24px;
     }
   }
+
 </style>
 
 <style lang="scss" scoped>
@@ -370,6 +610,8 @@ import svgGem from '@/assets/svg/gem.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
 import svgClock from '@/assets/svg/clock.svg';
 import svgWhiteClock from '@/assets/svg/clock-white.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from './balanceInfo.vue';
 import PinBadge from '@/components/ui/pinBadge';
@@ -377,6 +619,7 @@ import CountdownBanner from './countdownBanner';
 import currencyMixin from './_currencyMixin';
 import notifications from '@/mixins/notifications';
 import buyMixin from '@/mixins/buy';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import { mapState } from '@/libs/store';
 
@@ -407,14 +650,17 @@ export default {
     Avatar,
     PinBadge,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
   props: {
+    // eslint-disable-next-line vue/require-default-prop
     item: {
       type: Object,
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -433,10 +679,14 @@ export default {
         hourglasses: svgHourglasses,
         clock: svgClock,
         whiteClock: svgWhiteClock,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       selectedAmountToBuy: 1,
+      selectedAmount: 1,
       isPinned: false,
+      quantity: 1,
     };
   },
   computed: {
@@ -474,6 +724,11 @@ export default {
       return planGemLimits.convCap
         + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
     },
+    totalGems () {
+      if (!this.user.purchased.plan) return 0;
+      return planGemLimits.convCap
+        + this.user.purchased.plan.consecutive.gemCapExtra;
+    },
     attemptingToPurchaseMoreGemsThanAreLeft () {
       if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
       return false;
@@ -490,6 +745,9 @@ export default {
     endDate () {
       return moment(this.item.event.end);
     },
+    totalOwned () {
+      return this.user.items[this.item.purchaseType][this.item.key] || 0;
+    },
   },
   watch: {
     item: function itemChanged () {
@@ -500,7 +758,9 @@ export default {
   methods: {
     onChange ($event) {
       this.$emit('change', $event);
+      this.selectedAmountToBuy = 1;
     },
+
     buyItem () {
       // @TODO: I  think we should buying to the items.
       // Turn the items into classes, and use polymorphism
@@ -597,6 +857,7 @@ export default {
       }
     },
     hideDialog () {
+      this.selectedAmountToBuy = 1;
       this.$root.$emit('bv::hide::modal', 'buy-modal');
     },
     getPriceClass () {

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

@@ -16,9 +16,6 @@
 
   .limitedTime {
     height: 32px;
-    width: calc(100% + 30px);
-    margin: 0 -15px; // the modal content has its own padding
-
     font-size: 12px;
     line-height: 1.33;
     text-align: center;

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

@@ -4,9 +4,9 @@
     :hide-header="true"
     @change="onChange($event)"
   >
-    <div class="close">
+    <div>
       <span
-        class="svg-icon inline icon-10"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
@@ -14,60 +14,73 @@
     </div>
     <div
       v-if="item"
-      class="content"
+      class="content bordered-item"
     >
       <div class="inner-content">
         <item
-          class="flat"
+          class="flat bordered-item"
           :item="item"
           :item-content-class="itemContextToSell.itemClass"
           :show-popover="false"
-        >
-          <countBadge
-            slot="itemBadge"
-            :show="true"
-            :count="itemContextToSell.itemCount"
-          />
-        </item>
+        />
+        <span class="owned">
+          {{ $t('owned') }}: <span class="user-amount">{{ itemContextToSell.itemCount }}</span>
+        </span>
         <h4 class="title">
           {{ itemContextToSell.itemName }}
         </h4>
         <div v-if="item.key === 'Saddle'">
-          <div class="text">
+          <div class="item-notes">
             {{ item.sellWarningNote() }}
           </div>
           <br>
         </div>
         <div v-else>
           <div>
-            <div class="text">
+            <div class="item-notes">
               {{ item.notes() }}
             </div>
-            <div>
-              <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
+            <div class="item-cost">
+              <span class="cost gold">
+                <span
+                  class="svg-icon inline icon-24"
+                  aria-hidden="true"
+                  v-html="icons.gold"
+                ></span>
+                <span>{{ item.value }}</span>
+              </span>
             </div>
             <div>
-              <b-input
-                v-model="selectedAmountToSell"
-                class="itemsToSell"
-                type="number"
-                :max="itemContextToSell.itemCount"
-                min="1"
-                step="1"
-                @keyup.native="preventNegative($event)"
-              />
               <span
-                class="svg-icon inline icon-32"
+                class="how-many-to-sell"
+              >
+                {{ $t('howManyToSell') }}
+              </span>
+            </div>
+            <div>
+              <number-increment
+                @updateQuantity="selectedAmountToSell = $event"
+              />
+            </div>
+            <div class="total-row">
+              <span class="total-text">
+                {{ $t('sendTotal') }}
+              </span>
+              <span
+                class="svg-icon total icon-24"
                 aria-hidden="true"
                 v-html="icons.gold"
               ></span>
-              <span class="value">{{ item.value }}</span>
+              <span class="total-text gold">
+                {{ item.value * selectedAmountToSell }}
+              </span>
             </div>
             <button
               class="btn btn-primary"
+              :disabled="selectedAmountToSell > itemContextToSell.itemCount"
               @click="sellItems()"
             >
-              {{ $t('sell') }}
+              {{ $t('sellItems') }}
             </button>
           </div>
         </div>
@@ -77,8 +90,10 @@
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
-      <balanceInfo class="float-right" />
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
+      <balanceInfo
+        class="float-right currency-totals"
+      />
     </div>
   </b-modal>
 </template>
@@ -95,51 +110,13 @@
     }
 
     .modal-dialog {
-      width: 330px;
+      width: 448px;
     }
 
-    .content {
-      text-align: center;
-
-    }
-    .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
-    }
-
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
-      margin-left: 24px;
-      margin-right: 8px;
-
-      vertical-align: middle;
-    }
-
-    .value {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: #df911e;
-
-      vertical-align: middle;
-    }
-
-    button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-    }
-
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
     }
 
     .modal-footer {
@@ -148,29 +125,215 @@
       border-bottom-right-radius: 8px;
       border-bottom-left-radius: 8px;
       display: block;
+      margin: 24px 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
     }
 
-    .how-many-to-sell {
-      margin-bottom: 16px;
+    .content {
+      text-align: center;
+    }
+
+    .inner-content {
+      margin: 33px auto auto;
+      width: 282px;
+    }
+
+    .owned {
+      font-size: 0.75rem;
+      font-weight: bold;
+      line-height: 1.33;
+      background-color: $gray-600;
+      padding: 8px 8px;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
       display: block;
+      width: 141px;
+      margin-left: 71px;
+      margin-top: -48px;
+      position: relative;
+      z-index: 1;
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item-wrapper {
+      margin-top: -10px;
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+      margin-top: 8px;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25px;
+      left: 1px;
+    }
+
+    .title {
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 26px;
+      margin-bottom: 0px;
+    }
+
+    .item-notes {
+       margin-top: 12px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
+      margin-right: 8px;
+      padding-top: 6px;
+    }
+
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+      cursor: pointer;
+
+      &:hover {
+        color: $gray-100;
+      }
+    }
+
+  .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
+    }
+
+    .cost {
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
+      font-weight: bold;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
+
+      &.gold {
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
     }
   }
+
+  .how-many-to-sell {
+    font-weight: bold !important;
+  }
+
+  .number-increment {
+     margin-top: 16px;
+  }
+
+  .total-row {
+    font-weight: bold;
+    font-size: 0.875rem;
+    margin-top: 16px;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+  button.btn.btn-primary {
+    margin-top: 16px;
+    padding: 4px 16px;
+    height: 32px;
+
+    &:focus {
+      border: 2px solid black;
+    }
+
+  .balance {
+    width: 74px;
+    height: 16px;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.33;
+    color: $gray-200;
+  }
+
+
+}
 </style>
 
 <script>
 import svgClose from '@/assets/svg/close.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgGem from '@/assets/svg/gem.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import Item from '@/components/inventory/item';
-import CountBadge from '@/components/ui/countBadge';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 export default {
   components: {
     BalanceInfo,
     Item,
-    CountBadge,
+    numberIncrement,
   },
   data () {
     return {
@@ -181,6 +344,8 @@ export default {
         close: svgClose,
         gold: svgGold,
         gem: svgGem,
+        svgPositive,
+        svgNegative,
       }),
     };
   },
@@ -211,6 +376,10 @@ export default {
         this.selectedAmountToSell = 0;
       }
     },
+    maxOwned () {
+      const maxOwned = this.itemContextToSell.itemCount;
+      return maxOwned;
+    },
     sellItems () {
       if (!Number.isInteger(Number(this.selectedAmountToSell))) {
         this.selectedAmountToSell = 0;

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

@@ -33,6 +33,22 @@
           v-if="!item.locked"
           class="purchase-amount"
         >
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="priceType"
+            >
+              <span
+                class="svg-icon inline icon-24"
+                aria-hidden="true"
+                v-html="icons[priceType]"
+              >
+              </span>
+              <span
+                :class="priceType"
+              >{{ item.value }}</span>
+            </span>
+          </div>
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
@@ -42,24 +58,25 @@
           >
             {{ item.addlNotes }}
           </div>
-          <div class="box">
-            <input
-              v-model.number="selectedAmountToBuy"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+          <div>
+            <number-increment
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+          </div>
+          <div class="total-row">
+            <span class="total-text">
+              {{ $t('sendTotal') }}
+            </span>
+            <span
+              class="svg-icon inline icon-20"
+              aria-hidden="true"
+              v-html="currencyIcon"
+            ></span>
+            <span
+              class="total"
+              :class="priceType"
+            >{{ item.value * selectedAmountToBuy }}</span>
           </div>
-          <span
-            class="svg-icon inline icon-32"
-            aria-hidden="true"
-            v-html="currencyIcon"
-          ></span>
-          <span
-            class="value"
-            :class="priceType"
-          >{{ item.value }}</span>
         </div>
         <button
           v-if="priceType === 'gems'
@@ -72,7 +89,7 @@
         </button>
         <button
           v-else
-          class="btn btn-primary"
+          class="btn btn-primary mb-4"
           :class="{'notEnough': !enoughCurrency(priceType, item.value * selectedAmountToBuy)}"
           :disabled="numberInvalid"
           @click="buyItem()"
@@ -112,6 +129,39 @@
       margin-top: 1rem;
     }
 
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
+    }
+
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
       margin-top: 8%;
       width: 448px !important;
@@ -129,8 +179,13 @@
       margin: 33px auto auto;
     }
 
-    .modal-body {
-      padding-bottom: 0px;
+    .item-notes {
+      height: 48px;
+      margin-top: 8px;
+      padding-left: 48.5px;
+      padding-right: 48.5px;
+      line-height: 1.71;
+      font-size: 0.875rem;
     }
 
     .questInfo {
@@ -152,16 +207,14 @@
       height: 100%;
     }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
+      margin-top: 14px;
+      padding: 4px 16px;
+      height: 32px;
+
+      &:focus {
+        border: 2px solid black;
+      }
     }
 
     .balance {
@@ -173,19 +226,6 @@
       color: $gray-200;
     }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-      padding: 1rem 1.5rem;
-
-      &> * {
-        margin: 0;
-      }
-    }
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -198,30 +238,108 @@
         margin-bottom: 16px;
       }
 
-      .box {
-        display: inline-block;
-        width: 74px;
-        height: 40px;
-        border-radius: 2px;
-        background-color: #ffffff;
-        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-        margin-right: 24px;
-
-        input {
-          width: 100%;
-          border: none;
+      .item-cost {
+        padding-bottom: 16px;
         }
 
-        input::-webkit-contacts-auto-fill-button {
-          visibility: hidden;
-          display: none !important;
-          pointer-events: none;
-          position: absolute;
-          right: 0;
-        }
+        .cost {
+          height: 40px;
+          font-size: 1.25rem;
+          font-weight: bold;
+          vertical-align: middle;
+          padding: 8px 20px 8px 20px;
+
+          &.gems {
+            color: $green-10;
+            background-color: rgba(36, 204, 143, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.gold {
+            color: $yellow-5;
+            background-color: rgba(255, 190, 93, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.hourglasses {
+            color: $hourglass-color;
+            background-color: rgba(41, 149, 205, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+            }
+          }
+
+    .total-row {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
       }
     }
 
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      height: 24px;
+      line-height: 1.71;
+      padding-right: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+    }
+
+  span.svg-icon.inline.icon-20 {
+      height: 20px;
+      width: 20px;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+
+  span.svg-icon.inline.icon-24 {
+    height: 24px;
+    width: 24px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+  span.svg-icon.inline.icon-32 {
+    height: 32px;
+    width: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
     @media only screen and (max-width: 1000px) {
       .modal-dialog {
         max-width: 80%;
@@ -234,9 +352,10 @@
       }
     }
   }
+}
 </style>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
   .value {
@@ -260,7 +379,7 @@
       color: $hourglass-color;
     }
   }
-</style>
+</style> -->
 
 <script>
 import moment from 'moment';
@@ -272,6 +391,8 @@ import svgExperience from '@/assets/svg/experience.svg';
 import svgGem from '@/assets/svg/gem.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
@@ -280,6 +401,7 @@ import buyMixin from '@/mixins/buy';
 import numberInvalid from '@/mixins/numberInvalid';
 import PinBadge from '@/components/ui/pinBadge';
 import CountdownBanner from '../countdownBanner';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import questDialogContent from './questDialogContent';
 import QuestRewards from './questRewards';
@@ -293,6 +415,7 @@ export default {
     PinBadge,
     questDialogContent,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
   props: {
@@ -301,6 +424,7 @@ export default {
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -312,9 +436,11 @@ export default {
         clock: svgClock,
         close: svgClose,
         experience: svgExperience,
-        gem: svgGem,
+        gems: svgGem,
         gold: svgGold,
-        hourglass: svgHourglasses,
+        hourglasses: svgHourglasses,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       isPinned: false,
@@ -339,8 +465,8 @@ export default {
     },
     currencyIcon () {
       if (this.priceType === 'gold') return this.icons.gold;
-      if (this.priceType === 'hourglasses') return this.icons.hourglass;
-      return this.icons.gem;
+      if (this.priceType === 'hourglasses') return this.icons.hourglasses;
+      return this.icons.gems;
     },
     endDate () {
       return moment(this.item.event.end);

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

@@ -33,17 +33,17 @@
 
   h3 {
     color: $gray-10;
-    margin-bottom: 0.25rem;
+    margin-bottom: 4pxrem;
   }
 
   .quest-image {
     margin: 0 auto;
-    margin-bottom: 1em;
-    margin-top: 1.5em;
+    margin-bottom: 16px;
+    margin-top: 24px;
   }
 
   .text {
-    margin-bottom: 1rem;
+    margin: 16px 16px;
     overflow-y: auto;
     text-overflow: ellipsis;
   }
@@ -54,10 +54,10 @@
     line-height: 1.71;
     color: $gray-50;
     text-align: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 8px;
 
     ::v-deep .user-label {
-      font-size: 14px;
+      font-size: 0.875rem;
     }
   }
 

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

@@ -177,9 +177,6 @@ export default {
   @import '~@/assets/scss/colors.scss';
 
   .quest-rewards {
-    margin-left: -1rem;
-    margin-right: -1rem;
-
     background-color: $gray-700;
   }
 

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

@@ -106,6 +106,7 @@ export default {
       preventMultipleWatchExecution: false,
       eventPromoBannerHeight: null,
       sleepingBannerHeight: null,
+      warningBannerHeight: null,
     };
   },
   computed: {
@@ -135,6 +136,10 @@ export default {
     notificationBannerHeight () {
       let scrollPosToCheck = 56;
 
+      if (this.warningBannerHeight) {
+        scrollPosToCheck += this.warningBannerHeight;
+      }
+
       if (this.sleepingBannerHeight) {
         scrollPosToCheck += this.sleepingBannerHeight;
       }
@@ -361,6 +366,7 @@ export default {
 
     updateBannerHeightAndScrollY () {
       this.updateEventBannerHeight();
+      this.warningBannerHeight = getBannerHeight('chat-warning');
       this.sleepingBannerHeight = getBannerHeight('damage-paused');
       this.updateScrollY();
     },

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

@@ -0,0 +1,605 @@
+<template>
+  <div class="top-container mx-auto">
+    <div class="main-text mr-4">
+      <!-- title goes here -->
+      <div class="title-details">
+        <h1 v-once>
+          {{ $t('sunsetFaqTitle') }}
+        </h1>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
+        <p>{{ $t('sunsetFaqPara2') }}</p>
+        <p>{{ $t('sunsetFaqPara3') }}</p>
+        <p>{{ $t('sunsetFaqPara4') }}</p>
+        <p>{{ $t('sunsetFaqPara5') }}</p>
+      </div>
+
+      <!-- Which services are ending -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader1') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara6')"></p>
+      </div>
+
+      <!-- Why are tavern and guild ending? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader2') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li>{{ $t('sunsetFaqList1') }}</li>
+          <li>{{ $t('sunsetFaqList2') }}</li>
+          <li>{{ $t('sunsetFaqList3') }}</li>
+        </ul>
+      </div>
+
+      <!-- Can I still talk to my party/group members? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader3') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara7') }}</p>
+      </div>
+
+      <!-- Pausing dailies -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader4') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara8') }}</p>
+      </div>
+
+      <!-- Accessing group plans -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader5') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
+      </div>
+
+      <!-- Can I access guild chats? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader6') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara10') }}</p>
+      </div>
+
+      <!-- How can players find groups? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader7') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara11') }}</p>
+      </div>
+
+      <!-- What about contributors? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader8') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
+      </div>
+
+      <!-- Challenges -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader9') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li>{{ $t('sunsetFaqList4') }}</li>
+          <li>{{ $t('sunsetFaqList5') }}</li>
+          <li>{{ $t('sunsetFaqList6') }}</li>
+          <li>{{ $t('sunsetFaqList7') }}</li>
+        </ul>
+      </div>
+
+      <!-- Questions about how to use Habitica -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader10') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
+          <li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
+          <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
+        </ul>
+      </div>
+
+      <!-- Community Guidelines and TOS -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader11') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara20')"></p>
+      </div>
+    </div>
+
+    <!-- sidebar -->
+    <div class="sidebar py-4 d-flex flex-column">
+      <!-- staff -->
+      <div class="ml-4">
+        <h2>
+          {{ $t('staff') }}
+        </h2>
+        <div class="d-flex flex-wrap">
+          <div
+            v-for="user in staff"
+            :key="user.uuid"
+            class="staff col-6 p-0"
+          >
+            <div class="d-flex">
+              <router-link
+                class="title"
+                :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
+              >
+                {{ user.name }}
+              </router-link>
+              <div
+                v-if="user.type === 'Staff'"
+                class="svg-icon staff-icon ml-1"
+                v-html="icons.tierStaff"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- player tiers -->
+      <div class="ml-4">
+        <h2 class="mt-4 mb-1">
+          {{ $t('playerTiers') }}
+        </h2>
+        <ul class="tier-list">
+          <li
+            v-once
+            class="tier1 d-flex justify-content-center"
+          >
+            {{ $t('tier1') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier1"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier2 d-flex justify-content-center"
+          >
+            {{ $t('tier2') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier2"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier3 d-flex justify-content-center"
+          >
+            {{ $t('tier3') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier3"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier4 d-flex justify-content-center"
+          >
+            {{ $t('tier4') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier4"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier5 d-flex justify-content-center"
+          >
+            {{ $t('tier5') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier5"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier6 d-flex justify-content-center"
+          >
+            {{ $t('tier6') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier6"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier7 d-flex justify-content-center"
+          >
+            {{ $t('tier7') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier7"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="moderator d-flex justify-content-center"
+          >
+            {{ $t('tierModerator') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tierMod"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="staff d-flex justify-content-center"
+          >
+            {{ $t('tierStaff') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tierStaff"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="npc d-flex justify-content-center"
+          >
+            {{ $t('tierNPC') }}
+          </li>
+        </ul>
+      </div>
+      <!-- Daniel in sweet, sweet retirement with Jorts -->
+      <div>
+        <div class="gradient">
+        </div>
+        <div
+          class="grassy-meadow-backdrop"
+          :style="{'background-image': imageURLs.background}"
+        >
+          <div
+            class="daniel_front"
+            :style="{'background-image': imageURLs.npc}"
+          ></div>
+          <div
+            class="pixel-border"
+            :style="{'background-image': imageURLs.pixel_border}"
+          ></div>
+        </div>
+      </div>
+
+      <!-- email admin -->
+      <div class="d-flex flex-column justify-content-center">
+        <div class="question mx-auto">
+          {{ $t('anotherQuestion') }}
+        </div>
+        <div
+          class="contact mx-auto"
+        >
+          <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
+        </div>
+      </div>
+    </div>
+
+    <!-- final div! -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h1 {
+    margin-top: 0px;
+    line-height: 1.33;
+  }
+
+  li {
+    padding-bottom: 16px;
+
+    &::marker {
+      size: 0.5em;
+    }
+  }
+
+  p {
+    margin-bottom: 21px;
+  }
+
+  ul {
+    padding-left: 20px;
+  }
+
+  .top-container {
+    width: 66.67%;
+    margin-top: 80px;
+    display: flex;
+
+    @media (max-width: 1024px) {
+      flex-wrap: wrap;
+    }
+  }
+
+  .main-text {
+    .body-text {
+      font-size: 1em;
+      color: $gray-10;
+      line-height: 1.71;
+    }
+
+    .headings {
+      font-size: 1.15em;
+      font-weight: 400;
+      line-height: 1.75;
+      color: $purple-200;
+    }
+  }
+
+  .sidebar {
+    height: fit-content;
+    width: 330px;
+    background-color: $gray-700;
+    border-radius: 16px;
+
+    h2 {
+      color: $gray-10;
+      font-family: Roboto;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.71;
+    }
+
+    .staff {
+      .staff-icon {
+        width: 10px;
+        margin-top: 5px;
+      }
+
+      .title {
+        height: 24px;
+        color: $purple-300;
+        font-weight: bold;
+        display: inline-block;
+        margin-bottom: 4px;
+      }
+    }
+
+    .tier-list {
+      list-style-type: none;
+      padding: 0;
+      width: 282px;
+      font-size: 1em !important;
+
+      li {
+        height: 40px;
+        border-radius: 4px;
+        border: solid 1px $gray-500;
+        text-align: center;
+        padding: 8px 0;
+        margin-bottom: 8px;
+        margin-right: 4px;
+        font-weight: bold;
+        line-height: 1.71;
+      }
+
+      .tier1 {
+        color: #c42870;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier2 {
+        color: #b01515;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier3 {
+        color: #d70e14;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier4 {
+        color: #c24d00;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier5 {
+        color: #9e650f;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier6 {
+        color: #2b8363;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier7 {
+        color: #167e87;
+        .svg-icon {
+          width: 12px;
+          margin-top: 4px;
+        }
+      }
+
+      .moderator {
+        color: #277eab;
+        .svg-icon {
+          width: 13px;
+          margin-top: 3px;
+        }
+      }
+
+      .staff {
+        color: #6133b4;
+        .svg-icon {
+          width: 10px;
+          margin-top: 7px;
+        }
+      }
+
+      .npc {
+        color: $black;
+      }
+    }
+
+    .gradient {
+      position: absolute;
+      width: 330px;
+      height: 100px;
+      margin: -1px 0 116px;
+      background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
+    }
+
+    .grassy-meadow-backdrop {
+      background-repeat: repeat-x;
+      width: 330px;
+      height: 246px;
+    }
+
+    .daniel_front {
+      height: 246px;
+      width: 330px;
+      background-repeat: no-repeat;
+      margin: 0 auto;
+    }
+
+    .pixel-border {
+      width: 330px;
+      height: 30px;
+      background-repeat: no-repeat;
+      position: absolute;
+      margin-top: -30px;
+    }
+
+    .question {
+      font-size: 1em;
+      font-weight: bold;
+      line-height: 1.71;
+      color: $gray-10;
+      margin-top: 24px;
+    }
+
+    .contact p {
+      font-size: 1em;
+      margin-bottom: 0px;
+    }
+  }
+</style>
+
+<script>
+import find from 'lodash/find';
+import { mapState } from '@/libs/store';
+
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tierMod from '@/assets/svg/tier-mod.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg';
+import staffList from '../../libs/staffList';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tierMod,
+        tierNPC,
+        tierStaff,
+      }),
+      group: {
+        chat: [],
+      },
+      sections: {
+        worldBoss: true,
+      },
+      staff: staffList,
+    };
+  },
+
+  computed: {
+    ...mapState({
+      currentEventList: 'worldState.data.currentEventList',
+    }),
+    imageURLs () {
+      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
+      if (!currentEvent) {
+        return {
+          background: 'url(/static/npc/normal/tavern_background.png)',
+          npc: 'url(/static/npc/normal/tavern_npc.png)',
+          pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+        };
+      }
+      return {
+        background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
+        npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
+        pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+      };
+    },
+  },
+
+  async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('faq/taverns-and-guilds'),
+    });
+    document.body.style.background = '#ffffff';
+  },
+};
+</script>

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

@@ -7,13 +7,19 @@
         <br>
         <p class="text-center">
           <button
+            id="buttonClearBrowserData"
             class="btn btn-lg btn-danger"
-            popover-trigger="mouseover"
-            :popover="$t('localStorageClearExplanation')"
             @click="clearLocalStorage()"
           >
             {{ $t('localStorageClear') }}
           </button>
+          <b-popover
+            target="buttonClearBrowserData"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('localStorageClearExplanation')"
+          />
         </p>
         <br>
         <p v-html="$t('localStorageTryNext', localStorageTryNext) "></p>

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

@@ -17,6 +17,19 @@
           class="faq-question"
         >
           <h2
+            v-once
+            v-if="index === 0"
+          >
+            {{ $t('general') }}
+          </h2>
+          <h2
+            v-once
+            v-if="entry.heading === 'party-with-friends'"
+            id="parties"
+          >
+            {{ $t('parties') }}
+          </h2>
+          <h3
             v-once
             v-b-toggle="entry.heading"
             role="tab"
@@ -24,7 +37,7 @@
             @click="handleClick($event)"
           >
             {{ entry.question }}
-          </h2>
+          </h3>
           <b-collapse
             :id="entry.heading"
             :visible="isVisible(entry.heading)"
@@ -49,25 +62,41 @@
 </template>
 
 <style lang='scss' scoped>
-  .card-body {
-    margin-bottom: 1em;
+  h2 {
+    color: #34313a;
+    border-bottom: 1px solid #e1e0e3;
+    margin-top: 24px;
+    padding-bottom: 16px;
   }
 
-  .faq-question h2 {
-    cursor: pointer;
+  .faq-question {
+    a {
+      text-decoration: none;
+      color: #4F2A93;
+    }
+
+    h3 {
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 1.75;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .card-body {
+      padding: 0;
+      font-size: 14px;
+      line-height: 1.71;
+      margin-bottom: 1em;
+    }
   }
 
-  .faq-question .card-body {
-    padding: 0;
-  }
-
-  .static-wrapper .faq-question h2 {
-    margin: 0 0 16px 0;
-  }
-
-  .faq-question a {
-    text-decoration: none;
-    color: #4F2A93;
+  .container-fluid {
+    position: relative;
+    top: 2rem;
   }
 
   @media only screen and (max-width: 768px) {

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

@@ -1,11 +1,12 @@
 <template>
   <div>
+    <chat-banner />
     <static-header
-      v-if="showContentWrap"
-      :class="{
-        'home-header': ['home', 'front'].indexOf($route.name) !== -1,
-        'white-header': this.$route.name === 'plans'
-      }"
+    v-if="showContentWrap"
+    :class="{
+      'home-header': ['home', 'front'].indexOf($route.name) !== -1,
+      'white-header': this.$route.name === 'plans'
+    }"
     />
     <div class="static-wrapper">
       <router-view />
@@ -198,10 +199,6 @@
       color: $purple-200;
     }
 
-    li, p {
-      font-size: 16px;
-    }
-
     .media img {
       margin: 1em;
     }
@@ -247,11 +244,13 @@
 
 <script>
 import AppFooter from '@/components/appFooter';
+import ChatBanner from '@/components/header/banners/chatBanner';
 import StaticHeader from './header.vue';
 
 export default {
   components: {
     AppFooter,
+    ChatBanner,
     StaticHeader,
   },
   computed: {

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

@@ -355,6 +355,7 @@ import Task from './task';
 import ClearCompletedTodos from './clearCompletedTodos';
 import buyMixin from '@/mixins/buy';
 import sync from '@/mixins/sync';
+import externalLinks from '@/mixins/externalLinks';
 import { mapState, mapActions, mapGetters } from '@/libs/store';
 import shopItem from '../shops/shopItem';
 import BuyQuestModal from '@/components/shops/quests/buyQuestModal.vue';
@@ -384,7 +385,7 @@ export default {
     shopItem,
     draggable,
   },
-  mixins: [buyMixin, notifications, sync],
+  mixins: [buyMixin, notifications, sync, externalLinks],
   // @TODO Set default values for props
   // allows for better control of props values
   // allows for better control of where this component is called
@@ -520,7 +521,12 @@ export default {
     // Get Category Filter Labels
     this.typeFilters = getFilterLabels(this.type, this.challenge);
     // Set default filter for task column
-    this.activateFilter(this.type);
+
+    if (this.challenge) {
+      this.activateFilter(this.type);
+    } else {
+      this.activateFilter(this.type, this.user.preferences.tasks.activeFilter[this.type], true);
+    }
   },
   mounted () {
     this.setColumnBackgroundVisibility();
@@ -534,6 +540,10 @@ export default {
       if (this.activeFilter.label !== 'complete2') return;
       this.loadCompletedTodos();
     });
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   beforeDestroy () {
     this.$root.$off('buyModal::boughtItem');
@@ -656,7 +666,7 @@ export default {
     taskSummary (task) {
       this.$emit('taskSummary', task);
     },
-    activateFilter (type, filter = '') {
+    activateFilter (type, filter = '', skipSave = false) {
       // Needs a separate API call as this data may not reside in store
       if (type === 'todo' && filter === 'complete2') {
         if (this.group && this.group._id) {
@@ -672,14 +682,16 @@ export default {
       // as default filter for daily
       // and set the filter as 'due' only when the component first
       // loads and not on subsequent reloads.
-      if (
-        type === 'daily' && filter === '' && !this.challenge
-        && this.user.preferences.dailyDueDefaultView
-      ) {
+      if (type === 'daily' && filter === '' && !this.challenge) {
         filter = 'due'; // eslint-disable-line no-param-reassign
       }
 
       this.activeFilter = getActiveFilter(type, filter, this.challenge);
+
+      if (!skipSave && !this.challenge) {
+        const propertyToUpdate = `preferences.tasks.activeFilter.${type}`;
+        this.$store.dispatch('user:set', { [propertyToUpdate]: filter });
+      }
     },
     setColumnBackgroundVisibility () {
       this.$nextTick(() => {

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

@@ -6,6 +6,7 @@
         'groupTask': task.group.id,
         'task-not-editable': !teamManagerAccess,
         'task-not-scoreable': showTaskLockIcon,
+        'link-exempt': !isChallengeTask && !isGroupTask,
       }, `type_${task.type}`
       ]"
       @click="castEnd($event, task)"
@@ -31,6 +32,9 @@
               'task-not-scoreable': showTaskLockIcon,
             }, controlClass.up.inner]"
             tabindex="0"
+            role="button"
+            :aria-label="$t('scoreUp')"
+            :aria-disabled="showTaskLockIcon || (!task.up && !showTaskLockIcon)"
             @click="score('up')"
             @keypress.enter="score('up')"
           >
@@ -62,6 +66,7 @@
               controlClass.inner,
             ]"
             tabindex="0"
+            role="checkbox"
             @click="score(showCheckIcon ? 'down' : 'up' )"
             @keypress.enter="score(showCheckIcon ? 'down' : 'up' )"
           >
@@ -240,7 +245,7 @@
             >
               <div
                 v-b-tooltip.hover.bottom="$t('dueDate')"
-                class="svg-icon calendar"
+                class="svg-icon calendar my-auto"
                 v-html="icons.calendar"
               ></div>
               <span>{{ formatDueDate() }}</span>
@@ -358,6 +363,9 @@
               'task-not-scoreable': showTaskLockIcon,
             }, controlClass.down.inner]"
             tabindex="0"
+            role="button"
+            :aria-label="$t('scoreDown')"
+            :aria-disabled="showTaskLockIcon || (!task.down && !showTaskLockIcon)"
             @click="score('down')"
             @keypress.enter="score('down')"
           >
@@ -700,7 +708,7 @@
 
   .icons {
     margin-top: 4px;
-    color: $gray-300;
+    color: $gray-100;
     font-style: normal;
 
     &-right {
@@ -759,7 +767,7 @@
   }
 
   .due-overdue {
-    color: $red-50;
+    color: $maroon-10;
   }
 
   .calendar.svg-icon {
@@ -898,7 +906,7 @@
   }
 </style>
 <!-- eslint-enable max-len -->
-
+<!-- eslint-disable-next-line vue/component-tags-order -->
 <script>
 import moment from 'moment';
 import { v4 as uuid } from 'uuid';
@@ -1125,13 +1133,13 @@ export default {
       return moment.duration(endOfDueDate.diff(endOfToday));
     },
     checkIfOverdue () {
-      return this.calculateTimeTillDue().asDays() <= 0;
+      return this.calculateTimeTillDue().asDays() < 0;
     },
     formatDueDate () {
-      const timeTillDue = this.calculateTimeTillDue();
-      const dueIn = timeTillDue.asDays() === 0 ? this.$t('today') : timeTillDue.humanize(true);
-
-      return this.task.date && this.$t('dueIn', { dueIn });
+      if (moment().isSame(this.task.date, 'day')) {
+        return this.$t('today');
+      }
+      return moment(this.task.date).format(this.user.preferences.dateFormat.toUpperCase());
     },
     edit (e, task) {
       if (this.isRunningYesterdailies) return;

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

@@ -83,6 +83,7 @@
 <script>
 import moment from 'moment';
 import { mapState } from '@/libs/store';
+import externalLinks from '@/mixins/externalLinks';
 import scoreTask from '@/mixins/scoreTask';
 import sync from '@/mixins/sync';
 import Task from './task';
@@ -93,7 +94,7 @@ export default {
     Task,
     LoadingSpinner,
   },
-  mixins: [scoreTask, sync],
+  mixins: [externalLinks, scoreTask, sync],
   props: {
     yesterDailies: {
       type: Array,
@@ -108,6 +109,11 @@ export default {
       dueDate: moment().subtract(1, 'days'),
     };
   },
+  updated () {
+    window.setTimeout(() => {
+      this.handleExternalLinks();
+    }, 500);
+  },
   computed: {
     ...mapState({ user: 'user.data' }),
     tasksByType () {

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

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="modal-close"
+    @click="$emit('close')"
+  >
+    <div
+      class="svg-icon svg-close color"
+      v-html="icons.close"
+    >
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .modal-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+
+    .svg-close {
+      width: 18px;
+      height: 18px;
+      vertical-align: middle;
+      opacity: 0.75;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+</style>
+
+<script>
+import close from '@/assets/svg/close.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close,
+      }),
+    };
+  },
+};
+</script>

website/client/src/components/userLink.vue

@@ -2,13 +2,13 @@
   <router-link
     v-if="displayName"
     v-b-tooltip.hover.top="tierTitle"
-    class="leader user-link"
+    class="leader user-link d-flex"
     :to="{'name': 'userProfile', 'params': {'userId': id}}"
     :class="levelStyle()"
   >
     {{ displayName }}
     <div
-      class="svg-icon"
+      class="svg-icon icon-12"
       v-html="tierIcon()"
     ></div>
   </router-link>
@@ -37,10 +37,15 @@
       color: $gray-50;
     }
 
+    &[class*="tier"] .svg-icon {
+      margin-top: 5px;
+    }
+    &.npc .svg-icon {
+      margin-top: 4px;
+    }
+
     .svg-icon {
-      width: 10px;
-      display: inline-block;
-      margin-left: .5em;
+      margin-left: 6px;
 
       &:empty {
         display: none;

website/client/src/components/userMenu/profile.vue

@@ -1,173 +1,68 @@
 <template>
-  <div
-    v-if="!user && userLoaded"
-  >
-    <error404 />
-  </div>
-  <div
-    v-else-if="userLoaded"
-    class="profile"
-  >
-    <div class="header">
-      <div class="profile-actions d-flex">
-        <router-link
-          :to="{ path: '/private-messages', query: { uuid: user._id } }"
-          replace
-        >
-          <button
-            v-b-tooltip.hover.left="$t('sendMessage')"
-            class="btn btn-secondary message-icon"
-          >
-            <div
-              v-once
-              class="svg-icon message-icon"
-              v-html="icons.message"
-            ></div>
-          </button>
-        </router-link>
-        <button
-          v-b-tooltip.hover.bottom="$t('sendGems')"
-          class="btn btn-secondary gift-icon"
-          @click="openSendGemsModal()"
-        >
-          <div
-            class="svg-icon gift-icon"
-            v-html="icons.gift"
-          ></div>
-        </button>
-        <button
-          v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
-          v-b-tooltip.hover.right="$t('blockWarning')"
-          class="btn btn-secondary block-icon d-flex justify-content-center align-items-center"
-          @click="blockUser()"
-        >
-          <div
-            v-once
-            class="svg-icon block-icon"
-            v-html="icons.block"
-          ></div>
-        </button>
-        <button
-          v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1"
-          v-b-tooltip.hover.right="$t('unblock')"
-          class="btn btn-secondary positive-icon"
-          @click="unblockUser()"
-        >
-          <div
-            class="svg-icon positive-icon"
-            v-html="icons.positive"
-          ></div>
-        </button>
-        <button
-          v-if="hasPermission(userLoggedIn, 'moderator')"
-          v-b-tooltip.hover.right="'Admin - Toggle Tools'"
-          class="btn btn-secondary positive-icon d-flex justify-content-center align-items-center"
-          @click="toggleAdminTools()"
-        >
-          <div
-            class="svg-icon positive-icon"
-            v-html="icons.staff"
-          ></div>
-        </button>
-      </div>
-      <div
-        v-if="hasPermission(userLoggedIn, 'moderator') && adminToolsLoaded"
-        class="row admin-profile-actions"
-      >
-        <div class="col-12 text-right">
-          <span
-            v-if="!hero.flags || (hero.flags && !hero.flags.chatShadowMuted)"
-            v-b-tooltip.hover.bottom="'Turn on Shadow Muting'"
-            class="admin-action"
-            @click="adminTurnOnShadowMuting()"
-          >shadow-mute</span>
-          <span
-            v-if="hero.flags && hero.flags.chatShadowMuted"
-            v-b-tooltip.hover.bottom="'Turn off Shadow Muting'"
-            class="admin-action"
-            @click="adminTurnOffShadowMuting()"
-          >un-shadow-mute</span>
-          <span
-            v-if="!hero.flags || (hero.flags && !hero.flags.chatRevoked)"
-            v-b-tooltip.hover.bottom="'Revoke Chat Privileges'"
-            class="admin-action"
-            @click="adminRevokeChat()"
-          >mute</span>
-          <span
-            v-if="hero.flags && hero.flags.chatRevoked"
-            v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'"
-            class="admin-action"
-            @click="adminReinstateChat()"
-          >un-mute</span>
-          <span
-            v-if="!hero.auth.blocked"
-            v-b-tooltip.hover.bottom="'Ban User'"
-            class="admin-action"
-            @click="adminBlockUser()"
-          >ban</span>
-          <span
-            v-if="hero.auth.blocked"
-            v-b-tooltip.hover.bottom="'Un-Ban User'"
-            class="admin-action"
-            @click="adminUnblockUser()"
-          >un-ban</span>
-          <router-link
-            :to="{ name: 'adminPanelUser', params: { userIdentifier: userId } }"
-            replace
-          >
-            Admin Panel
-          </router-link>
+  <div>
+    <div
+      v-if="!user && userLoaded"
+    >
+      <error404 />
+    </div>
+    <div
+      v-else-if="userLoaded"
+      class="profile"
+    >
+      <!-- HEADER -->
+      <div class="header">
+        <div class="profile-actions d-flex">
+        </div>
+        <div class="row">
+          <div class="">
+            <member-details
+              :member="user"
+              :class-badge-position="'hidden'"
+            />
+          </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-12">
-          <member-details :member="user" />
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="text-center nav">
-        <div
-          class="nav-item"
-          :class="{active: selectedPage === 'profile'}"
-          @click="selectPage('profile')"
-        >
-          {{ $t('profile') }}
-        </div>
-        <div
-          class="nav-item"
-          :class="{active: selectedPage === 'stats'}"
-          @click="selectPage('stats')"
-        >
-          {{ $t('stats') }}
-        </div>
-        <div
-          class="nav-item"
-          :class="{active: selectedPage === 'achievements'}"
-          @click="selectPage('achievements')"
-        >
-          {{ $t('achievements') }}
+      <!-- STATE CHANGES -->
+      <div class="row state-pages">
+        <div class="text-center nav">
+          <div
+            class="nav-item"
+            :class="{active: selectedPage === 'profile'}"
+            @click="selectPage('profile')"
+          >
+            {{ $t('profile') }}
+          </div>
+          <div
+            class="nav-item"
+            :class="{active: selectedPage === 'stats'}"
+            @click="selectPage('stats')"
+          >
+            {{ $t('stats') }}
+          </div>
+          <div
+            class="nav-item"
+            :class="{active: selectedPage === 'achievements'}"
+            @click="selectPage('achievements')"
+          >
+            {{ $t('achievements') }}
+          </div>
         </div>
       </div>
     </div>
+    <!-- SHOW PROFILE -->
     <div
       v-show="selectedPage === 'profile'"
       v-if="user.profile"
       id="userProfile"
-      class="standard-page"
+      class="standard-page "
     >
       <div class="row">
-        <div class="col-12 col-md-8">
+        <div class="">
           <div class="header mb-3">
-            <h1>{{ user.profile.name }}</h1>
-            <div
-              v-if="user.auth && user.auth.local && user.auth.local.username"
-              class="name"
-            >
-              @{{ user.auth.local.username }}
-            </div>
+            <h1>{{ $t('about') }}</h1>
           </div>
         </div>
+        <!-- EDIT BUTTON REPURPOSE FOR SEND MESSAGE/OTHER ACTIONS-->
         <div class="col-12 col-md-4">
           <button
             v-if="user._id === userLoggedIn._id"
@@ -179,13 +74,13 @@
           </button>
         </div>
       </div>
+      <!-- PROFILE STUFF -->
       <div
         v-if="!editing"
         class="row"
       >
-        <div class="col-12 col-md-8">
+        <div class="">
           <div class="about profile-section">
-            <h2>{{ $t('about') }}</h2>
             <p
               v-if="user.profile.blurb"
               v-markdown="user.profile.blurb"
@@ -206,9 +101,8 @@
             </p>
           </div>
         </div>
-        <div class="col-12 col-md-4">
+        <div class="">
           <div class="info profile-section">
-            <h2>{{ $t('info') }}</h2>
             <div class="info-item">
               <div class="info-item-label">
                 {{ $t('joined') }}:
@@ -252,12 +146,13 @@
           <!-- @TODO: Implement in V2 .social-->
         </div>
       </div>
+      <!-- EDITING PROFILE -->
       <div
         v-if="editing"
         class="row"
       >
         <h1>{{ $t('editProfile') }}</h1>
-        <div class="col-12">
+        <div class="">
           <div
             class="alert alert-info alert-sm"
             v-html="$t('communityGuidelinesWarning', managerEmail)"
@@ -292,9 +187,9 @@
             <!-- include ../../shared/formatting-help-->
           </div>
         </div>
-        <div class="col-12 text-center">
+        <div class=" text-center">
           <button
-            class="btn btn-primary mr-2"
+            class="btn btn-primary"
             @click="save()"
           >
             {{ $t("save") }}
@@ -308,21 +203,22 @@
         </div>
       </div>
     </div>
+    <!-- ACHIEVEMENTS -->
     <div
       v-show="selectedPage === 'achievements'"
       v-if="user.achievements"
       id="achievements"
-      class="standard-page container"
+      class="standard-page container "
     >
       <div
         v-for="(category, key) in achievements"
         :key="key"
         class="row category-row"
       >
-        <h3 class="col-12 text-center mb-3">
+        <h3 class="text-center">
           {{ $t(`${key}Achievs`) }}
         </h3>
-        <div class="col-12">
+        <div class="">
           <div class="row achievements-row justify-content-center">
             <div
               v-for="(achievement, achievKey) in achievementsCategory(key, category)"
@@ -378,14 +274,14 @@
           </div>
         </div>
       </div>
-      <hr class="col-12">
+      <hr class="">
       <div class="row">
         <div
           v-if="user.achievements.challenges"
-          class="col-12 col-md-6"
+          class=""
         >
           <div class="achievement-icon achievement-karaoke-2x"></div>
-          <h3 class="text-center mt-2 mb-4">
+          <h3 class="text-center">
             {{ $t('challengesWon') }}
           </h3>
           <div
@@ -398,10 +294,10 @@
         </div>
         <div
           v-if="user.achievements.quests"
-          class="col-12 col-md-6"
+          class=""
         >
           <div class="achievement-icon achievement-alien2x"></div>
-          <h3 class="text-center mt-2 mb-4">
+          <h3 class="text-center">
             {{ $t('questsCompleted') }}
           </h3>
           <div
@@ -420,31 +316,48 @@
         </div>
       </div>
     </div>
-    <profileStats
-      v-show="selectedPage === 'stats'"
-      v-if="user.preferences"
-      :user="user"
-      :show-allocation="showAllocation()"
-    />
+    <!-- STATS -->
+    <div>
+      <profileStats
+        v-show="selectedPage === 'stats'"
+        v-if="user.preferences"
+        :user="user"
+        :show-allocation="showAllocation()"
+      />
+    </div>
   </div>
 </template>
 
 <style lang="scss" >
   @import '~@/assets/scss/colors.scss';
 
+  #profile {
+    .modal-header{
+
+    }
+
+    .modal-body {
+      padding: 0;
+      border-radius: 12px;
+    }
+    .modal-content {
+      background: $gray-700;
+      padding: 0;
+
+    }
+  }
+
   .profile {
     .member-details {
-      .character-name, small, .small-text {
-        color: #878190;
+      margin-left: 24px;
+      background-color: $white;
+
+      &.character-name, small, .small-text {
+        color: $gray-50;
       }
     }
-
     .standard-page {
-      padding-bottom: 0rem;
-    }
-
-    .modal-content {
-      background: #f9f9f9;
+      padding: 0px;
     }
 
     .progress-container > .progress {
@@ -538,22 +451,29 @@
     }
   }
 
+  .state-pages {
+    background-color: $gray-700;
+
+  }
+
   .nav {
+    font-size: 0.875rem;
     width: 100%;
     font-weight: bold;
     min-height: 40px;
     justify-content: center;
+    padding-top: 16px;
   }
 
   .nav-item {
     display: inline-block;
-    margin: 0 1.2em;
-    padding: 1em;
+    margin: 0 8px 8px 6px;
+    color: $gray-50;
   }
 
   .nav-item:hover, .nav-item.active {
-    color: #4f2a93;
-    border-bottom: 2px solid #4f2a93;
+    color: $purple-300;
+    border-bottom: 2px solid $purple-300;
     cursor: pointer;
   }
 
@@ -657,8 +577,8 @@
   }
 
     .member-details {
-      .character-name, small, .small-text {
-        color: #878190;
+      small, .small-text {
+        color: $gray-10;
       }
 
       .progress-container > .progress {
@@ -673,21 +593,11 @@
       size: 16px;
       color: $gray-50;
     }
-    h2:after {
-      background-color: $gray-500;
-      content: "";
-      display: inline-block;
-      height: 1px;
-      position: relative;
-      vertical-align: middle;
-      width: 100%;
-    }
   }
 
   .info {
-
     .info-item {
-      color: $gray-200;
+      color: $gray-50;
       size: 14px;
       margin-bottom: 8px;
 
@@ -759,6 +669,7 @@ import challenge from '@/assets/svg/challenge.svg';
 import member from '@/assets/svg/member-icon.svg';
 import staff from '@/assets/svg/tier-staff.svg';
 import error404 from '../404';
+import externalLinks from '../../mixins/externalLinks';
 import { userCustomStateMixin } from '../../mixins/userState';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
@@ -772,7 +683,7 @@ export default {
     profileStats,
     error404,
   },
-  mixins: [userCustomStateMixin('userLoggedIn')],
+  mixins: [externalLinks, userCustomStateMixin('userLoggedIn')],
   props: ['userId', 'startingPage'],
   data () {
     return {
@@ -862,8 +773,12 @@ export default {
   mounted () {
     this.loadUser();
     this.oldTitle = this.$store.state.title;
+    this.handleExternalLinks();
     this.selectPage(this.startingPage);
   },
+  updated () {
+    this.handleExternalLinks();
+  },
   beforeDestroy () {
     if (this.oldTitle) {
       this.$store.dispatch('common:setTitle', {

website/client/src/components/userMenu/profileStats.vue

@@ -120,27 +120,27 @@
         </h2>
         <div class="well pet-mount-well">
           <div class="pet-mount-well-image">
+            <div
+              class="box"
+              :class="{white: user.items.currentPet}"
+            >
               <div
-                class="box"
-                :class="{white: user.items.currentPet}"
-              >
-                <div
-                  class="Pet"
-                  :class="`Pet-${user.items.currentPet}`"
-                ></div>
-              </div>
+                class="Pet"
+                :class="`Pet-${user.items.currentPet}`"
+              ></div>
             </div>
-            <div class="pet-mount-well-text">
-              <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
-              <div>
-                <strong>{{ $t('petsFound') }}:</strong>
-                {{ totalCount(user.items.pets) }}
-              </div>
-              <div>
-                <strong>{{ $t('beastMasterProgress') }}:</strong>
-                {{ beastMasterProgress(user.items.pets) }}
-              </div>
+          </div>
+          <div class="pet-mount-well-text">
+            <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
+            <div>
+              <strong>{{ $t('petsFound') }}:</strong>
+              {{ totalCount(user.items.pets) }}
             </div>
+            <div>
+              <strong>{{ $t('beastMasterProgress') }}:</strong>
+              {{ beastMasterProgress(user.items.pets) }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="stats-section-mounts col-12 col-md-6">
@@ -190,14 +190,10 @@
         class="col-12 col-md-6"
       >
         <div class="row col-12 stats-column">
-          <div class="col-12 col-md-4 attribute-label">
-            <span
-              class="hint"
-              :popover-title="$t(statInfo.title)"
-              popover-placement="right"
-              :popover="$t(statInfo.popover)"
-              popover-trigger="mouseenter"
-            ></span>
+          <div
+            :id="`${stat}-information`"
+            class="col-12 col-md-4 attribute-label"
+          >
             <div
               class="stat-title"
               :class="stat"
@@ -206,6 +202,13 @@
             </div>
             <strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
           </div>
+          <b-popover
+            :target="`${stat}-information`"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t(statInfo.popover)"
+          />
           <div class="col-12 col-md-6">
             <ul class="bonus-stats">
               <li>
@@ -355,7 +358,7 @@ export default {
       },
 
       allocateStatsList: {
-        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
+        str: { title: 'allocateStr', popover: 'strText', allocatepop: 'allocateStrPop' },
         int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
         con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
         per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
@@ -364,7 +367,7 @@ export default {
       stats: {
         str: {
           title: 'strength',
-          popover: 'strengthText',
+          popover: 'strText',
         },
         int: {
           title: 'intelligence',

website/client/src/components/userMenu/stats.vue

@@ -146,17 +146,19 @@
           :key="stat"
           class="row"
         >
-          <div class="col-4">
-            <span
-              class="hint"
-              :popover-title="$t(statInfo.title)"
-              popover-placement="right"
-              :popover="$t(statInfo.popover)"
-              popover-trigger="mouseenter"
-            >
-              <strong>{{ $t(statInfo.title) }}</strong>
-            </span>
+          <div
+            class="col-4"
+            :id="statInfo.title"
+          >
+            <strong> {{ $t(statInfo.title)}} </strong>
             <strong>: {{ statsComputed[stat] }}</strong>
+            <b-popover
+              :target="statInfo.title"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t(statInfo.popover)"
+            />
           </div>
           <div class="col-6">
             <ul class="bonus-stats">
@@ -183,27 +185,38 @@
             </ul>
           </div>
         </div>
-        <div v-if="user.stats.buffs.stealth">
+        <div
+          v-if="user.stats.buffs.stealth"
+          id="stealthBuff"
+        >
           <strong
             v-once
             class="hint"
-            :popover-title="$t('stealth')"
-            popover-trigger="mouseenter"
-            popover-placement="right"
-            :popover="$t('stealthNewDay')"
           >{{ $t('stealth') }}</strong>
           <strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
+          <b-popover
+            target="stealthBuff"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('stealthNewDay')"
+          />
         </div>
-        <div v-if="user.stats.buffs.streaks">
+        <div
+          v-if="user.stats.buffs.streaks"
+          id="streaksFrozenBuff"
+        >
           <div>
-            <strong
-              class="hint"
-              popover-title="$t('streaksFrozen')"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('streaksFrozenText')"
-            ></strong>
-            {{ $t('streaksFrozen') }}
+            <strong>
+              {{ $t('streaksFrozen') }}
+            </strong>
+            <b-popover
+              target="streaksFrozenBuff"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('streaksFrozenText')"
+            />
           </div>
         </div>
       </div>
@@ -237,19 +250,27 @@
             >
               {{ $t('noMoreAllocate') }}
             </p>
-            <p v-if="user.stats.points || userLevel100Plus">
+            <p
+              v-if="user.stats.points || userLevel100Plus"
+              id="pointAllocation"
+            >
               <strong class="inline">{{ user.stats.points }}&nbsp;</strong>
-              <strong
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t('levelPopover')"
-              >{{ $t('unallocated') }}</strong>
+              <strong> {{ $t('unallocated') }} </strong>
+              <b-popover
+                target="pointAllocation"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t('levelPopover')"
+              />
             </p>
           </div>
           <div>
             <fieldset class="auto-allocate">
-              <div class="checkbox">
+              <div
+                id="preferenceAutomaticAllocation"
+                class="checkbox"
+              >
                 <label>
                   <input
                     v-model="user.preferences.automaticAllocation"
@@ -259,19 +280,24 @@
                       'preferences.allocationMode': 'taskbased'
                     })"
                   >
-                  <span
-                    class="hint"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                    :popover="$t('autoAllocationPop')"
-                  >{{ $t('autoAllocation') }}</span>
+                  <b-popover
+                    target="preferenceAutomaticAllocation"
+                    triggers="hover focus"
+                    placement="right"
+                    :prevent-overflow="false"
+                    :content="$t('autoAllocationPop')"
+                  />
+                  {{ $t('autoAllocation') }}
                 </label>
               </div>
               <form
                 v-if="user.preferences.automaticAllocation"
                 style="margin-left:1em"
               >
-                <div class="radio">
+                <div
+                  id="optionFlatAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -280,15 +306,22 @@
                       value="flat"
                       @change="set({'preferences.allocationMode': 'flat'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('evenAllocationPop')"
-                    >{{ $t('evenAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('evenAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionFlatAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('evenAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div
+                  id="optionClassAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -297,47 +330,63 @@
                       value="classbased"
                       @change="set({'preferences.allocationMode': 'classbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('classAllocationPop')"
-                    >{{ $t('classAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('classAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionClassAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('classAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div
+                  id="optionTaskAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
                       type="radio"
                       name="allocationMode"
-                      value="taskbased"
+                      value="classbased"
                       @change="set({'preferences.allocationMode': 'taskbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('taskAllocationPop')"
-                    >{{ $t('taskAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('taskAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionTaskAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('taskAllocationPop')"
+                    />
                   </label>
                 </div>
               </form>
               <div
                 v-if="user.preferences.automaticAllocation
                   && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)"
+                id="buttonDistributePoints"
               >
                 <button
                   class="btn btn-primary btn-xs"
-                  popover-trigger="mouseenter"
-                  popover-placement="right"
-                  :popover="$t('distributePointsPop')"
                   @click="allocateNow({})"
                 >
                   <span class="glyphicon glyphicon-download"></span>
                   &nbsp;
                   {{ $t('distributePoints') }}
                 </button>
+                <b-popover
+                  target="buttonDistributePoints"
+                  triggers="hover focus"
+                  placement="right"
+                  :prevent-overflow="false"
+                  :content="$t('distributePointsPop')"
+                />
               </div>
             </fieldset>
           </div>
@@ -346,28 +395,35 @@
             :key="stat"
             class="row"
           >
-            <div class="col-8">
-              <span
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.popover)"
-              ></span>
+            <div
+              :id="`${stat}-info`"
+              class="col-8"
+            >
               {{ $t(statInfo.title) + user.stats[stat] }}
+              <b-popover
+                :target="`${stat}-info`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.popover)"
+              />
             </div>
             <div
               v-if="user.stats.points"
+              :id="`${stat}-allocate`"
               class="col-4"
               @click="allocate(stat)"
             >
-              <button
-                class="btn btn-primary"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.allocatepop)"
-              >
+              <button class="btn btn-primary">
                 +
               </button>
+              <b-popover
+                :target="`${stat}-allocate`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.allocatePop)"
+              />
             </div>
           </div>
         </div>

website/client/src/main.js

@@ -33,9 +33,15 @@ setUpLogging();
 setupAnalytics(); // just create queues for analytics, no scripts loaded at this time
 const store = getStore();
 
-export default new Vue({
+const vueInstance = new Vue({
   el: '#app',
   router,
   store,
   render: h => h(AppComponent),
 });
+
+export default vueInstance;
+
+window.externalLink = url => {
+  vueInstance.$root.$emit('habitica:external-link', url);
+};

website/client/src/mixins/externalLinks.js

@@ -0,0 +1,36 @@
+import some from 'lodash/some';
+
+export default {
+  methods: {
+    handleExternalLinks () {
+      const { TRUSTED_DOMAINS } = process.env;
+      const allLinks = document.getElementsByTagName('a');
+
+      for (let i = 0; i < allLinks.length; i += 1) {
+        const link = allLinks[i];
+        let domainIndex = link.href.indexOf('www');
+        if (domainIndex !== -1 && domainIndex < 9) {
+          domainIndex += 4;
+        } else {
+          domainIndex = link.href.indexOf('//') + 2;
+        }
+
+        if ((link.classList.value.indexOf('external-link') === -1)
+          && (!link.offsetParent || link.offsetParent.classList.value.indexOf('link-exempt') === -1)
+          && domainIndex !== 1
+          && !some(TRUSTED_DOMAINS.split(','), domain => link.href.indexOf(domain) === domainIndex)) {
+          link.classList.add('external-link');
+          link.addEventListener('click', e => {
+            if (e.ctrlKey || e.metaKey) {
+              return;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+
+            window.externalLink(link.href);
+          });
+        }
+      }
+    },
+  },
+};

website/client/src/mixins/numberInvalid.js

@@ -1,7 +1,9 @@
 export default {
   computed: {
     numberInvalid () {
-      return this.selectedAmountToBuy < 1 || !Number.isInteger(this.selectedAmountToBuy);
+      const inputNumber = Number(this.selectedAmountToBuy);
+      return inputNumber < 1
+      || !Number.isInteger(inputNumber);
     },
   },
 };

website/client/src/mixins/spells.js

@@ -114,7 +114,7 @@ export default {
       this.castCancel();
 
       // the selected member doesn't have the flags property which sets `cardReceived`
-      if (spell.pinType !== 'card') {
+      if (spell.pinType !== 'card' && spell.bulk !== true) {
         try {
           spell.cast(this.user, target, {});
         } catch (e) {

website/client/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import * as Analytics from '@/libs/analytics';
 import getStore from '@/store';
 import handleRedirect from './handleRedirect';
 
@@ -27,6 +28,7 @@ const NewsPage = () => import(/* webpackChunkName: "static" */'@/components/stat
 const OverviewPage = () => import(/* webpackChunkName: "static" */'@/components/static/overview');
 const PressKitPage = () => import(/* webpackChunkName: "static" */'@/components/static/pressKit');
 const PrivacyPage = () => import(/* webpackChunkName: "static" */'@/components/static/privacy');
+const ChatSunsetFaq = () => import(/* webpackChunkName: "static" */'@/components/static/chatSunsetFaq');
 const TermsPage = () => import(/* webpackChunkName: "static" */'@/components/static/terms');
 
 const RegisterLoginReset = () => import(/* webpackChunkName: "auth" */'@/components/auth/registerLoginReset');
@@ -72,13 +74,14 @@ const ItemsPage = () => import(/* webpackChunkName: "inventory" */'@/components/
 const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/equipment/index');
 const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/stable/index');
 
-// Guilds
+// Guilds & Parties
 const GuildIndex = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/index');
 const TavernPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/tavern');
 const MyGuilds = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/myGuilds');
 const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/discovery');
 const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
 const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
+const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
 
 // Group Plans
 const GroupPlanIndex = () => import(/* webpackChunkName: "group-plans" */ '@/components/group-plans/index');
@@ -157,6 +160,7 @@ const router = new VueRouter({
       ],
     },
     { name: 'party', path: '/party', component: GroupPage },
+    { name: 'lookingForParty', path: '/looking-for-party', component: LookingForParty },
     { name: 'groupPlan', path: '/group-plans', component: GroupPlansAppPage },
     {
       name: 'groupPlanDetail',
@@ -309,6 +313,9 @@ const router = new VueRouter({
         {
           name: 'faq', path: 'faq', component: FAQPage, meta: { requiresLogin: false },
         },
+        {
+          name: 'chatSunsetFaq', path: 'faq/tavern-and-guilds', component: ChatSunsetFaq, meta: { requiresLogin: false },
+        },
         {
           name: 'features', path: 'features', component: FeaturesPage, meta: { requiresLogin: false },
         },
@@ -433,6 +440,19 @@ router.beforeEach(async (to, from, next) => {
     }
   }
 
+  if (to.name === 'party') {
+    router.app.$root.$emit('update-party');
+  }
+
+  if (to.name === 'lookingForParty') {
+    Analytics.track({
+      hitType: 'event',
+      eventName: 'View Find Members',
+      eventAction: 'View Find Members',
+      eventCategory: 'behavior',
+    }, { trackOnClient: true });
+  }
+
   // Redirect old guild urls
   if (to.hash.indexOf('#/options/groups/guilds/') !== -1) {
     const splits = to.hash.split('/');
@@ -493,4 +513,10 @@ router.beforeEach(async (to, from, next) => {
   return next();
 });
 
+router.afterEach((to, from) => {
+  if (from.name === 'chatSunsetFaq') {
+    document.body.style.background = '#f9f9f9';
+  }
+});
+
 export default router;

website/client/src/store/actions/party.js

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { loadAsyncResource } from '@/libs/asyncResource';
 
 export function getMembers (store, forceLoad = false) {
@@ -23,3 +24,14 @@ export function getParty (store, forceLoad = false) {
     forceLoad,
   });
 }
+
+export async function lookingForParty (store, payload) {
+  let response;
+  if (payload && payload.page) {
+    response = await axios.get(`api/v4/looking-for-party?page=${payload.page}`);
+  } else {
+    response = await axios.get('api/v4/looking-for-party');
+  }
+
+  return response.data.data;
+}

website/client/tests/unit/components/tasks/column.spec.js

@@ -21,6 +21,18 @@ describe('Task Column', () => {
         getters: {
           'tasks:getFilteredTaskList': () => [],
         },
+
+        state: {
+          user: {
+            data: {
+              preferences: {
+                tasks: {
+                  activeFilter: {},
+                },
+              },
+            },
+          },
+        },
       },
       mocks,
       stubs,
@@ -76,7 +88,20 @@ describe('Task Column', () => {
         'tasks:getFilteredTaskList': () => () => habits,
       };
 
-      const store = new Store({ getters });
+      const store = new Store({
+        getters,
+        state: {
+          user: {
+            data: {
+              preferences: {
+                tasks: {
+                  activeFilter: {},
+                },
+              },
+            },
+          },
+        },
+      });
 
       wrapper = makeWrapper({ store });
     });

website/client/tests/unit/components/tasks/task.spec.js

@@ -1,88 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import moment from 'moment';
-
-import Task from '@/components/tasks/task.vue';
-import Store from '@/libs/store';
-
-const localVue = createLocalVue();
-localVue.use(Store);
-
-describe('Task', () => {
-  let wrapper;
-
-  function makeWrapper (additionalTaskData = {}, additionalUserData = {}) {
-    return shallowMount(Task, {
-      propsData: {
-        task: {
-          group: {},
-          ...additionalTaskData,
-        },
-      },
-      store: {
-        state: {
-          user: {
-            data: {
-              preferences: {},
-              ...additionalUserData,
-            },
-          },
-        },
-        getters: {
-          'tasks:getTaskClasses': () => ({}),
-          'tasks:canEdit': () => ({}),
-          'tasks:canDelete': () => ({}),
-        },
-      },
-      mocks: { $t: (key, params) => key + (params ? JSON.stringify(params) : '') },
-      directives: { 'b-tooltip': {} },
-      localVue,
-    });
-  }
-
-  it('returns a vue instance', () => {
-    wrapper = makeWrapper();
-    expect(wrapper.isVueInstance()).to.be.true;
-  });
-
-  describe('Due date calculation', () => {
-    let clock;
-
-    function setClockTo (time) {
-      const now = moment(time);
-      clock = sinon.useFakeTimers(now.toDate());
-      return now;
-    }
-
-    afterEach(() => {
-      clock.restore();
-    });
-
-    it('formats due date to today if due today', () => {
-      const now = setClockTo('2019-09-17T17:57:00+02:00');
-      wrapper = makeWrapper({ date: now });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"today"}');
-    });
-
-    it('formats due date to tomorrow if due tomorrow', () => {
-      const now = setClockTo('2012-06-12T14:17:28Z');
-      wrapper = makeWrapper({ date: now.add(1, 'day') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-
-    it('formats due date to 5 days if due in 5 days', () => {
-      const now = setClockTo();
-      wrapper = makeWrapper({ date: now.add(5, 'days') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in 5 days"}');
-    });
-
-    it('formats due date to tomorrow if today but before dayStart', () => {
-      const now = setClockTo('2019-06-12T04:23:37+02:00');
-      wrapper = makeWrapper({ date: now.add(8, 'hours') }, { preferences: { dayStart: 7 } });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-  });
-});

website/client/vue.config.js

@@ -27,6 +27,7 @@ const envVars = [
   'APPLE_AUTH_CLIENT_ID',
   'AMPLITUDE_KEY',
   'LOGGLY_CLIENT_TOKEN',
+  'TRUSTED_DOMAINS',
   // TODO necessary? if yes how not to mess up with vue cli? 'NODE_ENV'
 ];
 

website/common/locales/ace/achievements.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/backgrounds.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/challenge.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/character.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/communityguidelines.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/content.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/contrib.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/death.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/defaulttasks.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/faq.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/front.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/gear.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/generic.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/groups.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/inventory.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/limited.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/loginincentives.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/merch.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/messages.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/noscript.json

@@ -0,0 +1 @@
+{}