diff --git a/client/src/builtin/EmoteComponent.vue b/client/src/builtin/EmoteComponent.vue
index a0a869ba..bb2c4da1 100644
--- a/client/src/builtin/EmoteComponent.vue
+++ b/client/src/builtin/EmoteComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <span class="bd-emotewrapper" :class="{'bd-emoteFavourite': favourite, 'bd-emote-no-wrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
+    <span class="bd-emotewrapper" :class="{'bd-emoteFavourite': favourite, 'bd-emoteNoWrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
         <img class="bd-emote" :src="src" :alt="`;${name};`" />
 
         <div class="bd-emoteFavouriteButton" :class="{'bd-active': favourite}" @click="toggleFavourite">
diff --git a/client/src/ui/components/bd/modals/ErrorModal.vue b/client/src/ui/components/bd/modals/ErrorModal.vue
index 32d18e07..70e56378 100644
--- a/client/src/ui/components/bd/modals/ErrorModal.vue
+++ b/client/src/ui/components/bd/modals/ErrorModal.vue
@@ -1,6 +1,6 @@
 <template>
     <Modal :headerText="modal.event.header" @close="modal.close"
-           :class="{'bd-err': modal.event.type && modal.event.type === 'err', 'bd-modal-out': modal.closing}">
+           :class="{'bd-err': modal.event.type && modal.event.type === 'err', 'bd-modalOut': modal.closing}">
         <MiError v-if="modal.event.type === 'err'" slot="icon" size="20"/>
         <div slot="body">
             <div v-for="(content, index) in modal.event.content">
diff --git a/client/src/ui/components/bd/modals/InputModal.vue b/client/src/ui/components/bd/modals/InputModal.vue
index e4ffb6c7..e29a9316 100644
--- a/client/src/ui/components/bd/modals/InputModal.vue
+++ b/client/src/ui/components/bd/modals/InputModal.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
+    <Modal :class="['bd-modalBasic', {'bd-modalOut': modal.closing}]" :headerText="modal.title" @close="modal.close">
         <div slot="body" class="bd-modalBasicBody bd-inputModalBody bd-formTextinput">
             {{ modal.text }}
             <input v-if="modal.password" ref="input" type="password" @keyup.stop="keyup" />
diff --git a/client/src/ui/components/bd/modals/PermissionModal.vue b/client/src/ui/components/bd/modals/PermissionModal.vue
index 46eda341..9872ec8b 100644
--- a/client/src/ui/components/bd/modals/PermissionModal.vue
+++ b/client/src/ui/components/bd/modals/PermissionModal.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
+    <Modal :class="['bd-modalBasic', {'bd-modalOut': modal.closing}]" :headerText="modal.title" @close="modal.close">
         <div slot="body" class="bd-modalBasicBody">
             <div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-permScope">
                 <div class="bd-permAllow">
diff --git a/client/src/ui/components/bd/setting/Guild.vue b/client/src/ui/components/bd/setting/Guild.vue
index c257dcd8..e1aa1273 100644
--- a/client/src/ui/components/bd/setting/Guild.vue
+++ b/client/src/ui/components/bd/setting/Guild.vue
@@ -15,7 +15,7 @@
         </div>
         <div class="bd-hint">{{ setting.hint }}</div>
         <div class="bd-guilds">
-            <div class="bd-guild" :class="{'bd-active': isGuildSelected(guild), 'bd-guild-has-icon': guild.icon}" :style="{backgroundImage: `url('${getGuildIconURL(guild)}')`}" @click="() => isGuildSelected(guild) ? unselectGuild(guild) : selectGuild(guild)" v-for="guild in guilds" v-if="guild" v-tooltip="guild.name">
+            <div class="bd-guild" :class="{'bd-active': isGuildSelected(guild), 'bd-guildHasIcon': guild.icon}" :style="{backgroundImage: `url('${getGuildIconURL(guild)}')`}" @click="() => isGuildSelected(guild) ? unselectGuild(guild) : selectGuild(guild)" v-for="guild in guilds" v-if="guild" v-tooltip="guild.name">
                 <div class="bd-guildText" v-if="!guild.icon">{{ getGuildIconText(guild) }}</div>
             </div>
         </div>
diff --git a/client/src/ui/components/bd/setting/Keybind.vue b/client/src/ui/components/bd/setting/Keybind.vue
index 18eda398..33c8a67d 100644
--- a/client/src/ui/components/bd/setting/Keybind.vue
+++ b/client/src/ui/components/bd/setting/Keybind.vue
@@ -16,7 +16,7 @@
             </div>
             <div class="bd-hint">{{ setting.hint }}</div>
         </div>
-        <div class="bd-keybind" :class="{'bd-active': active, 'bd-disabled': setting.disabled, 'bd-keybind-unset': !setting.value}">
+        <div class="bd-keybind" :class="{'bd-active': active, 'bd-disabled': setting.disabled, 'bd-keybindUnset': !setting.value}">
             <div class="bd-keybindSelected">{{ selected || 'No Keybind Set' }}</div>
             <button class="bd-button" v-tooltip="`Click to record a new keybind sequence${setting.value ? ' (shift + click to delete the sequence)' : ''}`" @click="$event.shiftKey ? deleteKeybind() : toggleActive(); $event.target.blur()">{{ active ? 'Stop Recording' : setting.value ? 'Edit Keybind' : 'Record Keybind' }}</button>
         </div>
