From 4108a22d7822027c29a1b5ed9843cc3844caae63 Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Wed, 8 Nov 2017 18:40:37 +0100
Subject: [PATCH] [WIP] bootstrap-vue upgrade (#9178)

* update bootstrap-vue to 1.0.0-beta.9 - remove all individual bootstrap components and use BootstrapVue into Vue

* change modal action names from show::modal to bv::show::modal

* check if drops are undefined

* fix modal widths - sellModal now using input instead of dropbox

* upgrade to bootstrap 4.0beta

* include package-lock changes

* fix app menu dropdown position

* upgrade bootstrap to beta2 (was missing grid offset and other fixes) - refix header menu position

* fix tags popup (auto width to max not working) - fix filter panel width (adding width: 100% works until max-width)

* show hide logo on different screensize (new css breakpoints - http://getbootstrap.com/docs/4.0/utilities/display/ )

* fix package-lock?

* fix active button style / app header toggle button

* fix package-lock !

* update package lock after merge - new mixin "openedItemRows" to save the "show more/show less" in stable

* mixin naming style

* fix buyQuestModal marginTop

* fix customMenuDropdown position

* fix userDropdown items
---
 package-lock.json                             | 121 +++++++-----------
 package.json                                  |   4 +-
 website/client/app.vue                        |  16 +--
 website/client/assets/scss/button.scss        |   4 +-
 website/client/assets/scss/modal.scss         |   3 +-
 .../components/achievements/armoireEmpty.vue  |   7 +-
 .../components/achievements/chooseClass.vue   |   7 +-
 .../components/achievements/contributor.vue   |   4 +-
 .../client/components/achievements/death.vue  |   5 +-
 .../components/achievements/dropsEnabled.vue  |   7 +-
 .../components/achievements/invitedFriend.vue |   4 +-
 .../achievements/joinedChallenge.vue          |   4 +-
 .../components/achievements/joinedGuild.vue   |   4 +-
 .../components/achievements/levelUp.vue       |   5 +-
 .../achievements/login-incentives.vue         |   4 +-
 .../components/achievements/lowHealth.vue     |   5 +-
 .../components/achievements/newStuff.vue      |   9 +-
 .../achievements/questCompleted.vue           |   4 +-
 .../achievements/questInvitation.vue          |   7 +-
 .../components/achievements/rebirth.vue       |   4 +-
 .../achievements/rebirthEnabled.vue           |   7 +-
 .../client/components/achievements/streak.vue |   4 +-
 .../components/achievements/testing.vue       |   7 +-
 .../achievements/testingletiant.vue           |   7 +-
 .../components/achievements/ultimateGear.vue  |   4 +-
 .../components/achievements/welcome.vue       |   7 +-
 .../components/achievements/wonChallenge.vue  |   4 +-
 website/client/components/appFooter.vue       |   4 +-
 .../components/challenges/challengeDetail.vue |  18 +--
 .../challengeMemberProgressModal.vue          |   2 -
 .../components/challenges/challengeModal.vue  |  14 +-
 .../challenges/closeChallengeModal.vue        |   8 --
 .../components/challenges/findChallenges.vue  |   6 +-
 .../components/challenges/groupChallenges.vue |   2 +-
 .../components/challenges/myChallenges.vue    |   6 +-
 .../client/components/chat/chatMessages.vue   |   6 +-
 .../components/chat/copyAsTodoModal.vue       |   8 +-
 .../components/chat/reportFlagModal.vue       |   6 +-
 website/client/components/creatorIntro.vue    |   5 +-
 .../group-plans/taskInformation.vue           |   8 +-
 .../components/groups/createPartyModal.vue    |   7 +-
 .../client/components/groups/discovery.vue    |   8 +-
 website/client/components/groups/group.vue    |  27 ++--
 .../components/groups/groupFormModal.vue      |  15 +--
 .../components/groups/groupGemsModal.vue      |   7 +-
 .../client/components/groups/groupPlan.vue    |   4 +-
 .../client/components/groups/inviteModal.vue  |   6 +-
 .../client/components/groups/membersModal.vue |  19 +--
 website/client/components/groups/myGuilds.vue |   7 +-
 .../components/groups/newPartyModal.jade      |  40 +++---
 .../components/groups/questDetailsModal.vue   |   5 +-
 .../components/groups/startQuestModal.vue     |   4 +-
 website/client/components/hall/heroes.vue     |   2 +-
 website/client/components/header/index.vue    |   4 +-
 website/client/components/header/menu.vue     |  66 ++++++----
 .../client/components/header/userDropdown.vue |  12 +-
 .../inventory/equipment/equipGearModal.vue    |   8 +-
 .../components/inventory/equipment/index.vue  |   6 -
 website/client/components/inventory/item.vue  |   4 -
 .../inventory/items/cards-modal.vue           |   6 +-
 .../components/inventory/items/index.vue      |   8 +-
 .../components/inventory/stable/foodItem.vue  |   2 -
 .../inventory/stable/hatchedPetDialog.vue     |   8 +-
 .../components/inventory/stable/index.vue     |  31 ++---
 .../components/inventory/stable/mountItem.vue |   4 -
 .../components/inventory/stable/petItem.vue   |   4 -
 website/client/components/memberDetails.vue   |   2 +-
 .../components/members/removeMemberModal.vue  |   7 +-
 website/client/components/modifyInventory.vue |   6 +-
 website/client/components/notifications.vue   |  54 ++++----
 .../components/payments/amazonModal.vue       |   4 -
 .../components/payments/buyGemsModal.vue      |   4 +-
 .../components/payments/sendGemsModal.vue     |   6 +-
 .../components/private-message-modal.vue      |   0
 .../client/components/selectMembersModal.vue  |   8 +-
 .../components/settings/deleteModal.vue       |   9 +-
 .../client/components/settings/resetModal.vue |   9 +-
 .../components/settings/restoreModal.vue      |   9 +-
 website/client/components/settings/site.vue   |  12 +-
 website/client/components/shops/buyModal.vue  |  14 +-
 .../client/components/shops/market/index.vue  |   8 --
 .../components/shops/market/sellModal.vue     |  40 ++----
 .../components/shops/quests/buyQuestModal.vue |  10 +-
 .../client/components/shops/quests/index.vue  |   9 +-
 .../components/shops/seasonal/index.vue       |   8 --
 website/client/components/shops/shopItem.vue  |   2 -
 .../components/shops/timeTravelers/index.vue  |   7 -
 .../components/tasks/approvalFooter.vue       |   2 +-
 .../client/components/tasks/approvalModal.vue |   7 +-
 .../components/tasks/brokenTaskModal.vue      |   6 +-
 website/client/components/tasks/column.vue    |   3 -
 website/client/components/tasks/spells.vue    |   3 -
 website/client/components/tasks/tagsPopup.vue |   2 +-
 website/client/components/tasks/task.vue      |   4 -
 website/client/components/tasks/taskModal.vue |  12 +-
 website/client/components/tasks/user.vue      |  18 +--
 .../components/ui/customMenuDropdown.vue      |   4 +-
 website/client/components/ui/itemRows.vue     |  19 +--
 website/client/components/userMenu/inbox.vue  |   9 +-
 .../client/components/userMenu/profile.vue    |   6 +-
 .../components/userMenu/profilePage.vue       |   2 +-
 .../client/components/yesterdailyModal.vue    |   4 +-
 website/client/main.js                        |   3 +
 website/client/mixins/openedItemRows.js       |  29 +++++
 website/client/mixins/payments.js             |   2 +-
 105 files changed, 354 insertions(+), 684 deletions(-)
 create mode 100644 website/client/components/private-message-modal.vue
 create mode 100644 website/client/mixins/openedItemRows.js

diff --git a/package-lock.json b/package-lock.json
index b798ac4f54..24e836a7d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,15 @@
         "ws": "1.1.4"
       }
     },
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1643,31 +1652,16 @@
       }
     },
     "bootstrap": {
-      "version": "4.0.0-alpha.6",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz",
-      "integrity": "sha1-T1TdM6wN6sOyhAe8LffsYIhpycg=",
-      "requires": {
-        "jquery": "3.2.1",
-        "tether": "1.4.0"
-      }
+      "version": "4.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.2.tgz",
+      "integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w=="
     },
     "bootstrap-vue": {
-      "version": "1.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-1.0.0-beta.7.tgz",
-      "integrity": "sha512-m9MOvv7Okl03JoZx+J1crEw24Qenn6MdXCKHCivcx1iVRj1wUUs6ZfLO5xJ1W2xd4aW8Gv8LOy+CUtP5DnuCiA==",
+      "version": "1.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-1.0.0-beta.9.tgz",
+      "integrity": "sha512-0wYWRebZROB+IXpatXgr/pUsiZ7ZUl/uJmc3bpIKlsi9sciE7wIdjV9PhdHnqoipU0kYylHfdcHimOHl5aIbjA==",
       "requires": {
-        "bootstrap": "4.0.0-beta.2",
-        "jquery": "3.2.1",
-        "popper.js": "1.12.6",
-        "vue": "2.5.3",
-        "vue-functional-data-merge": "1.0.6"
-      },
-      "dependencies": {
-        "bootstrap": {
-          "version": "4.0.0-beta.2",
-          "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.2.tgz",
-          "integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w=="
-        }
+        "bootstrap": "4.0.0-beta.2"
       }
     },
     "boxen": {
@@ -1778,9 +1772,9 @@
       "resolved": "https://registry.npmjs.org/browser-pack/-/browser-pack-6.0.2.tgz",
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
-        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -1810,6 +1804,7 @@
       "resolved": "https://registry.npmjs.org/browserify/-/browserify-12.0.2.tgz",
       "integrity": "sha1-V/IeXm4wj/WYfE2v1EhAsrmPehk=",
       "requires": {
+        "JSONStream": "1.3.1",
         "assert": "1.3.0",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -1831,7 +1826,6 @@
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
         "isarray": "0.0.1",
-        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.1.2",
@@ -6605,13 +6599,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -6621,6 +6608,13 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -8779,10 +8773,10 @@
       "resolved": "https://registry.npmjs.org/insert-module-globals/-/insert-module-globals-7.0.1.tgz",
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.6",
-        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -9618,15 +9612,6 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk="
     },
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -11424,6 +11409,7 @@
       "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-4.1.1.tgz",
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "requires": {
+        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -11431,7 +11417,6 @@
         "detective": "4.5.0",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
-        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.0.6",
         "resolve": "1.5.0",
@@ -15299,22 +15284,6 @@
         "throttleit": "1.0.0"
       }
     },
-    "require_optional": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
-      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
-      "requires": {
-        "resolve-from": "2.0.0",
-        "semver": "5.4.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.4.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
-          "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
-        }
-      }
-    },
     "require-again": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/require-again/-/require-again-2.0.0.tgz",
@@ -15354,6 +15323,22 @@
         }
       }
     },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
+      "requires": {
+        "resolve-from": "2.0.0",
+        "semver": "5.4.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.4.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
+          "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
+        }
+      }
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -16663,11 +16648,6 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -16678,6 +16658,11 @@
         "strip-ansi": "3.0.1"
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -17208,11 +17193,6 @@
         "require-main-filename": "1.0.1"
       }
     },
-    "tether": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.0.tgz",
-      "integrity": "sha1-D5+hcfdb9YSF2BSelHmdeudNHBo="
-    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -18209,11 +18189,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.3.tgz",
       "integrity": "sha512-C8O5ZtR9jpwm6sCre3k42/WvuAcil5hH1+c3mJks8kNCYKh57sQh6I5U7m9L0fD89OKkIofmebUORngZkLedNA=="
     },
-    "vue-functional-data-merge": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-1.0.6.tgz",
-      "integrity": "sha512-wzUHcvLBiVJcDais1HdmFObi2VagMB5jd/dZuacDO0GCdHURxkvPrReaAyAhW/+g29j5gRu0QKP1DH7CaBRwmQ=="
-    },
     "vue-hot-reload-api": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.0.tgz",
diff --git a/package.json b/package.json
index 676ce0e92e..67794ca94e 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
     "bcrypt": "^1.0.2",
     "bluebird": "^3.3.5",
     "body-parser": "^1.15.0",
-    "bootstrap": "4.0.0-alpha.6",
-    "bootstrap-vue": "1.0.0-beta.7",
+    "bootstrap": "4.0.0-beta.2",
+    "bootstrap-vue": "1.0.0-beta.9",
     "browserify": "~12.0.1",
     "compression": "^1.6.1",
     "connect-ratelimit": "0.0.7",
diff --git a/website/client/app.vue b/website/client/app.vue
index 552ebe2364..d6953d7663 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -135,12 +135,12 @@ export default {
     // @TODO: I'm not sure these should be at the app level. Can we move these back into shop/inventory or maybe they need a lateral move?
     this.$root.$on('buyModal::showItem', (item) => {
       this.selectedItemToBuy = item;
-      this.$root.$emit('show::modal', 'buy-modal');
+      this.$root.$emit('bv::show::modal', 'buy-modal');
     });
 
     this.$root.$on('selectMembersModal::showItem', (item) => {
       this.selectedSpellToBuy = item;
-      this.$root.$emit('show::modal', 'select-member-modal');
+      this.$root.$emit('bv::show::modal', 'select-member-modal');
     });
 
     // @TODO split up this file, it's too big
@@ -264,7 +264,7 @@ export default {
     }
 
     // Manage modals
-    this.$root.$on('show::modal', (modalId, data = {}) => {
+    this.$root.$on('bv::show::modal', (modalId, data = {}) => {
       if (data.fromRoot) return;
 
       // Track opening of gems modal unless it's been already tracked
@@ -286,7 +286,7 @@ export default {
       this.$store.state.modalStack.push(modalId);
 
       // Hide the previous top modal
-      if (modalOnTop) this.$root.$emit('hide::modal', modalOnTop, {fromRoot: true});
+      if (modalOnTop) this.$root.$emit('bv::hide::modal', modalOnTop, {fromRoot: true});
     });
 
     // @TODO: This part is hacky and could be solved with two options:
@@ -307,7 +307,7 @@ export default {
       // Recalculate and show the last modal if there is one
       modalStackLength = this.$store.state.modalStack.length;
       modalOnTop = this.$store.state.modalStack[modalStackLength - 1];
-      if (modalOnTop) this.$root.$emit('show::modal', modalOnTop, {fromRoot: true});
+      if (modalOnTop) this.$root.$emit('bv::show::modal', modalOnTop, {fromRoot: true});
     });
   },
   methods: {
@@ -333,8 +333,8 @@ export default {
         if (this.user.party._id) {
           this.selectedSpellToBuy = item;
 
-          this.$root.$emit('hide::modal', 'buy-modal');
-          this.$root.$emit('show::modal', 'select-member-modal');
+          this.$root.$emit('bv::hide::modal', 'buy-modal');
+          this.$root.$emit('bv::show::modal', 'select-member-modal');
         } else {
           this.error(this.$t('errorNotInParty'));
         }
@@ -346,7 +346,7 @@ export default {
 
       this.$store.dispatch('party:getMembers', {forceLoad: true});
 
-      this.$root.$emit('hide::modal', 'select-member-modal');
+      this.$root.$emit('bv::hide::modal', 'select-member-modal');
     },
     hideLoadingScreen () {
       const loadingScreen = document.getElementById('loading-screen');
diff --git a/website/client/assets/scss/button.scss b/website/client/assets/scss/button.scss
index 1f77b30ff5..533f83f096 100644
--- a/website/client/assets/scss/button.scss
+++ b/website/client/assets/scss/button.scss
@@ -26,7 +26,7 @@
   }
 
   &:active:not(.btn-flat), &.active:not(.btn-flat) {
-    box-shadow: none;
+    box-shadow: none !important;
     border: 1px solid transparent;
   }
 }
@@ -45,7 +45,7 @@
   }
 
   &:hover:not(:disabled), &:active, &.active, &:focus {
-    background: #5d3b9c;
+    background: #5d3b9c !important;
     color: $white;
   }
 }
diff --git a/website/client/assets/scss/modal.scss b/website/client/assets/scss/modal.scss
index 7f85a2cb9b..b19075aeef 100644
--- a/website/client/assets/scss/modal.scss
+++ b/website/client/assets/scss/modal.scss
@@ -1,7 +1,6 @@
 
 @import '~client/assets/scss/colors.scss';
 
-
 @mixin centeredModal() {
   display: flex;
   justify-content: center;
@@ -13,6 +12,8 @@
 }
 
 .modal-dialog {
+  width: auto;
+
   .title {
     min-height: 24px;
     margin-top: 24px;
diff --git a/website/client/components/achievements/armoireEmpty.vue b/website/client/components/achievements/armoireEmpty.vue
index e3fc3b26f7..dca69af311 100644
--- a/website/client/components/achievements/armoireEmpty.vue
+++ b/website/client/components/achievements/armoireEmpty.vue
@@ -18,15 +18,10 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'armoire-empty');
+      this.$root.$emit('bv::hide::modal', 'armoire-empty');
     },
   },
 };
