Merge pull request #225 from JsSucks/refactor-classnames

Refactor classnames, add sasslint, reorganize scss, change some classnames, update eslint rules etc

.eslintrc

@@ -0,0 +1,42 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 8,
+        "sourceType": "module"
+    },
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "plugins": [
+        "vue"
+    ],
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/recommended"
+    ],
+    "rules": {
+        "no-unused-vars": "off",
+        "no-console": "off",
+        "no-empty": "off",
+        "quotes": [
+            "error",
+            "single",
+            { "allowTemplateLiterals": true }
+        ],
+        "prefer-template": "warn",
+        "no-return-await": "error",
+        "indent": [ "warn", 4 ],
+        "no-lonely-if": "error",
+        "no-multiple-empty-lines": [
+            "warn",
+            { "max": 1 }
+        ],
+        "no-tabs": "warn",
+        "no-trailing-spaces": "warn",
+        "no-unneeded-ternary": "warn",
+        "no-useless-constructor": "warn",
+        "no-var": "error",
+        "prefer-const": "error",
+        "no-else-return": "error"
+    }
+}

.eslintrc.yml

@@ -1,21 +0,0 @@
----
-
-parserOptions:
-  ecmaVersion: 8
-  sourceType: module
-
-env:
-  browser: true
-  node: true
-
-plugins:
-  - vue
-
-extends:
-  - eslint:recommended
-  - plugin:vue/recommended
-
-rules:
-  no-unused-vars: 'off'
-  no-console: 'off'
-  no-empty: 'off'

.sasslintrc

@@ -0,0 +1,29 @@
+{
+    "rules": {
+        "no-transition-all": [ 0 ],
+        "nesting-depth": [
+            1,
+            { "max-depth": 5 }
+        ],
+        "no-vendor-prefixes": [ 0 ],
+        "property-sort-order": [ 0 ],
+        "indentation": [
+            1,
+            { "size": 4 }
+        ],
+        "no-color-literals": [ 0 ],
+        "class-name-format": [
+            1,
+            {
+                "convention": "^bd-[a-z]"
+            }
+        ],
+        "variable-name-format": [
+            2,
+            {
+                "convention": "camelcase"
+            }
+        ],
+        "url-quotes": [ 0 ]
+    }
+}

client/src/builtin/E2EE.js

@@ -19,8 +19,8 @@ import E2EEComponent from './E2EEComponent.vue';
 import E2EEMessageButton from './E2EEMessageButton.vue';
 import nodecrypto from 'node-crypto';
 
-const userMentionPattern = new RegExp(`<@!?([0-9]{10,})>`, "g");
-const roleMentionPattern = new RegExp(`<@&([0-9]{10,})>`, "g");
+const userMentionPattern = new RegExp(`<@!?([0-9]{10,})>`, 'g');
+const roleMentionPattern = new RegExp(`<@&([0-9]{10,})>`, 'g');
 const everyoneMentionPattern = new RegExp(`(?:\\s+|^)@everyone(?:\\s+|$)`);
 
 const START_DATE = new Date();