diff --git a/client/src/ui/components/common/Autocomplete.vue b/client/src/ui/components/common/Autocomplete.vue
index 0eb5df86..5e3d3002 100644
--- a/client/src/ui/components/common/Autocomplete.vue
+++ b/client/src/ui/components/common/Autocomplete.vue
@@ -20,7 +20,7 @@
                 </div>
             </div>
             <div v-for="(emote, index) in emotes" class="bd-autocompleteRow" :key="index">
-                <div class="bd-autocompleteSelector bd-selectable" :class="{'bd-selected': index === selectedIndex, 'bd-emote-favourite': isFavourite(emote)}" @mouseover="selected = emote.id" @click="inject(emote)">
+                <div class="bd-autocompleteSelector bd-selectable" :class="{'bd-selected': index === selectedIndex, 'bd-emoteFavourite': isFavourite(emote)}" @mouseover="selected = emote.id" @click="inject(emote)">
                     <div class="bd-autocompleteField">
                         <img :src="emote.src" :alt="emote.name" />
                         <div class="bd-flexGrow">{{emote.id}}</div>
diff --git a/client/src/ui/components/common/Modal.vue b/client/src/ui/components/common/Modal.vue
index d826d329..f4cb87f4 100644
--- a/client/src/ui/components/common/Modal.vue
+++ b/client/src/ui/components/common/Modal.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div :class="['bd-modal', {'bd-modal-scrolled': scrolled}]">
+    <div :class="['bd-modal', {'bd-modalScrolled': scrolled}]">
         <div class="bd-modalInner">
             <div class="bd-modalHeader">
                 <div class="bd-modalIcon">
diff --git a/tests/ext/plugins/Example/component.js b/tests/ext/plugins/Example/component.js
index d2b2d595..4f86b23f 100644
--- a/tests/ext/plugins/Example/component.js
+++ b/tests/ext/plugins/Example/component.js
@@ -4,7 +4,7 @@ module.exports.default = {
 };
 
 const component = {
-    template: "<div style=\"margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 10px; color: #f6f6f7; font-weight: 500; font-size: 15px;\">Test custom setting {{ setting.id }}. Also in component.js. It extends the CustomSetting class. <button class=\"bd-button bd-button-primary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(1)\">Set value to 1</button> <button class=\"bd-button bd-button-primary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(2)\">Set value to 2</button></div>",
+    template: "<div style=\"margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 10px; color: #f6f6f7; font-weight: 500; font-size: 15px;\">Test custom setting {{ setting.id }}. Also in component.js. It extends the CustomSetting class. <button class=\"bd-button bd-buttonPrimary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(1)\">Set value to 1</button> <button class=\"bd-button bd-buttonPrimary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(2)\">Set value to 2</button></div>",
     props: ['setting', 'change']
 };
 
diff --git a/tests/ext/plugins/Example/config.json b/tests/ext/plugins/Example/config.json
index a99ebcb5..159ab529 100644
--- a/tests/ext/plugins/Example/config.json
+++ b/tests/ext/plugins/Example/config.json
@@ -224,7 +224,7 @@
                     "type": "custom",
                     "value": false,
                     "component": {
-                        "template": "<div style=\"margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 10px; color: #f6f6f7; font-weight: 500; font-size: 15px;\">Test custom setting {{ setting.id }}. This is included inline with the plugin/theme's config. (Which means it can't use any functions, but can still bind functions to events.) <button class=\"bd-button bd-button-primary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(1)\">Set value to 1</button> <button class=\"bd-button bd-button-primary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(2)\">Set value to 2</button></div>",
+                        "template": "<div style=\"margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 10px; color: #f6f6f7; font-weight: 500; font-size: 15px;\">Test custom setting {{ setting.id }}. This is included inline with the plugin/theme's config. (Which means it can't use any functions, but can still bind functions to events.) <button class=\"bd-button bd-buttonPrimary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(1)\">Set value to 1</button> <button class=\"bd-button bd-buttonPrimary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(2)\">Set value to 2</button></div>",
                         "props": [
                             "setting",
                             "change"
diff --git a/tests/ext/plugins/Example/index.js b/tests/ext/plugins/Example/index.js
index 83ebc418..ceea1f4d 100644
--- a/tests/ext/plugins/Example/index.js
+++ b/tests/ext/plugins/Example/index.js
@@ -124,14 +124,14 @@ module.exports = (Plugin, Api, Vendor, Dependencies) => {
             el.textContent = `Test custom setting ${setting.id}. This is from Plugin.getSettingsComponentHTMLElement(). Current value: ${setting.value}.`;
 
             const button1 = document.createElement('button');
-            button1.setAttribute('class', 'bd-button bd-button-primary');
+            button1.setAttribute('class', 'bd-button bd-buttonPrimary');
             button1.setAttribute('style', 'display: inline-block; margin-left: 10px;');
             button1.addEventListener('click', () => change(1));
             button1.textContent = 'Set value to 1';
             el.appendChild(button1);
 
             const button2 = document.createElement('button');
-            button2.setAttribute('class', 'bd-button bd-button-primary');
+            button2.setAttribute('class', 'bd-button bd-buttonPrimary');
             button2.setAttribute('style', 'display: inline-block; margin-left: 10px;');
             button2.addEventListener('click', () => change(2));
             button2.textContent = 'Set value to 2';