diff --git a/website/client/components/achievements/chooseClass.vue b/website/client/components/achievements/chooseClass.vue
index a35a2b0920..6ba7105269 100644
--- a/website/client/components/achievements/chooseClass.vue
+++ b/website/client/components/achievements/chooseClass.vue
@@ -117,9 +117,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-import bPopover from 'bootstrap-vue/lib/components/popover';
-
 import Avatar from '../avatar';
 import { mapState } from 'client/libs/store';
 import markdownDirective from 'client/directives/markdown';
@@ -130,8 +127,6 @@ import wizardIcon from 'assets/svg/wizard.svg';
 
 export default {
   components: {
-    bModal,
-    bPopover,
     Avatar,
   },
   computed: {
@@ -156,7 +151,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'choose-class');
+      this.$root.$emit('bv::hide::modal', 'choose-class');
     },
     clickSelectClass (heroClass) {
       this.$store.dispatch('user:changeClass', {query: {class: heroClass}});
diff --git a/website/client/components/achievements/contributor.vue b/website/client/components/achievements/contributor.vue
index 60fb56f794..90a6f5eda3 100644
--- a/website/client/components/achievements/contributor.vue
+++ b/website/client/components/achievements/contributor.vue
@@ -22,7 +22,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 
@@ -30,7 +29,6 @@ import { mapState } from 'client/libs/store';
 
 export default {
   components: {
-    bModal,
     achievementFooter,
     achievementAvatar,
   },
@@ -39,7 +37,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'contributor');
+      this.$root.$emit('bv::hide::modal', 'contributor');
     },
   },
 };
diff --git a/website/client/components/achievements/death.vue b/website/client/components/achievements/death.vue
index db66b5641a..263daf0a2c 100644
--- a/website/client/components/achievements/death.vue
+++ b/website/client/components/achievements/death.vue
@@ -31,8 +31,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import axios from 'axios';
 import Avatar from '../avatar';
 import { mapState } from 'client/libs/store';
@@ -42,7 +40,6 @@ import {maxHealth} from '../../../common/script/index';
 
 export default {
   components: {
-    bModal,
     Avatar,
   },
   data () {
@@ -60,7 +57,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'death');
+      this.$root.$emit('bv::hide::modal', 'death');
     },
     async revive () {
       await axios.post('/api/v3/user/revive');
diff --git a/website/client/components/achievements/dropsEnabled.vue b/website/client/components/achievements/dropsEnabled.vue
index 9f2aa8f81f..dd96965650 100644
--- a/website/client/components/achievements/dropsEnabled.vue
+++ b/website/client/components/achievements/dropsEnabled.vue
@@ -20,15 +20,10 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import { mapState } from 'client/libs/store';
 import eggs from '../../../common/script/content/eggs';
 
 export default {
-  components: {
-    bModal,
-  },
   data () {
     return {
       eggs,
@@ -45,7 +40,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'drops-enabled');
+      this.$root.$emit('bv::hide::modal', 'drops-enabled');
     },
   },
 };
diff --git a/website/client/components/achievements/invitedFriend.vue b/website/client/components/achievements/invitedFriend.vue
index add6c05c3b..24522181c2 100644
--- a/website/client/components/achievements/invitedFriend.vue
+++ b/website/client/components/achievements/invitedFriend.vue
@@ -21,19 +21,17 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 
 export default {
   components: {
-    bModal,
     achievementFooter,
     achievementAvatar,
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'invited-friend');
+      this.$root.$emit('bv::hide::modal', 'invited-friend');
     },
   },
 };
diff --git a/website/client/components/achievements/joinedChallenge.vue b/website/client/components/achievements/joinedChallenge.vue
index 775b82bcbb..703e3e4c72 100644
--- a/website/client/components/achievements/joinedChallenge.vue
+++ b/website/client/components/achievements/joinedChallenge.vue
@@ -21,19 +21,17 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 
 export default {
   components: {
-    bModal,
     achievementFooter,
     achievementAvatar,
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'joined-challenge');
+      this.$root.$emit('bv::hide::modal', 'joined-challenge');
     },
   },
 };
diff --git a/website/client/components/achievements/joinedGuild.vue b/website/client/components/achievements/joinedGuild.vue
index 332942d08d..2896b617f5 100644
--- a/website/client/components/achievements/joinedGuild.vue
+++ b/website/client/components/achievements/joinedGuild.vue
@@ -21,19 +21,17 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 
 export default {
   components: {
-    bModal,
     achievementFooter,
     achievementAvatar,
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'joined-guild');
+      this.$root.$emit('bv::hide::modal', 'joined-guild');
     },
   },
 };
diff --git a/website/client/components/achievements/levelUp.vue b/website/client/components/achievements/levelUp.vue
index 776d1f0dc7..7df5bbf51b 100644
--- a/website/client/components/achievements/levelUp.vue
+++ b/website/client/components/achievements/levelUp.vue
@@ -114,8 +114,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import Avatar from '../avatar';
 import { mapState } from 'client/libs/store';
 import {maxHealth} from '../../../common/script/index';
@@ -128,7 +126,6 @@ let BASE_URL = 'https://habitica.com';
 export default {
   mixins: [styleHelper],
   components: {
-    bModal,
     Avatar,
   },
   data () {
@@ -157,7 +154,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'level-up');
+      this.$root.$emit('bv::hide::modal', 'level-up');
     },
     loadWidgets () {
       // @TODO:
diff --git a/website/client/components/achievements/login-incentives.vue b/website/client/components/achievements/login-incentives.vue
index a2e9b4485d..bebcfec947 100644
--- a/website/client/components/achievements/login-incentives.vue
+++ b/website/client/components/achievements/login-incentives.vue
@@ -51,7 +51,6 @@ b-modal#login-incentives(:title="data.message", size='md', :hide-footer="true")
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
 import Avatar from '../avatar';
 import {loginIncentives} from '../../../common/script/content/index';
@@ -59,7 +58,6 @@ import {loginIncentives} from '../../../common/script/content/index';
 export default {
   components: {
     Avatar,
-    bModal,
   },
   props: ['data'],
   data () {
@@ -79,7 +77,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'login-incentives');
+      this.$root.$emit('bv::hide::modal', 'login-incentives');
     },
   },
 };
diff --git a/website/client/components/achievements/lowHealth.vue b/website/client/components/achievements/lowHealth.vue
index feedcfcbd0..7e9798ecd9 100644
--- a/website/client/components/achievements/lowHealth.vue
+++ b/website/client/components/achievements/lowHealth.vue
@@ -56,8 +56,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import Avatar from '../avatar';
 import { mapState } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
@@ -66,7 +64,6 @@ import {maxHealth} from '../../../common/script/index';
 
 export default {
   components: {
-    bModal,
     Avatar,
   },
   data () {
@@ -95,7 +92,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'low-health');
+      this.$root.$emit('bv::hide::modal', 'low-health');
     },
     acknowledgeHealthWarning () {
       this.$store.dispatch('user:set', {
diff --git a/website/client/components/achievements/newStuff.vue b/website/client/components/achievements/newStuff.vue
index fda1114a31..0301862cc5 100644
--- a/website/client/components/achievements/newStuff.vue
+++ b/website/client/components/achievements/newStuff.vue
@@ -22,15 +22,12 @@
 </style>
 
 <script>
-  // import axios from 'axios';
-  import bModal from 'bootstrap-vue/lib/components/modal';
   import { mapState } from 'client/libs/store';
   import markdown from 'client/directives/markdown';
   import newStuff from 'client/components/static/newStuff';
 
   export default {
     components: {
-      bModal,
       newStuff,
     },
     computed: {
@@ -40,18 +37,18 @@
       markdown,
     },
     mounted () {
-      this.$root.$on('show::modal', async (modalId) => {
+      this.$root.$on('bv::show::modal', async (modalId) => {
         if (modalId !== 'new-stuff') return;
         // Request the lastest news, but not locally incase they don't refresh
         // let response = await axios.get('/static/new-stuff');
       });
     },
     destroyed () {
-      this.$root.$off('show::modal');
+      this.$root.$off('bv::show::modal');
     },
     methods: {
       close () {
-        this.$root.$emit('hide::modal', 'new-stuff');
+        this.$root.$emit('bv::hide::modal', 'new-stuff');
       },
       dismissAlert () {
         this.$store.dispatch('user:set', {'flags.newStuff': false});
diff --git a/website/client/components/achievements/questCompleted.vue b/website/client/components/achievements/questCompleted.vue
index 86d2cd6378..264b07545c 100644
--- a/website/client/components/achievements/questCompleted.vue
+++ b/website/client/components/achievements/questCompleted.vue
@@ -22,7 +22,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import quests from 'common/script/content/quests';
 import questDialogDrops from 'client/components/shops/quests/questDialogDrops';
 
@@ -32,7 +31,6 @@ import { maxHealth } from '../../../common/script/index';
 
 export default {
   components: {
-    bModal,
     questDialogDrops,
   },
   data () {
@@ -57,7 +55,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'quest-completed');
+      this.$root.$emit('bv::hide::modal', 'quest-completed');
     },
     setQuestCompleted () {
       this.$store.dispatch('user:set', {'party.quest.completed': ''});
diff --git a/website/client/components/achievements/questInvitation.vue b/website/client/components/achievements/questInvitation.vue
index 6ad360c71f..f0bf2343dc 100644
--- a/website/client/components/achievements/questInvitation.vue
+++ b/website/client/components/achievements/questInvitation.vue
@@ -45,17 +45,12 @@
 </template>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import quests from 'common/script/content/quests';
 import { mapState } from 'client/libs/store';
 import percent from '../../../common/script/libs/percent';
 import {maxHealth} from '../../../common/script/index';
 
 export default {
-  components: {
-    bModal,
-  },
   data () {
     return {
       maxHealth,
@@ -72,7 +67,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'quest-invitation');
+      this.$root.$emit('bv::hide::modal', 'quest-invitation');
     },
   },
 };
diff --git a/website/client/components/achievements/rebirth.vue b/website/client/components/achievements/rebirth.vue
index b5aa2e4127..aeb61ecb33 100644
--- a/website/client/components/achievements/rebirth.vue
+++ b/website/client/components/achievements/rebirth.vue
@@ -24,7 +24,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 
@@ -32,7 +31,6 @@ import { mapState } from 'client/libs/store';
 
 export default {
   components: {
-    bModal,
     achievementFooter,
     achievementAvatar,
   },
@@ -41,7 +39,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'rebirth');
+      this.$root.$emit('bv::hide::modal', 'rebirth');
     },
   },
 };
diff --git a/website/client/components/achievements/rebirthEnabled.vue b/website/client/components/achievements/rebirthEnabled.vue
index 75b465cb3e..012ce14e60 100644
--- a/website/client/components/achievements/rebirthEnabled.vue
+++ b/website/client/components/achievements/rebirthEnabled.vue
@@ -17,20 +17,15 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import { mapState } from 'client/libs/store';
 
 export default {
-  components: {
-    bModal,
-  },
   computed: {
     ...mapState({user: 'user.data'}),
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'rebirth-enabled');
+      this.$root.$emit('bv::hide::modal', 'rebirth-enabled');
     },
   },
 };
diff --git a/website/client/components/achievements/streak.vue b/website/client/components/achievements/streak.vue
index 5ebd9ffd04..16fe2e043c 100644
--- a/website/client/components/achievements/streak.vue
+++ b/website/client/components/achievements/streak.vue
@@ -27,7 +27,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 
@@ -35,7 +34,6 @@ import { mapState } from 'client/libs/store';
 
 export default {
   components: {
-    bModal,
     achievementFooter,
     achievementAvatar,
   },
@@ -44,7 +42,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'streak');
+      this.$root.$emit('bv::hide::modal', 'streak');
     },
     suppressModals () {
       let surpress = this.user.preferences.suppressModals.streak ? true : false;
diff --git a/website/client/components/achievements/testing.vue b/website/client/components/achievements/testing.vue
index 8228642f5e..ab1eda8eb7 100644
--- a/website/client/components/achievements/testing.vue
+++ b/website/client/components/achievements/testing.vue
@@ -21,15 +21,10 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'testing');
+      this.$root.$emit('bv::hide::modal', 'testing');
     },
     takeMethere () {
       this.$router.push('/groups/discovery');
diff --git a/website/client/components/achievements/testingletiant.vue b/website/client/components/achievements/testingletiant.vue
index d31bc3ccf6..0251527d7e 100644
--- a/website/client/components/achievements/testingletiant.vue
+++ b/website/client/components/achievements/testingletiant.vue
@@ -22,15 +22,10 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'testingletiant');
+      this.$root.$emit('bv::hide::modal', 'testingletiant');
     },
     takeMethere () {
       this.$router.push('/groups/discovery');
diff --git a/website/client/components/achievements/ultimateGear.vue b/website/client/components/achievements/ultimateGear.vue
index 477305a227..fdebfa9046 100644
--- a/website/client/components/achievements/ultimateGear.vue
+++ b/website/client/components/achievements/ultimateGear.vue
@@ -46,14 +46,12 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 import { mapState } from 'client/libs/store';
 
 export default {
   components: {
-    bModal,
     achievementFooter,
     achievementAvatar,
   },
@@ -62,7 +60,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'ultimate-gear');
+      this.$root.$emit('bv::hide::modal', 'ultimate-gear');
     },
   },
 };
diff --git a/website/client/components/achievements/welcome.vue b/website/client/components/achievements/welcome.vue
index f4a0568cd2..62bded79c7 100644
--- a/website/client/components/achievements/welcome.vue
+++ b/website/client/components/achievements/welcome.vue
@@ -31,17 +31,12 @@
 </template>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   methods: {
     ready () {
       // Guide.goto("intro",0)'
       this.$router.push('/avatar');
-      this.$root.$emit('hide::modal', 'welcome');
+      this.$root.$emit('bv::hide::modal', 'welcome');
     },
   },
 };
diff --git a/website/client/components/achievements/wonChallenge.vue b/website/client/components/achievements/wonChallenge.vue
index b0c6766ae9..de65914ea7 100644
--- a/website/client/components/achievements/wonChallenge.vue
+++ b/website/client/components/achievements/wonChallenge.vue
@@ -38,13 +38,11 @@
 
 <script>
 import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import markdownDirective from 'client/directives/markdown';
 import Avatar from '../avatar';
 
 export default {
   components: {
-    bModal,
     Avatar,
   },
   directives: {
@@ -61,7 +59,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'won-challenge');
+      this.$root.$emit('bv::hide::modal', 'won-challenge');
     },
   },
 };