@@ -43,7 +43,7 @@ export default new class E2EE extends BuiltinModule {
             this.setMaster(newMaster);
             this.patchDispatcher();
             this.patchMessageContent();
-            const selector = '.' + WebpackModules.getClassName('channelTextArea', 'emojiButton');
+            const selector = `.${WebpackModules.getClassName('channelTextArea', 'emojiButton')}`;
             const cta = await ReactComponents.getComponent('ChannelTextArea', { selector });
             this.patchChannelTextArea(cta);
             this.patchChannelTextAreaSubmit(cta);
@@ -72,7 +72,6 @@ export default new class E2EE extends BuiltinModule {
         return ['security', 'default', 'e2ee'];
     }
 
-
     get database() {
         return Settings.getSetting('security', 'e2eedb', 'e2ekvps').value;
     }
@@ -112,8 +111,8 @@ export default new class E2EE extends BuiltinModule {
         const items = Settings.getSetting('security', 'e2eedb', 'e2ekvps').items;
         const index = items.findIndex(kvp => kvp.value.key === channelId);
         if (index > -1) {
-          items[index].value = {key: channelId, value: key};
-          return;
+            items[index].value = {key: channelId, value: key};
+            return;
         }
         Settings.getSetting('security', 'e2eedb', 'e2ekvps').addItem({ value: { key: channelId, value: key } });
     }
@@ -178,7 +177,7 @@ export default new class E2EE extends BuiltinModule {
     patchDispatcher() {
         const Dispatcher = WebpackModules.getModuleByName('Dispatcher');
         MonkeyPatch('BD:E2EE', Dispatcher).before('dispatch', (_, [event]) => {
-            if (event.type !== "MESSAGE_CREATE") return;
+            if (event.type !== 'MESSAGE_CREATE') return;
 
             const key = this.getKey(event.message.channel_id);
             if (!key) return; // We don't have a key for this channel
@@ -208,11 +207,11 @@ export default new class E2EE extends BuiltinModule {
     }
 
     async patchMessageContent() {
-        const selector = '.' + WebpackModules.getClassName('container', 'containerCozy', 'containerCompact', 'edited');
+        const selector = `.${WebpackModules.getClassName('container', 'containerCozy', 'containerCompact', 'edited')}`;
         const MessageContent = await ReactComponents.getComponent('MessageContent', { selector });
         MonkeyPatch('BD:E2EE', MessageContent.component.prototype).before('render', this.beforeRenderMessageContent.bind(this));
         MonkeyPatch('BD:E2EE', MessageContent.component.prototype).after('render', this.renderMessageContent.bind(this));
-        const ImageWrapper = await ReactComponents.getComponent('ImageWrapper', { selector: '.' + WebpackModules.getClassName('imageWrapper') });
+        const ImageWrapper = await ReactComponents.getComponent('ImageWrapper', { selector: `.${WebpackModules.getClassName('imageWrapper')}` });
         MonkeyPatch('BD:E2EE', ImageWrapper.component.prototype).before('render', this.beforeRenderImageWrapper.bind(this));
     }
 
@@ -293,13 +292,13 @@ export default new class E2EE extends BuiltinModule {
             try {
                 const decrypt = Security.decrypt(seed, [this.master, haveKey, cached.image]);
                 component.props.className = 'bd-decryptedImage';
-                component.props.src = component.props.original = 'data:;base64,' + decrypt;
+                component.props.src = component.props.original = `data:;base64,${decrypt}`;
             } catch (err) { return } finally { component.props.readyState = 'READY' }
             return;
         }
 
         component.props.readyState = 'LOADING';
-        Logger.info('E2EE', 'Decrypting image: ' + src);
+        Logger.info('E2EE', `Decrypting image: ${src}`);
         request.get(src, { encoding: 'binary' }).then(res => {
             (async () => {
                 const arr = new Uint8Array(new ArrayBuffer(res.length));

client/src/builtin/EmoteComponent.vue

@@ -1,8 +1,8 @@
 <template>
-    <span class="bd-emotewrapper" :class="{'bd-emote-favourite': 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-emote-favourite-button" :class="{'bd-active': favourite}" @click="toggleFavourite">
+        <div class="bd-emoteFavouriteButton" :class="{'bd-active': favourite}" @click="toggleFavourite">
             <MiStar :size="16" />
         </div>
     </span>

client/src/builtin/EmoteModule.js

@@ -58,7 +58,7 @@ export default new class EmoteModule {
 
     async load(dataPath) {
         const emotes = await FileUtils.readJsonFromFile(dataPath);
-        for (let [index, emote] of emotes.entries()) {
+        for (const [index, emote] of emotes.entries()) {
             // Pause every 10000 emotes so the window doesn't freeze
             if ((index % 10000) === 0)
                 await Utils.wait();
@@ -179,7 +179,7 @@ export default new class EmoteModule {
         let startIndex = 0;
 
         const matching = this.searchCache[key] = [];
-        for (let emote of this.emotes.values()) {
+        for (const emote of this.emotes.values()) {
             if (index >= limit) break;
             if (regex.test(emote.id)) {
                 if (startIndex < start) {
@@ -195,7 +195,7 @@ export default new class EmoteModule {
     }
 
     async patchMessageContent() {
-        const selector = '.' + WebpackModules.getClassName('container', 'containerCozy', 'containerCompact', 'edited');
+        const selector = `.${WebpackModules.getClassName('container', 'containerCozy', 'containerCompact', 'edited')}`;
         const MessageContent = await ReactComponents.getComponent('MessageContent', {selector});
 
         this.unpatchRender = MonkeyPatch('BD:EmoteModule', MessageContent.component.prototype).after('render', (component, args, retVal) => {
@@ -213,7 +213,7 @@ export default new class EmoteModule {
     }
 
     async patchChannelTextArea() {
-        const selector = '.' + WebpackModules.getClassName('channelTextArea', 'emojiButton');
+        const selector = `.${WebpackModules.getClassName('channelTextArea', 'emojiButton')}`;
         const ChannelTextArea = await ReactComponents.getComponent('ChannelTextArea', {selector});
 
         this.unpatchChannelTextArea = MonkeyPatch('BD:EmoteModule', ChannelTextArea.component.prototype).after('render', (component, args, retVal) => {

client/src/builtin/ReactDevtoolsModule.js

@@ -42,7 +42,7 @@ export default new class ReactDevtoolsModule extends BuiltinModule {
         try {
             const res = electron.remote.BrowserWindow.addDevToolsExtension(path.join(Globals.getPath('ext'), 'extensions', 'rdt'));
             if (res !== undefined) {
-                Toasts.success(res + ' Installed');
+                Toasts.success(`${res} Installed`);
                 return;
             }
             Toasts.error('React Developer Tools install failed');

client/src/builtin/VueDevToolsModule.js

@@ -42,7 +42,7 @@ export default new class VueDevtoolsModule extends BuiltinModule {
         try {
             const res = electron.remote.BrowserWindow.addDevToolsExtension(path.join(Globals.getPath('ext'), 'extensions', 'vdt'));
             if (res !== undefined) {
-                Toasts.success(res + ' Installed');
+                Toasts.success(`${res  } Installed`);
                 return;
             }
             Toasts.error('Vue.js devtools install failed');

client/src/modules/contentmanager.js

@@ -76,7 +76,7 @@ export default class {
             await FileUtils.ensureDirectory(this.contentPath);
             const directories = await FileUtils.listDirectory(this.contentPath);
 
-            for (let dir of directories) {
+            for (const dir of directories) {
                 try {
                     await FileUtils.directoryExists(path.join(this.contentPath, dir));
                 } catch (err) { continue; }
@@ -119,7 +119,7 @@ export default class {
             await FileUtils.ensureDirectory(this.contentPath);
             const directories = await FileUtils.listDirectory(this.contentPath);
 
-            for (let dir of directories) {
+            for (const dir of directories) {
                 // If content is already loaded this should resolve
                 if (this.getContentByDirName(dir)) continue;
 
@@ -142,7 +142,7 @@ export default class {
                 }
             }
 
-            for (let content of this.localContent) {
+            for (const content of this.localContent) {
                 if (directories.includes(content.dirName)) continue;
 
                 try {
@@ -219,13 +219,13 @@ export default class {
             userConfig.config = defaultConfig.clone({ settings: userConfig.config });
             userConfig.config.setSaved();
 
-            for (let setting of userConfig.config.findSettings(() => true)) {
+            for (const setting of userConfig.config.findSettings(() => true)) {
                 // This will load custom settings
                 // Setting the content's path on only the live config (and not the default config) ensures that custom settings will not be loaded on the default settings
                 setting.setContentPath(contentPath);
             }
 
-            for (let scheme of userConfig.config.schemes) {
+            for (const scheme of userConfig.config.schemes) {
                 scheme.setContentPath(contentPath);
             }
 
@@ -287,7 +287,9 @@ export default class {
                     newcontent.start(false);
                 }
                 return newcontent;
-            } else this.localContent.splice(index, 1);
+            }
+
+            this.localContent.splice(index, 1);
         } catch (err) {
             Logger.err(this.moduleName, err);
             throw err;

client/src/modules/csseditor.js

@@ -119,7 +119,7 @@ export default new class {
      * @param {String} scss SCSS string
      */
     async compile(scss) {
-        return await ClientIPC.send('bd-compileSass', {
+        return ClientIPC.send('bd-compileSass', {
             data: scss,
             path: await this.fileExists() ? this.filePath : undefined
         });
@@ -130,7 +130,7 @@ export default new class {
      * @return {Promise}
      */
     async recompile() {
-        return await this.updateScss(this.scss);
+        return this.updateScss(this.scss);
     }
 
     /**
@@ -160,7 +160,7 @@ export default new class {
 
         // For some reason this doesn't work
         // if (!electron.shell.openItem(this.filePath))
-        if (!electron.shell.openExternal('file://' + this.filePath))
+        if (!electron.shell.openExternal(`file://${this.filePath}`))
             throw {message: 'Failed to open system editor.'};
     }
 
@@ -267,7 +267,7 @@ export default new class {
      * @param {Array} files Files to watch
      */
     set watchfiles(files) {
-        for (let file of files) {
+        for (const file of files) {
             if (!this.watchfiles.includes(file)) {
                 this.filewatcher.add(file);
                 this.watchfiles.push(file);
@@ -275,7 +275,7 @@ export default new class {
             }
         }
 
-        for (let index in this.watchfiles) {
+        for (const index in this.watchfiles) {
             let file = this.watchfiles[index];
             while (file && !files.find(f => f === file)) {
                 this.filewatcher.remove(file);

client/src/modules/eventhook.js

@@ -62,8 +62,8 @@ export default class extends EventListener {
      */
     emit(e, action, data) {
         switch (e) {
-            case 'dispatch':
-                return this.dispatch(action, data);
+        case 'dispatch':
+            return this.dispatch(action, data);
         }
     }
 

client/src/modules/eventlistener.js

@@ -14,7 +14,7 @@ import Events from './events';
 export default class extends Module {
 
     events() {
-        for (let event of this.eventBindings) {
+        for (const event of this.eventBindings) {
             Events.on(event.id, event.callback);
         }
     }

client/src/modules/eventswrapper.js

@@ -38,7 +38,7 @@ export default class EventsWrapper {
 
     get off() { return this.unsubscribe }
     unsubscribe(event, callback) {
-        for (let index in this.eventSubs) {
+        for (const index in this.eventSubs) {
             if (this.eventSubs[index].event !== event || (callback && this.eventSubs[index].callback === callback)) continue;
             eventemitters.get(this).removeListener(event, this.eventSubs[index].boundCallback);
             this.eventSubs.splice(index, 1);
@@ -46,7 +46,7 @@ export default class EventsWrapper {
     }
 
     unsubscribeAll() {
-        for (let event of this.eventSubs) {
+        for (const event of this.eventSubs) {
             eventemitters.get(this).removeListener(event.event, event.boundCallback);
         }
         this.eventSubs.splice(0, this.eventSubs.length);

client/src/modules/modulemanager.js

@@ -37,7 +37,7 @@ export default class {
      * @return {Promise}
      */
     static async initModules() {
-        for (let module of this.modules) {
+        for (const module of this.modules) {
             try {
                 if (module.init && module.init instanceof Function) module.init();
             } catch (err) {

client/src/modules/pluginapi.js

@@ -182,7 +182,7 @@ export default class PluginApi {
         Utils.removeFromArray(this.menuItems, item);
     }
     removeAllMenuItems() {
-        for (let item of this.menuItems)
+        for (const item of this.menuItems)
             BdMenu.items.remove(item);
     }
     get BdMenuItems() {
@@ -232,7 +232,7 @@ export default class PluginApi {
         DOM.deleteStyle(styleid);
     }
     deleteAllStyles(id) {
-        for (let id of this.injectedStyles) {
+        for (const id of this.injectedStyles) {
             this.deleteStyle(id);
         }
     }
@@ -273,7 +273,7 @@ export default class PluginApi {
     }
     closeAllModals(force) {
         const promises = [];
-        for (let modal of this.modalStack)
+        for (const modal of this.modalStack)
             promises.push(modal.close(force));
         return Promise.all(promises);
     }
@@ -305,7 +305,6 @@ export default class PluginApi {
         });
     }
 
-
     /**
      * Toasts
      */
@@ -335,7 +334,6 @@ export default class PluginApi {
         };
     }
 
-
     /**
      * Emotes
      */
@@ -388,7 +386,7 @@ export default class PluginApi {
 
     async getPlugin(plugin_id) {
         // This should require extra permissions
-        return await PluginManager.waitForPlugin(plugin_id);
+        return PluginManager.waitForPlugin(plugin_id);
     }
     listPlugins() {
         return PluginManager.localContent.map(plugin => plugin.id);
@@ -406,7 +404,7 @@ export default class PluginApi {
 
     async getTheme(theme_id) {
         // This should require extra permissions
-        return await ThemeManager.waitForContent(theme_id);
+        return ThemeManager.waitForContent(theme_id);
     }
     listThemes() {
         return ThemeManager.localContent.map(theme => theme.id);
@@ -424,7 +422,7 @@ export default class PluginApi {
 
     async getModule(module_id) {
         // This should require extra permissions
-        return await ExtModuleManager.waitForContent(module_id);
+        return ExtModuleManager.waitForContent(module_id);
     }
     listModules() {
         return ExtModuleManager.localContent.map(module => module.id);

client/src/modules/pluginmanager.js

@@ -41,7 +41,7 @@ export default class extends ContentManager {
         this.loaded = false;
         const loadAll = await this.loadAllContent(true);
         this.loaded = true;
-        for (let plugin of this.localPlugins) {
+        for (const plugin of this.localPlugins) {
             if (!plugin.enabled) continue;
             plugin.userConfig.enabled = false;
 
@@ -76,7 +76,7 @@ export default class extends ContentManager {
     static get loadContent() { return this.loadPlugin }
     static async loadPlugin(paths, configs, info, main, dependencies, permissions, mainExport) {
         if (permissions && permissions.length > 0) {
-            for (let perm of permissions) {
+            for (const perm of permissions) {
                 Logger.log(this.moduleName, `Permission: ${Permissions.permissionText(perm).HEADER} - ${Permissions.permissionText(perm).BODY}`);
             }
             try {

client/src/modules/reactcomponents.js

@@ -50,7 +50,7 @@ class Helpers {
             const item = parent[key];
             yield { item, parent, key, index, count };
             if (item && item.props && item.props.children) {
-                for (let { parent, key, index, count } of this.recursiveArrayCount(item.props, 'children')) {
+                for (const { parent, key, index, count } of this.recursiveArrayCount(item.props, 'children')) {
                     yield* this.recursiveChildren(parent, key, index, count);
                 }
             }
@@ -58,7 +58,7 @@ class Helpers {
     }
 
     static returnFirst(iterator, process) {
-        for (let child of iterator) {
+        for (const child of iterator) {
             const retVal = process(child);
             if (retVal !== undefined) return retVal;
         }
@@ -111,13 +111,11 @@ class Helpers {
             if (match) {
                 if (selector.child) {
                     return getDirectChild(item, selector.child);
-                }
-                else if (selector.successor) {
+                } else if (selector.successor) {
                     return this.getFirstChild(parent, key, selector.successor);
                 }
-                else {
-                    return { item, parent, key };
-                }
+
+                return { item, parent, key };
             }
         };
         return this.returnFirst(this.recursiveChildren(rootParent, rootKey), checkFilter.bind(null, selector)) || {};
@@ -175,7 +173,7 @@ class ReactComponent {
 
     forceUpdateAll() {
         if (!this.important || !this.important.selector) return;
-        for (let e of document.querySelectorAll(this.important.selector)) {
+        for (const e of document.querySelectorAll(this.important.selector)) {
             Reflection(e).forceUpdate(this);
         }
     }
@@ -237,7 +235,7 @@ export class ReactComponents {
                 if (!elements.length) return;
 
                 let component, reflect;
-                for (let element of elements) {
+                for (const element of elements) {
                     reflect = Reflection(element);
                     component = filter ? reflect.components.find(filter) : reflect.component;
                     if (component) break;
@@ -328,7 +326,7 @@ export class ReactAutoPatcher {
     }
 
     static async patchMessage() {
-        const selector = '.' + WebpackModules.getClassName('message', 'messageCozy', 'messageCompact');
+        const selector = `.${WebpackModules.getClassName('message', 'messageCozy', 'messageCompact')}`;
         this.Message = await ReactComponents.getComponent('Message', {selector}, m => m.prototype && m.prototype.renderCozy);
 
         this.unpatchMessageRender = MonkeyPatch('BD:ReactComponents', this.Message.component.prototype).after('render', (component, args, retVal) => {
@@ -352,7 +350,7 @@ export class ReactAutoPatcher {
     }
 
     static async patchMessageGroup() {
-        const selector = '.' + WebpackModules.getClassName('container', 'message', 'messageCozy');
+        const selector = `.${WebpackModules.getClassName('container', 'message', 'messageCozy')}`;
         this.MessageGroup = await ReactComponents.getComponent('MessageGroup', {selector});
 
         this.unpatchMessageGroupRender = MonkeyPatch('BD:ReactComponents', this.MessageGroup.component.prototype).after('render', (component, args, retVal) => {
@@ -370,7 +368,7 @@ export class ReactAutoPatcher {
     }
 
     static async patchChannelMember() {
-        const selector = '.' + WebpackModules.getClassName('member', 'memberInner', 'activity');
+        const selector = `.${WebpackModules.getClassName('member', 'memberInner', 'activity')}`;
         this.ChannelMember = await ReactComponents.getComponent('ChannelMember', {selector}, m => m.prototype.renderActivity);
 
         this.unpatchChannelMemberRender = MonkeyPatch('BD:ReactComponents', this.ChannelMember.component.prototype).after('render', (component, args, retVal) => {
@@ -423,7 +421,7 @@ export class ReactAutoPatcher {
      * The GuildTextChannel component represents a text channel in the guild channel list.
      */
     static async patchGuildTextChannel() {
-        const selector = '.' + WebpackModules.getClassName('containerDefault', 'actionIcon');
+        const selector = `.${WebpackModules.getClassName('containerDefault', 'actionIcon')}`;
         this.GuildTextChannel = await ReactComponents.getComponent('GuildTextChannel', {selector}, c => c.prototype.renderMentionBadge);
 
         this.unpatchGuildTextChannel = MonkeyPatch('BD:ReactComponents', this.GuildTextChannel.component.prototype).after('render', this._afterChannelRender);
@@ -435,7 +433,7 @@ export class ReactAutoPatcher {
      * The GuildVoiceChannel component represents a voice channel in the guild channel list.
      */
     static async patchGuildVoiceChannel() {
-        const selector = '.' + WebpackModules.getClassName('containerDefault', 'actionIcon');
+        const selector = `.${WebpackModules.getClassName('containerDefault', 'actionIcon')}`;
         this.GuildVoiceChannel = await ReactComponents.getComponent('GuildVoiceChannel', {selector}, c => c.prototype.handleVoiceConnect);
 
         this.unpatchGuildVoiceChannel = MonkeyPatch('BD:ReactComponents', this.GuildVoiceChannel.component.prototype).after('render', this._afterChannelRender);
@@ -469,7 +467,7 @@ export class ReactAutoPatcher {
     }
 
     static async patchUserProfileModal() {
-        const selector = '.' + WebpackModules.getClassName('root', 'topSectionNormal');
+        const selector = `.${WebpackModules.getClassName('root', 'topSectionNormal')}`;
         this.UserProfileModal = await ReactComponents.getComponent('UserProfileModal', {selector}, Filters.byPrototypeFields(['renderHeader', 'renderBadges']));
 
         this.unpatchUserProfileModal = MonkeyPatch('BD:ReactComponents', this.UserProfileModal.component.prototype).after('render', (component, args, retVal) => {
@@ -484,7 +482,7 @@ export class ReactAutoPatcher {
     }
 
     static async patchUserPopout() {
-        const selector = '.' + WebpackModules.getClassName('userPopout', 'headerNormal');
+        const selector = `.${WebpackModules.getClassName('userPopout', 'headerNormal')}`;
         this.UserPopout = await ReactComponents.getComponent('UserPopout', {selector});
 
         this.unpatchUserPopout = MonkeyPatch('BD:ReactComponents', this.UserPopout.component.prototype).after('render', (component, args, retVal) => {
@@ -503,7 +501,7 @@ export class ReactAutoPatcher {
     }
 
     static async patchUploadArea() {
-        const selector = '.' + WebpackModules.getClassName('uploadArea');
+        const selector = `.${WebpackModules.getClassName('uploadArea')}`;
         this.UploadArea = await ReactComponents.getComponent('UploadArea', {selector});
 
         const reflect = Reflection(selector);
@@ -514,7 +512,7 @@ export class ReactAutoPatcher {
             e.stopPropagation();
             e.stopImmediatePropagation();
             stateNode.clearDragging();
-            Modals.confirm("Function not ready", `You tried to install "${e.dataTransfer.files[0].path}", but installing .bd files isn't ready yet.`)
+            Modals.confirm('Function not ready', `You tried to install "${e.dataTransfer.files[0].path}", but installing .bd files isn't ready yet.`)
             // Possibly something like Events.emit('install-file', e.dataTransfer.files[0]);
         };
 

client/src/modules/settings.js

@@ -54,7 +54,7 @@ export default new class Settings {
             const user_config = await FileUtils.readJsonFromFile(settingsPath);
             const { settings, scss, css, css_editor_files, scss_error, css_editor_bounds, favourite_emotes } = user_config;
 
-            for (let set of this.settings) {
+            for (const set of this.settings) {
                 const newSet = settings.find(s => s.id === set.id);
                 if (!newSet) continue;
                 await set.merge(newSet, {dont_save: true});
@@ -91,7 +91,7 @@ export default new class Settings {
                 favourite_emotes: EmoteModule.favourite_emotes
             });
 
-            for (let set of this.settings) {
+            for (const set of this.settings) {
                 set.setSaved();
             }
         } catch (err) {

client/src/modules/theme.js

@@ -79,11 +79,9 @@ export default class Theme extends Content {
                 css: result.css.toString(),
                 files: result.stats.includedFiles
             };
-        } else {
-            return {
-                css: await FileUtils.readFile(this.paths.mainPath)
-            };
         }
+
+        return { css: await FileUtils.readFile(this.paths.mainPath) }
     }
 
     /**
@@ -150,7 +148,7 @@ export default class Theme extends Content {
     set watchfiles(files) {
         if (!files) files = [];
 
-        for (let file of files) {
+        for (const file of files) {
             if (!this.watchfiles.includes(file)) {
                 this.filewatcher.add(file);
                 this.watchfiles.push(file);
@@ -158,7 +156,7 @@ export default class Theme extends Content {
             }
         }
 
-        for (let index in this.watchfiles) {
+        for (const index in this.watchfiles) {
             let file = this.watchfiles[index];
             while (file && !files.find(f => f === file)) {
                 this.filewatcher.remove(file);

client/src/modules/thememanager.js

@@ -80,8 +80,8 @@ export default class ThemeManager extends ContentManager {
     static async getConfigAsSCSS(settingsset) {
         const variables = [];
 
-        for (let category of settingsset.categories) {
-            for (let setting of category.settings) {
+        for (const category of settingsset.categories) {
+            for (const setting of category.settings) {
                 const setting_scss = await this.parseSetting(setting);
                 if (setting_scss) variables.push(`$${setting_scss[0]}: ${setting_scss[1]};`);
             }
@@ -98,14 +98,14 @@ export default class ThemeManager extends ContentManager {
     static async getConfigAsSCSSMap(settingsset) {
         const variables = [];
 
-        for (let category of settingsset.categories) {
-            for (let setting of category.settings) {
+        for (const category of settingsset.categories) {
+            for (const setting of category.settings) {
                 const setting_scss = await this.parseSetting(setting);
                 if (setting_scss) variables.push(`${setting_scss[0]}: (${setting_scss[1]})`);
             }
         }
 
-        return '(' + variables.join(', ') + ')';
+        return `(${variables.join(', ')})`;
     }
 
     /**

client/src/modules/webpackmodules.js

@@ -21,11 +21,11 @@ const KnownModules = {
     GuildStore: Filters.byProperties(['getGuild']),
     SortedGuildStore: Filters.byProperties(['getSortedGuilds']),
     SelectedGuildStore: Filters.byProperties(['getLastSelectedGuildId']),
-    GuildSync: Filters.byProperties(["getSyncedGuilds"]),
-    GuildInfo: Filters.byProperties(["getAcronym"]),
+    GuildSync: Filters.byProperties(['getSyncedGuilds']),
+    GuildInfo: Filters.byProperties(['getAcronym']),
     GuildChannelsStore: Filters.byProperties(['getChannels', 'getDefaultChannel']),
     GuildMemberStore: Filters.byProperties(['getMember']),
-    MemberCountStore: Filters.byProperties(["getMemberCounts"]),
+    MemberCountStore: Filters.byProperties(['getMemberCounts']),
     GuildEmojiStore: Filters.byProperties(['getEmojis']),
     GuildActions: Filters.byProperties(['markGuildAsRead']),
     GuildPermissions: Filters.byProperties(['getGuildPermissions']),
@@ -33,20 +33,20 @@ const KnownModules = {
     /* Channel Store & Actions */
     ChannelStore: Filters.byProperties(['getChannels', 'getDMFromUserId']),
     SelectedChannelStore: Filters.byProperties(['getLastSelectedChannelId']),
-    ChannelActions: Filters.byProperties(["selectChannel"]),
-    PrivateChannelActions: Filters.byProperties(["openPrivateChannel"]),
-    ChannelSelector: Filters.byProperties(["selectGuild", "selectChannel"]),
+    ChannelActions: Filters.byProperties(['selectChannel']),
+    PrivateChannelActions: Filters.byProperties(['openPrivateChannel']),
+    ChannelSelector: Filters.byProperties(['selectGuild', 'selectChannel']),
 
     /* Current User Info, State and Settings */
-    UserInfoStore: Filters.byProperties(["getToken"]),
-    UserSettingsStore: Filters.byProperties(["guildPositions"]),
+    UserInfoStore: Filters.byProperties(['getToken']),
+    UserSettingsStore: Filters.byProperties(['guildPositions']),
     AccountManager: Filters.byProperties(['register', 'login']),
     UserSettingsUpdater: Filters.byProperties(['updateRemoteSettings']),
     OnlineWatcher: Filters.byProperties(['isOnline']),
     CurrentUserIdle: Filters.byProperties(['getIdleTime']),
     RelationshipStore: Filters.byProperties(['isBlocked']),
     RelationshipManager: Filters.byProperties(['addRelationship']),
-    MentionStore: Filters.byProperties(["getMentions"]),
+    MentionStore: Filters.byProperties(['getMentions']),
 
     /* User Stores and Utils */
     UserStore: Filters.byProperties(['getCurrentUser']),
@@ -64,18 +64,18 @@ const KnownModules = {
     EmojiStore: Filters.byProperties(['getByCategory', 'EMOJI_NAME_RE']),
 
     /* Invite Store and Utils */
-    InviteStore: Filters.byProperties(["getInvites"]),
+    InviteStore: Filters.byProperties(['getInvites']),
     InviteResolver: Filters.byProperties(['findInvite']),
     InviteActions: Filters.byProperties(['acceptInvite']),
 
     /* Discord Objects & Utils */
-    DiscordConstants: Filters.byProperties(["Permissions", "ActivityTypes", "StatusTypes"]),
+    DiscordConstants: Filters.byProperties(['Permissions', 'ActivityTypes', 'StatusTypes']),
     Permissions: Filters.byProperties(['getHighestRole']),
     ColorConverter: Filters.byProperties(['hex2int']),
     ColorShader: Filters.byProperties(['darken']),
-    ClassResolver: Filters.byProperties(["getClass"]),
-    ButtonData: Filters.byProperties(["ButtonSizes"]),
-    IconNames: Filters.byProperties(["IconNames"]),
+    ClassResolver: Filters.byProperties(['getClass']),
+    ButtonData: Filters.byProperties(['ButtonSizes']),
+    IconNames: Filters.byProperties(['IconNames']),
     NavigationUtils: Filters.byProperties(['transitionTo', 'replaceWith', 'getHistory']),
 
     /* Discord Messages */
@@ -94,36 +94,36 @@ const KnownModules = {
     CurrentExperiment: Filters.byProperties(['getExperimentId']),
 
     /* Images, Avatars and Utils */
-    ImageResolver: Filters.byProperties(["getUserAvatarURL"]),
+    ImageResolver: Filters.byProperties(['getUserAvatarURL']),
     ImageUtils: Filters.byProperties(['getSizedImageSrc']),
-    AvatarDefaults: Filters.byProperties(["getUserAvatarURL", "DEFAULT_AVATARS"]),
+    AvatarDefaults: Filters.byProperties(['getUserAvatarURL', 'DEFAULT_AVATARS']),
 
     /* Drag & Drop */
-    DNDActions: Filters.byProperties(["beginDrag"]),
-    DNDSources: Filters.byProperties(["addTarget"]),
-    DNDObjects: Filters.byProperties(["DragSource"]),
+    DNDActions: Filters.byProperties(['beginDrag']),
+    DNDSources: Filters.byProperties(['addTarget']),
+    DNDObjects: Filters.byProperties(['DragSource']),
 
     /* Electron & Other Internals with Utils */
-    ElectronModule: Filters.byProperties(["_getMainWindow"]),
+    ElectronModule: Filters.byProperties(['_getMainWindow']),
     Dispatcher: Filters.byProperties(['dirtyDispatch']),
-    PathUtils: Filters.byProperties(["hasBasename"]),
-    NotificationModule: Filters.byProperties(["showNotification"]),
-    RouterModule: Filters.byProperties(["Router"]),
-    APIModule: Filters.byProperties(["getAPIBaseURL"]),
-    AnalyticEvents: Filters.byProperties(["AnalyticEventConfigs"]),
+    PathUtils: Filters.byProperties(['hasBasename']),
+    NotificationModule: Filters.byProperties(['showNotification']),
+    RouterModule: Filters.byProperties(['Router']),
+    APIModule: Filters.byProperties(['getAPIBaseURL']),
+    AnalyticEvents: Filters.byProperties(['AnalyticEventConfigs']),
     KeyGenerator: Filters.byCode(/"binary"/),
     Buffers: Filters.byProperties(['Buffer', 'kMaxLength']),
     DeviceStore: Filters.byProperties(['getDevices']),
-    SoftwareInfo: Filters.byProperties(["os"]),
-    CurrentContext: Filters.byProperties(["setTagsContext"]),
+    SoftwareInfo: Filters.byProperties(['os']),
+    CurrentContext: Filters.byProperties(['setTagsContext']),
 
     /* Media Stuff (Audio/Video) */
-    MediaDeviceInfo: Filters.byProperties(["Codecs", "SUPPORTED_BROWSERS"]),
-    MediaInfo: Filters.byProperties(["getOutputVolume"]),
+    MediaDeviceInfo: Filters.byProperties(['Codecs', 'SUPPORTED_BROWSERS']),
+    MediaInfo: Filters.byProperties(['getOutputVolume']),
     MediaEngineInfo: Filters.byProperties(['MediaEngineFeatures']),
-    VoiceInfo: Filters.byProperties(["EchoCancellation"]),
-    VideoStream: Filters.byProperties(["getVideoStream"]),
-    SoundModule: Filters.byProperties(["playSound"]),
+    VoiceInfo: Filters.byProperties(['EchoCancellation']),
+    VideoStream: Filters.byProperties(['getVideoStream']),
+    SoundModule: Filters.byProperties(['playSound']),
 
     /* Window, DOM, HTML */
     WindowInfo: Filters.byProperties(['isFocused', 'windowSize']),
@@ -133,13 +133,13 @@ const KnownModules = {
     /* Locale/Location and Time */
     LocaleManager: Filters.byProperties(['setLocale']),
     Moment: Filters.byProperties(['parseZone']),
-    LocationManager: Filters.byProperties(["createLocation"]),
-    Timestamps: Filters.byProperties(["fromTimestamp"]),
+    LocationManager: Filters.byProperties(['createLocation']),
+    Timestamps: Filters.byProperties(['fromTimestamp']),
 
     /* Strings and Utils */
-    Strings: Filters.byProperties(["TEXT", "TEXTAREA_PLACEHOLDER"]),
+    Strings: Filters.byProperties(['TEXT', 'TEXTAREA_PLACEHOLDER']),
     StringFormats: Filters.byProperties(['a', 'z']),
-    StringUtils: Filters.byProperties(["toASCII"]),
+    StringUtils: Filters.byProperties(['toASCII']),
 
     /* URLs and Utils */
     URLParser: Filters.byProperties(['Url', 'parse']),
@@ -193,7 +193,7 @@ class WebpackModules {
     static getModule(filter, first = true, _modules) {
         const modules = _modules || this.getAllModules();
         const rm = [];
-        for (let index in modules) {
+        for (const index in modules) {
             if (!modules.hasOwnProperty(index)) continue;
             const module = modules[index];
             const { exports } = module;
@@ -317,7 +317,7 @@ class WebpackModules {
                 this.moduleLoadedEventTimeout = undefined;
 
                 // Emit a module-loaded event for every module
-                for (let module of this.modulesLoadingCache) {
+                for (const module of this.modulesLoadingCache) {
                     Events.emit('module-loaded', module);
                 }
 

client/src/structs/discord/channel.js

@@ -27,12 +27,12 @@ export class Channel {
 
     static from(channel) {
         switch (channel.type) {
-            default: return new Channel(channel);
-            case 0: return new GuildTextChannel(channel);
-            case 1: return new DirectMessageChannel(channel);
-            case 2: return new GuildVoiceChannel(channel);
-            case 3: return new GroupChannel(channel);
-            case 4: return new ChannelCategory(channel);
+        default: return new Channel(channel);
+        case 0: return new GuildTextChannel(channel);
+        case 1: return new DirectMessageChannel(channel);
+        case 2: return new GuildVoiceChannel(channel);
+        case 3: return new GroupChannel(channel);
+        case 4: return new ChannelCategory(channel);
         }
     }
 
@@ -156,9 +156,9 @@ export class PermissionOverwrite {
 
     static from(data, channel_id) {
         switch (data.type) {
-            default: return new PermissionOverwrite(data, channel_id);
-            case 'role': return new RolePermissionOverwrite(data, channel_id);
-            case 'member': return new MemberPermissionOverwrite(data, channel_id);
+        default: return new PermissionOverwrite(data, channel_id);
+        case 'role': return new RolePermissionOverwrite(data, channel_id);
+        case 'member': return new MemberPermissionOverwrite(data, channel_id);
         }
     }
 

client/src/structs/discord/message.js

@@ -99,15 +99,15 @@ export class Message {
 
     static from(data) {
         switch (data.type) {
-            default: return new Message(data);
-            case 0: return new DefaultMessage(data);
-            case 1: return new RecipientAddMessage(data);
-            case 2: return new RecipientRemoveMessage(data);
-            case 3: return new CallMessage(data);
-            case 4: return new GroupChannelNameChangeMessage(data);
-            case 5: return new GroupChannelIconChangeMessage(data);
-            case 6: return new MessagePinnedMessage(data);
-            case 7: return new GuildMemberJoinMessage(data);
+        default: return new Message(data);
+        case 0: return new DefaultMessage(data);
+        case 1: return new RecipientAddMessage(data);
+        case 2: return new RecipientRemoveMessage(data);
+        case 3: return new CallMessage(data);
+        case 4: return new GroupChannelNameChangeMessage(data);
+        case 5: return new GroupChannelIconChangeMessage(data);
+        case 6: return new MessagePinnedMessage(data);
+        case 7: return new GuildMemberJoinMessage(data);
         }
     }
 

client/src/structs/discord/user.js

@@ -289,7 +289,7 @@ export class GuildMember {
     addRole(...roles) {
         const newRoles = this.roleIds.concat([]);
         let changed = false;
-        for (let role of roles) {
+        for (const role of roles) {
             if (newRoles.includes(role.id || role)) continue;
             newRoles.push(role.id || role);
             changed = true;
@@ -306,7 +306,7 @@ export class GuildMember {
     removeRole(...roles) {
         const newRoles = this.roleIds.concat([]);
         let changed = false;
-        for (let role of roles) {
+        for (const role of roles) {
             if (!newRoles.includes(role.id || role)) continue;
             Utils.removeFromArray(newRoles, role.id || role);
             changed = true;

client/src/structs/list.js

@@ -10,14 +10,10 @@
 
 export default class List extends Array {
 
-    constructor() {
-        super(...arguments);
-    }
-
     get(...filters) {
         return this.find(item => {
-            for (let filter of filters) {
-                for (let key in filter) {
+            for (const filter of filters) {
+                for (const key in filter) {
                     if (filter.hasOwnProperty(key)) {
                         if (item[key] !== filter[key]) return false;
                     }

client/src/structs/settings/setting.js

@@ -47,7 +47,7 @@ export default class Setting {
         else if (args.type === 'kvp') return new KvpSetting(args, ...merge);
         else if (args.type === 'securekvp') return new SecureKvpSetting(args, ...merge);
         else if (args.type === 'custom') return new CustomSetting(args, ...merge);
-        else throw {message: `Setting type ${args.type} unknown`};
+        throw {message: `Setting type ${args.type} unknown`};
     }
 
 }

client/src/structs/settings/settingscategory.js

@@ -29,14 +29,14 @@ export default class SettingsCategory extends AsyncEventEmitter {
 
         this.args.settings = this.settings.map(setting => new Setting(setting));
 
-        for (let newCategory of merge) {
+        for (const newCategory of merge) {
             this._merge(newCategory);
         }
 
         this.__settingUpdated = this.__settingUpdated.bind(this);
         this.__settingsUpdated = this.__settingsUpdated.bind(this);
 
-        for (let setting of this.settings) {
+        for (const setting of this.settings) {
             setting.on('setting-updated', this.__settingUpdated);
             setting.on('settings-updated', this.__settingsUpdated);
         }
@@ -216,7 +216,7 @@ export default class SettingsCategory extends AsyncEventEmitter {
     _merge(newCategory) {
         let updatedSettings = [];
 
-        for (let newSetting of newCategory.settings) {
+        for (const newSetting of newCategory.settings) {
             const setting = this.settings.find(setting => setting.id === newSetting.id);
             if (!setting) {
                 Logger.warn('SettingsCategory', `Trying to merge setting ${this.id}/${newSetting.id}, which does not exist.`);
@@ -243,7 +243,7 @@ export default class SettingsCategory extends AsyncEventEmitter {
     async merge(newCategory, emit_multi = true) {
         let updatedSettings = [];
 
-        for (let newSetting of newCategory.settings) {
+        for (const newSetting of newCategory.settings) {
             const setting = this.settings.find(setting => setting.id === newSetting.id);
             if (!setting) {
                 Logger.warn('SettingsCategory', `Trying to merge setting ${this.id}/${newSetting.id}, which does not exist.`);
@@ -271,7 +271,7 @@ export default class SettingsCategory extends AsyncEventEmitter {
      * Marks all settings in this set as saved (not changed).
      */
     setSaved() {
-        for (let setting of this.settings) {
+        for (const setting of this.settings) {
             setting.setSaved();
         }
     }

client/src/structs/settings/settingsscheme.js

@@ -86,14 +86,14 @@ export default class SettingsScheme {
      * @return {Boolean}
      */
     isActive(set) {
-        for (let schemeCategory of this.categories) {
+        for (const schemeCategory of this.categories) {
             const category = set.categories.find(c => c.id === (schemeCategory.id || schemeCategory.category));
             if (!category) {
                 Logger.warn('SettingsScheme', `Category ${schemeCategory.id || schemeCategory.category} does not exist`);
                 return false;
             }
 
-            for (let schemeSetting of schemeCategory.settings) {
+            for (const schemeSetting of schemeCategory.settings) {
                 const setting = category.settings.find(s => s.id === schemeSetting.id);
                 if (!setting) {
                     Logger.warn('SettingsScheme', `Setting ${category.category}/${schemeSetting.id} does not exist`);

client/src/structs/settings/settingsset.js

@@ -31,7 +31,7 @@ export default class SettingsSet extends AsyncEventEmitter {
         this.args.categories = this.categories.map(category => new SettingsCategory(category));
         this.args.schemes = this.schemes.map(scheme => new SettingsScheme(scheme));
 
-        for (let newSet of merge) {
+        for (const newSet of merge) {
             this._merge(newSet);
         }
 
@@ -40,7 +40,7 @@ export default class SettingsSet extends AsyncEventEmitter {
         this.__addedSetting = this.__addedSetting.bind(this);
         this.__removedSetting = this.__removedSetting.bind(this);
 
-        for (let category of this.categories) {
+        for (const category of this.categories) {
             category.on('setting-updated', this.__settingUpdated);
             category.on('settings-updated', this.__settingsUpdated);
             category.on('added-setting', this.__addedSetting);
@@ -287,7 +287,7 @@ export default class SettingsSet extends AsyncEventEmitter {
      * @return {Setting}
      */
     findSetting(f) {
-        for (let category of this.categories) {
+        for (const category of this.categories) {
             const setting = category.find(f);
             if (setting) return setting;
         }
@@ -309,7 +309,7 @@ export default class SettingsSet extends AsyncEventEmitter {
      * @return {Array} An array of matching Setting objects
      */
     findSettingInCategory(cf, f) {
-        for (let category of this.categories.filter(cf)) {
+        for (const category of this.categories.filter(cf)) {
             const setting = category.find(f);
             if (setting) return setting;
         }
@@ -323,7 +323,7 @@ export default class SettingsSet extends AsyncEventEmitter {
      */
     findSettingsInCategory(cf, f) {
         let settings = [];
-        for (let category of this.categories.filter(cf)) {
+        for (const category of this.categories.filter(cf)) {
             settings = settings.concat(category.findSettings(f));
         }
         return settings;
@@ -371,7 +371,7 @@ export default class SettingsSet extends AsyncEventEmitter {
         const categories = newSet && newSet.args ? newSet.args.settings : newSet ? newSet.settings : newSet;
         if (!categories) return [];
 
-        for (let newCategory of categories) {
+        for (const newCategory of categories) {
             const category = this.find(category => category.id === (newCategory.id || newCategory.category));
             if (!category) {
                 Logger.warn('SettingsSet', `Trying to merge category ${newCategory.id}, which does not exist.`);
@@ -402,7 +402,7 @@ export default class SettingsSet extends AsyncEventEmitter {
             newSet ? newSet.categories || newSet.settings : newSet;
         if (!categories) return [];
 
-        for (let newCategory of categories) {
+        for (const newCategory of categories) {
             const category = this.find(category => category.id === (newCategory.id || newCategory.category));
             if (!category) {
                 Logger.warn('SettingsSet', `Trying to merge category ${newCategory.id}, which does not exist.`);
@@ -432,7 +432,7 @@ export default class SettingsSet extends AsyncEventEmitter {
      * Marks all settings in this set as saved (not changed).
      */
     setSaved() {
-        for (let category of this.categories) {
+        for (const category of this.categories) {
             category.setSaved();
         }
     }

client/src/structs/settings/types/array.js

@@ -174,7 +174,7 @@ export default class ArraySetting extends Setting {
         const newItems = [];
         let error;
 
-        for (let newItem of updatedSetting.value) {
+        for (const newItem of updatedSetting.value) {
             try {
                 const item = this.items.find(i => i.id && i.id === newItem.id);
 
@@ -200,7 +200,7 @@ export default class ArraySetting extends Setting {
             } catch (e) { error = e; }
         }
 
-        for (let item of this.items) {
+        for (const item of this.items) {
             if (newItems.includes(item)) continue;
 
             try {
@@ -245,8 +245,8 @@ export default class ArraySetting extends Setting {
     setContentPath(contentPath) {
         this.args.path = contentPath;
 
-        for (let category of this.categories) {
-            for (let setting of category.settings) {
+        for (const category of this.categories) {
+            for (const setting of category.settings) {
                 setting.setContentPath(contentPath);
             }
         }
@@ -258,11 +258,11 @@ export default class ArraySetting extends Setting {
      */
     async toSCSS() {
         const maps = [];
-        for (let item of this.items)
+        for (const item of this.items)
             maps.push(await ThemeManager.getConfigAsSCSSMap(item));
 
         // Final comma ensures the variable is a list
-        return maps.length ? maps.join(', ') + ',' : '()';
+        return maps.length ? `${maps.join(', ')},` : '()';
     }
 
 }

client/src/structs/settings/types/basesetting.js

@@ -30,7 +30,7 @@ export default class Setting extends AsyncEventEmitter {
         if (!this.args.hasOwnProperty('saved_value'))
             this.args.saved_value = this.args.value;
 
-        for (let newSetting of merge) {
+        for (const newSetting of merge) {
             this._merge(newSetting);
         }
 

client/src/structs/settings/types/file.js

@@ -49,7 +49,7 @@ export default class FileSetting extends Setting {
         if (!this.value || !this.value.length) return '()';
 
         const files = [];
-        for (let filepath of this.value) {
+        for (const filepath of this.value) {
             const buffer = await FileUtils.readFileBuffer(path.resolve(this.path, filepath));
             const type = await FileUtils.getFileType(buffer);
             files.push(`(data: ${ThemeManager.toSCSSString(buffer.toString('base64'))}, type: ${ThemeManager.toSCSSString(type.mime)}, url: ${ThemeManager.toSCSSString(await FileUtils.toDataURI(buffer, type.mime))})`);

client/src/structs/settings/types/guild.js

@@ -89,7 +89,7 @@ export default class GuildSetting extends Setting {
         const newGuilds = [];
         let error;
 
-        for (let newGuild of updatedSetting.value) {
+        for (const newGuild of updatedSetting.value) {
             try {
                 const guild = updatedSetting.old_value.find(g => g === newGuild);
 
@@ -105,7 +105,7 @@ export default class GuildSetting extends Setting {
             } catch (e) { error = e; }
         }
 
-        for (let guild_id of updatedSetting.old_value) {
+        for (const guild_id of updatedSetting.old_value) {
             if (newGuilds.find(g => g === guild_id)) continue;
 
             try {
@@ -129,7 +129,7 @@ export default class GuildSetting extends Setting {
         if (!this.value || !this.value.length) return '()';
 
         const guilds = [];
-        for (let guild_id of this.value) {
+        for (const guild_id of this.value) {
             if (guild_id)
                 guilds.push(guild_id);
         }

client/src/structs/settings/types/keybind.js

@@ -67,7 +67,7 @@ export default class KeybindSetting extends Setting {
     }
 
     static __event_handler(event, data) {
-        for (let keybindSetting of instances) {
+        for (const keybindSetting of instances) {
             keybindSetting.emit(event, data);
         }
     }

client/src/styles/index.scss

@@ -1 +1 @@
-@import './partials/index.scss';
+@import './partials/index';

client/src/styles/partials/badges.scss

@@ -1,66 +0,0 @@
-.bd-profile-badges-wrap {
-    display: inline-flex;
-    margin-top: 8px;
-    flex: 1 1 auto;
-
-    + [class*="profileBadges"] {
-        display: inline-flex;
-    }
-}
-
-.bd-profile-badges {
-    display: flex;
-}
-
-.bd-profile-badge {
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    cursor: pointer;
-    height: 16px;
-    width: 16px;
-    margin-right: 6px;
-}
-
-.bd-profile-badge-developer,
-.bd-profile-badge-webdev,
-.bd-profile-badge-contributor {
-    background-image: $logoSmallBw;
-    filter: brightness(10);
-
-    .theme-light [class*="topSectionNormal-"] .bd-profile-badges-profile-modal > &,
-    .theme-light :not(.bd-profile-badges-profile-modal) > & {
-        background-image: $logoSmallLight;
-        filter: none;
-    }
-}
-
-.bd-profile-badges.bd-profile-badges-nametag {
-    display: inline-block;
-    margin-left: 6px;
-    height: 11px;
-
-    .bd-profile-badge {
-        width: 12px;
-        height: 12px;
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
-// .member-username .bd-profile-badges {
-//     display: inline-block;
-//     height: 17px;
-//     width: 14px;
-//
-//     .bd-badge,
-//     .bd-badge-c {
-//         width: 14px;
-//         height: 16px;
-//         background-position: center;
-//         background-size: 12px 12px;
-//         background-repeat: no-repeat;
-//     }
-// }

client/src/styles/partials/bdsettings/button.scss

@@ -1,22 +1,22 @@
-.bd-settings-button {
+.bd-settingsButton {
     position: absolute;
     z-index: 1;
     top: 22px;
     width: 70px;
     height: 48px;
     left: 0;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 0 rgba(0, 0, 0, .06);
     opacity: 1;
 
-    .platform-darwin & {
+    .platform-darwin & { // sass-lint:disable-line class-name-format
         top: 27px;
     }
 
-    .platform-linux & {
+    .platform-linux & { // sass-lint:disable-line class-name-format
         top: 0;
     }
 
-    .bd-settings-button-btn {
+    .bd-settingsButtonBtn {
         background-image: $logoSmallBw;
         background-size: 50% 50%;
         background-repeat: no-repeat;
@@ -25,33 +25,37 @@
         height: 100%;
         cursor: pointer;
         filter: grayscale(100%);
-        opacity: 0.5;
-        transition: all 0.4s ease-in-out;
+        opacity: .5;
+        transition: all .4s ease-in-out;
 
-        &:not(.bd-loading):hover {
-            filter: none;
-            opacity: 1;
+        &:not(.bd-loading) {
+            &:hover {
+                filter: none;
+                opacity: 1;
+            }
         }
 
         &.bd-loading {
-            animation: bd-settings-button-pulse 1.5s infinite;
+            animation: bd-settingsButtonPulse 1.5s infinite;
         }
 
         &.bd-updates {
-            filter: hue-rotate(250deg) !important;
-            opacity: 1 !important;
+            filter: hue-rotate(250deg) !important; // sass-lint:disable-line no-important
+            opacity: 1 !important; // sass-lint:disable-line no-important
         }
     }
 
-    &.bd-hide-button {
-        animation: bd-fade-out 0.4s ease-out;
+    &.bd-hideButton {
+        animation: bd-fadeOut .4s ease-out;
 
         &.bd-active {
-            animation: bd-fade-in 0.4s ease-in;
+            animation: bd-fadeIn .4s ease-in;
         }
 
-        &:not(.bd-active):not(.bd-animating) {
-            display: none;
+        &:not(.bd-active) {
+            &:not(.bd-animating) {
+                display: none;
+            }
         }
     }
 
@@ -60,11 +64,11 @@
     }
 
     &.bd-active,
-    &.bd-hide-button {
+    &.bd-hideButton {
         background: transparent;
         box-shadow: none;
 
-        .bd-settings-button-btn {
+        .bd-settingsButtonBtn {
             background-image: $logoBigBw;
             background-size: 100% 100%;
             filter: none;
@@ -81,16 +85,3 @@
         z-index: 3001;
     }
 }
-
-@keyframes bd-settings-button-pulse {
-    0% {
-        filter: grayscale(100%);
-    }
-    50% {
-        filter: grayscale(0%);
-        opacity: 1;
-    }
-    100% {
-        filter: grayscale(100%);
-    }
-}

client/src/styles/partials/bdsettings/card.scss

@@ -3,20 +3,20 @@
     flex-direction: column;
     flex-grow: 1;
     background: transparent;
-    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+    border-bottom: 1px solid rgba(114, 118, 126, .3);
     min-height: 150px;
     color: #b9bbbe;
     margin-top: 20px;
     padding-bottom: 20px;
 
-    .bd-card-header {
+    .bd-cardHeader {
         margin-bottom: 15px;
         display: flex;
         flex-grow: 0;
         font-weight: 700;
         align-items: center;
 
-        .bd-card-icon {
+        .bd-cardIcon {
             width: 30px;
             height: 30px;
             background-size: cover;
@@ -31,12 +31,12 @@
         }
     }
 
-    .bd-card-body {
+    .bd-cardBody {
         display: flex;
         flex-grow: 1;
         flex-direction: column;
 
-        .bd-card-description {
+        .bd-cardDescription {
             flex-grow: 1;
             min-height: 60px;
             color: #8a8c90;
@@ -46,12 +46,12 @@
             white-space: pre-wrap;
         }
 
-        .bd-card-footer {
+        .bd-cardFooter {
             display: flex;
             align-items: flex-end;
 
-            .bd-card-extra {
-                color: rgba(255, 255, 255, 0.15);
+            .bd-cardExtra {
+                color: rgba(255, 255, 255, .15);
                 font-size: 10px;
                 font-weight: 700;
                 flex-grow: 1;
@@ -60,7 +60,7 @@
             .bd-controls {
                 margin-left: 15px;
 
-                .bd-button-group {
+                .bd-buttonGroup {
                     .bd-button {
                         fill: #fff;
                         width: 30px;
@@ -71,19 +71,21 @@
         }
     }
 
-    .bd-switch-wrapper {
+    .bd-switchWrapper {
         width: 40px;
         height: 20px;
 
-        .bd-switch::before {
-            width: 14px;
-            height: 14px;
+        .bd-switch {
+            &::before {
+                width: 14px;
+                height: 14px;
+            }
         }
     }
 }
 
-.bd-content-author {
-    .bd-content-author-link {
+.bd-contentAuthor {
+    .bd-contentAuthorLink {
         cursor: pointer;
 
         &:hover {
@@ -92,10 +94,10 @@
     }
 }
 
-.bd-content-author-links {
+.bd-contentAuthorLinks {
     padding: 3px 5px;
 
-    .bd-popover-inner > :first-child {
+    .bd-popoverInner > :first-child {
         display: flex;
         flex-direction: row;
     }

client/src/styles/partials/bdsettings/collection.scss

@@ -2,8 +2,10 @@
     display: flex;
     flex-direction: column;
 
-    div:first-child {
-        flex: 1 1 auto;
+    div {
+        &:first-child {
+            flex: 1 1 auto;
+        }
     }
 
     .bd-collectionItem {
@@ -22,7 +24,7 @@
 
             &:hover {
                 svg {
-                    fill: #FFF;
+                    fill: #fff;
                 }
             }
 
@@ -50,7 +52,7 @@
 
         &:hover {
             svg {
-                fill: #FFF;
+                fill: #fff;
             }
         }
     }

client/src/styles/partials/bdsettings/contentview.scss

@@ -1,6 +1,6 @@
 .bd-pluginsview,
 .bd-themesview {
-    .bd-online-ph {
+    .bd-onlinePh {
         display: flex;
         flex-direction: column;
         margin: 10% 0;

client/src/styles/partials/bdsettings/e2ee.scss

@@ -31,7 +31,7 @@
     }
 
     .bd-taDivider {
-        background-color: rgba(255, 255, 255, 0.1);
+        background-color: rgba(255, 255, 255, .1);
         box-sizing: border-box;
         position: relative;
         top: 10%;
@@ -41,24 +41,23 @@
     }
 
     .bd-e2eeLockContextMenu {
+        border: 0;
 
-        border: none;
-
-        .ctx-menu {
-            background: #23272A;
+        .ctx-menu { // sass-lint:disable-line class-name-format
+            background: #23272a;
             border-radius: 4px;
             box-shadow: none;
             padding: 0;
 
             .bd-e2eeLockContextMenuOption {
-                background: #23272A;
-                color: #99AAB5;
-                padding: 8px 8px;
+                background: #23272a;
+                color: #99aab5;
+                padding: 8px;
                 font-weight: 500;
                 cursor: default;
 
                 &:hover {
-                    background: #000000;
+                    background: #000;
                 }
             }
         }
@@ -112,81 +111,88 @@
     margin: 0;
     margin-top: 15px;
 
-    .bd-ok svg {
-        fill: $colbdgreen;
+    .bd-ok {
+        svg {
+            fill: $colbdgreen;
+        }
     }
 
-    .bd-warn svg {
-        fill: $colwarn;
+    .bd-warn {
+        svg {
+            fill: $colwarn;
+        }
     }
 
-    .bd-popover-wrapper,
+    .bd-popoverWrapper,
     .bd-popoverWrapper {
-        .bd-popover-inner,
+        .bd-popoverInner,
         .bd-popoverInner {
             display: flex;
 
-            > div:first-child {
-                display: flex;
+            > div {
+                &:first-child {
+                    display: flex;
 
-                > div:not(:first-child) {
-                    margin-left: 10px;
+                    > div {
+                        &:not(:first-child) {
+                            margin-left: 10px;
+                        }
+                    }
                 }
             }
 
-            .bd-material-design-icon,
+            .bd-materialDesignIcon,
             .bd-materialDesignIcon {
                 display: flex;
                 fill: #7e8084;
                 cursor: pointer;
 
                 &:hover {
-                    fill: #FFF;
+                    fill: #fff;
                 }
             }
         }
     }
 
-    .bd-popover-arrow,
+    .bd-popoverArrow,
     .bd-popoverArrow {
         display: none;
     }
 }
 
-.bd-encryptedImage::before {
-    content: "";
-    position: absolute;
-    background: $colbdgreen;
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    display: flex;
-    // justify-content: center;
-    // align-items: flex-start;
-    // font-size: 1.2em;
-    // font-weight: 700;
-    // color: #2c2c2c;
-    // line-height: 30px;
-    background-image: $lockIcon;
-    background-size: calc(100% / 2);
-    background-repeat: no-repeat;
-    background-position: center;
+.bd-encryptedImage,
+.bd-decryptedImage {
+    &::before {
+        content: '';
+        position: absolute;
+        background-color: $colbdgreen;
+        background-image: $lockIcon;
+        background-repeat: no-repeat;
+    }
 }
 
-.bd-decryptedImage::before {
-    content: "";
-    background-image: $lockIcon;
-    width: 11px;
-    height: 11px;
-    position: absolute;
-    z-index: 1;
-    display: block;
-    background-size: cover;
-    background-color: $colbdgreen;
-    background-repeat: no-repeat;
-    border-radius: 100%;
-    border: 2px solid $colbdgreen;
-    top: 5px;
-    left: 5px;
-    opacity: .5;
+.bd-encryptedImage {
+    &::before {
+        width: 100%;
+        height: 100%;
+        border-radius: 3px;
+        display: flex;
+        background-size: calc(100% / 2);
+        background-position: center;
+    }
+}
+
+.bd-decryptedImage {
+    &::before {
+        width: 11px;
+        height: 11px;
+        z-index: 1;
+        display: block;
+        background-size: cover;
+        border-radius: 100%;
+        border: 2px solid $colbdgreen;
+        top: 5px;
+        left: 5px;
+        opacity: .5;
+    }
 }

client/src/styles/partials/bdsettings/index.scss

@@ -1,11 +1,11 @@
-@import './button.scss';
-@import './sidebarview.scss';
-@import './contentview.scss';
-@import './card.scss';
-@import './remotecard.scss';
-@import './tooltips.scss';
-@import './settings-schemes.scss';
-@import './updater.scss';
+@import './button';
+@import './sidebarview';
+@import './contentview';
+@import './card';
+@import './remotecard';
+@import './tooltips';
+@import './settings-schemes';
+@import './updater';
 @import './window-preferences';
 @import './kvp';
 @import './collection';

client/src/styles/partials/bdsettings/remotecard.scss

@@ -1,43 +1,40 @@
 .bd-remoteCard {
     display: flex;
     flex-direction: column;
-    // background: rgba(0,0,0,.1);
     margin-top: 10px;
     padding: 10px 0;
     border-radius: 0;
-    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+    border-bottom: 1px solid rgba(114, 118, 126, .3);
 
     &:hover {
-        // background: rgba(0,0,0,.2);
         transform: scale(1.005);
-        // box-shadow: 0px 0px 5px rgba(0,0,0,.5);
     }
 
-    .bd-remoteCard-title {
+    .bd-remoteCardTitle {
         color: #b9bbbe;
         font-weight: 700;
     }
 
-    .bd-remoteCard-likes {
-        color: red;
+    .bd-remoteCardLikes {
+        color: #f00;
         font-size: 12px;
         font-weight: 600;
     }
 
-    .bd-remoteCard-infoContainer {
+    .bd-remoteCardInfoContainer {
         margin-left: 10px;
 
-        .bd-remoteCard-infoBox {
+        .bd-remoteCardInfoBox {
             color: #b3b5b8;
             font-size: 12px;
             font-weight: 700;
 
-            .bd-remoteCard-info {
+            .bd-remoteCardInfo {
                 display: flex;
                 font-size: 12px;
                 line-height: 16px;
 
-                .bd-material-design-icon {
+                .bd-materialDesignIcon {
                     display: flex;
                     fill: $colbdgreen;
                 }
@@ -45,20 +42,20 @@
         }
     }
 
-    .bd-remoteCard-thumb {
+    .bd-remoteCardThumb {
         height: 100px;
         width: 180px;
-        background: rgba(0,0,0,.1);
+        background: rgba(0, 0, 0, .1);
         border-radius: 3px;
     }
 
-    .bd-remoteCard-tags {
+    .bd-remoteCardTags {
         color: #828a97;
         font-size: 10px;
         line-height: 20px;
     }
 
-    .bd-button-group {
+    .bd-buttonGroup {
         align-self: flex-end;
         justify-content: flex-end;
         flex-grow: 1;

client/src/styles/partials/bdsettings/settings-schemes.scss

@@ -1,44 +1,44 @@
-.bd-settings-schemes {
+.bd-settingsSchemes {
     margin-bottom: 15px;
-    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+    border-bottom: 1px solid rgba(114, 118, 126, .3);
 
-    .bd-settings-schemes-container {
+    .bd-settingsSchemesContainer {
         margin-right: -15px;
     }
 }
 
-.bd-settings-scheme {
+.bd-settingsScheme {
     display: inline-block;
     width: calc(33.3% - 15px);
     margin: 0 15px 15px 0;
     cursor: pointer;
     vertical-align: top;
 
-    .bd-settings-modal & {
+    .bd-settingsModal & {
         width: calc(50% - 15px);
 
-        .bd-settings-scheme-icon {
+        .bd-settingsSchemeIcon {
             height: 120px;
         }
     }
 
-    .bd-settings-scheme-icon {
+    .bd-settingsSchemeIcon {
         box-sizing: border-box;
         width: 100%;
         height: 120px;
         border: 2px solid $coldimwhite;
         border-radius: 3px;
-        transition: border-color 0.2s ease;
+        transition: border-color .2s ease;
         margin-bottom: 15px;
         background: center / cover no-repeat #2f3136;
     }
 
-    .bd-settings-scheme-name {
+    .bd-settingsSchemeName {
         font-weight: 500;
         color: #f6f6f7;
     }
 
-    .bd-settings-scheme-hint {
+    .bd-settingsSchemeHint {
         flex: 1 1 auto;
         color: #72767d;
         font-size: 14px;
@@ -47,7 +47,7 @@
     }
 
     &:hover {
-        .bd-settings-scheme-icon {
+        .bd-settingsSchemeIcon {
             border-color: lighten($coldimwhite, 20%);
         }
     }
@@ -55,8 +55,8 @@
     &.bd-active {
         cursor: default;
 
-        .bd-settings-scheme-icon {
-            border-color: $colbdblue;
+        .bd-settingsSchemeIcon {
+            border-color: $colbdgreen;
         }
     }
 }

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -10,13 +10,13 @@
     transition: all .4s ease-in-out;
     pointer-events: none;
 
-    &.active {
+    &.bd-active {
         width: 900px;
         transform: none;
         opacity: 1;
     }
 
-    .bd-settings-x {
+    .bd-settingsX {
         position: absolute;
         top: 18px;
         left: 255px;
@@ -29,11 +29,11 @@
         align-items: center;
         cursor: pointer;
 
-        .platform-darwin & {
+        .platform-darwin & { // sass-lint:disable-line class-name-format
             top: 43px;
         }
 
-        .bd-x-text {
+        .bd-xText {
             color: #72767d;
             position: absolute;
             top: 32px;
@@ -41,16 +41,16 @@
             font-size: 13px;
         }
 
-        .bd-material-design-icon {
+        .bd-materialDesignIcon {
             justify-content: center;
             display: flex;
             fill: #72767d;
         }
 
         &:hover {
-            background-color: hsla(218,5%,47%,.3);
+            background-color: hsla(218, 5%, 47%, .3);
 
-            .bd-material-design-icon {
+            .bd-materialDesignIcon {
                 fill: #fff;
             }
         }
@@ -67,26 +67,23 @@
             color: #414245;
             font-weight: 700;
             font-size: 12px;
-        }
-
-        .bd-vtext {
             flex-grow: 1;
             height: 20px;
             cursor: default;
             user-select: none;
         }
 
-        .bd-material-button {
+        .bd-materialButton {
             cursor: pointer;
 
             &:hover {
-                .bd-material-design-icon {
+                .bd-materialDesignIcon {
                     fill: #fff;
                 }
             }
         }
 
-        .bd-material-design-icon {
+        .bd-materialDesignIcon {
             fill: #414245;
 
             &:hover {
@@ -95,9 +92,9 @@
         }
     }
 
-    .bd-sidebar-view {
+    .bd-sidebarView {
         &::after {
-            content: "";
+            content: '';
             height: 100%;
             width: 310px;
             background-color: #202225;
@@ -106,63 +103,76 @@
             position: absolute;
         }
 
-        .bd-sidebar-region .bd-scroller {
-            padding-top: 0;
+        .bd-sidebarRegion {
+            .bd-scroller {
+                padding-top: 0;
+            }
         }
 
-        .bd-content-region {
+        .bd-contentRegion {
             width: 590px;
         }
 
-        &.active {
-            .bd-content-region {
-                transition: transform 0.4s ease-in-out, opacity 0.2s ease;
+        &.bd-active {
+            .bd-contentRegion {
+                transition: transform .4s ease-in-out, opacity .2s ease;
                 transform: none;
                 opacity: 1;
             }
         }
 
-        &.bd-stop .bd-sidebar-region {
-            z-index: 3004;
-        }
-        &.bd-stop .bd-content-region {
-            z-index: 3003;
+        &.bd-stop {
+            .bd-sidebarRegion {
+                z-index: 3004;
+            }
+
+            .bd-contentRegion {
+                z-index: 3003;
+            }
         }
     }
 
-    .platform-darwin & {
-        top: 0px;
+    .platform-darwin & { // sass-lint:disable-line class-name-format
+        top: 0;
 
-        .bd-sidebar-view .bd-sidebar-region {
-            padding-top: 22px;
+        .bd-sidebarView {
+            .bd-sidebarRegion {
+                padding-top: 22px;
+            }
         }
     }
 
-    .platform-linux & {
+    .platform-linux & { // sass-lint:disable-line class-name-format
         top: 0;
     }
 
-    &:not(.active) > .bd-sidebar-view.active,
-    &.bd-settings-out .bd-sidebar-view.active {
-        .bd-content-region {
+    &:not(.bd-active) > .bd-sidebarView.bd-active, // sass-lint:disable-line force-element-nesting
+    &.bd-settingsOut .bd-sidebarView.bd-active { // sass-lint:disable-line force-element-nesting
+        .bd-contentRegion {
             transform: translate(-600px, 0%);
             opacity: 0;
             width: 590px;
         }
     }
 
-    &:not(.active) .bd-sidebar-view.active {
-        .bd-content-region {
-            transform: translate(-600px, 100%);
+    &:not(.bd-active) {
+        .bd-sidebarView {
+            &.bd-active {
+                .bd-contentRegion {
+                    transform: translate(-600px, 100%);
+                }
+            }
         }
     }
 }
 
-.bd-sidebar .bd-settings-button {
-    position: absolute;
-    top: 0;
+.bd-sidebar {
+    .bd-settingsButton {
+        position: absolute;
+        top: 0;
 
-    .platform-darwin & {
-        top: 22px;
+        .platform-darwin & { // sass-lint:disable-line class-name-format
+            top: 22px;
+        }
     }
 }

client/src/styles/partials/bdsettings/tooltips.scss

@@ -10,7 +10,7 @@ bd-tooltips {
 .bd-popover {
     background-color: #000;
     border-radius: 5px;
-    box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
     color: #dcddde;
     contain: layout;
     font-size: 14px;
@@ -25,8 +25,8 @@ bd-tooltips {
         content: none;
     }
 
-    .bd-tooltip-arrow,
-    .bd-popover-arrow {
+    .bd-tooltipArrow,
+    .bd-popoverArrow {
         border: 5px solid transparent;
         height: 0;
         pointer-events: none;
@@ -34,61 +34,61 @@ bd-tooltips {
         position: absolute;
     }
 
-    &[x-placement^="top"] {
+    &[x-placement^='top'] {
         margin-bottom: 10px;
 
-        .bd-tooltip-arrow,
-        .bd-popover-arrow {
+        .bd-tooltipArrow,
+        .bd-popoverArrow {
             margin-left: -5px;
             border-top-color: #000;
             bottom: -10px;
         }
     }
 
-    &[x-placement^="bottom"] {
+    &[x-placement^='bottom'] {
         margin-top: 10px;
 
-        .bd-tooltip-arrow,
-        .bd-popover-arrow {
-            border-width: 0 5px 5px 5px;
+        .bd-tooltipArrow,
+        .bd-popoverArrow {
+            border-width: 0 5px 5px;
             top: -5px;
             border-bottom-color: #000;
         }
     }
 
-    &[x-placement^="right"] {
+    &[x-placement^='right'] {
         margin-left: 10px;
 
-        .bd-tooltip-arrow,
-        .bd-popover-arrow {
+        .bd-tooltipArrow,
+        .bd-popoverArrow {
             border-width: 5px 5px 5px 0;
             left: -5px;
             border-right-color: #000;
         }
     }
 
-    &[x-placement^="left"] {
+    &[x-placement^='left'] {
         margin-right: 10px;
 
-        .bd-tooltip-arrow,
-        .bd-popover-arrow {
+        .bd-tooltipArrow,
+        .bd-popoverArrow {
             border-width: 5px 0 5px 5px;
             right: -5px;
             border-left-color: #000;
         }
     }
 
-    .bd-material-button {
+    .bd-materialButton {
         cursor: pointer;
 
         &:hover {
-            .bd-material-design-icon {
+            .bd-materialDesignIcon {
                 fill: #fff;
             }
         }
     }
 
-    .bd-material-design-icon {
+    .bd-materialDesignIcon {
         fill: #414245;
 
         &:hover {

client/src/styles/partials/bdsettings/updater.scss

@@ -1,6 +1,6 @@
 .bd-updaterview {
     p {
         margin: 0 0 10px;
-        color: #ffffff;
+        color: #fff;
     }
 }

client/src/styles/partials/bdsettings/window-preferences.scss

@@ -1,5 +1,7 @@
-.bd-window-preferences {
-    .bd-window-preferences-disabled p {
-        color: #f6f6f7;
+.bd-windowPreferences {
+    .bd-windowPreferencesDisabled {
+        p {
+            color: #f6f6f7;
+        }
     }
 }

client/src/styles/partials/discordoverrides.scss

@@ -1,28 +1,29 @@
-body:not(.bd-hide-button) {
-    [class*="guildsWrapper-"] {
+// sass-lint:disable-all
+body:not(.bd-hideButton) {
+    [class*='guildsWrapper-'] {
         padding-top: 49px !important;
     }
-    .platform-osx [class*="guildsWrapper-"] {
+    .platform-osx [class*='guildsWrapper-'] {
         margin-top: 26px;
     }
 
-    [class*="guildsWrapper-"] + [class*="flex"] {
+    [class*='guildsWrapper-'] + [class*='flex'] {
         border-radius: 0 0 0 5px;
     }
 
-    [class*="unreadMentionsIndicatorTop-"] {
+    [class*='unreadMentionsIndicatorTop-'] {
         top: 49px;
     }
-    .platform-osx [class*="unreadMentionsIndicatorTop-"] {
+    .platform-osx [class*='unreadMentionsIndicatorTop-'] {
         top: 50px;
     }
 }
 
 // Any layers need to be above the main layer (where the BD button is placed)
-[class*="layers-"] > * + * {
+[class*='layers-'] > * + * {
     z-index: 900;
 }
 
-.bd-settings-wrapper.platform-linux {
+.bd-settingsWrapper.platform-linux {
     transform: none;
 }

client/src/styles/partials/emotes.scss

@@ -1,9 +1,9 @@
-.bd-emote-outer {
+.bd-emoteOuter {
     display: inline-block;
     height: 32px;
     user-select: none;
 
-    .bd-is-emote {
+    .bd-isEmote {
         font-size: 0;
     }
 }
@@ -14,7 +14,7 @@
 
     img {
         height: 32px;
-        margin: 0 .05em 0 .1em !important;
+        margin: 0 .05em 0 .1em !important; // sass-lint:disable-line no-important
         min-height: 22px;
         min-width: 22px;
         object-fit: contain;
@@ -24,8 +24,8 @@
 }
 
 .bd-emotewrapper,
-.bd-autocomplete-selector {
-    .bd-emote-favourite-button {
+.bd-autocompleteSelector {
+    .bd-emoteFavouriteButton {
         display: none;
         width: 16px;
         height: 16px;
@@ -44,19 +44,28 @@
             transition: fill .1s ease;
         }
 
-        &.bd-active svg {
-            fill: #fff;
+        &.bd-active {
+            svg {
+                fill: #fff;
+            }
         }
     }
 
-    &.bd-selected .bd-emote-favourite-button,
-    &:hover .bd-emote-favourite-button {
-        display: block;
+    &.bd-selected {
+        .bd-emoteFavouriteButton {
+            display: block;
+        }
+    }
+
+    &:hover {
+        .bd-emoteFavouriteButton {
+            display: block;
+        }
     }
 }
 
-.bd-autocomplete-selector {
-    .bd-emote-favourite-button {
+.bd-autocompleteSelector {
+    .bd-emoteFavouriteButton {
         margin-left: 8px;
         margin-right: 0;
         opacity: .5;

client/src/styles/partials/generic/autocomplete.scss

@@ -10,16 +10,16 @@
     right: 0;
     background-color: #2f3136;
 
-    .bd-autocomplete-inner {
+    .bd-autocompleteInner {
         padding-bottom: 8px;
         white-space: nowrap;
 
-        .bd-autocomplete-row {
+        .bd-autocompleteRow {
             padding: 0 8px;
             font-size: 14px;
             line-height: 16px;
 
-            .bd-autocomplete-selector {
+            .bd-autocompleteSelector {
                 border-radius: 3px;
                 padding: 8px;
 
@@ -35,7 +35,7 @@
                     }
                 }
 
-                .bd-autocomplete-title {
+                .bd-autocompleteTitle {
                     color: #72767d;
                     padding: 4px 0;
                     text-transform: uppercase;
@@ -50,7 +50,7 @@
                     }
                 }
 
-                .bd-autocomplete-field {
+                .bd-autocompleteField {
                     display: flex;
                     flex: 1 1 auto;
                     color: #f6f6f7;
@@ -78,7 +78,7 @@
         }
     }
 
-    &.bd-active + [class*="inner"] {
+    &.bd-active + [class*='inner'] {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
     }

client/src/styles/partials/generic/badges.scss

@@ -0,0 +1,51 @@
+.bd-profileBadgesWrap {
+    display: inline-flex;
+    margin-top: 8px;
+    flex: 1 1 auto;
+
+    + [class*='profileBadges'] {
+        display: inline-flex;
+    }
+}
+
+.bd-profileBadges {
+    display: flex;
+
+    &.bd-profileBadgesNametag {
+        display: inline-block;
+        margin-left: 6px;
+        height: 11px;
+
+        .bd-profileBadge {
+            width: 12px;
+            height: 12px;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+.bd-profileBadge {
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    cursor: pointer;
+    height: 16px;
+    width: 16px;
+    margin-right: 6px;
+}
+
+.bd-profileBadgeDeveloper,
+.bd-profileBadgeWebdev,
+.bd-profileBadgeContributor {
+    background-image: $logoSmallBw;
+    filter: brightness(10);
+
+    .theme-light [class*='topSectionNormal-'] .bd-profileBadgesProfileModal > &, // sass-lint:disable-line force-element-nesting class-name-format
+    .theme-light :not(.bd-profileBadgesProfileModal) > & { // sass-lint:disable-line class-name-format
+        background-image: $logoSmallLight;
+        filter: none;
+    }
+}

client/src/styles/partials/generic/buttons.scss

@@ -5,16 +5,17 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: #FFF;
-    background: #44474c;
+    color: #fff;
     text-align: center;
     user-select: none;
     font-weight: 500;
-    background: $colbdblue;
+    background: $colbdgreen;
 
 
-    &:not(.bd-disabled):hover {
-        background: darken($colbdblue, 5%);
+    &:not(.bd-disabled) {
+        &:hover {
+            background: darken($colbdgreen, 5%);
+        }
     }
 
     &.bd-disabled {
@@ -46,21 +47,23 @@
         }
     }
 
-    .bd-spinner-7 {
+    .bd-spinner7 {
         opacity: .3;
     }
 
-    .material-design-icon svg {
-        width: 18px;
-        height: 18px;
+    .bd-materialDesignIcon {
+        svg {
+            width: 18px;
+            height: 18px;
+        }
     }
 }
 
-.bd-button-group {
+.bd-buttonGroup {
     display: flex;
 
     .bd-button,
-    .bd-material-button {
+    .bd-materialButton {
         &:first-of-type {
             border-top-left-radius: 6px;
             border-bottom-left-radius: 6px;
@@ -71,12 +74,12 @@
             border-bottom-right-radius: 6px;
         }
 
-        &:not(:last-of-type) {
+        &:not(:last-of-type) { // sass-lint:disable-line no-empty-rulesets
             // border-right: 1px solid rgba(114, 118, 126, 0.3);
         }
 
         &:not(:first-of-type) {
-            border-left: 1px solid rgba(114, 118, 126, 0.1);
+            border-left: 1px solid rgba(114, 118, 126, .1);
         }
     }
 }

client/src/styles/partials/generic/drawers.scss

@@ -1,84 +1,96 @@
 .bd-drawer {
     margin-bottom: 15px;
 
-    .bd-settings-category > & {
-        border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+    .bd-settingsCategory > & {
+        border-bottom: 1px solid rgba(114, 118, 126, .3);
 
-        .bd-drawer-contents > .bd-form-item:last-child > .bd-form-divider:last-child {
-            display: none;
+        .bd-drawerContents > .bd-formItem {
+            &:last-child > .bd-formDivider {
+                &:last-child {
+                    display: none;
+                }
+            }
         }
     }
 
-    .bd-form-header {
+    .bd-formHeader {
         margin-top: 0;
         cursor: pointer;
 
         &:hover {
-            color: rgba(255, 255, 255, 0.25);
+            color: rgba(255, 255, 255, .25);
         }
     }
 
-    .bd-drawer-open-button {
+    .bd-drawerOpenButton {
         position: relative;
         margin-right: 15px;
 
-        .bd-chevron-1, .bd-chevron-2 {
+        .bd-chevron1,
+        .bd-chevron2 {
             position: absolute;
         }
 
         svg {
-            transition: transform 0.5s ease;
+            transition: transform .5s ease;
             transform: none;
         }
     }
 
-    .bd-drawer-contents-wrap {
+    .bd-drawerContentsWrap {
         min-height: 5px;
     }
 
-    .bd-drawer-contents {
+    .bd-drawerContents {
         // margin-top is set in JavaScript when the drawer is animating
         // It still needs to be set here for it to animate
-        transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
+        transition: transform .2s ease, margin-top .2s ease, opacity .2s ease;
         transform: scaleY(0) translateY(0%);
         margin-top: -100%;
         opacity: 0;
 
-        > .bd-form-item:last-child > .bd-form-divider:last-child {
-            display: none;
+        > .bd-formItem {
+            &:last-child > .bd-formDivider {
+                &:last-child {
+                    display: none;
+                }
+            }
         }
     }
 
     &.bd-animating,
-    &:not(.bd-drawer-open) {
-        > .bd-drawer-contents-wrap {
+    &:not(.bd-drawerOpen) {
+        > .bd-drawerContentsWrap {
             overflow: hidden;
         }
     }
 
-    &.bd-drawer-open {
-        > .bd-drawer-header .bd-drawer-open-button {
-            .bd-chevron-1 {
-                svg {
-                    transform: rotate(90deg)
+    &.bd-drawerOpen {
+        > .bd-drawerHeader {
+            .bd-drawerOpenButton {
+                .bd-chevron1 {
+                    svg {
+                        transform: rotate(90deg);
+                    }
                 }
             }
 
-            .bd-chevron-2 {
+            .bd-chevron2 {
                 margin-left: -4px;
+
                 svg {
-                    transform: rotate(270deg)
+                    transform: rotate(270deg);
                 }
             }
         }
 
-        > .bd-drawer-contents-wrap > .bd-drawer-contents {
+        > .bd-drawerContentsWrap > .bd-drawerContents {
             transform: scaleY(1) translateY(0%);
-            margin-top: 0%;
+            margin-top: 0;
             opacity: 1;
 
             &::after {
-                content: "";
+                content: '';
                 display: block;
                 margin-top: 15px;
             }

client/src/styles/partials/generic/forms.scss

@@ -1,8 +1,7 @@
-.bd-form-header {
+.bd-formHeader {
     margin: 15px 0 10px;
-    color: rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, .15);
     font-size: 14px;
-    font-weight: 700;
     line-height: 16px;
     text-transform: uppercase;
     font-weight: 600;
@@ -13,11 +12,11 @@
     font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
     display: flex;
 
-    .bd-form-header-text {
+    .bd-formHeaderText {
         flex: 1 1 auto;
     }
 
-    .bd-form-header-button {
+    .bd-formHeaderButton {
         flex: 0 0;
         margin-left: 5px;
 
@@ -30,59 +29,63 @@
     }
 
     &:hover {
-        .bd-form-header-button svg {
-            fill: #fff;
+        .bd-formHeaderButton {
+            svg {
+                fill: #fff;
+            }
         }
     }
 }
 
-.bd-form-item h5 {
-    color: #b9bbbe;
-    text-transform: uppercase;
-    font-weight: 600;
-    font-size: 12px;
+.bd-formItem {
+    h5 {
+        color: #b9bbbe;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 12px;
+    }
 }
 
-.bd-form-divider {
+.bd-formDivider {
     height: 1px;
     margin: 15px 0;
-    background: hsla(218,5%,47%,.3);
-    transition: background-color 0.2s ease;
+    background: hsla(218, 5%, 47%, .3);
+    transition: background-color .2s ease;
 
-    .bd-form-item-changed > & {
+    .bd-formItemChanged > & {
         background: $colok;
     }
 }
 
-.bd-form-warning {
+.bd-formWarning {
     display: flex;
     margin-top: 20px;
     background: #d84040;
-    border: 1px solid #B30B0B;
+    border: 1px solid #b30b0b;
     opacity: .8;
     border-radius: 4px;
     padding: 10px;
 
     .bd-text {
         display: flex;
-        color: #FFF;
+        color: #fff;
         font-weight: 700;
         align-items: center;
         flex-grow: 1;
     }
 
-    .bd-form-button {
+    .bd-formButton {
         margin: 0;
         align-self: flex-end;
-        background: #C42929;
+        background: #c42929;
 
         &:hover {
-            background: darken(#C42929, 2%);
+            background: darken(#c42929, 2%);
         }
     }
 }
 
-.bd-form-button {
+.bd-formButton {
     width: 100px;
     height: 30px;
     line-height: 30px;

client/src/styles/partials/generic/forms/arrays.scss

@@ -1,19 +1,22 @@
-.bd-form-settingsarray {
-    .bd-button.bd-button-primary {
-        padding: 3px 8px;
-        border-radius: 3px;
-        font-size: 12px;
-        font-weight: 400;
+// sass-lint:disable force-element-nesting force-pseudo-nesting
+.bd-formSettingsarray {
+    .bd-button {
+        .bd-buttonPrimary {
+            padding: 3px 8px;
+            border-radius: 3px;
+            font-size: 12px;
+            font-weight: 400;
+        }
     }
 
-    .bd-settingsarray-items {
+    .bd-settingsarrayItems {
         margin-top: 15px;
 
-        .bd-settingsarray-item {
+        .bd-settingsarrayItem {
             display: flex;
             margin-top: 10px;
 
-            .bd-settingsarray-item-marker {
+            .bd-settingsarrayItemMarker {
                 flex: 0 0 auto;
                 min-width: 15px;
                 margin-right: 5px;
@@ -21,26 +24,26 @@
                 font-size: 15px;
             }
 
-            .bd-settingsarray-item-contents {
+            .bd-settingsarrayItemContents {
                 flex: 1 1;
             }
 
-            .bd-settings-panel {
-                .bd-settings-categories:last-child .bd-form-item:last-child .bd-form-divider {
+            .bd-settingsPanel {
+                .bd-settingsCategories:last-child .bd-formItem:last-child .bd-formDivider {
                     margin-bottom: 0;
                 }
 
-                .bd-settings-category:only-child > div > .bd-form-item.bd-form-item-noheader:only-child {
-                    .bd-form-textinput,
-                    .bd-form-numberinput {
-                        + .bd-form-divider {
+                .bd-settingsCategory:only-child > div > .bd-formItem.bd-formItemNoheader:only-child {
+                    .bd-formTextinput,
+                    .bd-formNumberinput {
+                        + .bd-formDivider {
                             display: none;
                         }
                     }
                 }
             }
 
-            .bd-settingsarray-item-hint {
+            .bd-settingsarrayItemHint {
                 color: #aaa;
                 font-size: 15px;
                 font-style: italic;
@@ -49,13 +52,13 @@
                 max-width: 385px;
             }
 
-            .bd-settingsarray-item-controls {
+            .bd-settingsarrayItemControls {
                 flex: 0 0 auto;
                 margin-left: 5px;
             }
 
-            .bd-settingsarray-open,
-            .bd-settingsarray-remove {
+            .bd-settingsarrayOpen,
+            .bd-settingsarrayRemove {
                 margin-left: 5px;
 
                 svg {
@@ -70,13 +73,13 @@
                 }
             }
 
-            &:last-child .bd-settings-categories:last-child .bd-form-item:last-child .bd-form-divider {
+            &:last-child .bd-settingsCategories:last-child .bd-formItem:last-child .bd-formDivider {
                 display: none;
             }
         }
     }
 
-    &.bd-form-settingsarray-inline .bd-settingsarray-item {
+    &.bd-formSettingsarrayInline .bd-settingsarrayItem {
         margin-top: 10px;
     }
 }

client/src/styles/partials/generic/forms/collections.scss

@@ -29,14 +29,16 @@
                 fill: #ccc;
             }
 
-            &:not(.bd-disabled):hover {
-                svg {
-                    fill: #fff;
+            &:not(.bd-disabled) {
+                &:hover {
+                    svg {
+                        fill: #fff;
+                    }
                 }
             }
 
             &.bd-disabled {
-                opacity: 0.5;
+                opacity: .5;
             }
         }
     }
@@ -58,7 +60,7 @@
 
         &:hover {
             svg {
-                fill: #FFF;
+                fill: #fff;
             }
         }
     }

client/src/styles/partials/generic/forms/colourpickers.scss

@@ -1,52 +1,46 @@
-.bd-colourpicker-swatch {
+.bd-colourpickerSwatch {
     width: 50px;
     height: 30px;
     border-radius: 3px;
-    border: 1px solid hsla(0,0%,100%,.1);
+    border: 1px solid hsla(0, 0%, 100%, .1);
 }
 
-.bd-form-colourpicker {
+.bd-formColourpicker {
     position: relative;
 
-    .vc-chrome {
+    .vc-chrome { // sass-lint:disable-line class-name-format
         position: absolute;
         right: 0;
         top: 35px;
         border-radius: 3px;
         z-index: 9001;
 
-        .vc-chrome-body {
+        .vc-chrome-body { // sass-lint:disable-line class-name-format
             background: #36393e;
 
-            .vc-chrome-fields-wrap {
-                .vc-input__input {
+            .vc-chrome-fields-wrap { // sass-lint:disable-line class-name-format
+                .vc-input__input { // sass-lint:disable-line class-name-format
                     background: #1e2124;
                     color: #fff;
                     box-shadow: inset 0 0 0 1px #000;
                 }
 
-                .vc-chrome-toggle-icon-highlight {
+                .vc-chrome-toggle-icon-highlight { // sass-lint:disable-line class-name-format
                     background: #1e2124;
                 }
 
-                .vc-chrome-toggle-btn svg path {
-                    fill: #fff;
+                .vc-chrome-toggle-btn { // sass-lint:disable-line class-name-format
+                    svg {
+                        path {
+                            fill: #fff;
+                        }
+                    }
                 }
             }
         }
 
         &:not(.bd-hide) {
-            animation: bd-colourpicker-slidein 0.1s ease-in;
+            animation: bd-colourpickerSlidein .1s ease-in;
         }
     }
 }
-
-@keyframes bd-colourpicker-slidein {
-    0% {
-        right: 20px;
-    }
-
-    100% {
-        right: 0;
-    }
-}

client/src/styles/partials/generic/forms/dropdowns.scss

@@ -1,10 +1,10 @@
-.bd-form-dropdown {
+.bd-formDropdown {
     h3 + .bd-dropdown {
         width: 180px;
         margin-left: 15px;
     }
 
-    .bd-form-item-fullwidth & {
+    .bd-formItemFullwidth & {
         .bd-dropdown {
             margin-top: 10px;
         }
@@ -15,10 +15,10 @@
     position: relative;
     width: 100%;
 
-    .bd-dropdown-current {
+    .bd-dropdownCurrent {
         color: #f6f6f7;
-        background: rgba(0,0,0,.1);
-        border: 1px solid rgba(0,0,0,.3);
+        background: rgba(0, 0, 0, .1);
+        border: 1px solid rgba(0, 0, 0, .3);
         border-radius: 3px;
         padding: 11px;
         cursor: default;
@@ -27,20 +27,20 @@
         box-sizing: border-box;
         display: flex;
 
-        .bd-dropdown-text {
+        .bd-dropdownText {
             flex: 1 1 auto;
         }
 
-        .bd-dropdown-arrow-wrap {
+        .bd-dropdownArrowWrap {
             flex: 0 0 auto;
             margin-left: 10px;
 
-            .bd-dropdown-arrow {
+            .bd-dropdownArrow {
                 border-color: rgb(153, 153, 153) transparent transparent;
                 border-style: solid;
                 border-width: 5px 5px 2.5px;
                 display: inline-block;
-                transition: transform 0.15s ease;
+                transition: transform .15s ease;
                 transform: none;
             }
         }
@@ -48,24 +48,28 @@
         &:hover {
             border-color: #040405;
 
-            .bd-dropdown-arrow-wrap .bd-dropdown-arrow {
-                border-color: #f6f6f7 transparent transparent;
+            .bd-dropdownArrowWrap {
+                &.bd-dropdownArrow {
+                    border-color: #f6f6f7 transparent transparent;
+                }
             }
         }
     }
 
     &.bd-active {
-        .bd-dropdown-current {
+        .bd-dropdownCurrent {
             border-color: #040405;
         }
 
-        .bd-dropdown-arrow-wrap .bd-dropdown-arrow {
-            transform: rotateX(180deg) translateY(2px);
-            border-color: #f6f6f7 transparent transparent;
+        .bd-dropdownArrowWrap {
+            .bd-dropdownArrow {
+                transform: rotateX(180deg) translateY(2px);
+                border-color: #f6f6f7 transparent transparent;
+            }
         }
     }
 
-    .bd-dropdown-options {
+    .bd-dropdownOptions {
         position: absolute;
         z-index: 5;
         top: calc(100% - 2.5px);
@@ -78,17 +82,17 @@
         border-bottom-right-radius: 3px;
         overflow-y: scroll;
 
-        .bd-dropdown-option {
-            color: white;
+        .bd-dropdownOption {
+            color: #fff;
             padding: 11px;
             cursor: pointer;
 
             &:hover {
-                background-color: rgba(0, 0, 0, 0.1);
+                background-color: rgba(0, 0, 0, .1);
             }
 
-            &.bd-dropdown-option-selected {
-                background-color: rgba(0, 0, 0, 0.2);
+            &.bd-dropdownOptionSelected {
+                background-color: rgba(0, 0, 0, .2);
             }
         }
 

client/src/styles/partials/generic/forms/files.scss

@@ -1,26 +1,28 @@
-.bd-form-fileinput {
-    .bd-button.bd-button-primary {
-        padding: 3px 8px;
-        border-radius: 3px;
-        font-size: 12px;
-        font-weight: 400;
+.bd-formFileinput {
+    .bd-button {
+        &.bd-buttonPrimary {
+            padding: 3px 8px;
+            border-radius: 3px;
+            font-size: 12px;
+            font-weight: 400;
+        }
     }
 
-    .bd-selected-files {
+    .bd-selectedFiles {
         margin: 15px 0;
 
-        .bd-selected-file {
+        .bd-selectedFile {
             margin: 10px 0;
             color: #aaa;
             font-size: 15px;
             display: flex;
 
-            .bd-file-path {
+            .bd-filePath {
                 flex: 1 1;
             }
 
-            .bd-file-open,
-            .bd-file-remove {
+            .bd-fileOpen,
+            .bd-fileRemove {
                 flex: 0 0;
                 margin-left: 5px;
 

client/src/styles/partials/generic/forms/guilds.scss

@@ -10,9 +10,9 @@
         margin: 10px 10px 0 0;
         border-radius: 50%;
         cursor: pointer;
-        transition: border-radius .4s cubic-bezier(0.5, 0, 0.27, 1.55), background-color .4s cubic-bezier(0.5, 0, 0.27, 1.55), box-shadow .3s cubic-bezier(0.5, 0, 0.27, 1.55);
+        transition: border-radius .4s cubic-bezier(.5, 0, .27, 1.55), background-color .4s cubic-bezier(.5, 0, .27, 1.55), box-shadow .3s cubic-bezier(.5, 0, .27, 1.55);
 
-        .bd-guild-text {
+        .bd-guildText {
             float: left;
             display: block;
             width: $size;
@@ -25,18 +25,18 @@
 
         &:hover {
             border-radius: 30%;
-            background-color: $colbdblue;
+            background-color: $colbdgreen;
 
-            &.bd-guild-has-icon {
+            &.bd-guildHasIcon {
                 background-color: rgb(47, 49, 54);
             }
         }
 
         &.bd-active {
-            background-color: $colbdblue;
-            box-shadow: 0 0 7px 2px $colbdblue;
+            background-color: $colbdgreen;
+            box-shadow: 0 0 7px 2px $colbdgreen;
 
-            &.bd-guild-has-icon {
+            &.bd-guildHasIcon {
                 background-color: rgb(47, 49, 54);
             }
         }

client/src/styles/partials/generic/forms/index.scss

@@ -1,12 +1,12 @@
-@import './main.scss';
-@import './switches.scss';
-@import './text.scss';
-@import './dropdowns.scss';
-@import './radios.scss';
-@import './sliders.scss';
-@import './colourpickers.scss';
-@import './keybinds.scss';
-@import './files.scss';
-@import './guilds.scss';
-@import './arrays.scss';
-@import './collections.scss';
+@import './main';
+@import './switches';
+@import './text';
+@import './dropdowns';
+@import './radios';
+@import './sliders';
+@import './colourpickers';
+@import './keybinds';
+@import './files';
+@import './guilds';
+@import './arrays';
+@import './collections';

client/src/styles/partials/generic/forms/keybinds.scss

@@ -1,24 +1,23 @@
 .bd-keybind {
     padding: 10px;
     display: flex;
-    // width: 180px;
     margin-top: 10px;
-    background-color: rgba(0,0,0,.1);
-    border: 1px solid rgba(0,0,0,.3);
+    background-color: rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .3);
     transition: border .15s ease;
     border-radius: 3px;
     box-sizing: border-box;
     min-height: 40px;
 
-    .bd-keybind-selected {
+    .bd-keybindSelected {
         flex: 1 1 auto;
         color: #f6f6f7;
         font-size: 14px;
     }
 
-    &.bd-keybind-unset {
-        .bd-keybind-selected {
-            color: hsla(240,6%,97%,.3);
+    &.bd-keybindUnset {
+        .bd-keybindSelected {
+            color: hsla(240, 6%, 97%, .3);
             font-weight: 600;
         }
     }
@@ -36,7 +35,7 @@
 
     &.bd-active {
         border-color: $colerr;
-        animation: bd-keybind-pulse 1s infinite;
+        animation: bd-keybindPulse 1s infinite;
 
         .bd-button {
             color: $colerr;
@@ -44,9 +43,3 @@
         }
     }
 }
-
-@keyframes bd-keybind-pulse {
-    0% { box-shadow: 0 0 6px rgba(240,71,71,.3) }
-    50% { box-shadow: 0 0 10px rgba(240,71,71,.6) }
-    100% { box-shadow: 0 0 6px rgba(240,71,71,.3) }
-}

client/src/styles/partials/generic/forms/main.scss

@@ -1,15 +1,15 @@
-.bd-setting-switch,
-.bd-form-textinput,
-.bd-form-textarea,
-.bd-form-numberinput,
-.bd-form-dropdown,
-.bd-form-radio,
-.bd-form-slider,
-.bd-form-colourpicker,
-.bd-form-keybind,
-.bd-form-fileinput,
-.bd-form-guildinput,
-.bd-form-settingsarray {
+.bd-settingSwitch,
+.bd-formTextinput,
+.bd-formTextarea,
+.bd-formNumberinput,
+.bd-formDropdown,
+.bd-formRadio,
+.bd-formSlider,
+.bd-formColourpicker,
+.bd-formKeybind,
+.bd-formFileinput,
+.bd-formGuildinput,
+.bd-formSettingsarray {
     .bd-title {
         display: flex;
 
@@ -28,27 +28,28 @@
         margin-top: 5px;
         margin-bottom: 0;
         line-height: 20px;
-        border-bottom: 0px solid rgba(114, 118, 126, 0.1);
+        border-bottom: 0 solid rgba(114, 118, 126, .1);
     }
 
     .bd-disabled & {
-        opacity: 0.6;
+        opacity: .6;
 
-        &, input {
-            cursor: not-allowed !important;
+        &,
+        input {
+            cursor: not-allowed !important; // sass-lint:disable-line no-important
         }
     }
 }
 
-.bd-form-customsetting {
-    &.bd-form-customsetting-debug + .bd-form-divider {
+.bd-formCustomsetting {
+    &.bd-formCustomsettingDebug + .bd-formDivider {
         margin-top: 0;
     }
 
-    > .bd-form-customsetting-value {
+    > .bd-formCustomsettingValue {
         margin-bottom: 0;
 
-        .bd-form-textarea-details {
+        .bd-formTextareaDetails {
             margin-top: 15px;
         }
 

client/src/styles/partials/generic/forms/radios.scss

@@ -1,19 +1,19 @@
-.bd-form-radio {
+.bd-formRadio {
     display: flex;
 
-    .bd-form-radio-details {
+    .bd-formRadioDetails {
         flex: 1 1 auto;
     }
 
-    .bd-radio-group {
+    .bd-radioGroup {
         width: 180px;
         margin-left: 15px;
     }
 
-    .bd-form-item-fullwidth & {
+    .bd-formItemFullwidth & {
         flex-direction: column;
 
-        .bd-radio-group {
+        .bd-radioGroup {
             width: 100%;
             margin-top: 10px;
             margin-left: 0;
@@ -22,15 +22,15 @@
 }
 
 .bd-radio {
-    background: rgba(0,0,0,.1);
-    border: 1px solid rgba(0,0,0,.3);
+    background: rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .3);
     border-radius: 3px;
     padding: 11px;
     align-items: center;
     cursor: pointer;
     display: flex;
 
-    .bd-radio-control-wrap {
+    .bd-radioControlWrap {
         flex: 0 0 auto;
         margin: -3px;
         margin-right: 10px;
@@ -39,21 +39,15 @@
         border-radius: 3px;
         border: 1px solid #72767d;
 
-        .bd-radio-control {
-            // background: rgb(50, 50, 50);
-            // border: 1px solid rgb(114, 118, 125);
-            // border-radius: 50%;
-            // width: 12px;
-            // height: 12px;
-            // transition: background-color .1s;
+        .bd-radioControl {
             margin: 1px;
             opacity: 0;
         }
     }
 
-    .bd-radio-text {
+    .bd-radioText {
         flex: 1 1 auto;
-        color: white;
+        color: #fff;
         word-wrap: break-word;
         width: 1px;
     }
@@ -66,15 +60,15 @@
         border-color: #040405;
     }
 
-    &.bd-radio-selected {
-        background-color: $colbdblue;
-        border-color: $colbdblue;
+    &.bd-radioSelected {
+        background-color: $colbdgreen;
+        border-color: $colbdgreen;
 
-        .bd-radio-control-wrap {
+        .bd-radioControlWrap {
             border-color: #fff;
             background-color: #fff;
 
-            .bd-radio-control {
+            .bd-radioControl {
                 opacity: 1;
             }
         }

client/src/styles/partials/generic/forms/sliders.scss

@@ -1,9 +1,9 @@
-.bd-form-slider {
+.bd-formSlider {
     h3 + .bd-slider {
         margin-left: 15px;
     }
 
-    .bd-form-item-fullwidth & {
+    .bd-formItemFullwidth & {
         .bd-title {
             flex-direction: column;
         }
@@ -19,21 +19,20 @@
     min-height: 24px;
     min-width: 180px;
 
-    .bd-slider-container {
+    .bd-sliderContainer {
         padding-top: 8px;
         padding-bottom: 8px;
     }
 
-    .bd-slider-points {
+    .bd-sliderPoints {
         padding: 0 5px;
 
-        .bd-slider-point {
+        .bd-sliderPoint {
             left: 0;
             margin-left: -12px;
             position: relative;
             top: -6px;
             width: 24px;
-
             color: #72767d;
             font-size: 10px;
             font-weight: 700;
@@ -41,7 +40,7 @@
             text-align: center;
 
             &::after {
-                content: "";
+                content: '';
                 background-color: #4f545c;
                 height: 24px;
                 width: 2px;
@@ -52,13 +51,13 @@
                 margin-left: 11px;
             }
 
-            + .bd-slider-point {
+            + .bd-sliderPoint {
                 top: -14px;
             }
         }
     }
 
-    .bd-slider-bar {
+    .bd-sliderBar {
         background-color: #4f545c;
         height: 8px;
         border-radius: 4px;
@@ -66,34 +65,34 @@
         overflow: hidden;
 
         &::before {
-            content: "";
-            background-color: $colbdblue;
+            content: '';
+            background-color: $colbdgreen;
             height: 8px;
             width: 5px;
             display: block;
             margin-left: -5px;
         }
 
-        .bd-slider-bar-filled {
-            background-color: $colbdblue;
+        .bd-sliderBarFilled {
+            background-color: $colbdgreen;
             height: 8px;
             width: 100%;
             margin-top: -8px;
         }
     }
 
-    .bd-slider-thumb-wrap {
+    .bd-sliderThumbWrap {
         margin: -16px 0;
         padding: 0 5px;
 
-        .bd-slider-thumb {
+        .bd-sliderThumb {
             width: 10px;
             height: 24px;
             position: relative;
             pointer-events: none;
-            background: #FFF;
+            background: #fff;
             border: 1px solid #dcddde;
-            box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
+            box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
             margin-left: -5px;
             border-radius: 3px;
             box-sizing: border-box;

client/src/styles/partials/generic/forms/switches.scss

@@ -1,4 +1,4 @@
-.bd-setting-switch {
+.bd-settingSwitch {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -6,10 +6,10 @@
     justify-content: flex-start;
     -webkit-box-align: stretch;
     align-items: stretch;
-    transition: opacity 0.2s ease;
+    transition: opacity .2s ease;
 }
 
-.bd-switch-wrapper {
+.bd-switchWrapper {
     flex: 0 0 auto;
     user-select: none;
     position: relative;
@@ -37,7 +37,7 @@
         transition: background .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out;
 
         &::before {
-            content: "";
+            content: '';
             display: block;
             width: 18px;
             height: 18px;
@@ -48,11 +48,11 @@
             background: #f6f6f7;
             border-radius: 10px;
             transition: all .15s ease;
-            box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
+            box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
         }
 
         &.bd-checked {
-            background: $colbdblue;
+            background: $colbdgreen;
 
             &::before {
                 transform: translateX(20px);

client/src/styles/partials/generic/forms/text.scss

@@ -1,24 +1,22 @@
-.bd-form-textinput,
-.bd-form-numberinput {
+.bd-formTextinput,
+.bd-formNumberinput {
     h3 {
-        + .bd-textinput-wrapper,
+        + .bd-textinputWrapper,
         + .bd-number {
             width: 180px;
         }
     }
 
-    .bd-textinput-wrapper,
+    .bd-textinputWrapper,
     .bd-number {
         margin-left: 15px;
     }
 
-    input[type="text"],
-    input[type="number"],
-    input[type="password"] {
+    input {
         background: transparent;
-        border: none;
+        border: 0;
         color: #b9bbbe;
-        border-bottom: 2px solid rgba(114, 118, 126, 0.3);
+        border-bottom: 2px solid rgba(114, 118, 126, .3);
         outline: none;
         line-height: 24px;
         font-size: 100%;
@@ -27,16 +25,16 @@
 
         &:focus {
             color: #fff;
-            border-color: $colbdblue;
+            border-color: $colbdgreen;
         }
     }
 
-    .bd-form-item-fullwidth & {
+    .bd-formItemFullwidth & {
         .bd-title {
             flex-direction: column;
         }
 
-        .bd-textinput-wrapper,
+        .bd-textinputWrapper,
         .bd-number {
             width: 100%;
             margin-top: 10px;
@@ -49,41 +47,16 @@
     }
 }
 
-.bd-textinput-wrapper,
+.bd-textinputWrapper,
 .bd-number {
     width: 100%;
 }
 
-.bd-form-textarea {
-    .bd-form-textarea-wrap,
-    textarea.bd-textarea {
-        margin-top: 15px;
-        background: rgba(0, 0, 0, 0.1);
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        border-radius: 3px;
-        color: #b9bbbe;
-        overflow-y: scroll;
-        max-height: 140px;
-        transition: border-color .2s ease, color .2s ease;
-
-        &:focus {
-            color: #fff;
-            border-color: #040405;
-        }
-
-        @include scrollbar;
-    }
-
-    div[contenteditable],
-    textarea {
-        padding: 11px;
-        cursor: text;
-        min-height: 45px;
-    }
-
+.bd-formTextarea {
+    .bd-formTextareaWrap,
     textarea {
         background: transparent;
-        border: none;
+        border: 0;
         resize: none;
         outline: none;
         width: 100%;
@@ -92,21 +65,52 @@
         box-sizing: border-box;
         overflow-y: visible;
         max-height: 140px;
+        padding: 11px;
+        cursor: text;
+        min-height: 45px;
+
+        &.bd-textarea {
+            margin-top: 15px;
+            background: rgba(0, 0, 0, .1);
+            border: 1px solid rgba(0, 0, 0, .3);
+            border-radius: 3px;
+            color: #b9bbbe;
+            overflow-y: scroll;
+            max-height: 140px;
+            transition: border-color .2s ease, color .2s ease;
+
+            &:focus {
+                color: #fff;
+                border-color: #040405;
+            }
+
+            @include scrollbar;
+        }
+    }
+
+    div {
+        &[contenteditable] {
+            padding: 11px;
+            cursor: text;
+            min-height: 45px;
+        }
     }
 }
 
 .bd-number {
     position: relative;
 
-    input[type="number"] {
-        &::-webkit-inner-spin-button,
-        ::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
+    input {
+        &[type='number'] {
+            &::-webkit-inner-spin-button,
+            ::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
         }
     }
 
-    .bd-number-spinner {
+    .bd-numberSpinner {
         position: absolute;
         top: 0;
         right: 0;
@@ -118,32 +122,34 @@
             cursor: pointer;
             font-size: 0;
 
-            .bd-up-arrow {
+            .bd-upArrow {
                 border-color: transparent transparent rgb(153, 153, 153);
                 border-style: solid;
                 border-width: 2.5px 5px 5px;
             }
 
-            &:hover .bd-up-arrow {
-                border-color: transparent transparent rgb(200, 200, 200);
+            &:hover {
+                &.bd-upArrow {
+                    border-color: transparent transparent rgb(200, 200, 200);
+                }
+
+                .bd-downArrow {
+                    border-color: rgb(200, 200, 200) transparent transparent;
+                }
             }
 
-            .bd-down-arrow {
+            .bd-downArrow {
                 border-color: rgb(153, 153, 153) transparent transparent;
                 border-style: solid;
                 border-width: 5px 5px 2.5px;
             }
-
-            &:hover .bd-down-arrow {
-                border-color: rgb(200, 200, 200) transparent transparent;
-            }
         }
     }
 }
 
 .bd-textInput {
-    background-color: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .3);
     border-radius: 3px;
     box-sizing: border-box;
     color: #f6f6f7;
@@ -162,7 +168,7 @@
     transition: all .5s ease-in-out;
 
     &::before {
-        content: "Search by name, description or tag...";
+        content: 'Search by name, description or tag...';
         color: #f6f6f7;
         position: relative;
         top: -20px;

client/src/styles/partials/generic/index.scss

@@ -1,11 +1,14 @@
-@import './spinners/index.scss';
-@import './scrollable.scss';
-@import './buttons.scss';
-@import './tabs.scss';
-@import './forms.scss';
-@import './forms/index.scss';
-@import './material-buttons.scss';
-@import './drawers.scss';
-@import './preformatted.scss';
-@import './refreshbtn.scss';
-@import './autocomplete.scss';
+@import './spinners/index';
+@import './scrollable';
+@import './buttons';
+@import './tabs';
+@import './forms';
+@import './forms/index';
+@import './material-buttons';
+@import './drawers';
+@import './preformatted';
+@import './refreshbtn';
+@import './autocomplete';
+@import './layouts';
+@import './toasts';
+@import './badges';

client/src/styles/partials/generic/layouts.scss

@@ -2,22 +2,22 @@
     display: flex;
 }
 
-.bd-flex-row,
+.bd-flexRow,
 .bd-flexRow {
     flex-direction: row;
 }
 
-.bd-flex-col,
+.bd-flexCol,
 .bd-flexCol {
     flex-direction: column;
 }
 
-.bd-flex-grow,
+.bd-flexGrow,
 .bd-flexGrow {
     flex-grow: 1;
 }
 
-.bd-flex-spacer,
+.bd-flexSpacer,
 .bd-flexSpacer {
     flex-grow: 1;
 }

client/src/styles/partials/generic/material-buttons.scss

@@ -1,4 +1,4 @@
-.bd-material-button {
+.bd-materialButton {
     border-radius: 3px;
     display: flex;
     align-items: center;

client/src/styles/partials/generic/preformatted.scss

@@ -1,6 +1,6 @@
-.bd-pre-wrap {
-    background: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.3);
+.bd-preWrap {
+    background: rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .3);
     border-radius: 3px;
     color: #b9bbbe;
     white-space: pre-wrap;

client/src/styles/partials/generic/refreshbtn.scss

@@ -1,4 +1,4 @@
-@keyframes bd-refresh-circle-anim-out {
+@keyframes bd-refreshCircleAnimOut {
     0% {
         transform: rotate(0deg);
         stroke-dasharray: 36.5, 200;
@@ -17,7 +17,7 @@
     }
 }
 
-@keyframes bd-refresh-circle-anim-in {
+@keyframes bd-refreshCircleAnimIn {
     0% {
         transform: rotate(-360deg);
         stroke-dasharray: 0, 200;
@@ -31,7 +31,7 @@
     }
 }
 
-@keyframes bd-refresh-arrow-rotate {
+@keyframes bd-refreshArrowRotate {
     from {
         transform: rotate(-680deg);
     }
@@ -41,7 +41,7 @@
     }
 }
 
-.bd-refresh-button {
+.bd-refreshButton {
     cursor: pointer;
     height: 31px;
     width: 31px;
@@ -59,107 +59,109 @@
         margin: 6px;
     }
 
-    .bd-svg-refresh {
+    .bd-svgRefresh {
         opacity: 1;
     }
 
     &.bd-refreshed {
-        .bd-svg-refresh {
-            transition: .5s cubic-bezier(.4,0,0,1) .2s;
+        .bd-svgRefresh {
+            transition: .5s cubic-bezier(.4, 0, 0, 1) .2s;
         }
 
-        .bd-svg-cancel-line:nth-of-type(1) {
-            transform-origin: bottom;
-            transition: .5s cubic-bezier(0,0,0,1) .1s, transform-origin 1ms;
+        .bd-svgCancelLine {
+            &:nth-of-type(1) {
+                transform-origin: bottom;
+                transition: .5s cubic-bezier(0, 0, 0, 1) .1s, transform-origin 1ms;
+            }
+
+            &:nth-of-type(2) {
+                transform-origin: left;
+                transition: .5s cubic-bezier(0, 0, 0, 1), transform-origin 1ms;
+            }
         }
 
-        .bd-svg-cancel-line:nth-of-type(2) {
-            transform-origin: left;
-            transition: .5s cubic-bezier(0,0,0,1), transform-origin 1ms;
-        }
-
-        .bd-svg-circle {
+        .bd-svgCircle {
             stroke-dasharray: 36.5, 200;
             stroke-dashoffset: -7.5;
             transform-origin: center;
-            animation: bd-refresh-circle-anim-in 1s cubic-bezier(.4,0,0,1);
+            animation: bd-refreshCircleAnimIn 1s cubic-bezier(.4, 0, 0, 1);
         }
 
-        .bd-svg-arrow {
+        .bd-svgArrow {
             transform-origin: center;
-            animation: bd-refresh-arrow-rotate 1s cubic-bezier(.4,0,0,1);
+            animation: bd-refreshArrowRotate 1s cubic-bezier(.4, 0, 0, 1);
         }
     }
 
     &.bd-refreshing {
-        .bd-svg-refresh {
-            transition: .5s cubic-bezier(.4,0,0,1);
+        .bd-svgRefresh {
+            transition: .5s cubic-bezier(.4, 0, 0, 1);
             opacity: .3;
         }
 
-        .bd-svg-cancel-line {
+        .bd-svgCancelLine {
             opacity: 1;
+
+            &:nth-of-type(1) {
+                transform-origin: top;
+                transform: scale(1, 1);
+                transition: .5s cubic-bezier(0, 0, 0, 1) .4s, transform-origin 1ms;
+            }
+
+            &:nth-of-type(2) {
+                transform-origin: right;
+                transform: scale(1, 1);
+                transition: .5s cubic-bezier(0, 0, 0, 1) .3s, transform-origin 1ms;
+            }
         }
 
-        .bd-svg-cancel-line:nth-of-type(1) {
-            transform-origin: top;
-            transform: scale(1,1);
-            transition: .5s cubic-bezier(0,0,0,1) .4s, transform-origin 1ms;
-        }
-
-        .bd-svg-cancel-line:nth-of-type(2) {
-            transform-origin: right;
-            transform: scale(1,1);
-            transition: .5s cubic-bezier(0,0,0,1) .3s, transform-origin 1ms;
-        }
-
-        .bd-svg-circle {
+        .bd-svgCircle {
             stroke-dasharray: 36.5, 200;
             stroke-dashoffset: -44;
             transform-origin: center;
-            animation: bd-refresh-circle-anim-out 1s cubic-bezier(.4,0,0,1);
+            animation: bd-refreshCircleAnimOut 1s cubic-bezier(.4, 0, 0, 1);
         }
 
-        .bd-svg-arrow {
+        .bd-svgArrow {
             transform-origin: center;
             transform: rotate(360deg);
-            transition: 1s cubic-bezier(.4,0,0,1);
+            transition: 1s cubic-bezier(.4, 0, 0, 1);
         }
 
-        .bd-svg-arrow-triangle {
+        .bd-svgArrowTriangle {
             transition: .5s ease;
             transform: scale(0);
         }
     }
 
-    .bd-svg-cancel {
+    .bd-svgCancel {
         transform: rotate(-45deg);
         transform-origin: center;
     }
 
-    .bd-svg-cancel-line {
+    .bd-svgCancelLine {
         opacity: .4;
+
+        &:nth-of-type(1) {
+            transform: scale(1, 0);
+        }
+
+        &:nth-of-type(2) {
+            transform: scale(0, 1);
+        }
     }
 
-    .bd-svg-cancel-line:nth-of-type(1) {
-        transform: scale(1,0);
-    }
-
-    .bd-svg-cancel-line:nth-of-type(2) {
-        transform: scale(0,1);
-    }
-
-    .bd-svg-circle {
+    .bd-svgCircle {
         stroke-dasharray: 36.5, 200;
         stroke-dashoffset: -7.5;
     }
 
-    .bd-svg-arrow {
+    .bd-svgArrow {
         transform-origin: center;
         transform: rotate(0deg);
     }
 
-    .bd-svg-arrow-triangle {
+    .bd-svgArrowTriangle {
         transform-origin: 17.1px 6.9px;
         transition: .8s ease .2s;
         transform: scale(1);

client/src/styles/partials/generic/scrollable.scss

@@ -1,15 +1,14 @@
-.bd-scroller-wrap {
+.bd-scrollerWrap {
     display: flex;
     width: 100%;
 
     .bd-scroller {
+        @include scrollbar;
         display: flex;
         flex-grow: 1;
         flex-direction: column;
         overflow-y: auto;
         overflow-x: hidden;
-
-        @include scrollbar;
     }
 
     &.bd-dark {

client/src/styles/partials/generic/spinners/0.scss

@@ -2,13 +2,13 @@
     width: 40px;
     height: 40px;
     position: relative;
-    -webkit-animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    -webkit-animation: bd-spinnerAnim 2s cubic-bezier(.4, 0, 0, 1) infinite;
+    animation: bd-spinnerAnim 2s cubic-bezier(.4, 0, 0, 1) infinite;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 
     &::before {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
@@ -16,14 +16,14 @@
         border-radius: 50%;
         right: 5px;
         top: 15px;
-        -webkit-animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-        animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+        -webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinnerAnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 
     &::after {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
@@ -31,14 +31,14 @@
         border-radius: 50%;
         left: 5px;
         top: 15px;
-        -webkit-animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-        animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+        -webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinnerAnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 }
 
-@-webkit-keyframes bd-spinner-anim {
+@-webkit-keyframes bd-spinnerAnim {
     from {
         -webkit-transform: rotate(0);
         transform: rotate(0);
@@ -50,7 +50,7 @@
     }
 }
 
-@keyframes bd-spinner-anim {
+@keyframes bd-spinnerAnim {
     from {
         -webkit-transform: rotate(0);
         transform: rotate(0);
@@ -62,7 +62,7 @@
     }
 }
 
-@-webkit-keyframes bd-spinner-anim-before {
+@-webkit-keyframes bd-spinnerAnimBefore {
     0% {
         -webkit-transform: translate(-10px, 0);
         transform: translate(-10px, 0);
@@ -79,7 +79,7 @@
     }
 }
 
-@keyframes bd-spinner-anim-before {
+@keyframes bd-spinnerAnimBefore {
     0% {
         -webkit-transform: translate(-10px, 0);
         transform: translate(-10px, 0);
@@ -96,7 +96,7 @@
     }
 }
 
-@-webkit-keyframes bd-spinner-anim-after {
+@-webkit-keyframes bd-spinnerAnimAfter {
     0% {
         -webkit-transform: translate(10px, 0);
         transform: translate(10px, 0);
@@ -113,7 +113,7 @@
     }
 }
 
-@keyframes bd-spinner-anim-after {
+@keyframes bd-spinnerAnimAfter {
     0% {
         -webkit-transform: translate(10px, 0);
         transform: translate(10px, 0);

client/src/styles/partials/generic/spinners/1.scss

@@ -1,8 +1,8 @@
-.bd-spinner-1 {
+.bd-spinner1 {
     width: 40px;
     height: 40px;
     position: relative;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50% / 60% no-repeat;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 }

client/src/styles/partials/generic/spinners/10.scss

@@ -1,66 +1,66 @@
-.bd-spinner-10 {
+.bd-spinner10 {
     width: 40px;
     height: 40px;
     position: relative;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
-    animation: bd-spinner-10-anim 1s cubic-bezier(.4,0,0,1) infinite;
+    animation: bd-spinner10Anim 1s cubic-bezier(.4, 0, 0, 1) infinite;
 
     &::before {
-        content: "";
+        content: '';
         left: 0;
         top: 0;
         width: 40px;
         height: 40px;
         position: absolute;
-        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
-        animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite;
+        animation: bd-spinner10Anim1 1s cubic-bezier(.4, 0, 0, 1) -.05s infinite;
     }
 
     &::after {
-        content: "";
+        content: '';
         left: 0;
         top: 0;
         width: 40px;
         height: 40px;
         position: absolute;
-        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
-        animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) infinite;
+        animation: bd-spinner10Anim1 1s cubic-bezier(.4, 0, 0, 1) infinite;
     }
 }
 
-@keyframes bd-spinner-10-anim {
+@keyframes bd-spinner10Anim {
     0% {
-        transform: scale(0.8) rotate(0.01deg);
+        transform: scale(.8) rotate(.01deg);
     }
 
     40% {
-        transform: scale(1.3) rotate(0.01deg);
+        transform: scale(1.3) rotate(.01deg);
     }
 
     80% {
-        transform: scale(1) rotate(0.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     100% {
-        transform: scale(0.8) rotate(0.01deg);
+        transform: scale(.8) rotate(.01deg);
     }
 }
 
-@keyframes bd-spinner-10-anim1 {
+@keyframes bd-spinner10Anim1 {
     0% {
-        transform: rotate(-25deg) rotate(0.01deg);
+        transform: rotate(-25deg) rotate(.01deg);
     }
 
     80% {
-        transform: rotate(375deg) rotate(0.01deg);
+        transform: rotate(375deg) rotate(.01deg);
     }
 
     100% {
-        transform: rotate(335deg) rotate(0.01deg);
+        transform: rotate(335deg) rotate(.01deg);
     }
 }

client/src/styles/partials/generic/spinners/2.scss

@@ -1,8 +1,8 @@
-.bd-spinner-2 {
+.bd-spinner2 {
     width: 40px;
     height: 40px;
     position: relative;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50% / 60% no-repeat;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 }

client/src/styles/partials/generic/spinners/3.scss

@@ -1,4 +1,4 @@
-.bd-spinner-3 {
+.bd-spinner3 {
     width: 40px;
     height: 40px;
     position: relative;
@@ -6,7 +6,7 @@
     -webkit-backface-visibility: hidden;
 
     &::before {
-        content: "";
+        content: '';
         background: #fff;
         height: 30px;
         width: 30px;
@@ -14,14 +14,14 @@
         border-radius: 50%;
         left: 5px;
         top: 5px;
-        -webkit-animation: bd-spinner-3-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-        animation: bd-spinner-3-anim-before 3s cubic-bezier(0.4, 0, 0, 1) infinite;
+        -webkit-animation: bd-spinner3AnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinner3AnimBefore 3s cubic-bezier(.4, 0, 0, 1) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 
     &::after {
-        content: "";
+        content: '';
         background: #202225;
         height: 20px;
         width: 20px;
@@ -29,77 +29,77 @@
         border-radius: 50%;
         left: 10px;
         top: 10px;
-        -webkit-animation: bd-spinner-3-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-        animation: bd-spinner-3-anim-after 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite;
+        -webkit-animation: bd-spinner3AnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinner3AnimAfter 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 }
 
-@-webkit-keyframes bd-spinner-3-anim-before {
+@-webkit-keyframes bd-spinner3AnimBefore {
     0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     50% {
-        -webkit-transform: scale(1.2)rotate(0.01deg);
-        transform: scale(1.2)rotate(0.01deg);
+        -webkit-transform: scale(1.2) rotate(.01deg);
+        transform: scale(1.2) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 }
 
-@keyframes bd-spinner-3-anim-before {
+@keyframes bd-spinner3AnimBefore {
     0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     50% {
-        -webkit-transform: scale(0.8)rotate(0.01deg);
-        transform: scale(1.2)rotate(0.01deg);
+        -webkit-transform: scale(.8) rotate(.01deg);
+        transform: scale(1.2) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 }
 
-@-webkit-keyframes bd-spinner-3-anim-after {
+@-webkit-keyframes bd-spinner3AnimAfter {
     0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     50% {
-        -webkit-transform: scale(0.4)rotate(0.01deg);
-        transform: scale(0.4)rotate(0.01deg);
+        -webkit-transform: scale(.4) rotate(.01deg);
+        transform: scale(.4) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 }
 
-@keyframes bd-spinner-3-anim-after {
+@keyframes bd-spinner3AnimAfter {
     0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     50% {
-        -webkit-transform: scale(0.4)rotate(0.01deg);
-        transform: scale(0.4)rotate(0.01deg);
+        -webkit-transform: scale(.4) rotate(.01deg);
+        transform: scale(.4) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 }

client/src/styles/partials/generic/spinners/4.scss

@@ -1,14 +1,14 @@
-.bd-spinner-4 {
+.bd-spinner4 {
     width: 40px;
     height: 40px;
     position: relative;
-    -webkit-animation: bd-spinner-4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
-    animation: bd-spinner-4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
+    -webkit-animation: bd-spinner4Anim 1s cubic-bezier(.9, -.64, .05, 1.44) infinite;
+    animation: bd-spinner4Anim 1s cubic-bezier(.9, -.64, .05, 1.44) infinite;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 
     &::before {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
@@ -21,7 +21,7 @@
     }
 
     &::after {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
@@ -34,7 +34,7 @@
     }
 }
 
-@-webkit-keyframes bd-spinner-4-anim {
+@-webkit-keyframes bd-spinner4Anim {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
@@ -46,7 +46,7 @@
     }
 }
 
-@keyframes bd-spinner-4-anim {
+@keyframes bd-spinner4Anim {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);

client/src/styles/partials/generic/spinners/5.scss

@@ -1,4 +1,4 @@
-.bd-spinner-5 {
+.bd-spinner5 {
     width: 40px;
     height: 40px;
     position: relative;
@@ -6,7 +6,7 @@
     -webkit-backface-visibility: hidden;
 
     &::before {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
@@ -14,14 +14,14 @@
         border-radius: 5px;
         left: 5px;
         bottom: 10px;
-        -webkit-animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-        animation: bd-spinner-5-anim-before 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite;
+        -webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinner5AnimBefore 2s cubic-bezier(.4, 0, 0, 1) -1s infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 
     &::after {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
@@ -29,22 +29,22 @@
         border-radius: 5px;
         left: 5px;
         top: 10px;
-        -webkit-animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-        animation: bd-spinner-5-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+        -webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinner5AnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 }
 
-@-webkit-keyframes bd-spinner-5-anim-before {
+@-webkit-keyframes bd-spinner5AnimBefore {
     0% {
-        left: 0px;
+        left: 0;
         width: 10px;
         height: 10px;
     }
 
     25% {
-        left: 0px;
+        left: 0;
         width: 30px;
         height: 6px;
     }
@@ -56,27 +56,27 @@
     }
 
     75% {
-        left: 0px;
+        left: 0;
         width: 30px;
         height: 6px;
     }
 
     100% {
-        left: 0px;
+        left: 0;
         width: 10px;
         height: 10px;
     }
 }
 
-@keyframes bd-spinner-5-anim-before {
+@keyframes bd-spinner5AnimBefore {
     0% {
-        left: 0px;
+        left: 0;
         width: 10px;
         height: 10px;
     }
 
     25% {
-        left: 0px;
+        left: 0;
         width: 30px;
         height: 6px;
     }
@@ -88,13 +88,13 @@
     }
 
     75% {
-        left: 0px;
+        left: 0;
         width: 30px;
         height: 6px;
     }
 
     100% {
-        left: 0px;
+        left: 0;
         width: 10px;
         height: 10px;
     }

client/src/styles/partials/generic/spinners/6.scss

@@ -1,4 +1,4 @@
-.bd-spinner-6 {
+.bd-spinner6 {
     width: 40px;
     height: 40px;
     position: relative;
@@ -9,35 +9,35 @@
     transform: rotate(45deg);
 
     &::before {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
         position: absolute;
         right: 5px;
         bottom: 5px;
-        -webkit-animation: bd-spinner-6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite;
-        animation: bd-spinner-6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        -webkit-animation: bd-spinner6AnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinner6AnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 
     &::after {
-        content: "";
+        content: '';
         background: #fff;
         height: 10px;
         width: 10px;
         position: absolute;
         left: 5px;
         top: 5px;
-        -webkit-animation: bd-spinner-6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite;
-        animation: bd-spinner-6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        -webkit-animation: bd-spinner6AnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinner6AnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 }
 
-@-webkit-keyframes bd-spinner-6-anim-before {
+@-webkit-keyframes bd-spinner6AnimBefore {
     0% {
         bottom: 10px;
         right: 10px;
@@ -74,7 +74,7 @@
     }
 }
 
-@keyframes bd-spinner-6-anim-before {
+@keyframes bd-spinner6AnimBefore {
     0% {
         bottom: 10px;
         right: 10px;
@@ -111,7 +111,7 @@
     }
 }
 
-@-webkit-keyframes bd-spinner-6-anim-after {
+@-webkit-keyframes bd-spinner6AnimAfter {
     0% {
         top: 10px;
         left: 10px;
@@ -148,7 +148,7 @@
     }
 }
 
-@keyframes bd-spinner-6-anim-after {
+@keyframes bd-spinner6AnimAfter {
     0% {
         top: 10px;
         left: 10px;

client/src/styles/partials/generic/spinners/7.scss

@@ -1,29 +1,29 @@
-.bd-spinner-7 {
+.bd-spinner7 {
     width: 40px;
     height: 40px;
     position: relative;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
-    -webkit-animation: bd-spinner-7-anim 1s cubic-bezier(.4,0,0,1) infinite;
-    animation: bd-spinner-7-anim 1s cubic-bezier(.4,0,0,1) infinite;
+    -webkit-animation: bd-spinner7Anim 1s cubic-bezier(.4, 0, 0, 1) infinite;
+    animation: bd-spinner7Anim 1s cubic-bezier(.4, 0, 0, 1) infinite;
 
     &::before {
-        content: "";
+        content: '';
         background: #fff;
         height: 8px;
         width: 8px;
         position: absolute;
         border-radius: 50%;
-        left: 0px;
+        left: 0;
         top: 16px;
-        -webkit-animation: bd-spinner-7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite;
-        animation: bd-spinner-7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite;
+        -webkit-animation: bd-spinner7AnimBefore 1s cubic-bezier(.2, 0, 0, .2) infinite;
+        animation: bd-spinner7AnimBefore 1s cubic-bezier(.2, 0, 0, .2) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }
 
     &::after {
-        content: "";
+        content: '';
         background: #fff;
         height: 8px;
         width: 8px;
@@ -31,8 +31,8 @@
         border-radius: 50%;
         left: 15px;
         top: 16px;
-        -webkit-animation: bd-spinner-7-anim-after 1s cubic-bezier(.4,0,0,1) infinite;
-        animation: bd-spinner-7-anim-after 1s cubic-bezier(.4,0,0,1) infinite;
+        -webkit-animation: bd-spinner7AnimAfter 1s cubic-bezier(.4, 0, 0, 1) infinite;
+        animation: bd-spinner7AnimAfter 1s cubic-bezier(.4, 0, 0, 1) infinite;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
         -webkit-box-shadow: 15px 0 0 0 #fff;
@@ -40,69 +40,69 @@
     }
 }
 
-@-webkit-keyframes bd-spinner-7-anim {
+@-webkit-keyframes bd-spinner7Anim {
     0% {
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
+        -webkit-transform: translate(0, 0) rotate(.01deg);
+        transform: translate(0, 0) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: translate(30px,0)rotate(0.01deg);
-        transform: translate(30px,0)rotate(0.01deg);
+        -webkit-transform: translate(30px, 0) rotate(.01deg);
+        transform: translate(30px, 0) rotate(.01deg);
     }
 }
 
-@keyframes bd-spinner-7-anim {
+@keyframes bd-spinner7Anim {
     0% {
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
+        -webkit-transform: translate(0, 0) rotate(.01deg);
+        transform: translate(0, 0) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: translate(30px,0)rotate(0.01deg);
-        transform: translate(30px,0)rotate(0.01deg);
+        -webkit-transform: translate(30px, 0) rotate(.01deg);
+        transform: translate(30px, 0) rotate(.01deg);
     }
 }
 
-@-webkit-keyframes bd-spinner-7-anim-before {
+@-webkit-keyframes bd-spinner7AnimBefore {
     0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     30% {
-        -webkit-transform: scale(1.4)rotate(0.01deg);
-        transform: scale(1.4)rotate(0.01deg);
+        -webkit-transform: scale(1.4) rotate(.01deg);
+        transform: scale(1.4) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 }
 
-@keyframes bd-spinner-7-anim-before {
+@keyframes bd-spinner7AnimBefore {
     0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     30% {
-        -webkit-transform: scale(1.4)rotate(0.01deg);
-        transform: scale(1.4)rotate(0.01deg);
+        -webkit-transform: scale(1.4) rotate(.01deg);
+        transform: scale(1.4) rotate(.01deg);
     }
 
     100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
+        -webkit-transform: scale(1) rotate(.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 }
 
-@-webkit-keyframes bd-spinner-7-anim-after {
+@-webkit-keyframes bd-spinner7AnimAfter {
     0% {
         opacity: 1;
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
+        -webkit-transform: translate(0, 0) rotate(.01deg);
+        transform: translate(0, 0) rotate(.01deg);
     }
 
     40% {
@@ -111,16 +111,16 @@
 
     100% {
         opacity: 1;
-        -webkit-transform: translate(-45px,0)rotate(0.01deg);
-        transform: translate(-45px,0)rotate(0.01deg);
+        -webkit-transform: translate(-45px, 0) rotate(.01deg);
+        transform: translate(-45px, 0) rotate(.01deg);
     }
 }
 
-@keyframes bd-spinner-7-anim-after {
+@keyframes bd-spinner7AnimAfter {
     0% {
         opacity: 1;
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
+        -webkit-transform: translate(0, 0) rotate(.01deg);
+        transform: translate(0, 0) rotate(.01deg);
     }
 
     40% {
@@ -129,7 +129,7 @@
 
     100% {
         opacity: 1;
-        -webkit-transform: translate(-45px,0)rotate(0.01deg);
-        transform: translate(-45px,0)rotate(0.01deg);
+        -webkit-transform: translate(-45px, 0) rotate(.01deg);
+        transform: translate(-45px, 0) rotate(.01deg);
     }
 }

client/src/styles/partials/generic/spinners/8.scss

@@ -1,4 +1,4 @@
-.bd-spinner-8 {
+.bd-spinner8 {
     width: 40px;
     height: 40px;
     position: relative;
@@ -6,62 +6,62 @@
     -webkit-backface-visibility: hidden;
 
     &::before {
-        content: "";
+        content: '';
         left: 0;
         top: 0;
         width: 40px;
         height: 40px;
         position: absolute;
-        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
-        animation: bd-spinner-8-anim-before 1.5s cubic-bezier(.4,0,0,1) infinite;
+        animation: bd-spinner8AnimBefore 1.5s cubic-bezier(.4, 0, 0, 1) infinite;
     }
 
     &::after {
-        content: "";
+        content: '';
         left: 0;
         top: 0;
         width: 40px;
         height: 40px;
         position: absolute;
-        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
-        animation: bd-spinner-8-anim-after 1.5s cubic-bezier(.4,0,0,1) infinite;
+        animation: bd-spinner8AnimAfter 1.5s cubic-bezier(.4, 0, 0, 1) infinite;
     }
 }
 
-@keyframes bd-spinner-8-anim-before {
+@keyframes bd-spinner8AnimBefore {
     0% {
-        transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0, 0) rotate(.01deg);
         opacity: 1;
     }
 
     50% {
-        transform: translate(-3px,0)rotate(0.01deg);
+        transform: translate(-3px, 0) rotate(.01deg);
         opacity: .6;
     }
 
     100% {
-        transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0, 0) rotate(.01deg);
         opacity: 1;
     }
 }
 
-@keyframes bd-spinner-8-anim-after {
+@keyframes bd-spinner8AnimAfter {
     0% {
-        transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0, 0) rotate(.01deg);
         opacity: 1;
     }
 
     50% {
-        transform: translate(3px,0)rotate(0.01deg);
+        transform: translate(3px, 0) rotate(.01deg);
         opacity: .6;
     }
 
     100% {
-        transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0, 0) rotate(.01deg);
         opacity: 1;
     }
 }

client/src/styles/partials/generic/spinners/9.scss

@@ -1,4 +1,4 @@
-.bd-spinner-9 {
+.bd-spinner9 {
     width: 40px;
     height: 40px;
     position: relative;
@@ -6,46 +6,46 @@
     -webkit-backface-visibility: hidden;
 
     &::before {
-        content: "";
+        content: '';
         left: 0;
         top: 0;
         width: 40px;
         height: 40px;
         position: absolute;
-        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
-        animation: bd-spinner-9-anim 1s cubic-bezier(.4,0,0,1) -.05s infinite;
+        animation: bd-spinner9Anim 1s cubic-bezier(.4, 0, 0, 1) -.05s infinite;
     }
 
     &::after {
-        content: "";
+        content: '';
         left: 0;
         top: 0;
         width: 40px;
         height: 40px;
         position: absolute;
-        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
-        animation: bd-spinner-9-anim 1s ease infinite;
+        animation: bd-spinner9Anim 1s ease infinite;
     }
 }
 
-@keyframes bd-spinner-9-anim {
+@keyframes bd-spinner9Anim {
     0% {
-        transform: scale(1) rotate(0.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 
     20% {
-        transform: scale(1.3) rotate(0.01deg);
+        transform: scale(1.3) rotate(.01deg);
     }
 
     40% {
-        transform: scale(0.9) rotate(0.01deg);
+        transform: scale(.9) rotate(.01deg);
     }
 
     100% {
-        transform: scale(1) rotate(0.01deg);
+        transform: scale(1) rotate(.01deg);
     }
 }

client/src/styles/partials/generic/spinners/index.scss

@@ -1,11 +1,11 @@
-@import './0.scss';
-@import './1.scss';
-@import './2.scss';
-@import './3.scss';
-@import './4.scss';
-@import './5.scss';
-@import './6.scss';
-@import './7.scss';
-@import './8.scss';
-@import './9.scss';
-@import './10.scss';
+@import './0';
+@import './1';
+@import './2';
+@import './3';
+@import './4';
+@import './5';
+@import './6';
+@import './7';
+@import './8';
+@import './9';
+@import './10';

client/src/styles/partials/generic/tabs.scss

@@ -5,14 +5,14 @@
 
     .bd-button {
         background: transparent;
-        border-bottom: 2px solid rgba(114, 118, 126, 0.3);
+        border-bottom: 2px solid rgba(114, 118, 126, .3);
         cursor: pointer;
         margin-right: 15px;
         padding: 15px 0;
         color: #87909c;
         font-size: 14px;
         font-weight: 500;
-        transition: color 0.2s ease, border-bottom-color 0.2s ease;
+        transition: color .2s ease, border-bottom-color .2s ease;
         flex: 0 0;
         display: flex;
 
@@ -20,17 +20,17 @@
             flex: 0 0;
         }
 
-        .bd-material-button {
+        .bd-materialButton {
             margin: -1px 0 -1px 4px;
         }
 
         &:hover,
         &.bd-active {
             background: transparent;
-            border-bottom-color: $colbdblue;
+            border-bottom-color: $colbdgreen;
             color: #fff;
 
-            .bd-material-design-icon {
+            .bd-materialDesignIcon {
                 fill: #fff;
             }
         }
@@ -45,30 +45,29 @@
         }
     }
 
-    .bd-material-button-wrap {
+    .bd-materialButtonWrap {
         margin-right: 15px;
         flex: 0 0;
         padding: 17px 0 18px;
 
-        .bd-material-button {
+        .bd-materialButton {
             margin: 0;
         }
     }
 
     .bd-button,
-    .bd-material-button-wrap {
-        .bd-material-button {
+    .bd-materialButtonWrap {
+        .bd-materialButton {
             width: 16px;
             height: 16px;
             flex: 0 0;
             cursor: pointer;
 
-            .material-design-icon,
-            .bd-material-design-icon {
+            .bd-materialDesignIcon {
                 display: flex;
                 align-items: center;
                 fill: #87909c;
-                transition: fill 0.2s ease;
+                transition: fill .2s ease;
 
                 svg {
                     width: 16px;
@@ -79,23 +78,21 @@
             &:hover {
                 background-color: transparent;
 
-                .bd-material-design-icon {
+                .bd-materialDesignIcon {
                     fill: #fff;
                 }
             }
         }
     }
 
-    .bd-settingswrap-header & {
-        // margin-top: -17px;
+    .bd-settingswrapHeader & {
         margin-bottom: -20px;
 
         .bd-button {
             font-size: 16px;
-           // padding: 18px 0 17px;
         }
 
-        .bd-material-button {
+        .bd-materialButton {
             width: 18px;
             height: 18px;
         }

client/src/styles/partials/generic/toasts.scss

@@ -14,39 +14,43 @@
 
     .bd-toast {
         position: relative;
-        animation: bd-toast-up 300ms ease;
-        background: #36393F;
+        animation: bd-toastUp 300ms ease;
+        background: #36393f;
         padding: 10px;
         border-radius: 5px;
-        box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
+        box-shadow: 0 0 0 1px rgba(32, 34, 37, .6), 0 2px 10px 0 rgba(0, 0, 0, .2);
         font-weight: 500;
         color: #fff;
         user-select: text;
         font-size: 14px;
         margin-top: 10px;
 
-        &.bd-toast-error {
-            background: #f04747;
+        &.bd-toastError {
+            background: $colerr;
         }
 
-        &.bd-toast-info {
-            background: #4a90e2;
+        &.bd-toastInfo {
+            background: $colbdblue;
         }
 
-        &.bd-toast-warning {
-            background: #FFA600;
+        &.bd-toastWarning {
+            background: $colwarn;
         }
 
-        &.bd-toast-success {
-            background: #43b581;
+        &.bd-toastSuccess {
+            background: $colbdgreen;
         }
 
-        &.bd-toast-has-icon {
+        &.bd-toastHasIcon {
             padding-left: 30px;
         }
+
+        &.bd-toastClosing {
+            animation: bd-toastDown 300ms ease;
+        }
     }
 
-    .bd-toast-icon {
+    .bd-toastIcon {
         position: absolute;
         left: 5px;
         top: 50%;
@@ -58,11 +62,7 @@
         overflow: hidden;
 
         svg {
-            fill: white;
+            fill: #fff;
         }
     }
-
-    .bd-toast.bd-toast-closing {
-        animation: bd-toast-down 300ms ease;
-    }
 }

client/src/styles/partials/helpers.scss

@@ -2,14 +2,18 @@
     color: $colerr;
 }
 
-.bd-p {
+%bd-p {
     color: $coldimwhite;
     font-size: 14px;
     font-weight: 500;
     margin: 10px 0;
 }
 
+.bd-p {
+    @extend %bd-p;
+}
+
 .bd-hint {
-    @extend .bd-p;
+    @extend %bd-p;
     color: #72767d;
 }

client/src/styles/partials/index.scss

@@ -1,16 +1,12 @@
-@import './variables/index.scss';
-@import './mixins/index.scss';
-@import './animations.scss';
-@import './layouts.scss';
+@import './variables/index';
+@import './mixins/index';
 
-@import './sidebarview/index.scss';
-@import './bdsettings/index.scss';
-@import './generic/index.scss';
-@import './modals/index.scss';
-@import './badges.scss';
+@import './sidebarview/index';
+@import './bdsettings/index';
+@import './generic/index';
+@import './modals/index';
 
-@import './discordoverrides.scss';
-@import './helpers.scss';
-@import './misc.scss';
-@import './emotes.scss';
-@import './toasts.scss';
+@import './discordoverrides';
+@import './helpers';
+@import './misc';
+@import './emotes';

client/src/styles/partials/misc.scss

@@ -1,3 +1,8 @@
-.edit-message .markup.mutable {
-    display: none;
+// sass-lint:disable class-name-format
+.edit-message {
+    .markup {
+        &.mutable {
+            display: none;
+        }
+    }
 }

client/src/styles/partials/mixins/index.scss

@@ -1 +1 @@
-@import './scrollbar.scss';
+@import './scrollbar';

client/src/styles/partials/mixins/scrollbar.scss

@@ -5,7 +5,6 @@
 
     &::-webkit-scrollbar-thumb {
         background-color: #1e2124;
-        border-color: #36393e;
         border-color: transparent;
     }
 
@@ -20,7 +19,6 @@
 
     &::-webkit-scrollbar-track-piece {
         background-color: #2f3136;
-        border-color: #36393e;
         border-color: transparent;
     }
 }

client/src/styles/partials/modals/backdrop.scss

@@ -1,17 +1,17 @@
 .bd-backdrop {
     position: fixed;
-    right: 0px;
-    left: 0px;
-    top: 0px;
-    bottom: 0px;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
     background: #000;
     opacity: .85;
     padding: 20px;
     z-index: 9000;
     justify-content: center;
+    animation: bd-backdropIn .22s ease;
 
-    animation: bd-backdrop-in 0.22s ease;
-    &.bd-backdrop-out {
-        animation: bd-backdrop-out 0.22s ease;
+    &.bd-backdropOut {
+        animation: bd-backdropOut .22s ease;
     }
 }

client/src/styles/partials/modals/basic-modal.scss

@@ -1,5 +1,5 @@
-.bd-modal-basic {
-    .bd-modal-basic-body {
+.bd-modalBasic {
+    .bd-modalBasicBody {
         padding-bottom: 15px;
     }
 }

client/src/styles/partials/modals/error-modal.scss

@@ -1,25 +1,46 @@
-.bd-modal.bd-err {
-    .bd-modal-header .bd-modal-icon svg {
-        fill: $colerr;
-    }
+.bd-modal {
+    &.bd-err {
+        .bd-modalHeader {
+            .bd-modalIcon {
+                svg {
+                    fill: $colerr;
+                }
+            }
+         }
 
-    .bd-modal-body {
-        padding-bottom: 15px;
-        min-height: 70px;
+        .bd-modalBody {
+            padding-bottom: 15px;
+            min-height: 70px;
+        }
     }
 }
 
-.bd-modal-error .bd-modal-error-title {
-    padding: 5px;
-    background: rgba(0,0,0,.3);
-    border-radius: 3px 3px 0 0;
-}
-
-.bd-modal-error {
+.bd-modalError {
     margin-top: 5px;
 
-    .bd-scroller-wrap {
-        background: rgba(0,0,0,.2);
+    .bd-modalErrorTitle {
+        padding: 5px;
+        background: rgba(0, 0, 0, .3);
+        border-radius: 3px 3px 0 0;
+    }
+
+    .bd-modalErrorBody {
+        white-space: pre-wrap;
+        font-size: 12px;
+        font-family: 'Consolas';
+        padding: 0 5px;
+        border-radius: 3px;
+        max-height: 100px;
+        width: auto;
+        transition: transform .2s ease, margin-top .2s ease, opacity .2s ease;
+        transform: scaleY(0) translateY(0%);
+        margin-top: -50%;
+        opacity: 0;
+    }
+
+    .bd-scrollerWrap {
+        background: rgba(0, 0, 0, .2);
+        opacity: 0;
 
         .bd-scroller {
             overflow-x: auto;
@@ -30,37 +51,21 @@
             }
         }
     }
-}
 
-.bd-modal-error .bd-scroller-wrap {
-    opacity: 0;
-}
+    &.bd-open {
+        .bd-modalErrorBody {
+            transform: scaleY(1) translateY(0%);
+            margin-top: 0%;
+            opacity: 1;
+            user-select: all;
 
-.bd-modal-error.bd-open {
-    .bd-modal-error-body {
-        transform: scaleY(1) translateY(0%);
-        margin-top: 0%;
-        opacity: 1;
-        user-select: all;
-        span {
-            font-weight: 700;
+            span {
+                font-weight: 700;
+            }
+        }
+
+        .bd-scrollerWrap {
+            opacity: 1;
         }
     }
-    .bd-scroller-wrap {
-        opacity: 1;
-    }
-}
-
-.bd-modal-error .bd-modal-error-body {
-    white-space: pre-wrap;
-    font-size: 12px;
-    font-family: 'Consolas';
-    padding: 0 5px;
-    border-radius: 3px;
-    max-height: 100px;
-    width: auto;
-    transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
-    transform: scaleY(0) translateY(0%);
-    margin-top: -50%;
-    opacity: 0;
 }

client/src/styles/partials/modals/footer-alert.scss

@@ -1,10 +1,10 @@
-.bd-modal-footer {
-    .bd-footer-alert {
+.bd-modalFooter {
+    .bd-footerAlert {
         margin: -64px 10px 10px;
         height: 0;
         display: flex;
-        background-color: rgba(32, 34, 37, 0.9);
-        box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
+        background-color: rgba(32, 34, 37, .9);
+        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
         padding: 10px 10px 10px 16px;
         overflow: hidden;
         border-radius: 5px;
@@ -15,7 +15,7 @@
 
         &.bd-warn {
             background-color: $colerr;
-            animation: bd-warn-shake 0.4s;
+            animation: bd-warnShake .4s;
         }
 
         &.bd-active {
@@ -24,7 +24,7 @@
             transform: none;
         }
 
-        .bd-footer-alert-text {
+        .bd-footerAlertText {
             flex: 1 1 auto;
             color: #fff;
             font-weight: 700;

client/src/styles/partials/modals/header.scss

@@ -1,12 +1,11 @@
-.bd-modal-header {
+.bd-modalHeader {
     display: flex;
     padding: 15px;
     flex: 0 0;
     -webkit-transition: -webkit-box-shadow .1s ease-out;
-    transition: -webkit-box-shadow .1s ease-out;
     transition: box-shadow .1s ease-out;
 
-    .bd-modal-headertext {
+    .bd-modalHeadertext {
         color: #fff;
         font-weight: 700;
         flex-grow: 1;
@@ -14,11 +13,13 @@
         padding: 1px;
     }
 
-    .bd-modal-icon .bd-material-design-icon {
-        margin-right: 5px;
+    .bd-modalIcon {
+        .bd-materialDesignIcon {
+            margin-right: 5px;
+        }
     }
 
-    .bd-modal-x {
+    .bd-modalX {
         display: flex;
         width: 20px;
         height: 20px;
@@ -30,21 +31,23 @@
         margin-left: -2px -2px -2px 10px;
         padding: 2px;
 
-        .bd-material-design-icon {
+        .bd-materialDesignIcon {
             fill: #ccc;
         }
 
         &:hover {
             background: #2d2f34;
 
-            .bd-material-design-icon {
+            .bd-materialDesignIcon {
                 fill: #fff;
             }
         }
     }
 }
 
-.bd-modal-scrolled .bd-modal-header {
-    -webkit-box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
-    box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
+.bd-modalScrolled {
+    .bd-modalHeader {
+        -webkit-box-shadow: 0 1px 0 0 rgba(24, 25, 28, .3), 0 1px 2px 0 rgba(24, 25, 28, .3);
+        box-shadow: 0 1px 0 0 rgba(24, 25, 28, .3), 0 1px 2px 0 rgba(24, 25, 28, .3);
+    }
 }

client/src/styles/partials/modals/index.scss

@@ -1,10 +1,10 @@
-@import './backdrop.scss';
-@import './modals.scss';
-@import './header.scss';
-@import './footer-alert.scss';
+@import './backdrop';
+@import './modals';
+@import './header';
+@import './footer-alert';
 
-@import './basic-modal.scss';
-@import './error-modal.scss';
-@import './settings-modal.scss';
-@import './permission-modal.scss';
-@import './input-modal.scss';
+@import './basic-modal';
+@import './error-modal';
+@import './settings-modal';
+@import './permission-modal';
+@import './input-modal';

client/src/styles/partials/modals/modals.scss

@@ -1,11 +1,11 @@
-.bd-modal-wrap {
-    transition: all 0.2s ease;
+.bd-modalWrap {
+    transition: all .2s ease;
     width: 100%;
     height: 100%;
     position: absolute;
     z-index: 9000;
 
-    .bd-modal-close-area {
+    .bd-modalCloseArea {
         width: 100%;
         height: 100%;
     }
@@ -14,7 +14,6 @@
 .bd-modal {
     position: fixed;
     align-content: space-around;
-    display: flex;
     border-radius: 8px;
     width: 100%;
     height: 100%;
@@ -22,32 +21,28 @@
     top: 0;
     user-select: none;
     padding: 60px;
-    transform: scale(1) translateZ(0px);
+    transform: scale(1) translateZ(0);
     -webkit-box-direction: normal;
     -webkit-box-orient: vertical;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     align-items: center;
     box-sizing: border-box;
     pointer-events: none;
     z-index: 9001;
     justify-content: center;
-    animation: bd-modal-in 0.22s ease;
+    animation: bd-modalIn .22s ease;
 
-    &.bd-modal-out {
-        animation: bd-modal-out 0.22s ease;
+    &.bd-modalOut {
+        animation: bd-modalOut .22s ease;
     }
 
-    .bd-modal-inner {
+    .bd-modalInner {
         background: #36393e;
         contain: layout;
         flex-direction: column;
         pointer-events: auto;
         -webkit-box-direction: normal;
         -webkit-box-orient: vertical;
-        display: -webkit-box;
-        display: -ms-flexbox;
         display: flex;
         flex-grow: 1;
         border-radius: 4px;
@@ -56,33 +51,35 @@
         width: 500px;
     }
 
-    .bd-modal-body {
+    .bd-modalBody {
         padding: 0 15px;
         display: flex;
 
-        .bd-scroller-wrap .bd-scroller {
-            color: #fff;
-            margin: 0;
-            padding: 0;
+        .bd-scrollerWrap {
+            .bd-scroller {
+                color: #fff;
+                margin: 0;
+                padding: 0;
+            }
         }
     }
 
-    .bd-modal-titlelink {
+    .bd-modalTitlelink {
         cursor: pointer;
-        color: $colbdblue;
+        color: $colbdgreen;
 
         &:hover {
             text-decoration: underline;
-            color: lighten($colbdblue, 5%);
+            color: lighten($colbdgreen, 5%);
         }
     }
 
-    .bd-modal-controls {
+    .bd-modalControls {
         display: flex;
         padding: 15px;
         border-top: 1px solid #4a4a4a;
 
-        .bd-modal-tip {
+        .bd-modalTip {
             flex-grow: 1;
             line-height: 26px;
             color: #fff;