diff --git a/website/client/components/appFooter.vue b/website/client/components/appFooter.vue
index 1c87e43f81..62393d41a3 100644
--- a/website/client/components/appFooter.vue
+++ b/website/client/components/appFooter.vue
@@ -363,7 +363,7 @@ export default {
       // @TODO: sync()
     },
     openModifyInventoryModal  () {
-      this.$root.$emit('show::modal', 'modify-inventory');
+      this.$root.$emit('bv::show::modal', 'modify-inventory');
     },
     donate () {
       Analytics.track({
@@ -372,7 +372,7 @@ export default {
         eventAction: 'click',
         eventLabel: 'Gems > Donate',
       });
-      this.$root.$emit('show::modal', 'buy-gems');
+      this.$root.$emit('bv::show::modal', 'buy-gems');
     },
   },
 };
diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index ac7c7c254c..ea01f8ffa7 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -177,8 +177,6 @@
 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];
 
 import Vue from 'vue';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import findIndex from 'lodash/findIndex';
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
@@ -209,8 +207,6 @@ export default {
     challengeMemberProgressModal,
     TaskColumn: Column,
     TaskModal,
-    bDropdown,
-    bDropdownItem,
   },
   data () {
     return {
@@ -325,7 +321,7 @@ export default {
       this.workingTask = this.editingTask;
       // Necessary otherwise the first time the modal is not rendered
       Vue.nextTick(() => {
-        this.$root.$emit('show::modal', 'task-modal');
+        this.$root.$emit('bv::show::modal', 'task-modal');
       });
     },
     createTask (type) {
@@ -334,7 +330,7 @@ export default {
       this.workingTask = this.creatingTask;
       // Necessary otherwise the first time the modal is not rendered
       Vue.nextTick(() => {
-        this.$root.$emit('show::modal', 'task-modal');
+        this.$root.$emit('bv::show::modal', 'task-modal');
       });
     },
     cancelTaskModal () {
@@ -361,7 +357,7 @@ export default {
       this.$store.state.memberModalOptions.groupId = 'challenge'; // @TODO: change these terrible settings
       this.$store.state.memberModalOptions.group = this.group;
       this.$store.state.memberModalOptions.viewingMembers = this.members;
-      this.$root.$emit('show::modal', 'members-modal');
+      this.$root.$emit('bv::show::modal', 'members-modal');
     },
     async joinChallenge () {
       this.user.challenges.push(this.searchId);
@@ -384,13 +380,13 @@ export default {
       await this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true});
     },
     closeChallenge () {
-      this.$root.$emit('show::modal', 'close-challenge-modal');
+      this.$root.$emit('bv::show::modal', 'close-challenge-modal');
     },
     edit () {
       // @TODO: set working challenge
       this.cloning = false;
       this.$store.state.challengeOptions.workingChallenge = Object.assign({}, this.$store.state.challengeOptions.workingChallenge, this.challenge);
-      this.$root.$emit('show::modal', 'challenge-modal');
+      this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
     // @TODO: view members
     updatedChallenge (eventData) {
@@ -398,7 +394,7 @@ export default {
     },
     openMemberProgressModal (memberId) {
       this.progressMemberId = memberId;
-      this.$root.$emit('show::modal', 'challenge-member-modal');
+      this.$root.$emit('bv::show::modal', 'challenge-member-modal');
     },
     async exportChallengeCsv () {
       // let response = await this.$store.dispatch('challenges:exportChallengeCsv', {
@@ -410,7 +406,7 @@ export default {
       this.cloning = true;
       this.$store.state.challengeOptions.tasksToClone = this.tasksByType;
       this.$store.state.challengeOptions.workingChallenge = Object.assign({}, this.$store.state.challengeOptions.workingChallenge, this.challenge);
-      this.$root.$emit('show::modal', 'challenge-modal');
+      this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
   },
 };
diff --git a/website/client/components/challenges/challengeMemberProgressModal.vue b/website/client/components/challenges/challengeMemberProgressModal.vue
index d801cd1e2d..852b634335 100644
--- a/website/client/components/challenges/challengeMemberProgressModal.vue
+++ b/website/client/components/challenges/challengeMemberProgressModal.vue
@@ -10,13 +10,11 @@
 
 <script>
 import axios from 'axios';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import Column from '../tasks/column';
 
 export default {
   props: ['challengeId', 'memberId'],
   components: {
-    bModal,
     TaskColumn: Column,
   },
   data () {
diff --git a/website/client/components/challenges/challengeModal.vue b/website/client/components/challenges/challengeModal.vue
index 51c0d8c631..1d495c3de6 100644
--- a/website/client/components/challenges/challengeModal.vue
+++ b/website/client/components/challenges/challengeModal.vue
@@ -131,10 +131,6 @@
 
 <script>
 import clone from 'lodash/clone';
-import bModal from 'bootstrap-vue/lib/components/modal';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-import bFormInput from 'bootstrap-vue/lib/components/form-input';
 
 import markdownDirective from 'client/directives/markdown';
 
@@ -143,12 +139,6 @@ import { mapState } from 'client/libs/store';
 
 export default {
   props: ['groupId', 'cloning'],
-  components: {
-    bModal,
-    bDropdown,
-    bDropdownItem,
-    bFormInput,
-  },
   directives: {
     markdown: markdownDirective,
   },
@@ -402,7 +392,7 @@ export default {
 
       if (this.cloning) this.$store.state.challengeOptions.cloning = true;
 
-      this.$root.$emit('hide::modal', 'challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'challenge-modal');
       this.$router.push(`/challenges/${challenge._id}`);
     },
     updateChallenge () {
@@ -425,7 +415,7 @@ export default {
       });
       this.$store.dispatch('challenges:updateChallenge', {challenge: challengeDetails});
       this.resetWorkingChallenge();
-      this.$root.$emit('hide::modal', 'challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'challenge-modal');
     },
     toggleCategorySelect () {
       this.showCategorySelect = !this.showCategorySelect;
diff --git a/website/client/components/challenges/closeChallengeModal.vue b/website/client/components/challenges/closeChallengeModal.vue
index 535d879c52..6d1a46a046 100644
--- a/website/client/components/challenges/closeChallengeModal.vue
+++ b/website/client/components/challenges/closeChallengeModal.vue
@@ -75,17 +75,9 @@ div
 
 <script>
 import debounce from 'lodash/debounce';
-import bModal from 'bootstrap-vue/lib/components/modal';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
 export default {
   props: ['challengeId', 'members'],
-  components: {
-    bModal,
-    bDropdown,
-    bDropdownItem,
-  },
   data () {
     return {
       winner: {},
diff --git a/website/client/components/challenges/findChallenges.vue b/website/client/components/challenges/findChallenges.vue
index 886840202f..ed25791729 100644
--- a/website/client/components/challenges/findChallenges.vue
+++ b/website/client/components/challenges/findChallenges.vue
@@ -44,8 +44,6 @@
 <script>
 import { mapState } from 'client/libs/store';
 
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
@@ -59,8 +57,6 @@ export default {
     Sidebar,
     ChallengeItem,
     challengeModal,
-    bDropdown,
-    bDropdownItem,
   },
   data () {
     return {
@@ -124,7 +120,7 @@ export default {
       this.filters = eventData;
     },
     createChallenge () {
-      this.$root.$emit('show::modal', 'challenge-modal');
+      this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
     async loadchallanges () {
       this.loading = true;
diff --git a/website/client/components/challenges/groupChallenges.vue b/website/client/components/challenges/groupChallenges.vue
index 50fd3a67a5..ceeeccf370 100644
--- a/website/client/components/challenges/groupChallenges.vue
+++ b/website/client/components/challenges/groupChallenges.vue
@@ -125,7 +125,7 @@ export default {
       this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
     },
     createChallenge () {
-      this.$root.$emit('show::modal', 'challenge-modal');
+      this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
     challengeCreated (challenge) {
       if (challenge.group._id !== this.groupIdForChallenges) return;
diff --git a/website/client/components/challenges/myChallenges.vue b/website/client/components/challenges/myChallenges.vue
index 3389fd80bd..c80d73763b 100644
--- a/website/client/components/challenges/myChallenges.vue
+++ b/website/client/components/challenges/myChallenges.vue
@@ -65,8 +65,6 @@
 <script>
 import { mapState } from 'client/libs/store';
 
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
@@ -81,8 +79,6 @@ export default {
     Sidebar,
     ChallengeItem,
     challengeModal,
-    bDropdown,
-    bDropdownItem,
   },
   data () {
     return {
@@ -151,7 +147,7 @@ export default {
     },
     createChallenge () {
       this.$store.state.challengeOptions.workingChallenge = {};
-      this.$root.$emit('show::modal', 'challenge-modal');
+      this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
     async loadchallanges () {
       this.challenges = await this.$store.dispatch('challenges:getUserChallenges', {
diff --git a/website/client/components/chat/chatMessages.vue b/website/client/components/chat/chatMessages.vue
index edf6526d9c..79b82846a0 100644
--- a/website/client/components/chat/chatMessages.vue
+++ b/website/client/components/chat/chatMessages.vue
@@ -447,13 +447,13 @@ export default {
     },
     copyAsTodo (message) {
       this.copyingMessage = message;
-      this.$root.$emit('show::modal', 'copyAsTodo');
+      this.$root.$emit('bv::show::modal', 'copyAsTodo');
     },
     async report (message) {
       this.$store.state.flagChatOptions.message = message;
       this.$store.state.flagChatOptions.groupId = this.groupId;
 
-      this.$root.$emit('show::modal', 'report-flag');
+      this.$root.$emit('bv::show::modal', 'report-flag');
     },
     async remove (message, index) {
       if (!confirm(this.$t('areYouSureDeleteMessage'))) return;
@@ -479,7 +479,7 @@ export default {
         // @TODO move to action or anyway move from here because it's super duplicate
         this.$store.state.profileUser = profile;
         this.$store.state.profileOptions.startingPage = 'profile';
-        this.$root.$emit('show::modal', 'profile');
+        this.$root.$emit('bv::show::modal', 'profile');
       }
     },
   },
diff --git a/website/client/components/chat/copyAsTodoModal.vue b/website/client/components/chat/copyAsTodoModal.vue
index ec19218900..3cda6232c4 100644
--- a/website/client/components/chat/copyAsTodoModal.vue
+++ b/website/client/components/chat/copyAsTodoModal.vue
@@ -25,13 +25,9 @@
 </template>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import markdownDirective from 'client/directives/markdown';
 
 export default {
-  components: {
-    bModal,
-  },
   directives: {
     markdown: markdownDirective,
   },
@@ -51,7 +47,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'copyAsTodo');
+      this.$root.$emit('bv::hide::modal', 'copyAsTodo');
     },
     saveTodo () {
       // let newTask = {
@@ -63,7 +59,7 @@ export default {
       //  @TODO: Add after tasks: User.addTask({body:newTask});
       // @TODO: Notification.text(window.env.t('messageAddedAsToDo'));
 
-      this.$root.$emit('hide::modal', 'copyAsTodo');
+      this.$root.$emit('bv::hide::modal', 'copyAsTodo');
     },
   },
 };
diff --git a/website/client/components/chat/reportFlagModal.vue b/website/client/components/chat/reportFlagModal.vue
index ecccfc8393..3c46fff59d 100644
--- a/website/client/components/chat/reportFlagModal.vue
+++ b/website/client/components/chat/reportFlagModal.vue
@@ -14,16 +14,12 @@
 </template>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
 import notifications from 'client/mixins/notifications';
 import markdownDirective from 'client/directives/markdown';
 
 export default {
   mixins: [notifications],
-  components: {
-    bModal,
-  },
   directives: {
     markdown: markdownDirective,
   },
@@ -57,7 +53,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'report-flag');
+      this.$root.$emit('bv::hide::modal', 'report-flag');
     },
     async reportAbuse () {
       this.notify('Thank you for reporting this violation. The moderators have been notified.');
diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
index 6108f530d1..9822c6056c 100644
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -813,8 +813,6 @@ import notifications from 'client/mixins/notifications';
 import appearance from 'common/script/content/appearance';
 import appearanceSets from 'common/script/content/appearance/sets';
 
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import logoPurple from 'assets/svg/logo-purple.svg';
 import bodyIcon from 'assets/svg/body.svg';
 import accessoriesIcon from 'assets/svg/accessories.svg';
@@ -961,7 +959,6 @@ export default {
   mixins: [guide, notifications],
   components: {
     avatar,
-    bModal,
   },
   mounted () {
     if (this.editing) this.modalPage = 2;
@@ -1326,7 +1323,7 @@ export default {
         this.$store.state.tasks.data[`${task.type}s`].unshift(task);
       });
 
-      this.$root.$emit('hide::modal', 'avatar-modal');
+      this.$root.$emit('bv::hide::modal', 'avatar-modal');
       this.$router.push('/');
       this.$store.dispatch('user:set', {
         'flags.welcomed': true,
diff --git a/website/client/components/group-plans/taskInformation.vue b/website/client/components/group-plans/taskInformation.vue
index f706852b75..6aac845515 100644
--- a/website/client/components/group-plans/taskInformation.vue
+++ b/website/client/components/group-plans/taskInformation.vue
@@ -228,8 +228,6 @@
 import taskDefaults from 'common/script/libs/taskDefaults';
 import TaskColumn from '../tasks/column';
 import TaskModal from '../tasks/taskModal';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
 import positiveIcon from 'assets/svg/positive.svg';
 import filterIcon from 'assets/svg/filter.svg';
@@ -250,8 +248,6 @@ export default {
   components: {
     TaskColumn,
     TaskModal,
-    bDropdown,
-    bDropdownItem,
   },
   data () {
     return {
@@ -371,7 +367,7 @@ export default {
       this.workingTask = this.editingTask;
       // Necessary otherwise the first time the modal is not rendered
       Vue.nextTick(() => {
-        this.$root.$emit('show::modal', 'task-modal');
+        this.$root.$emit('bv::show::modal', 'task-modal');
       });
     },
     createTask (type) {
@@ -380,7 +376,7 @@ export default {
       this.workingTask = this.creatingTask;
       // Necessary otherwise the first time the modal is not rendered
       Vue.nextTick(() => {
-        this.$root.$emit('show::modal', 'task-modal');
+        this.$root.$emit('bv::show::modal', 'task-modal');
       });
     },
     taskCreated (task) {
diff --git a/website/client/components/groups/createPartyModal.vue b/website/client/components/groups/createPartyModal.vue
index 907f8c67f4..5860a3441c 100644
--- a/website/client/components/groups/createPartyModal.vue
+++ b/website/client/components/groups/createPartyModal.vue
@@ -139,8 +139,6 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
 import { mapState } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
 
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import copyIcon from 'assets/svg/copy.svg';
 import greyBadgeIcon from 'assets/svg/grey-badge.svg';
 import qrCodeIcon from 'assets/svg/qrCode.svg';
@@ -148,9 +146,6 @@ import facebookIcon from 'assets/svg/facebook.svg';
 import twitterIcon from 'assets/svg/twitter.svg';
 
 export default {
-  components: {
-    bModal,
-  },
   data () {
     return {
       icons: Object.freeze({
@@ -190,7 +185,7 @@ export default {
         partySize: 1,
       });
 
-      this.$root.$emit('hide::modal', 'create-party-modal');
+      this.$root.$emit('bv::hide::modal', 'create-party-modal');
       this.$router.push('/party');
     },
   },
diff --git a/website/client/components/groups/discovery.vue b/website/client/components/groups/discovery.vue
index 00a409e3a1..7a833d7767 100644
--- a/website/client/components/groups/discovery.vue
+++ b/website/client/components/groups/discovery.vue
@@ -47,10 +47,6 @@ import PublicGuildItem from './publicGuildItem';
 import Sidebar from './sidebar';
 import groupUtilities from 'client/mixins/groupsUtilities';
 
-import bFormSelect from 'bootstrap-vue/lib/components/form-select';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-
 import positiveIcon from 'assets/svg/positive.svg';
 
 function _mapCategories (guilds) {
@@ -65,7 +61,7 @@ function _mapCategories (guilds) {
 
 export default {
   mixins: [groupUtilities],
-  components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
+  components: { PublicGuildItem, MugenScroll, Sidebar },
   data () {
     return {
       icons: Object.freeze({
@@ -193,7 +189,7 @@ export default {
     },
     createGroup () {
       this.$store.state.editingGroup = {};
-      this.$root.$emit('show::modal', 'guild-form');
+      this.$root.$emit('bv::show::modal', 'guild-form');
     },
   },
 };
diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index ffa846264d..357388dbe9 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -491,11 +491,6 @@ import groupChallenges from '../challenges/groupChallenges';
 import groupGemsModal from 'client/components/groups/groupGemsModal';
 import markdownDirective from 'client/directives/markdown';
 
-import bCollapse from 'bootstrap-vue/lib/components/collapse';
-import bCard from 'bootstrap-vue/lib/components/card';
-import bToggle from 'bootstrap-vue/lib/directives/toggle';
-import bTooltip from 'bootstrap-vue/lib/components/tooltip';
-
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
 import likeIcon from 'assets/svg/like.svg';
@@ -517,9 +512,6 @@ export default {
   components: {
     membersModal,
     startQuestModal,
-    bCollapse,
-    bCard,
-    bTooltip,
     groupFormModal,
     chatMessage,
     inviteModal,
@@ -529,7 +521,6 @@ export default {
     groupGemsModal,
   },
   directives: {
-    bToggle,
     markdown: markdownDirective,
   },
   data () {
@@ -735,7 +726,7 @@ export default {
     showMemberModal () {
       this.$store.state.memberModalOptions.groupId = this.group._id;
       this.$store.state.memberModalOptions.group = this.group;
-      this.$root.$emit('show::modal', 'members-modal');
+      this.$root.$emit('bv::show::modal', 'members-modal');
     },
     async sendMessage () {
       if (!this.newMessage) return;
@@ -755,14 +746,14 @@ export default {
     },
     updateGuild () {
       this.$store.state.editingGroup = this.group;
-      this.$root.$emit('show::modal', 'guild-form');
+      this.$root.$emit('bv::show::modal', 'guild-form');
     },
     showInviteModal () {
-      this.$root.$emit('show::modal', 'invite-modal');
+      this.$root.$emit('bv::show::modal', 'invite-modal');
     },
     async fetchGuild () {
       if (this.searchId === 'party' && !this.user.party._id) {
-        this.$root.$emit('show::modal', 'create-party-modal');
+        this.$root.$emit('bv::show::modal', 'create-party-modal');
         return;
       }
 
@@ -783,10 +774,10 @@ export default {
       }
     },
     openStartQuestModal () {
-      this.$root.$emit('show::modal', 'start-quest-modal');
+      this.$root.$emit('bv::show::modal', 'start-quest-modal');
     },
     openQuestDetails () {
-      this.$root.$emit('show::modal', 'quest-details');
+      this.$root.$emit('bv::show::modal', 'quest-details');
     },
     checkForAchievements () {
       // Checks if user's party has reached 2 players for the first time.
@@ -871,7 +862,7 @@ export default {
       });
 
       if (hasQuests) {
-        this.$root.$emit('show::modal', 'start-quest-modal');
+        this.$root.$emit('bv::show::modal', 'start-quest-modal');
         return;
       }
       // $rootScope.$state.go('options.inventory.quests');
@@ -880,7 +871,7 @@ export default {
       let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: leader._id });
       this.$store.state.profileUser = heroDetails.data.data;
       this.$store.state.profileOptions.startingPage = 'profile';
-      this.$root.$emit('show::modal', 'profile');
+      this.$root.$emit('bv::show::modal', 'profile');
     },
     async questAbort () {
       if (!confirm(this.$t('sureAbort'))) return;
@@ -902,7 +893,7 @@ export default {
       this.user.party.quest = quest;
     },
     showGroupGems () {
-      this.$root.$emit('show::modal', 'group-gems-modal');
+      this.$root.$emit('bv::show::modal', 'group-gems-modal');
     },
   },
 };
diff --git a/website/client/components/groups/groupFormModal.vue b/website/client/components/groups/groupFormModal.vue
index d288815613..e8218ca75e 100644
--- a/website/client/components/groups/groupFormModal.vue
+++ b/website/client/components/groups/groupFormModal.vue
@@ -168,13 +168,6 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-import bBtn from 'bootstrap-vue/lib/components/button';
-import bFormInput from 'bootstrap-vue/lib/components/form-input';
-import bFormCheckbox from 'bootstrap-vue/lib/components/form-checkbox';
-import bFormSelect from 'bootstrap-vue/lib/components/form-select';
-import bTooltip from 'bootstrap-vue/lib/components/tooltip';
-
 import { mapState } from 'client/libs/store';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
 import markdownDirective from 'client/directives/markdown';
@@ -191,12 +184,6 @@ import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '../../../common/script/constants';
 
 export default {
   components: {
-    bModal,
-    bBtn,
-    bFormInput,
-    bFormCheckbox,
-    bFormSelect,
-    bTooltip,
     toggleSwitch,
   },
   directives: {
@@ -465,7 +452,7 @@ export default {
       if (newgroup && newgroup._id) {
         this.$router.push(`/groups/guild/${newgroup._id}`);
       }
-      this.$root.$emit('hide::modal', 'guild-form');
+      this.$root.$emit('bv::hide::modal', 'guild-form');
     },
     resetWorkingGroup () {
       this.workingGroup = {
diff --git a/website/client/components/groups/groupGemsModal.vue b/website/client/components/groups/groupGemsModal.vue
index 70a2f9cba0..769451d6b9 100644
--- a/website/client/components/groups/groupGemsModal.vue
+++ b/website/client/components/groups/groupGemsModal.vue
@@ -17,15 +17,10 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'group-gems-modal');
+      this.$root.$emit('bv::hide::modal', 'group-gems-modal');
     },
   },
 };
diff --git a/website/client/components/groups/groupPlan.vue b/website/client/components/groups/groupPlan.vue
index ff58f8c9c6..239ee45c32 100644
--- a/website/client/components/groups/groupPlan.vue
+++ b/website/client/components/groups/groupPlan.vue
@@ -323,7 +323,6 @@ div
 import paymentsMixin from '../../mixins/payments';
 import amazonPaymentsModal from '../payments/amazonModal';
 import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import group from 'assets/svg/group.svg';
 import amazonpay from 'assets/svg/amazonpay.svg';
 import positiveIcon from 'assets/svg/positive.svg';
@@ -332,7 +331,6 @@ export default {
   mixins: [paymentsMixin],
   components: {
     amazonPaymentsModal,
-    bModal,
   },
   data () {
     return {
@@ -381,7 +379,7 @@ export default {
   methods: {
     launchModal () {
       this.changePage(this.PAGES.CREATE_GROUP);
-      this.$root.$emit('show::modal', 'group-plan-modal');
+      this.$root.$emit('bv::show::modal', 'group-plan-modal');
     },
     changePage (page) {
       this.activePage = page;
diff --git a/website/client/components/groups/inviteModal.vue b/website/client/components/groups/inviteModal.vue
index 9ff160377d..8638ebf1b4 100644
--- a/website/client/components/groups/inviteModal.vue
+++ b/website/client/components/groups/inviteModal.vue
@@ -53,14 +53,10 @@ import { mapState } from 'client/libs/store';
 
 import filter from 'lodash/filter';
 import map from 'lodash/map';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import notifications from 'client/mixins/notifications';
 import * as Analytics from 'client/libs/analytics';
 
 export default {
-  components: {
-    bModal,
-  },
   mixins: [notifications],
   props: ['group'],
   data () {
@@ -143,7 +139,7 @@ export default {
       // } else {
       //   this.$router.push(`/groups/guilds/${this.group._id}`);
       // }
-      this.$root.$emit('hide::modal', 'invite-modal');
+      this.$root.$emit('bv::hide::modal', 'invite-modal');
       // @TODO: error?
       // _resetInvitees();
     },
diff --git a/website/client/components/groups/membersModal.vue b/website/client/components/groups/membersModal.vue
index 3a978e2199..c5a897667a 100644
--- a/website/client/components/groups/membersModal.vue
+++ b/website/client/components/groups/membersModal.vue
@@ -173,9 +173,6 @@ div
 
 <script>
 import sortBy from 'lodash/sortBy';
-import bModal from 'bootstrap-vue/lib/components/modal';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import { mapState } from 'client/libs/store';
 
 import removeMemberModal from 'client/components/members/removeMemberModal';
@@ -188,9 +185,6 @@ import dots from 'assets/svg/dots.svg';
 export default {
   props: ['hideBadge'],
   components: {
-    bModal,
-    bDropdown,
-    bDropdownItem,
     MemberDetails,
     removeMemberModal,
   },
@@ -330,18 +324,25 @@ export default {
         memberId: uid,
       });
 
-      this.$root.$emit('show::modal', 'members-modal');
+      this.$root.$emit('bv::show::modal', 'members-modal');
     },
     async removeMember (member, index) {
       this.memberToRemove = member;
       this.memberToRemove.index = index;
-      this.$root.$emit('show::modal', 'remove-member');
+      this.$root.$emit('bv::show::modal', 'remove-member');
     },
     memberRemoved () {
       this.members.splice(this.memberToRemove.index, 1);
       this.group.memberCount -= 1;
       this.memberToRemove =  {};
     },
+    async quickReply (uid) {
+      this.memberToReply = uid;
+      await this.$store.dispatch('members:selectMember', {
+        memberId: uid,
+      });
+      this.$root.$emit('bv::show::modal', 'private-message'); //  MemberModalCtrl
+    },
     async addManager (memberId) {
       await this.$store.dispatch('guilds:addManager', {
         groupId: this.groupId,
@@ -357,7 +358,7 @@ export default {
       alert(this.$t('managerRemoved'));
     },
     close () {
-      this.$root.$emit('hide::modal', 'members-modal');
+      this.$root.$emit('bv::hide::modal', 'members-modal');
     },
     sort (option) {
       this.sortOption = option;
diff --git a/website/client/components/groups/myGuilds.vue b/website/client/components/groups/myGuilds.vue
index 6ad253820d..68ca0edf15 100644
--- a/website/client/components/groups/myGuilds.vue
+++ b/website/client/components/groups/myGuilds.vue
@@ -67,9 +67,6 @@ import { mapState } from 'client/libs/store';
 import groupUtilities from 'client/mixins/groupsUtilities';
 
 import MugenScroll from 'vue-mugen-scroll';
-import bFormSelect from 'bootstrap-vue/lib/components/form-select';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
 import PublicGuildItem from './publicGuildItem';
 import Sidebar from './sidebar';
@@ -79,7 +76,7 @@ import positiveIcon from 'assets/svg/positive.svg';
 
 export default {
   mixins: [groupUtilities],
-  components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
+  components: { PublicGuildItem, MugenScroll, Sidebar },
   data () {
     return {
       icons: Object.freeze({
@@ -142,7 +139,7 @@ export default {
     },
     createGroup () {
       this.$store.state.editingGroup = {};
-      this.$root.$emit('show::modal', 'guild-form');
+      this.$root.$emit('bv::show::modal', 'guild-form');
     },
   },
 };
diff --git a/website/client/components/groups/newPartyModal.jade b/website/client/components/groups/newPartyModal.jade
index 9d2eede077..7cecf2c272 100644
--- a/website/client/components/groups/newPartyModal.jade
+++ b/website/client/components/groups/newPartyModal.jade
@@ -1,20 +1,20 @@
-<template lang="pug">
-div
-  button.btn.btn-primary(b-btn, @click="$root.$emit('show::modal','new-party-modal')") {{ $t('viewMembers') }}
-
-  b-modal#new-party-modal(:title="$t('createGuild')", size='lg')
-    .header-wrap(slot="modal-header")
-      .row
-        .col-6
-          h1(v-once) {{$t('members')}}
-        .col-6
-          button(type="button" aria-label="Close" class="close")
-            span(aria-hidden="true") ×
-      .row
-        .form-group.col-6
-          input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-        .col-4.offset-2
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
-</template>
+<template lang="pug">
+div
+  button.btn.btn-primary(b-btn, @click="$root.$emit('bv::show::modal','new-party-modal')") {{ $t('viewMembers') }}
+
+  b-modal#new-party-modal(:title="$t('createGuild')", size='lg')
+    .header-wrap(slot="modal-header")
+      .row
+        .col-6
+          h1(v-once) {{$t('members')}}
+        .col-6
+          button(type="button" aria-label="Close" class="close")
+            span(aria-hidden="true") ×
+      .row
+        .form-group.col-6
+          input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
+        .col-4.offset-2
+          span.dropdown-label {{ $t('sortBy') }}
+          b-dropdown(:text="$t('sort')", right=true)
+            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
+</template>
diff --git a/website/client/components/groups/questDetailsModal.vue b/website/client/components/groups/questDetailsModal.vue
index c86c91e733..78c3dc6c48 100644
--- a/website/client/components/groups/questDetailsModal.vue
+++ b/website/client/components/groups/questDetailsModal.vue
@@ -136,8 +136,6 @@
 
 <script>
 import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import quests from 'common/script/content/quests';
 
 import copyIcon from 'assets/svg/copy.svg';
@@ -154,7 +152,6 @@ import questDialogContent from '../shops/quests/questDialogContent';
 export default {
   props: ['group'],
   components: {
-    bModal,
     questDialogDrops,
     questDialogContent,
   },
@@ -210,7 +207,7 @@ export default {
       this.close();
     },
     close () {
-      this.$root.$emit('hide::modal', 'quest-details');
+      this.$root.$emit('bv::hide::modal', 'quest-details');
     },
   },
 };
diff --git a/website/client/components/groups/startQuestModal.vue b/website/client/components/groups/startQuestModal.vue
index 2f48d519bc..38168eae62 100644
--- a/website/client/components/groups/startQuestModal.vue
+++ b/website/client/components/groups/startQuestModal.vue
@@ -98,7 +98,6 @@
 <script>
 import { mapState } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
-import bModal from 'bootstrap-vue/lib/components/modal';
 
 import quests from 'common/script/content/quests';
 
@@ -116,7 +115,6 @@ import questDialogContent from '../shops/quests/questDialogContent';
 export default {
   props: ['group'],
   components: {
-    bModal,
     questDialogDrops,
     questDialogContent,
   },
@@ -175,7 +173,7 @@ export default {
 
       this.loading = false;
 
-      this.$root.$emit('hide::modal', 'start-quest-modal');
+      this.$root.$emit('bv::hide::modal', 'start-quest-modal');
     },
   },
 };
diff --git a/website/client/components/hall/heroes.vue b/website/client/components/hall/heroes.vue
index c910c66148..732594f206 100644
--- a/website/client/components/hall/heroes.vue
+++ b/website/client/components/hall/heroes.vue
@@ -201,7 +201,7 @@ export default {
       let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: hero._id });
       this.$store.state.profileUser = heroDetails.data.data;
       this.$store.state.profileOptions.startingPage = 'profile';
-      this.$root.$emit('show::modal', 'profile');
+      this.$root.$emit('bv::show::modal', 'profile');
     },
     userLevelStyle () {
       // @TODO: implement
diff --git a/website/client/components/header/index.vue b/website/client/components/header/index.vue
index 39ce61a380..0a59e136b6 100644
--- a/website/client/components/header/index.vue
+++ b/website/client/components/header/index.vue
@@ -159,10 +159,10 @@ export default {
         this.$store.state.memberModalOptions.groupId = this.user.party._id;
         // @TODO: do we need to fetch party?
         // this.$store.state.memberModalOptions.group = this.$store.state.party;
-        this.$root.$emit('show::modal', 'members-modal');
+        this.$root.$emit('bv::show::modal', 'members-modal');
         return;
       }
-      this.$root.$emit('show::modal', 'create-party-modal');
+      this.$root.$emit('bv::show::modal', 'create-party-modal');
     },
     setPartyMembersWidth ($event) {
       if (this.currentWidth !== $event.width) {
diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index 9c40363b85..2d0a7ee2f0 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -3,10 +3,13 @@ div
   inbox-modal
   creator-intro
   profile
-  nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-md
+  b-navbar.navbar.navbar-inverse.fixed-top.navbar-expand-md(type="dark")
     .navbar-header
-      .logo.svg-icon.hidden-lg-down(v-html="icons.logo")
-      .svg-icon.gryphon.hidden-xl-up
+      .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
+      .svg-icon.gryphon.d-md-block.d-none.d-xl-none
+      .svg-icon.gryphon.d-sm-block.d-lg-none.d-md-none
+
+    b-nav-toggle(target='nav_collapse')
     b-collapse#nav_collapse.collapse.navbar-collapse(is-nav)
       ul.navbar-nav.mr-auto
         router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
@@ -67,7 +70,6 @@ div
           .svg-icon(v-html="icons.sync")
         notification-menu.item-with-icon
         user-dropdown.item-with-icon
-    b-nav-toggle(target='nav_collapse')
 </template>
 
 <style lang="scss" scoped>
@@ -92,12 +94,20 @@ div
       background-size: cover;
       color: $white;
       margin: 0 auto;
+
+    }
+
+    .svg-icon.gryphon.d-sm-block {
+
+      position: absolute;
+      left: calc(50% - 30px);
+      top: 1em;
     }
   }
 
   @media only screen and (max-width: 990px) {
     #nav_collapse {
-      margin-top: 1.3em;
+      margin-top: 0.6em;
       background-color: $purple-200;
     }
   }
@@ -122,7 +132,7 @@ div
   .nav-item {
     .nav-link {
       font-size: 16px;
-      color: $white;
+      color: $white !important;
       font-weight: bold;
       line-height: 1.5;
       padding: 16px 24px;
@@ -131,7 +141,7 @@ div
 
     &:hover {
       .nav-link {
-        color: $white;
+        color: $white !important;
         background: $purple-200;
       }
     }
@@ -143,10 +153,10 @@ div
     }
   }
 
-  // Make the dropdown menu open on hover    
-  .dropdown:hover .dropdown-menu {    
-   display: block;   
-   margin-top: 0; // remove the gap so it doesn't close    
+  // Make the dropdown menu open on hover
+  .dropdown:hover .dropdown-menu {
+   display: block;
+   margin-top: 0; // remove the gap so it doesn't close
   }
 
   .dropdown-menu {
@@ -188,6 +198,7 @@ div
   .item-with-icon {
     color: $white;
     font-size: 16px;
+    font-weight: normal;
     white-space: nowrap;
 
     span {
@@ -220,12 +231,29 @@ div
   .gem:hover {
     cursor: pointer;
   }
+
+  .message-count {
+    background-color: $blue-50;
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
+    float: right;
+    color: $white;
+    text-align: center;
+    font-weight: bold;
+    font-size: 12px;
+  }
+
+  .message-count.top-count {
+    background-color: $red-50;
+    position: absolute;
+    right: 0;
+    top: -0.5em;
+    padding: .2em;
+  }
 </style>
 
 <script>
-import bNavToggle from 'bootstrap-vue/lib/components/nav-toggle';
-import bCollapse from 'bootstrap-vue/lib/components/collapse';
-
 import { mapState, mapGetters } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
 import gemIcon from 'assets/svg/gem.svg';
@@ -238,7 +266,6 @@ import notificationMenu from './notificationsDropdown';
 import creatorIntro from '../creatorIntro';
 import profile from '../userMenu/profile';
 import userDropdown from './userDropdown';
-import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
 
 export default {
   components: {
@@ -247,11 +274,6 @@ export default {
     notificationMenu,
     creatorIntro,
     profile,
-    bNavToggle,
-    bCollapse,
-  },
-  directives: {
-    bTooltip,
   },
   data () {
     return {
@@ -292,7 +314,7 @@ export default {
       this.$store.state.groupPlans = await this.$store.dispatch('guilds:getGroupPlans');
     },
     openPartyModal () {
-      this.$root.$emit('show::modal', 'create-party-modal');
+      this.$root.$emit('bv::show::modal', 'create-party-modal');
     },
     showBuyGemsModal (startingPage) {
       this.$store.state.gemModalOptions.startingPage = startingPage;
@@ -304,7 +326,7 @@ export default {
         eventLabel: 'Gems > Toolbar',
       });
 
-      this.$root.$emit('show::modal', 'buy-gems', {alreadyTracked: true});
+      this.$root.$emit('bv::show::modal', 'buy-gems', {alreadyTracked: true});
     },
   },
 };
diff --git a/website/client/components/header/userDropdown.vue b/website/client/components/header/userDropdown.vue
index b5f37108df..60ead51a3a 100644
--- a/website/client/components/header/userDropdown.vue
+++ b/website/client/components/header/userDropdown.vue
@@ -69,16 +69,12 @@ import MenuDropdown from '../ui/customMenuDropdown';
 import axios from 'axios';
 import markPMSRead from 'common/script/ops/markPMSRead';
 import MessageCount from './messageCount';
-import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
 
 export default {
   components: {
     MenuDropdown,
     MessageCount,
   },
-  directives: {
-    bTooltip,
-  },
   data () {
     return {
       icons: Object.freeze({
@@ -94,17 +90,17 @@ export default {
       this.$store.state.avatarEditorOptions.editingUser = true;
       this.$store.state.avatarEditorOptions.startingPage = startingPage;
       this.$store.state.avatarEditorOptions.subpage = subpage;
-      this.$root.$emit('show::modal', 'avatar-modal');
+      this.$root.$emit('bv::show::modal', 'avatar-modal');
     },
     showInbox () {
       markPMSRead(this.user);
       axios.post('/api/v3/user/mark-pms-read');
-      this.$root.$emit('show::modal', 'inbox-modal');
+      this.$root.$emit('bv::show::modal', 'inbox-modal');
     },
     showProfile (startingPage) {
       this.$store.state.profileUser = this.user;
       this.$store.state.profileOptions.startingPage = startingPage;
-      this.$root.$emit('show::modal', 'profile');
+      this.$root.$emit('bv::show::modal', 'profile');
     },
     showBuyGemsModal (startingPage) {
       this.$store.state.gemModalOptions.startingPage = startingPage;
@@ -116,7 +112,7 @@ export default {
         eventLabel: 'Gems > User Dropdown',
       });
 
-      this.$root.$emit('show::modal', 'buy-gems', {alreadyTracked: true});
+      this.$root.$emit('bv::show::modal', 'buy-gems', {alreadyTracked: true});
     },
     logout () {
       this.$store.dispatch('auth:logout');
diff --git a/website/client/components/inventory/equipment/equipGearModal.vue b/website/client/components/inventory/equipment/equipGearModal.vue
index 6b7f689e3d..213c63683c 100644
--- a/website/client/components/inventory/equipment/equipGearModal.vue
+++ b/website/client/components/inventory/equipment/equipGearModal.vue
@@ -41,6 +41,10 @@
   #equipgear-modal {
     @include centeredModal();
 
+    .modal-dialog {
+      width: 330px;
+    }
+
     .content {
       text-align: center;
     }
@@ -88,7 +92,6 @@
 
 <script>
   import { mapState } from 'client/libs/store';
-  import bModal from 'bootstrap-vue/lib/components/modal';
 
   import svgClose from 'assets/svg/close.svg';
 
@@ -97,7 +100,6 @@
 
   export default {
     components: {
-      bModal,
       Avatar,
       EquipmentAttributesGrid,
     },
@@ -144,7 +146,7 @@
         this.hideDialog();
       },
       hideDialog () {
-        this.$root.$emit('hide::modal', 'equipgear-modal');
+        this.$root.$emit('bv::hide::modal', 'equipgear-modal');
       },
       memberOverrideAvatarGear (gear) {
         return {
diff --git a/website/client/components/inventory/equipment/index.vue b/website/client/components/inventory/equipment/index.vue
index 198938e6db..053bc19e66 100644
--- a/website/client/components/inventory/equipment/index.vue
+++ b/website/client/components/inventory/equipment/index.vue
@@ -147,9 +147,6 @@ import throttle from 'lodash/throttle';
 import _sortBy from 'lodash/sortBy';
 import _reverse from 'lodash/reverse';
 
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-import bPopover from 'bootstrap-vue/lib/components/popover';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
 
 import Item from 'client/components/inventory/item';
@@ -181,9 +178,6 @@ export default {
     EquipmentAttributesPopover,
     StarBadge,
     Drawer,
-    bDropdown,
-    bDropdownItem,
-    bPopover,
     toggleSwitch,
     EquipGearModal,
   },
diff --git a/website/client/components/inventory/item.vue b/website/client/components/inventory/item.vue
index 1b3879d0d3..a1f905d4ed 100644
--- a/website/client/components/inventory/item.vue
+++ b/website/client/components/inventory/item.vue
@@ -22,13 +22,9 @@ div(v-else)
 </template>
 
 <script>
-import bPopover from 'bootstrap-vue/lib/components/popover';
 import uuid from 'uuid';
 
 export default {
-  components: {
-    bPopover,
-  },
   props: {
     item: {
       type: Object,
diff --git a/website/client/components/inventory/items/cards-modal.vue b/website/client/components/inventory/items/cards-modal.vue
index 594ded98e3..a2581ceffb 100644
--- a/website/client/components/inventory/items/cards-modal.vue
+++ b/website/client/components/inventory/items/cards-modal.vue
@@ -19,7 +19,6 @@
 <script>
 import axios from 'axios';
 import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import markdown from 'client/directives/markdown';
 
 export default {
@@ -27,9 +26,6 @@ export default {
   directives: {
     markdown,
   },
-  components: {
-    bModal,
-  },
   computed: {
     ...mapState({
       user: 'user.data',
@@ -64,7 +60,7 @@ export default {
       this.close();
     },
     close () {
-      this.$root.$emit('hide::modal', 'card');
+      this.$root.$emit('bv::hide::modal', 'card');
     },
   },
 };
diff --git a/website/client/components/inventory/items/index.vue b/website/client/components/inventory/items/index.vue
index e39dcb6131..5c3d9b8f42 100644
--- a/website/client/components/inventory/items/index.vue
+++ b/website/client/components/inventory/items/index.vue
@@ -180,8 +180,6 @@ import { mapState } from 'client/libs/store';
 import each from 'lodash/each';
 import throttle from 'lodash/throttle';
 
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Item from 'client/components/inventory/item';
 import ItemRows from 'client/components/ui/itemRows';
 import CountBadge from 'client/components/ui/countBadge';
@@ -227,8 +225,6 @@ export default {
   components: {
     Item,
     ItemRows,
-    bDropdown,
-    bDropdownItem,
     HatchedPetDialog,
     CountBadge,
     startQuestModal,
@@ -408,7 +404,7 @@ export default {
           cardType: item.key,
           messageOptions: this.content.cardTypes[item.key].messageOptions,
         };
-        this.$root.$emit('show::modal', 'card');
+        this.$root.$emit('bv::show::modal', 'card');
         return;
       }
 
@@ -430,7 +426,7 @@ export default {
           this.$root.$emit('selectMembersModal::showItem', item);
         }
       } else if (groupKey === 'quests') {
-        this.$root.$emit('show::modal', 'start-quest-modal');
+        this.$root.$emit('bv::show::modal', 'start-quest-modal');
 
         this.$root.$emit('selectQuest', item);
       }
diff --git a/website/client/components/inventory/stable/foodItem.vue b/website/client/components/inventory/stable/foodItem.vue
index 4811cbfea1..dfb15032f5 100644
--- a/website/client/components/inventory/stable/foodItem.vue
+++ b/website/client/components/inventory/stable/foodItem.vue
@@ -22,7 +22,6 @@ div
 </template>
 
 <script>
-import bPopover from 'bootstrap-vue/lib/components/popover';
 import DragDropDirective from 'client/directives/dragdrop.directive';
 
 import CountBadge from 'client/components/ui/countBadge';
@@ -31,7 +30,6 @@ import uuid from 'uuid';
 
 export default {
   components: {
-    bPopover,
     CountBadge,
   },
   directives: {
diff --git a/website/client/components/inventory/stable/hatchedPetDialog.vue b/website/client/components/inventory/stable/hatchedPetDialog.vue
index d02d374eb8..65365b87f0 100644
--- a/website/client/components/inventory/stable/hatchedPetDialog.vue
+++ b/website/client/components/inventory/stable/hatchedPetDialog.vue
@@ -63,13 +63,9 @@
 
 
 <script>
-  import bModal from 'bootstrap-vue/lib/components/modal';
   import markdownDirective from 'client/directives/markdown';
 
   export default {
-    components: {
-      bModal,
-    },
     data () {
       return {
         pet: null,
@@ -90,12 +86,12 @@
     methods: {
       openDialog (item) {
         this.pet = item;
-        this.$root.$emit('show::modal', 'hatchedPet-modal');
+        this.$root.$emit('bv::show::modal', 'hatchedPet-modal');
       },
 
       close () {
         this.$emit('closed', this.item);
-        this.$root.$emit('hide::modal', 'hatchedPet-modal');
+        this.$root.$emit('bv::hide::modal', 'hatchedPet-modal');
         this.pet = null;
       },
     },
diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
index f32d8987be..fe016dac5e 100644
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -82,7 +82,7 @@
 
         .pet-row.d-flex(
           v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-          v-if='index === 0 || showMore === petGroup.key')
+          v-if='index === 0 || $_openedItemRows_isToggled(petGroup.key)')
           .pet-group(
             v-for='item in group'
             v-drag.drop.food="item.key",
@@ -116,7 +116,7 @@
                 starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
 
         .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
-          | {{ showMore === petGroup.key ? $t('showLess') : $t('showMore') }}
+          | {{ $_openedItemRows_isToggled(petGroup.key) ? $t('showLess') : $t('showMore') }}
 
       h2
         | {{ $t('mounts') }}
@@ -131,7 +131,7 @@
         h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
 
         .pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
-          v-if='index === 0 || showMore === mountGroup.key')
+          v-if='index === 0 || $_openedItemRows_isToggled(mountGroup.key)')
           .pet-group(v-for='item in group')
             mountItem(
               :item="item",
@@ -152,7 +152,7 @@
                 )
 
         .btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
-          | {{ showMore === mountGroup.key ? $t('showLess') : $t('showMore') }}
+          | {{ $_openedItemRows_isToggled(mountGroup.key) ? $t('showLess') : $t('showMore') }}
 
       drawer(
         :title="$t('quickInventory')",
@@ -488,11 +488,6 @@
 <script>
   import {mapState} from 'client/libs/store';
 
-  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-  import bPopover from 'bootstrap-vue/lib/components/popover';
-  import bModal from 'bootstrap-vue/lib/components/modal';
-
   import _each from 'lodash/each';
   import _sortBy from 'lodash/sortBy';
   import _filter from 'lodash/filter';
@@ -522,6 +517,7 @@
   import svgClose from 'assets/svg/close.svg';
 
   import notifications from 'client/mixins/notifications';
+  import openedItemRowsMixin from 'client/mixins/openedItemRows';
 
   // TODO Normalize special pets and mounts
   // import Store from 'client/store';
@@ -531,7 +527,7 @@
   let lastMouseMoveEvent = {};
 
   export default {
-    mixins: [notifications],
+    mixins: [notifications, openedItemRowsMixin],
     components: {
       PetItem,
       Item,
@@ -539,10 +535,6 @@
       FoodItem,
       MountItem,
       Drawer,
-      bDropdown,
-      bDropdownItem,
-      bPopover,
-      bModal,
       toggleSwitch,
       StarBadge,
       CountBadge,
@@ -583,7 +575,6 @@
         currentDraggingFood: null,
 
         selectedDrawerTab: 0,
-        showMore: '',
       };
     },
     watch: {
@@ -712,11 +703,7 @@
     },
     methods: {
       setShowMore (key) {
-        if (this.showMore === key) {
-          this.showMore = '';
-          return;
-        }
-        this.showMore = key;
+        this.$_openedItemRows_toggleByType(key, !this.$_openedItemRows_isToggled(key));
       },
       getAnimalList (animalGroup, type) {
         let key = animalGroup.key;
@@ -967,7 +954,7 @@
           // opens the hatch dialog
           this.hatchablePet = pet;
 
-          this.$root.$emit('show::modal', 'hatching-modal');
+          this.$root.$emit('bv::show::modal', 'hatching-modal');
         }
       },
 
@@ -980,7 +967,7 @@
       },
 
       closeHatchPetDialog () {
-        this.$root.$emit('hide::modal', 'hatching-modal');
+        this.$root.$emit('bv::hide::modal', 'hatching-modal');
       },
 
       resetHatchablePet ($event) {
diff --git a/website/client/components/inventory/stable/mountItem.vue b/website/client/components/inventory/stable/mountItem.vue
index 6ede37aa13..28dfc8a8fd 100644
--- a/website/client/components/inventory/stable/mountItem.vue
+++ b/website/client/components/inventory/stable/mountItem.vue
@@ -16,13 +16,9 @@ div
 </template>
 
 <script>
-  import bPopover from 'bootstrap-vue/lib/components/popover';
   import uuid from 'uuid';
 
   export default {
-    components: {
-      bPopover,
-    },
     props: {
       item: {
         type: Object,
diff --git a/website/client/components/inventory/stable/petItem.vue b/website/client/components/inventory/stable/petItem.vue
index 6adbee6cde..6acb90d1fe 100644
--- a/website/client/components/inventory/stable/petItem.vue
+++ b/website/client/components/inventory/stable/petItem.vue
@@ -35,13 +35,9 @@ div
 </style>
 
 <script>
-  import bPopover from 'bootstrap-vue/lib/components/popover';
   import uuid from 'uuid';
 
   export default {
-    components: {
-      bPopover,
-    },
     props: {
       item: {
         type: Object,
diff --git a/website/client/components/memberDetails.vue b/website/client/components/memberDetails.vue
index 4b71dc5e52..a066d796be 100644
--- a/website/client/components/memberDetails.vue
+++ b/website/client/components/memberDetails.vue
@@ -248,7 +248,7 @@ export default {
     showMemberModal (member) {
       this.$store.state.profileUser = member;
       this.$store.state.profileOptions.startingPage = 'profile';
-      this.$root.$emit('show::modal', 'profile');
+      this.$root.$emit('bv::show::modal', 'profile');
     },
   },
   computed: {
diff --git a/website/client/components/members/removeMemberModal.vue b/website/client/components/members/removeMemberModal.vue
index fbdaa37206..e6172f236a 100644
--- a/website/client/components/members/removeMemberModal.vue
+++ b/website/client/components/members/removeMemberModal.vue
@@ -21,13 +21,8 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
   props: ['memberToRemove', 'groupId'],
-  components: {
-    bModal,
-  },
   data () {
     return {
       removeMessage: '',
@@ -46,7 +41,7 @@ export default {
       this.close();
     },
     close () {
-      this.$root.$emit('hide::modal', 'remove-member');
+      this.$root.$emit('bv::hide::modal', 'remove-member');
     },
   },
 };
diff --git a/website/client/components/modifyInventory.vue b/website/client/components/modifyInventory.vue
index a0460c0acd..4747a5e1c9 100644
--- a/website/client/components/modifyInventory.vue
+++ b/website/client/components/modifyInventory.vue
@@ -255,16 +255,12 @@
 
 <script>
 import axios from 'axios';
-import bModal from 'bootstrap-vue/lib/components/modal';
 
 import { mapState } from 'client/libs/store';
 
 import Content from '../../common/script/content';
 
 export default {
-  components: {
-    bModal,
-  },
   computed: {
     ...mapState({user: 'user.data'}),
   },
@@ -313,7 +309,7 @@ export default {
       // @TODO: Sync
     },
     close () {
-      this.$root.$emit('hide::modal', 'modify-inventory');
+      this.$root.$emit('bv::hide::modal', 'modify-inventory');
     },
   },
 };
diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
index 8426e90cd6..c5945ceec4 100644
--- a/website/client/components/notifications.vue
+++ b/website/client/components/notifications.vue
@@ -210,15 +210,15 @@ export default {
   },
   watch: {
     baileyShouldShow () {
-      this.$root.$emit('show::modal', 'new-stuff');
+      this.$root.$emit('bv::show::modal', 'new-stuff');
     },
     userHp (after, before) {
       if (after <= 0) {
         this.playSound('Death');
-        this.$root.$emit('show::modal', 'death');
+        this.$root.$emit('bv::show::modal', 'death');
         // @TODO: {keyboard:false, backdrop:'static'}
       } else if (after <= 30 && !this.user.flags.warnedLowHealth) {
-        this.$root.$emit('show::modal', 'low-health');
+        this.$root.$emit('bv::show::modal', 'low-health');
         // @TODO: {keyboard:false, backdrop:'static', controller:'UserCtrl', track:'Health Warning'}
       }
       if (after === before) return;
@@ -262,7 +262,7 @@ export default {
     },
     userClassSelect (after) {
       if (!after) return;
-      this.$root.$emit('show::modal', 'choose-class');
+      this.$root.$emit('bv::show::modal', 'choose-class');
       // @TODO: {controller:'UserCtrl', keyboard:false, backdrop:'static'}
     },
     userNotifications (after) {
@@ -274,15 +274,15 @@ export default {
     },
     armoireEmpty (after, before) {
       if (after === before || after === false) return;
-      this.$root.$emit('show::modal', 'armoire-empty');
+      this.$root.$emit('bv::show::modal', 'armoire-empty');
     },
     questCompleted () {
       if (!this.questCompleted) return;
-      this.$root.$emit('show::modal', 'quest-completed');
+      this.$root.$emit('bv::show::modal', 'quest-completed');
     },
     invitedToQuest (after) {
       if (after !== true) return;
-      this.$root.$emit('show::modal', 'quest-invitation');
+      this.$root.$emit('bv::show::modal', 'quest-invitation');
     },
   },
   mounted () {
@@ -312,25 +312,25 @@ export default {
     checkUserAchievements () {
       // List of prompts for user on changes. Sounds like we may need a refactor here, but it is clean for now
       if (this.user.flags.newStuff) {
-        this.$root.$emit('show::modal', 'new-stuff');
+        this.$root.$emit('bv::show::modal', 'new-stuff');
       }
 
       if (!this.user.flags.welcomed) {
         this.$store.state.avatarEditorOptions.editingUser = false;
-        this.$root.$emit('show::modal', 'avatar-modal');
+        this.$root.$emit('bv::show::modal', 'avatar-modal');
       }
 
       if (this.user.stats.hp <= 0) {
         this.playSound('Death');
-        this.$root.$emit('show::modal', 'death');
+        this.$root.$emit('bv::show::modal', 'death');
       }
 
       if (this.questCompleted) {
-        this.$root.$emit('show::modal', 'quest-completed');
+        this.$root.$emit('bv::show::modal', 'quest-completed');
       }
 
       if (this.userClassSelect) {
-        this.$root.$emit('show::modal', 'choose-class');
+        this.$root.$emit('bv::show::modal', 'choose-class');
       }
     },
     showLevelUpNotifications (newlevel) {
@@ -338,7 +338,7 @@ export default {
       this.playSound('Level_Up');
       if (this.user._tmp && this.user._tmp.drop && this.user._tmp.drop.type === 'Quest') return;
       if (this.unlockLevels[`${newlevel}`]) return;
-      if (!this.user.preferences.suppressModals.levelUp) this.$root.$emit('show::modal', 'level-up');
+      if (!this.user.preferences.suppressModals.levelUp) this.$root.$emit('bv::show::modal', 'level-up');
     },
     playSound (sound) {
       this.$root.$emit('playSound', sound);
@@ -397,7 +397,7 @@ export default {
       }
 
       this.levelBeforeYesterdailies = this.user.stats.lvl;
-      this.$root.$emit('show::modal', 'yesterdaily');
+      this.$root.$emit('bv::show::modal', 'yesterdaily');
     },
     async runYesterDailiesAction () {
       // Run Cron
@@ -449,50 +449,50 @@ export default {
           case 'GUILD_PROMPT':
             // @TODO: I'm pretty sure we can find better names for these
             if (notification.data.textletiant === -1) {
-              this.$root.$emit('show::modal', 'testing');
+              this.$root.$emit('bv::show::modal', 'testing');
             } else {
-              this.$root.$emit('show::modal', 'testingletiant');
+              this.$root.$emit('bv::show::modal', 'testingletiant');
             }
             break;
           case 'DROPS_ENABLED':
-            this.$root.$emit('show::modal', 'drops-enabled');
+            this.$root.$emit('bv::show::modal', 'drops-enabled');
             break;
           case 'REBIRTH_ENABLED':
-            this.$root.$emit('show::modal', 'rebirth-enabled');
+            this.$root.$emit('bv::show::modal', 'rebirth-enabled');
             break;
           case 'WON_CHALLENGE':
-            this.$root.$emit('show::modal', 'won-challenge');
+            this.$root.$emit('bv::show::modal', 'won-challenge');
             break;
           case 'STREAK_ACHIEVEMENT':
             this.streak(this.user.achievements.streak);
             this.playSound('Achievement_Unlocked');
             if (!this.user.preferences.suppressModals.streak) {
-              this.$root.$emit('show::modal', 'streak');
+              this.$root.$emit('bv::show::modal', 'streak');
             }
             break;
           case 'ULTIMATE_GEAR_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('show::modal', 'ultimate-gear');
+            this.$root.$emit('bv::show::modal', 'ultimate-gear');
             break;
           case 'REBIRTH_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('show::modal', 'rebirth');
+            this.$root.$emit('bv::show::modal', 'rebirth');
             break;
           case 'GUILD_JOINED_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('show::modal', 'joined-guild');
+            this.$root.$emit('bv::show::modal', 'joined-guild');
             break;
           case 'CHALLENGE_JOINED_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('show::modal', 'joined-challenge');
+            this.$root.$emit('bv::show::modal', 'joined-challenge');
             break;
           case 'INVITED_FRIEND_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('show::modal', 'invited-friend');
+            this.$root.$emit('bv::show::modal', 'invited-friend');
             break;
           case 'NEW_CONTRIBUTOR_LEVEL':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('show::modal', 'contributor');
+            this.$root.$emit('bv::show::modal', 'contributor');
             break;
           case 'CRON':
             if (notification.data) {
@@ -528,7 +528,7 @@ export default {
           case 'LOGIN_INCENTIVE':
             if (this.user.flags.tour.intro === this.TOUR_END && this.user.flags.welcomed) {
               this.notificationData = notification.data;
-              this.$root.$emit('show::modal', 'login-incentives');
+              this.$root.$emit('bv::show::modal', 'login-incentives');
             }
             break;
           default:
diff --git a/website/client/components/payments/amazonModal.vue b/website/client/components/payments/amazonModal.vue
index d9fdbc8869..abc36d1062 100644
--- a/website/client/components/payments/amazonModal.vue
+++ b/website/client/components/payments/amazonModal.vue
@@ -26,14 +26,10 @@
 <script>
 import axios from 'axios';
 import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
 
 const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
 
 export default {
-  components: {
-    bModal,
-  },
   props: ['amazonPaymentsProp'],
   data () {
     return {
diff --git a/website/client/components/payments/buyGemsModal.vue b/website/client/components/payments/buyGemsModal.vue
index efc9830bc1..26a7e5255a 100644
--- a/website/client/components/payments/buyGemsModal.vue
+++ b/website/client/components/payments/buyGemsModal.vue
@@ -340,7 +340,6 @@
 </style>
 
 <script>
-  import bModal from 'bootstrap-vue/lib/components/modal';
   import { mapState } from 'client/libs/store';
   import markdown from 'client/directives/markdown';
   import planGemLimits from 'common/script/libs/planGemLimits';
@@ -360,7 +359,6 @@
   export default {
     mixins: [paymentsMixin],
     components: {
-      bModal,
       planGemLimits,
       amazonPaymentsModal,
     },
@@ -400,7 +398,7 @@
     },
     methods: {
       close () {
-        this.$root.$emit('hide::modal', 'buy-gems');
+        this.$root.$emit('bv::hide::modal', 'buy-gems');
       },
     },
     watch: {
diff --git a/website/client/components/payments/sendGemsModal.vue b/website/client/components/payments/sendGemsModal.vue
index 572a98c58a..85ae63bd52 100644
--- a/website/client/components/payments/sendGemsModal.vue
+++ b/website/client/components/payments/sendGemsModal.vue
@@ -77,7 +77,6 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg')
 import toArray from 'lodash/toArray';
 import omitBy from 'lodash/omitBy';
 import orderBy from 'lodash/orderBy';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
 import paymentsMixin from 'client/mixins/payments';
@@ -88,9 +87,6 @@ const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
 
 export default {
   props: ['userReceivingGems'],
-  components: {
-    bModal,
-  },
   mixins: [paymentsMixin, notificationsMixin],
   data () {
     return {
@@ -144,7 +140,7 @@ export default {
       this.close();
     },
     close () {
-      this.$root.$emit('hide::modal', 'send-gems');
+      this.$root.$emit('bv::hide::modal', 'send-gems');
     },
   },
 };
diff --git a/website/client/components/private-message-modal.vue b/website/client/components/private-message-modal.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/website/client/components/selectMembersModal.vue b/website/client/components/selectMembersModal.vue
index 507ff70781..063abb9170 100644
--- a/website/client/components/selectMembersModal.vue
+++ b/website/client/components/selectMembersModal.vue
@@ -86,9 +86,6 @@ div
 <script>
 // @TODO: Move this under members directory
 import sortBy from 'lodash/sortBy';
-import bModal from 'bootstrap-vue/lib/components/modal';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
 import MemberDetails from './memberDetails';
 import removeIcon from 'assets/members/remove.svg';
@@ -98,9 +95,6 @@ import starIcon from 'assets/members/star.svg';
 export default {
   props: ['group', 'hideBadge', 'item'],
   components: {
-    bModal,
-    bDropdown,
-    bDropdownItem,
     MemberDetails,
   },
   data () {
@@ -181,7 +175,7 @@ export default {
       }
     },
     close () {
-      this.$root.$emit('hide::modal', 'select-member-modal');
+      this.$root.$emit('bv::hide::modal', 'select-member-modal');
     },
     sort (option) {
       this.sortOption = option;
diff --git a/website/client/components/settings/deleteModal.vue b/website/client/components/settings/deleteModal.vue
index 2752f590e7..bd5ea485ac 100644
--- a/website/client/components/settings/deleteModal.vue
+++ b/website/client/components/settings/deleteModal.vue
@@ -32,12 +32,7 @@
 import axios from 'axios';
 import { mapState } from 'client/libs/store';
 
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   data () {
     return {
       password: '',
@@ -49,7 +44,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'reset');
+      this.$root.$emit('bv::hide::modal', 'reset');
     },
     async deleteAccount () {
       await axios.delete('/api/v3/user', {
@@ -60,7 +55,7 @@ export default {
       });
       localStorage.clear();
       window.location.href = '/static/home';
-      this.$root.$emit('hide::modal', 'reset');
+      this.$root.$emit('bv::hide::modal', 'reset');
     },
   },
 };
diff --git a/website/client/components/settings/resetModal.vue b/website/client/components/settings/resetModal.vue
index ea19d208d5..54845e2d60 100644
--- a/website/client/components/settings/resetModal.vue
+++ b/website/client/components/settings/resetModal.vue
@@ -11,25 +11,20 @@
 import axios from 'axios';
 import { mapState } from 'client/libs/store';
 
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   computed: {
     ...mapState({user: 'user.data'}),
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'reset');
+      this.$root.$emit('bv::hide::modal', 'reset');
     },
     async reset () {
       let response = await axios.post('/api/v3/user/reset');
       // @TODO: Not sure if this is correct
       this.$store.user = response.data.data.user;
       this.$router.push('/');
-      this.$root.$emit('hide::modal', 'reset');
+      this.$root.$emit('bv::hide::modal', 'reset');
     },
   },
 };
diff --git a/website/client/components/settings/restoreModal.vue b/website/client/components/settings/restoreModal.vue
index 09140efefe..3113a87af0 100644
--- a/website/client/components/settings/restoreModal.vue
+++ b/website/client/components/settings/restoreModal.vue
@@ -50,12 +50,7 @@
 import clone from 'lodash/clone';
 import { mapState } from 'client/libs/store';
 
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
-  components: {
-    bModal,
-  },
   data () {
     return {
       restoreValues: {
@@ -81,7 +76,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'restore');
+      this.$root.$emit('bv::hide::modal', 'restore');
     },
     restore () {
       if (this.restoreValues.stats.lvl < 1) {
@@ -103,7 +98,7 @@ export default {
       };
 
       this.$store.dispatch('user:set', settings);
-      this.$root.$emit('hide::modal', 'restore');
+      this.$root.$emit('bv::hide::modal', 'restore');
     },
   },
 };
diff --git a/website/client/components/settings/site.vue b/website/client/components/settings/site.vue
index a1e6ba8714..cfb17dea30 100644
--- a/website/client/components/settings/site.vue
+++ b/website/client/components/settings/site.vue
@@ -193,7 +193,6 @@ import moment from 'moment';
 import axios from 'axios';
 import { mapState } from 'client/libs/store';
 
-import bPopover from 'bootstrap-vue/lib/directives/popover';
 import restoreModal from './restoreModal';
 import resetModal from './resetModal';
 import deleteModal from './deleteModal';
@@ -208,9 +207,6 @@ export default {
     resetModal,
     deleteModal,
   },
-  directives: {
-    bPopover,
-  },
   data () {
     let dayStartOptions = [];
     for (let number = 0; number < 24; number += 1) {
@@ -299,7 +295,7 @@ export default {
     },
     showBailey () {
       this.user.flags.newStuff = true;
-      this.$root.$emit('show::modal', 'new-stuff');
+      this.$root.$emit('bv::show::modal', 'new-stuff');
     },
     hasBackupAuthOption (networkKeyToCheck) {
       if (this.user.auth.local.username) {
@@ -352,13 +348,13 @@ export default {
       updates = {};
     },
     openRestoreModal () {
-      this.$root.$emit('show::modal', 'restore');
+      this.$root.$emit('bv::show::modal', 'restore');
     },
     openResetModal () {
-      this.$root.$emit('show::modal', 'reset');
+      this.$root.$emit('bv::show::modal', 'reset');
     },
     openDeleteModal () {
-      this.$root.$emit('show::modal', 'delete');
+      this.$root.$emit('bv::show::modal', 'delete');
     },
     async deleteSocialAuth (networkKey) {
       // @TODO: What do we use this for?
diff --git a/website/client/components/shops/buyModal.vue b/website/client/components/shops/buyModal.vue
index 5a865c7917..e896119a8d 100644
--- a/website/client/components/shops/buyModal.vue
+++ b/website/client/components/shops/buyModal.vue
@@ -90,6 +90,10 @@
   #buy-modal {
     @include centeredModal();
 
+    .modal-dialog {
+      width: 330px;
+    }
+
     .avatar {
       cursor: default;
       margin: 0 auto;
@@ -254,9 +258,6 @@
 </style>
 
 <script>
-  import bModal from 'bootstrap-vue/lib/components/modal';
-  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
   import * as Analytics from 'client/libs/analytics';
   import spellsMixin from 'client/mixins/spells';
   import planGemLimits from 'common/script/libs/planGemLimits';
@@ -287,9 +288,6 @@
   export default {
     mixins: [currencyMixin, notifications, spellsMixin, buyMixin],
     components: {
-      bModal,
-      bDropdown,
-      bDropdownItem,
       BalanceInfo,
       EquipmentAttributesGrid,
       Item,
@@ -384,7 +382,7 @@
             eventLabel: 'Gems > Rebirth',
           });
         }
-        this.$root.$emit('show::modal', 'buy-gems');
+        this.$root.$emit('bv::show::modal', 'buy-gems');
       },
       togglePinned () {
         this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
@@ -394,7 +392,7 @@
         }
       },
       hideDialog () {
-        this.$root.$emit('hide::modal', 'buy-modal');
+        this.$root.$emit('bv::hide::modal', 'buy-modal');
       },
       getPriceClass () {
         if (this.priceType && this.icons[this.priceType]) {
diff --git a/website/client/components/shops/market/index.vue b/website/client/components/shops/market/index.vue
index 5d893b7ec6..06f4a7157f 100644
--- a/website/client/components/shops/market/index.vue
+++ b/website/client/components/shops/market/index.vue
@@ -379,10 +379,6 @@
   import EquipmentAttributesGrid from './equipmentAttributesGrid.vue';
   import SelectMembersModal from 'client/components/selectMembersModal.vue';
 
-  import bPopover from 'bootstrap-vue/lib/components/popover';
-  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-
   import svgPin from 'assets/svg/pin.svg';
   import svgGem from 'assets/svg/gem.svg';
   import svgInformation from 'assets/svg/information.svg';
@@ -427,10 +423,6 @@ export default {
       ItemRows,
       toggleSwitch,
 
-      bPopover,
-      bDropdown,
-      bDropdownItem,
-
       SellModal,
       EquipmentAttributesGrid,
       Avatar,
diff --git a/website/client/components/shops/market/sellModal.vue b/website/client/components/shops/market/sellModal.vue
index b34728f99d..0d3753a1d8 100644
--- a/website/client/components/shops/market/sellModal.vue
+++ b/website/client/components/shops/market/sellModal.vue
@@ -17,14 +17,9 @@
 
         div
           b.how-many-to-sell {{ $t('howManyToSell') }}
+
         div
-          b-dropdown(:text="selectedAmountToSell +''", right=true)
-            b-dropdown-item(
-              v-for="num of dropDownItems",
-              @click="selectedAmountToSell = num",
-              :active="selectedAmountToSell === num",
-              :key="num"
-            ) {{ num }}
+          b-input.itemsToSell(type="number", v-model="selectedAmountToSell", :max="itemCount", min="1")
 
           span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons.gold")
           span.value {{ item.value }}
@@ -43,6 +38,15 @@
   #sell-modal {
     @include centeredModal();
 
+    .itemsToSell {
+      display: inline-block;
+      width: 5em;
+    }
+
+    .modal-dialog {
+      width: 330px;
+    }
+
     .content {
       text-align: center;
 
@@ -112,10 +116,6 @@
 </style>
 
 <script>
-  import bModal from 'bootstrap-vue/lib/components/modal';
-  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-
   import svgClose from 'assets/svg/close.svg';
   import svgGold from 'assets/svg/gold.svg';
   import svgGem from 'assets/svg/gem.svg';
@@ -124,9 +124,6 @@
 
   export default {
     components: {
-      bModal,
-      bDropdown,
-      bDropdownItem,
       BalanceInfo,
     },
     data () {
@@ -140,20 +137,11 @@
         }),
       };
     },
-    computed: {
-      dropDownItems () {
-        let result = [];
-
-        for (let i = 1; i <= this.itemCount; i++) {
-          result.push(i);
-        }
-
-        return result;
-      },
-    },
     methods: {
       onChange ($event) {
         this.$emit('change', $event);
+
+        this.selectedAmountToSell = 1;
       },
       sellItems () {
         this.$store.dispatch('shops:sellItems', {
@@ -164,7 +152,7 @@
         this.hideDialog();
       },
       hideDialog () {
-        this.$root.$emit('hide::modal', 'sell-modal');
+        this.$root.$emit('bv::hide::modal', 'sell-modal');
       },
     },
     props: {
diff --git a/website/client/components/shops/quests/buyQuestModal.vue b/website/client/components/shops/quests/buyQuestModal.vue
index 1413fd364a..42dd2905e7 100644
--- a/website/client/components/shops/quests/buyQuestModal.vue
+++ b/website/client/components/shops/quests/buyQuestModal.vue
@@ -56,7 +56,8 @@
     @include centeredModal();
 
     .modal-dialog {
-      margin-top: 25em;
+      margin-top: 8%;
+      width: 448px;
     }
 
     .content {
@@ -210,8 +211,6 @@
 <script>
   import {mapState} from 'client/libs/store';
 
-  import bModal from 'bootstrap-vue/lib/components/modal';
-
   import svgClose from 'assets/svg/close.svg';
   import svgGold from 'assets/svg/gold.svg';
   import svgGem from 'assets/svg/gem.svg';
@@ -230,7 +229,6 @@
   export default {
     mixins: [currencyMixin, notifications, buyMixin],
     components: {
-      bModal,
       BalanceInfo,
       QuestInfo,
       questDialogDrops,
@@ -292,7 +290,7 @@
         }
       },
       hideDialog () {
-        this.$root.$emit('hide::modal', 'buy-quest-modal');
+        this.$root.$emit('bv::hide::modal', 'buy-quest-modal');
       },
       getDropIcon (drop) {
         switch (drop.type) {
@@ -328,7 +326,7 @@
       },
 
       purchaseGems () {
-        this.$root.$emit('show::modal', 'buy-gems');
+        this.$root.$emit('bv::show::modal', 'buy-gems');
       },
     },
     props: {
diff --git a/website/client/components/shops/quests/index.vue b/website/client/components/shops/quests/index.vue
index 8c25e17c28..f2f2cd6854 100644
--- a/website/client/components/shops/quests/index.vue
+++ b/website/client/components/shops/quests/index.vue
@@ -335,9 +335,6 @@
 
   import BuyModal from './buyQuestModal.vue';
   import QuestInfo from './questInfo.vue';
-  import bPopover from 'bootstrap-vue/lib/components/popover';
-  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
   import svgPin from 'assets/svg/pin.svg';
 
@@ -360,10 +357,6 @@ export default {
       ItemRows,
       toggleSwitch,
 
-      bPopover,
-      bDropdown,
-      bDropdownItem,
-
       Avatar,
       BuyModal,
       QuestInfo,
@@ -477,7 +470,7 @@ export default {
 
         this.selectedItemToBuy = item;
 
-        this.$root.$emit('show::modal', 'buy-quest-modal');
+        this.$root.$emit('bv::show::modal', 'buy-quest-modal');
       },
     },
   };
diff --git a/website/client/components/shops/seasonal/index.vue b/website/client/components/shops/seasonal/index.vue
index 9b98b9dc94..04b860e657 100644
--- a/website/client/components/shops/seasonal/index.vue
+++ b/website/client/components/shops/seasonal/index.vue
@@ -286,10 +286,6 @@
   import buyMixin from 'client/mixins/buy';
   import currencyMixin from '../_currencyMixin';
 
-  import bPopover from 'bootstrap-vue/lib/components/popover';
-  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-
   import svgPin from 'assets/svg/pin.svg';
   import svgWarrior from 'assets/svg/warrior.svg';
   import svgWizard from 'assets/svg/wizard.svg';
@@ -321,10 +317,6 @@
       ItemRows,
       toggleSwitch,
 
-      bPopover,
-      bDropdown,
-      bDropdownItem,
-
       Avatar,
     },
     watch: {
diff --git a/website/client/components/shops/shopItem.vue b/website/client/components/shops/shopItem.vue
index 533f1dad0e..fbdd9b85e6 100644
--- a/website/client/components/shops/shopItem.vue
+++ b/website/client/components/shops/shopItem.vue
@@ -151,7 +151,6 @@ div
 </style>
 
 <script>
-  import bPopover from 'bootstrap-vue/lib/components/popover';
   import uuid from 'uuid';
 
   import svgGem from 'assets/svg/gem.svg';
@@ -170,7 +169,6 @@ div
 
   export default {
     components: {
-      bPopover,
       EquipmentAttributesPopover,
       QuestInfo,
     },
diff --git a/website/client/components/shops/timeTravelers/index.vue b/website/client/components/shops/timeTravelers/index.vue
index 4391aa0d5e..de777751b3 100644
--- a/website/client/components/shops/timeTravelers/index.vue
+++ b/website/client/components/shops/timeTravelers/index.vue
@@ -233,9 +233,6 @@
   import Avatar from 'client/components/avatar';
 
   import BuyModal from '../buyModal.vue';
-  import bPopover from 'bootstrap-vue/lib/components/popover';
-  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
   import svgPin from 'assets/svg/pin.svg';
   import svgHourglass from 'assets/svg/hourglass.svg';
@@ -258,10 +255,6 @@
       ItemRows,
       toggleSwitch,
 
-      bPopover,
-      bDropdown,
-      bDropdownItem,
-
       Avatar,
       BuyModal,
     },
diff --git a/website/client/components/tasks/approvalFooter.vue b/website/client/components/tasks/approvalFooter.vue
index 6117399f6f..62e1a2e2d2 100644
--- a/website/client/components/tasks/approvalFooter.vue
+++ b/website/client/components/tasks/approvalFooter.vue
@@ -109,7 +109,7 @@ export default {
 
     },
     showRequests () {
-      this.$root.$emit('show::modal', 'approval-modal');
+      this.$root.$emit('bv::show::modal', 'approval-modal');
     },
   },
 };
diff --git a/website/client/components/tasks/approvalModal.vue b/website/client/components/tasks/approvalModal.vue
index d968d51a01..ca786aa2ff 100644
--- a/website/client/components/tasks/approvalModal.vue
+++ b/website/client/components/tasks/approvalModal.vue
@@ -18,13 +18,8 @@
 </style>
 
 <script>
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 export default {
   props: ['task'],
-  components: {
-    bModal,
-  },
   methods: {
     approve (index) {
       if (!confirm('Are you sure you want to approve this task?')) return;
@@ -37,7 +32,7 @@ export default {
       this.task.approvals.splice(index, 1);
     },
     close () {
-      this.$root.$emit('hide::modal', 'approval-modal');
+      this.$root.$emit('bv::hide::modal', 'approval-modal');
     },
   },
 };
diff --git a/website/client/components/tasks/brokenTaskModal.vue b/website/client/components/tasks/brokenTaskModal.vue
index c9cbea330d..3e94dad8cd 100644
--- a/website/client/components/tasks/brokenTaskModal.vue
+++ b/website/client/components/tasks/brokenTaskModal.vue
@@ -33,14 +33,10 @@
 
 <script>
 import { mapActions } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import notifications from 'client/mixins/notifications';
 
 export default {
   mixins: [notifications],
-  components: {
-    bModal,
-  },
   data () {
     return {
       brokenChallengeTask: {},
@@ -90,7 +86,7 @@ export default {
     },
     close () {
       this.$store.state.brokenChallengeTask = {};
-      this.$root.$emit('hide::modal', 'broken-task-modal');
+      this.$root.$emit('bv::hide::modal', 'broken-task-modal');
     },
   },
 };
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
index 4a18b5eacc..8b0b9741ef 100644
--- a/website/client/components/tasks/column.vue
+++ b/website/client/components/tasks/column.vue
@@ -226,8 +226,6 @@
 import Task from './task';
 import sortBy from 'lodash/sortBy';
 import throttle from 'lodash/throttle';
-import bModal from 'bootstrap-vue/lib/components/modal';
-
 import sortable from 'client/directives/sortable.directive';
 import buyMixin from 'client/mixins/buy';
 import { mapState, mapActions } from 'client/libs/store';
@@ -249,7 +247,6 @@ export default {
   components: {
     Task,
     BuyQuestModal,
-    bModal,
     shopItem,
   },
   directives: {
diff --git a/website/client/components/tasks/spells.vue b/website/client/components/tasks/spells.vue
index ac5dd2ab8d..b635fe499d 100644
--- a/website/client/components/tasks/spells.vue
+++ b/website/client/components/tasks/spells.vue
@@ -148,8 +148,6 @@ div(v-if='user.stats.lvl > 10')
 </style>
 
 <script>
-import bPopover from 'bootstrap-vue/lib/directives/popover';
-
 import spells from '../../../common/script/content/spells';
 
 import { mapState } from 'client/libs/store';
@@ -169,7 +167,6 @@ export default {
   },
   directives: {
     mousePosition: MouseMoveDirective,
-    bPopover,
   },
   data () {
     return {
diff --git a/website/client/components/tasks/tagsPopup.vue b/website/client/components/tasks/tagsPopup.vue
index fab1b95111..d0d908c085 100644
--- a/website/client/components/tasks/tagsPopup.vue
+++ b/website/client/components/tasks/tagsPopup.vue
@@ -21,7 +21,7 @@
   .tags-popup {
     padding-left: 24px;
     padding-right: 24px;
-    max-width: 593px;
+    width: 593px;
     z-index: 9999;
     background: $white;
     border-radius: 2px;
diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue
index 2a8ce6256a..cffe5e0bad 100644
--- a/website/client/components/tasks/task.vue
+++ b/website/client/components/tasks/task.vue
@@ -477,7 +477,6 @@ import axios from 'axios';
 import scoreTask from 'common/script/ops/scoreTask';
 import Vue from 'vue';
 import * as Analytics from 'client/libs/analytics';
-import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
 
 import positiveIcon from 'assets/svg/positive.svg';
 import negativeIcon from 'assets/svg/negative.svg';
@@ -493,7 +492,6 @@ import bottomIcon from 'assets/svg/bottom.svg';
 import deleteIcon from 'assets/svg/delete.svg';
 import checklistIcon from 'assets/svg/checklist.svg';
 import menuIcon from 'assets/svg/menu.svg';
-import bPopover from 'bootstrap-vue/lib/components/popover';
 import markdownDirective from 'client/directives/markdown';
 import notifications from 'client/mixins/notifications';
 import approvalHeader from './approvalHeader';
@@ -503,14 +501,12 @@ import MenuDropdown from '../ui/customMenuDropdown';
 export default {
   mixins: [notifications],
   components: {
-    bPopover,
     approvalFooter,
     approvalHeader,
     MenuDropdown,
   },
   directives: {
     markdown: markdownDirective,
-    bTooltip,
   },
   props: ['task', 'isUser', 'group', 'dueDate'], // @TODO: maybe we should store the group on state?
   data () {
diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index cd09734f56..2e08841a4d 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -507,10 +507,7 @@
 
 <script>
 import TagsPopup from './tagsPopup';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapGetters, mapActions, mapState } from 'client/libs/store';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
 import sortable from 'client/directives/sortable.directive';
 import clone from 'lodash/clone';
@@ -531,9 +528,6 @@ import goldIcon from 'assets/svg/gold.svg';
 export default {
   components: {
     TagsPopup,
-    bModal,
-    bDropdown,
-    bDropdownItem,
     Datepicker,
     toggleSwitch,
   },
@@ -752,16 +746,16 @@ export default {
         this.saveTask(this.task);
         this.$emit('taskEdited', this.task);
       }
-      this.$root.$emit('hide::modal', 'task-modal');
+      this.$root.$emit('bv::hide::modal', 'task-modal');
     },
     destroy () {
       if (!confirm(this.$t('sureDelete'))) return;
       this.destroyTask(this.task);
       this.$emit('taskDestroyed', this.task);
-      this.$root.$emit('hide::modal', 'task-modal');
+      this.$root.$emit('bv::hide::modal', 'task-modal');
     },
     cancel () {
-      this.$root.$emit('hide::modal', 'task-modal');
+      this.$root.$emit('bv::hide::modal', 'task-modal');
     },
     onClose () {
       this.showTagsSelect = false;
diff --git a/website/client/components/tasks/user.vue b/website/client/components/tasks/user.vue
index 7644fcb606..62f65496ec 100644
--- a/website/client/components/tasks/user.vue
+++ b/website/client/components/tasks/user.vue
@@ -63,8 +63,8 @@
         transition(name="slide-tasks-btns")
           .d-flex(v-if="openCreateBtn")
             .create-task-btn.rounded-btn(
-              v-for="type in columns", 
-              :key="type", 
+              v-for="type in columns",
+              :key="type",
               @click="createTask(type)",
               v-b-tooltip.hover.bottom="$t(type)",
             )
@@ -192,6 +192,7 @@
     padding-left: 24px;
     padding-right: 24px;
     max-width: 40vw;
+    width: 100%;
     z-index: 9999;
     background: $white;
     border-radius: 2px;
@@ -305,11 +306,6 @@ import rewardIcon from 'assets/svg/reward.svg';
 
 import uuid from 'uuid';
 import Vue from 'vue';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
-import bTooltipComponent from 'bootstrap-vue/lib/components/tooltip';
-
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import throttle from 'lodash/throttle';
 import cloneDeep from 'lodash/cloneDeep';
 import { mapState, mapActions } from 'client/libs/store';
@@ -322,16 +318,12 @@ export default {
   components: {
     TaskColumn,
     TaskModal,
-    bDropdown,
-    bDropdownItem,
-    bTooltip: bTooltipComponent,
     Item,
     spells,
     brokenTaskModal,
   },
   directives: {
     markdown,
-    bTooltip,
   },
   data () {
     return {
@@ -438,7 +430,7 @@ export default {
       this.editingTask = cloneDeep(task);
       // Necessary otherwise the first time the modal is not rendered
       Vue.nextTick(() => {
-        this.$root.$emit('show::modal', 'task-modal');
+        this.$root.$emit('bv::show::modal', 'task-modal');
       });
     },
     createTask (type) {
@@ -448,7 +440,7 @@ export default {
 
       // Necessary otherwise the first time the modal is not rendered
       Vue.nextTick(() => {
-        this.$root.$emit('show::modal', 'task-modal');
+        this.$root.$emit('bv::show::modal', 'task-modal');
       });
     },
     cancelTaskModal () {
diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index e0f986594d..9bf3f251f4 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -1,4 +1,4 @@
-<!-- 
+<!--
 A simplified dropdown component that doesn't rely on buttons as toggles  like bootstrap-vue
 -->
 
@@ -32,6 +32,8 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
     box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
     max-height: calc(100vh - 100px);
     overflow: auto;
+    left: inherit;
+    right: 0px !important;
 
     /deep/ .dropdown-separated {
       border-bottom: 1px solid $gray-500;
diff --git a/website/client/components/ui/itemRows.vue b/website/client/components/ui/itemRows.vue
index 1b205ed5d1..60cf9addf4 100644
--- a/website/client/components/ui/itemRows.vue
+++ b/website/client/components/ui/itemRows.vue
@@ -31,18 +31,16 @@
 
 <script>
   import ResizeDirective from 'client/directives/resize.directive';
-  import { mapState } from 'client/libs/store';
+  import openedItemRowsMixin from 'client/mixins/openedItemRows';
 
   import _take from 'lodash/take';
 
   export default {
+    mixins: [openedItemRowsMixin],
     directives: {
       resize: ResizeDirective,
     },
     computed: {
-      ...mapState({
-        openedItemRows: 'openedItemRows',
-      }),
       itemsPerRow () {
         return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
       },
@@ -59,16 +57,7 @@
       toggleItemsToShow () {
         this.showAll = !this.showAll;
 
-        let array = this.$store.state.openedItemRows;
-        if (this.showAll) {
-          array.push(this.type);
-        } else {
-          let index = array.indexOf(this.type);
-
-          if (index > -1) {
-            array.splice(index, 1);
-          }
-        }
+        this.$_openedItemRows_toggleByType(this.type, this.showAll);
       },
       itemsToShow (showAll) {
         let itemsLength = this.items.length;
@@ -108,7 +97,7 @@
       },
     },
     created () {
-      this.showAll = this.openedItemRows.includes(this.type);
+      this.showAll = this.$_openedItemRows_isToggled(this.type);
     },
   };
 </script>
diff --git a/website/client/components/userMenu/inbox.vue b/website/client/components/userMenu/inbox.vue
index cbdacfe976..f32bb05af5 100644
--- a/website/client/components/userMenu/inbox.vue
+++ b/website/client/components/userMenu/inbox.vue
@@ -163,9 +163,6 @@ import sortBy from 'lodash/sortBy';
 import { mapState } from 'client/libs/store';
 import styleHelper from 'client/mixins/styleHelper';
 
-import bModal from 'bootstrap-vue/lib/components/modal';
-import bFormInput from 'bootstrap-vue/lib/components/form-input';
-
 import messageIcon from 'assets/svg/message.svg';
 import chatMessage from '../chat/chatMessages';
 import svgClose from 'assets/svg/close.svg';
@@ -173,13 +170,11 @@ import svgClose from 'assets/svg/close.svg';
 export default {
   mixins: [styleHelper],
   components: {
-    bModal,
-    bFormInput,
     chatMessage,
   },
   mounted () {
     this.$root.$on('habitica::new-inbox-message', (data) => {
-      this.$root.$emit('show::modal', 'inbox-modal');
+      this.$root.$emit('bv::show::modal', 'inbox-modal');
 
       const conversation = this.conversations.find(convo => {
         return convo.key === data.userIdToMessage;
@@ -325,7 +320,7 @@ export default {
       });
     },
     close () {
-      this.$root.$emit('hide::modal', 'inbox-modal');
+      this.$root.$emit('bv::hide::modal', 'inbox-modal');
     },
   },
 };
diff --git a/website/client/components/userMenu/profile.vue b/website/client/components/userMenu/profile.vue
index 731a2c3465..7b14a4f3ef 100644
--- a/website/client/components/userMenu/profile.vue
+++ b/website/client/components/userMenu/profile.vue
@@ -551,7 +551,6 @@ div
 <script>
 import moment from 'moment';
 import axios from 'axios';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import each from 'lodash/each';
 import { mapState } from 'client/libs/store';
 import size from 'lodash/size';
@@ -562,7 +561,6 @@ import autoAllocate from '../../../common/script/fns/autoAllocate';
 import allocate from  '../../../common/script/ops/stats/allocate';
 
 import MemberDetails from '../memberDetails';
-import bPopover from 'bootstrap-vue/lib/components/popover';
 import sendGemsModal from 'client/components/payments/sendGemsModal';
 import markdown from 'client/directives/markdown';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
@@ -582,11 +580,9 @@ export default {
     markdown,
   },
   components: {
-    bModal,
     sendGemsModal,
     MemberDetails,
     toggleSwitch,
-    bPopover,
   },
   data () {
     return {
@@ -818,7 +814,7 @@ export default {
     },
     openSendGemsModal () {
       this.userReceivingGems = this.user;
-      this.$root.$emit('show::modal', 'send-gems');
+      this.$root.$emit('bv::show::modal', 'send-gems');
     },
   },
 };
diff --git a/website/client/components/userMenu/profilePage.vue b/website/client/components/userMenu/profilePage.vue
index 5fd11706ab..992226afe0 100644
--- a/website/client/components/userMenu/profilePage.vue
+++ b/website/client/components/userMenu/profilePage.vue
@@ -12,7 +12,7 @@ export default {
   },
   mounted () {
     this.$store.state.profileUser = {};
-    this.$root.$emit('show::modal', 'profile');
+    this.$root.$emit('bv::show::modal', 'profile');
   },
 };
 </script>
diff --git a/website/client/components/yesterdailyModal.vue b/website/client/components/yesterdailyModal.vue
index 42c1a11f34..4e3f675978 100644
--- a/website/client/components/yesterdailyModal.vue
+++ b/website/client/components/yesterdailyModal.vue
@@ -53,13 +53,11 @@
 <script>
 import moment from 'moment';
 import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
 import Task from './tasks/task';
 
 export default {
   props: ['yesterDailies'],
   components: {
-    bModal,
     Task,
   },
   data () {
@@ -79,7 +77,7 @@ export default {
   },
   methods: {
     async close () {
-      this.$root.$emit('hide::modal', 'yesterdaily');
+      this.$root.$emit('bv::hide::modal', 'yesterdaily');
     },
   },
 };
diff --git a/website/client/main.js b/website/client/main.js
index ad9b6e5790..6feee90679 100644
--- a/website/client/main.js
+++ b/website/client/main.js
@@ -13,6 +13,8 @@ import StoreModule from './libs/store';
 import './filters/registerGlobals';
 import i18n from './libs/i18n';
 
+import BootstrapVue from 'bootstrap-vue';
+
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
 
 // Configure Vue global options, see https://vuejs.org/v2/api/#Global-Config
@@ -28,6 +30,7 @@ Vue.config.productionTip = IS_PRODUCTION;
 // window['habitica-i18n] is injected by the server
 Vue.use(i18n, {i18nData: window && window['habitica-i18n']});
 Vue.use(StoreModule);
+Vue.use(BootstrapVue);
 
 setupAnalytics(); // just create queues for analytics, no scripts loaded at this time
 const store = getStore();
diff --git a/website/client/mixins/openedItemRows.js b/website/client/mixins/openedItemRows.js
new file mode 100644
index 0000000000..419b22c717
--- /dev/null
+++ b/website/client/mixins/openedItemRows.js
@@ -0,0 +1,29 @@
+/* eslint-disable camelcase */
+
+import { mapState } from 'client/libs/store';
+
+export default {
+  computed: {
+    ...mapState({
+      openedItemRows: 'openedItemRows',
+    }),
+  },
+  methods: {
+    $_openedItemRows_toggleByType (typeId, add) {
+      let array = this.$store.state.openedItemRows;
+
+      if (add) {
+        array.push(typeId);
+      } else {
+        let index = array.indexOf(typeId);
+
+        if (index > -1) {
+          array.splice(index, 1);
+        }
+      }
+    },
+    $_openedItemRows_isToggled (typeId) {
+      return this.openedItemRows.includes(typeId);
+    },
+  },
+};
diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
index 0f34d1dec2..0fd53b01fa 100644
--- a/website/client/mixins/payments.js
+++ b/website/client/mixins/payments.js
@@ -169,7 +169,7 @@ export default {
       this.amazonPayments.gift = data.gift;
       this.amazonPayments.type = data.type;
 
-      this.$root.$emit('show::modal', 'amazon-payment');
+      this.$root.$emit('bv::show::modal', 'amazon-payment');
     },
     async cancelSubscription (config) {
       if (config && config.group && !confirm(this.$t('confirmCancelGroupPlan'))) return;