From b3218d636aac4210775c79f10d347c31f3930f8c Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 24 Jan 2018 07:47:04 +0200
Subject: [PATCH 1/8] Styling, common components and add buttons to plugin card

---
 .../modules/ui/components/bd/PluginCard.vue   |  6 ++
 .../modules/ui/components/bd/PluginsView.vue  | 48 ----------
 .../components/bd/templates/PluginCard.html   | 17 +++-
 .../components/bd/templates/PluginsView.html  |  2 +-
 .../modules/ui/components/generic/Button.vue  | 11 +++
 .../ui/components/generic/ButtonGroup.vue     |  9 ++
 .../modules/ui/components/generic/index.js    |  4 +-
 client/src/styles/partials/buttons.scss       | 88 +++++++++++++++++++
 client/src/styles/partials/generic.scss       | 31 ++-----
 9 files changed, 140 insertions(+), 76 deletions(-)
 create mode 100644 client/src/modules/ui/components/generic/ButtonGroup.vue
 create mode 100644 client/src/styles/partials/buttons.scss

diff --git a/client/src/modules/ui/components/bd/PluginCard.vue b/client/src/modules/ui/components/bd/PluginCard.vue
index b17f57a7..e16d7d92 100644
--- a/client/src/modules/ui/components/bd/PluginCard.vue
+++ b/client/src/modules/ui/components/bd/PluginCard.vue
@@ -1,8 +1,14 @@
 <template src="./templates/PluginCard.html"></template>
 
 <script>
+    /*Imports*/
+    import { Button, ButtonGroup } from '../generic';
+    import MiSettings from 'vue-material-design-icons/settings.vue';
+    const components = { MiSettings, Button, ButtonGroup };
+
     export default {
         props: ['plugin', 'togglePlugin'],
+        components,
         name: "PluginCard"
     }
 </script>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/PluginsView.vue b/client/src/modules/ui/components/bd/PluginsView.vue
index 87658df5..2aff281f 100644
--- a/client/src/modules/ui/components/bd/PluginsView.vue
+++ b/client/src/modules/ui/components/bd/PluginsView.vue
@@ -58,53 +58,5 @@
 </script>
 
 <style>
-    .bd-spinner-container {
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-    }
-
-    .bd-spinner-container .bd-spinner-2 {
-        width: 200px;
-        height: 200px;
-     }
-
-    .bd-pluginsView .bd-button {
-        display: flex;
-    }
-
-    .bd-pluginsView .bd-button h3 {
-        flex-grow: 1;
-    } 
     
-    .bd-pluginsView .bd-button .material-design-icon {
-        display: flex;
-        align-items: center;
-        fill: #FFF;
-    }
-
-    .bd-material-button {
-        border-radius: 3px;
-        display: flex;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-        width: 30px;
-        height: 30px;
-    }
-
-    .bd-pluginsView .bd-button {
-        border-bottom: 2px solid #2b2d31;
-        align-items: center;
-    }
-
-    .bd-material-button > span {
-        display: flex;
-    }
-
-    .bd-material-button:hover {
-        background: #2d2f34;
-    }
 </style>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/templates/PluginCard.html b/client/src/modules/ui/components/bd/templates/PluginCard.html
index fe461549..d502bc1e 100644
--- a/client/src/modules/ui/components/bd/templates/PluginCard.html
+++ b/client/src/modules/ui/components/bd/templates/PluginCard.html
@@ -11,7 +11,22 @@
         <div class="bd-plugin-description">{{plugin.description}}</div>
         <div class="bd-plugin-footer">
             <div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
-            <div class="bd-controls"></div>
+            <div class="bd-controls">
+                <ButtonGroup>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                </ButtonGroup>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/templates/PluginsView.html b/client/src/modules/ui/components/bd/templates/PluginsView.html
index 8085fdd3..42bc1288 100644
--- a/client/src/modules/ui/components/bd/templates/PluginsView.html
+++ b/client/src/modules/ui/components/bd/templates/PluginsView.html
@@ -1,6 +1,6 @@
 <SettingsWrapper headertext="Plugins">
     <div class="bd-flex bd-flex-col bd-pluginsView">
-        <div class="bd-flex">
+        <div class="bd-flex bd-tabheader">
             <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Local</h3>
                 <div class="bd-material-button" @click="refreshLocalPlugins">
diff --git a/client/src/modules/ui/components/generic/Button.vue b/client/src/modules/ui/components/generic/Button.vue
index e69de29b..7e3763f6 100644
--- a/client/src/modules/ui/components/generic/Button.vue
+++ b/client/src/modules/ui/components/generic/Button.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? onClick() : null">
+        <div v-if="loading" class="bd-spinner-7"></div>
+        <slot v-else />
+    </div>
+</template>
+<script>
+    export default {
+        props: ['loading', 'disabled', 'type', 'onClick']
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/generic/ButtonGroup.vue b/client/src/modules/ui/components/generic/ButtonGroup.vue
new file mode 100644
index 00000000..b7d427f6
--- /dev/null
+++ b/client/src/modules/ui/components/generic/ButtonGroup.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="bd-button-group">
+        <slot/>
+    </div>
+</template>
+<script>
+    export default {
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/generic/index.js b/client/src/modules/ui/components/generic/index.js
index 3a5e1423..86eb7719 100644
--- a/client/src/modules/ui/components/generic/index.js
+++ b/client/src/modules/ui/components/generic/index.js
@@ -1,3 +1,5 @@
 export { default as ScrollerWrap } from './ScrollerWrap.vue';
 export { default as SettingSwitch } from './SettingSwitch.vue';
-export { default as FormButton } from './FormButton.vue';
\ No newline at end of file
+export { default as FormButton } from './FormButton.vue';
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as Button } from './Button.vue';
\ No newline at end of file
diff --git a/client/src/styles/partials/buttons.scss b/client/src/styles/partials/buttons.scss
new file mode 100644
index 00000000..3e7ece20
--- /dev/null
+++ b/client/src/styles/partials/buttons.scss
@@ -0,0 +1,88 @@
+.bd-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #FFF;
+    text-align: center;
+    user-select: none;
+    font-weight: 500;
+    background: $colbdblue;
+
+    &:not(.bd-disabled):hover {
+        background: darken($colbdblue, 5%);
+    }
+
+    &.bd-disabled {
+        filter: grayscale(90%);
+        cursor: not-allowed;
+    }
+
+    .bd-spinner-7 {
+        opacity: .3;
+    }
+}
+
+.bd-button-group {
+    display: flex;
+
+    .bd-button,
+    .bd-material-button {
+        &:first-of-type {
+            border-radius: 6px 0 0 6px;
+        }
+
+        &:last-of-type {
+            border-radius: 0 6px 6px 0;
+        }
+
+        &:not(:last-of-type) {
+            border-right: 1px solid rgba(114, 118, 126, 0.3);
+        }
+
+        &:not(:first-of-type) {
+            border-left: 1px solid rgba(114, 118, 126, 0.1);
+        }
+    }
+}
+
+.bd-tabheader {
+    .bd-button {
+        background: transparent;
+        border-bottom: 2px solid #2b2d31;
+
+        h3 {
+            flex-grow: 1;
+        }
+
+        .bd-material-button {
+            width: 30px;
+            height: 30px;
+
+            .material-design-icon,
+            .bd-material-design-icon {
+                display: flex;
+                align-items: center;
+                fill: #FFF;
+            }
+
+            &:hover {
+                background: #2d2f34;
+            }
+        }
+
+        &:hover,
+        &.bd-active {
+            background: transparent;
+            border-bottom: 2px solid $colbdblue;
+        }
+    }
+}
+
+.bd-material-button {
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss
index 011331cf..81168aa8 100644
--- a/client/src/styles/partials/generic.scss
+++ b/client/src/styles/partials/generic.scss
@@ -1,3 +1,5 @@
+@import './buttons.scss';
+
 .bd-scroller-wrap {
     display: flex;
     width: 100%;
@@ -55,30 +57,6 @@
     backface-visibility: hidden;
 }
 
-.bd-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: #FFF;
-    text-align: center;
-    user-select: none;
-    font-weight: 500;
-    background: $colbdblue;
-
-    &:not(.bd-disabled):hover {
-        background: darken($colbdblue, 5%);
-    }
-
-    &.bd-disabled {
-        filter: grayscale(90%);
-        cursor: not-allowed;
-    }
-
-    .bd-spinner-7 {
-        opacity: .3;
-    }
-}
 
 .bd-form-item h5 {
     color: #b9bbbe;
@@ -241,4 +219,7 @@
     .bd-switch:before {
         background: #888888;
     }
-}
\ No newline at end of file
+}
+
+
+

From 71ac54911ab1b2907322f165ab261ede6082bc73 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 24 Jan 2018 08:42:10 +0200
Subject: [PATCH 2/8] Styling

---
 .../modules/ui/components/bd/PluginCard.vue   |  5 +++-
 .../components/bd/templates/PluginCard.html   |  8 +++---
 .../modules/ui/components/generic/Button.vue  |  4 +--
 client/src/styles/partials/bdsettings.scss    | 25 -------------------
 client/src/styles/partials/buttons.scss       | 25 ++++++++++++++++++-
 client/src/styles/partials/generic.scss       |  5 +---
 client/src/styles/partials/plugincard.scss    | 18 +++++++++----
 7 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/client/src/modules/ui/components/bd/PluginCard.vue b/client/src/modules/ui/components/bd/PluginCard.vue
index e16d7d92..391b75ff 100644
--- a/client/src/modules/ui/components/bd/PluginCard.vue
+++ b/client/src/modules/ui/components/bd/PluginCard.vue
@@ -4,7 +4,10 @@
     /*Imports*/
     import { Button, ButtonGroup } from '../generic';
     import MiSettings from 'vue-material-design-icons/settings.vue';
-    const components = { MiSettings, Button, ButtonGroup };
+    import MiReload from 'vue-material-design-icons/refresh.vue';
+    import MiEdit from 'vue-material-design-icons/pencil.vue';
+    import MiDelete from 'vue-material-design-icons/delete.vue';
+    const components = { MiSettings, Button, ButtonGroup, MiReload, MiEdit, MiDelete };
 
     export default {
         props: ['plugin', 'togglePlugin'],
diff --git a/client/src/modules/ui/components/bd/templates/PluginCard.html b/client/src/modules/ui/components/bd/templates/PluginCard.html
index d502bc1e..be77732e 100644
--- a/client/src/modules/ui/components/bd/templates/PluginCard.html
+++ b/client/src/modules/ui/components/bd/templates/PluginCard.html
@@ -17,13 +17,13 @@
                         <MiSettings/>
                     </Button>
                     <Button>
-                        <MiSettings/>
+                        <MiReload/>
                     </Button>
                     <Button>
-                        <MiSettings/>
+                        <MiEdit/>
                     </Button>
-                    <Button>
-                        <MiSettings/>
+                    <Button type="err">
+                        <MiDelete/>
                     </Button>
                 </ButtonGroup>
             </div>
diff --git a/client/src/modules/ui/components/generic/Button.vue b/client/src/modules/ui/components/generic/Button.vue
index 7e3763f6..154ecbe7 100644
--- a/client/src/modules/ui/components/generic/Button.vue
+++ b/client/src/modules/ui/components/generic/Button.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? onClick() : null">
+    <div class="bd-button" :class="[{'bd-disabled': disabled}, {'bd-err': type === 'err'}]" @click="!disabled && !loading ? onClick() : null">
         <div v-if="loading" class="bd-spinner-7"></div>
         <slot v-else />
     </div>
 </template>
 <script>
     export default {
-        props: ['loading', 'disabled', 'type', 'onClick']
+        props: ['loading', 'disabled', 'type', 'onClick', 'type']
     }
 </script>
\ No newline at end of file
diff --git a/client/src/styles/partials/bdsettings.scss b/client/src/styles/partials/bdsettings.scss
index 085f00a5..55d46a07 100644
--- a/client/src/styles/partials/bdsettings.scss
+++ b/client/src/styles/partials/bdsettings.scss
@@ -1,30 +1,5 @@
 @import './plugincard.scss';
 
-.bd-pluginsView {
-    .bd-button {
-        text-align: center;
-        background: transparent;
-        h3 {
-            -webkit-user-select: none;
-            user-select: none;
-            display: block;
-            font-size: 1.17em;
-            margin-top: 1em;
-            margin-bottom: 1em;
-            margin-left: 0;
-            margin-right: 0;
-            font-weight: bold;
-        }
-
-        &:hover,
-        &.bd-active {
-            color: #fff;
-            background: transparent;
-            border-bottom: 2px solid #3e82e5;
-        }
-    }
-}
-
 .bd-settings-button {
     position: absolute;
     z-index: 1;
diff --git a/client/src/styles/partials/buttons.scss b/client/src/styles/partials/buttons.scss
index 3e7ece20..2099515b 100644
--- a/client/src/styles/partials/buttons.scss
+++ b/client/src/styles/partials/buttons.scss
@@ -4,6 +4,7 @@
     justify-content: center;
     cursor: pointer;
     color: #FFF;
+    background: #44474c;
     text-align: center;
     user-select: none;
     font-weight: 500;
@@ -18,6 +19,18 @@
         cursor: not-allowed;
     }
 
+    &.bd-err {
+        background: $colerr;
+    }
+
+    &.bd-warn {
+        background: $colwarn;
+    }
+
+    &.bd-ok {
+        background: $colok;
+    }
+
     .bd-spinner-7 {
         opacity: .3;
     }
@@ -28,6 +41,7 @@
 
     .bd-button,
     .bd-material-button {
+
         &:first-of-type {
             border-radius: 6px 0 0 6px;
         }
@@ -49,9 +63,18 @@
 .bd-tabheader {
     .bd-button {
         background: transparent;
-        border-bottom: 2px solid #2b2d31;
+        border-bottom: 2px solid rgba(114, 118, 126, 0.3);
 
         h3 {
+            -webkit-user-select: none;
+            user-select: none;
+            display: block;
+            font-size: 1.17em;
+            margin-top: 1em;
+            margin-bottom: 1em;
+            margin-left: 0;
+            margin-right: 0;
+            font-weight: bold;
             flex-grow: 1;
         }
 
diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss
index 81168aa8..33e2e2b0 100644
--- a/client/src/styles/partials/generic.scss
+++ b/client/src/styles/partials/generic.scss
@@ -219,7 +219,4 @@
     .bd-switch:before {
         background: #888888;
     }
-}
-
-
-
+}
\ No newline at end of file
diff --git a/client/src/styles/partials/plugincard.scss b/client/src/styles/partials/plugincard.scss
index 8386cf32..83a7f452 100644
--- a/client/src/styles/partials/plugincard.scss
+++ b/client/src/styles/partials/plugincard.scss
@@ -2,12 +2,11 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    background: #2f3136;
-    border: 1px solid #202225;
+    background: transparent;
+    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
     padding: 10px 5px;
     min-height: 150px;
     color: #b9bbbe;
-    border-radius: 8px;
     margin-top: 10px;
 
     .bd-plugin-header {
@@ -30,7 +29,6 @@
             color: #8a8c90;
             font-size: 12px;
             font-weight: 600;
-            background: rgba(0,0,0,.05);
             padding: 5px;
             border-radius: 8px;
             margin-top: 5px;
@@ -38,7 +36,6 @@
 
         .bd-plugin-footer {
             display: flex;
-            justify-content: flex-end;
             flex-grow: 1;
             align-items: flex-end;
 
@@ -46,6 +43,17 @@
                 color: rgba(255, 255, 255, 0.15);
                 font-size: 10px;
                 font-weight: 700;
+                flex-grow: 1;
+            }
+
+            .bd-controls {
+                .bd-button-group {
+                    .bd-button {
+                        fill: #FFF;
+                        width: 30px;
+                        height: 30px;
+                    }
+                }
             }
         }
     }

From 1d9e6037d924ca433ae0232eaf7b9cac4ac95218 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 24 Jan 2018 08:43:04 +0200
Subject: [PATCH 3/8] Hover styles for alt colours

---
 client/src/styles/partials/buttons.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/src/styles/partials/buttons.scss b/client/src/styles/partials/buttons.scss
index 2099515b..2066250d 100644
--- a/client/src/styles/partials/buttons.scss
+++ b/client/src/styles/partials/buttons.scss
@@ -21,14 +21,26 @@
 
     &.bd-err {
         background: $colerr;
+
+        &:hover {
+            background: darken($colerr, 5%);
+        }
     }
 
     &.bd-warn {
         background: $colwarn;
+
+        &:hover {
+            background: darken($colwarn, 5%);
+        }
     }
 
     &.bd-ok {
         background: $colok;
+
+        &:hover {
+            background: darken($colok, 5%);
+        }
     }
 
     .bd-spinner-7 {

From 87b07d0a0e1bc02577c21aa9c91c1ae313bf9d80 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 24 Jan 2018 12:35:43 +0200
Subject: [PATCH 4/8] Change how plugins are reloaded

---
 client/src/modules/core/pluginmanager.js       | 18 ++++++++++--------
 .../modules/ui/components/bd/PluginCard.vue    |  2 +-
 .../modules/ui/components/bd/PluginsView.vue   |  6 +++++-
 .../ui/components/bd/templates/PluginCard.html |  2 +-
 .../components/bd/templates/PluginsView.html   |  2 +-
 client/src/styles/partials/buttons.scss        | 11 +++++++++++
 tests/plugins/Example/index.js                 |  2 +-
 7 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/client/src/modules/core/pluginmanager.js b/client/src/modules/core/pluginmanager.js
index 881f26b2..0c094575 100644
--- a/client/src/modules/core/pluginmanager.js
+++ b/client/src/modules/core/pluginmanager.js
@@ -134,16 +134,18 @@ class PluginManager extends Module {
         }
     }
 
-    async loadPlugin(pluginPath) {
+    async loadPlugin(pluginPath, reload = false, index) {
         const { plugins } = this.state;
         const dirName = pluginPath;
 
         try {
             pluginPath = path.join(this.pluginsPath, pluginPath);
 
-            const loaded = plugins.find(plugin => plugin.pluginPath === pluginPath);
-            if (loaded) {
-                throw { 'message': 'Attempted to load an already loaded plugin' };
+            if (!reload) {
+                const loaded = plugins.find(plugin => plugin.pluginPath === pluginPath);
+                if (loaded) {
+                    throw { 'message': 'Attempted to load an already loaded plugin' };
+                }
             }
 
             const readConfig = await this.readConfig(pluginPath);
@@ -165,8 +167,8 @@ class PluginManager extends Module {
             const instance = new plugin({configs, info: readConfig.info, main: readConfig.main, paths: { pluginPath, dirName }});
 
             if (instance.enabled) instance.start();
-
-            plugins.push(instance);
+            if (reload) plugins[index] = instance;
+            else plugins.push(instance);
 
             this.setState(plugins);
 
@@ -184,9 +186,9 @@ class PluginManager extends Module {
         const { pluginPath, dirName } = _plugin;
         delete window.require.cache[window.require.resolve(pluginPath)];
 
-        this.plugins.splice(index, 1);
+       // this.plugins.splice(index, 1);
 
-        return this.loadPlugin(dirName);
+        return this.loadPlugin(dirName, true, index);
     }
 
     //TODO make this nicer
diff --git a/client/src/modules/ui/components/bd/PluginCard.vue b/client/src/modules/ui/components/bd/PluginCard.vue
index 391b75ff..2cc3db9b 100644
--- a/client/src/modules/ui/components/bd/PluginCard.vue
+++ b/client/src/modules/ui/components/bd/PluginCard.vue
@@ -10,7 +10,7 @@
     const components = { MiSettings, Button, ButtonGroup, MiReload, MiEdit, MiDelete };
 
     export default {
-        props: ['plugin', 'togglePlugin'],
+        props: ['plugin', 'togglePlugin', 'reloadPlugin'],
         components,
         name: "PluginCard"
     }
diff --git a/client/src/modules/ui/components/bd/PluginsView.vue b/client/src/modules/ui/components/bd/PluginsView.vue
index 2aff281f..cdd6bcaf 100644
--- a/client/src/modules/ui/components/bd/PluginsView.vue
+++ b/client/src/modules/ui/components/bd/PluginsView.vue
@@ -35,7 +35,11 @@
         }
     }
 
-    const methods = { showLocal, showOnline, refreshLocalPlugins, togglePlugin };
+    function reloadPlugin(plugin) {
+        this.pluginManager.reloadPlugin(plugin.name);
+    }
+
+    const methods = { showLocal, showOnline, refreshLocalPlugins, togglePlugin, reloadPlugin };
 
     export default {
         components,
diff --git a/client/src/modules/ui/components/bd/templates/PluginCard.html b/client/src/modules/ui/components/bd/templates/PluginCard.html
index be77732e..c72ada3a 100644
--- a/client/src/modules/ui/components/bd/templates/PluginCard.html
+++ b/client/src/modules/ui/components/bd/templates/PluginCard.html
@@ -16,7 +16,7 @@
                     <Button>
                         <MiSettings/>
                     </Button>
-                    <Button>
+                    <Button :onClick="() => reloadPlugin(plugin)">
                         <MiReload/>
                     </Button>
                     <Button>
diff --git a/client/src/modules/ui/components/bd/templates/PluginsView.html b/client/src/modules/ui/components/bd/templates/PluginsView.html
index 42bc1288..1c8078da 100644
--- a/client/src/modules/ui/components/bd/templates/PluginsView.html
+++ b/client/src/modules/ui/components/bd/templates/PluginsView.html
@@ -15,7 +15,7 @@
             </div>
         </div>
         <div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">
-            <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :togglePlugin="togglePlugin"/>
+            <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :togglePlugin="togglePlugin" :reloadPlugin="reloadPlugin"/>
         </div>
         <div v-if="!local" class="bd-spinner-container">
             <div class="bd-spinner-2"></div>
diff --git a/client/src/styles/partials/buttons.scss b/client/src/styles/partials/buttons.scss
index 2066250d..aace9376 100644
--- a/client/src/styles/partials/buttons.scss
+++ b/client/src/styles/partials/buttons.scss
@@ -10,6 +10,7 @@
     font-weight: 500;
     background: $colbdblue;
 
+
     &:not(.bd-disabled):hover {
         background: darken($colbdblue, 5%);
     }
@@ -46,6 +47,11 @@
     .bd-spinner-7 {
         opacity: .3;
     }
+
+    .material-design-icon svg {
+        width: 18px;
+        height: 18px;
+    }
 }
 
 .bd-button-group {
@@ -99,6 +105,11 @@
                 display: flex;
                 align-items: center;
                 fill: #FFF;
+
+                svg {
+                    width: 24px;
+                    height: 24px;
+                }
             }
 
             &:hover {
diff --git a/tests/plugins/Example/index.js b/tests/plugins/Example/index.js
index 7a9253c4..0fc266e6 100644
--- a/tests/plugins/Example/index.js
+++ b/tests/plugins/Example/index.js
@@ -11,7 +11,7 @@ module.exports = (Plugin, Api, Vendor) => {
         }
 
         onStart() {
-            console.log('On Start!');
+            console.log('On Start!!!!');
             return true;
         }
     }

From 17a8c2372b4bd19f8f3942ca4695dbc73c69eda3 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 24 Jan 2018 12:37:28 +0200
Subject: [PATCH 5/8] add some test settings for ui testing

---
 tests/plugins/Example/config.json | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/tests/plugins/Example/config.json b/tests/plugins/Example/config.json
index 3bfcc1dd..0aa2bbd5 100644
--- a/tests/plugins/Example/config.json
+++ b/tests/plugins/Example/config.json
@@ -6,7 +6,20 @@
     "description": "Example Plugin Description"
   },
   "main": "index.js",
-  "defaultConfig": {
-    "foo": "bar"
-  }
+    "defaultConfig": [
+        {
+            "id": "test-setting-1",
+            "type": "bool",
+            "value": false,
+            "text": "Bool Test Setting",
+            "hint": "Bool Test Setting Hint"
+        },
+        {
+            "id": "test-setting-2",
+            "type": "text",
+            "value": "defaultValue",
+            "text": "Text Test Setting",
+            "hint": "Text Test Setting Hint"
+        }
+    ]
 }
\ No newline at end of file

From 38783631c5521f1dd14329d75f53aa7c19d3d50d Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 25 Jan 2018 07:13:40 +0200
Subject: [PATCH 6/8] Modal plugin settings, use [] instead of {} for plugin
 configs

---
 client/src/modules/core/pluginmanager.js      | 21 ++++---
 client/src/modules/index.js                   |  2 +-
 .../modules/ui/components/bd/PluginCard.vue   | 20 +++++--
 .../modules/ui/components/bd/PluginsView.vue  | 22 +++----
 .../components/bd/templates/PluginCard.html   |  4 +-
 .../components/bd/templates/PluginsView.html  | 28 ++++++++-
 .../ui/components/generic/SettingSwitch.vue   |  2 +-
 .../ui/components/templates/BdSettings.html   | 10 ++--
 client/src/styles/partials/generic.scss       | 33 ++++++++++-
 client/src/styles/partials/plugincard.scss    | 57 +++++++++++++++++++
 tests/plugins/Example 2/config.json           |  8 ++-
 tests/plugins/Example/index.js                |  2 +-
 12 files changed, 173 insertions(+), 36 deletions(-)

diff --git a/client/src/modules/core/pluginmanager.js b/client/src/modules/core/pluginmanager.js
index 0c094575..2f0be7c3 100644
--- a/client/src/modules/core/pluginmanager.js
+++ b/client/src/modules/core/pluginmanager.js
@@ -17,7 +17,6 @@ class Plugin {
 
     constructor(pluginInternals) {
         this.__pluginInternals = pluginInternals;
-        this.userConfig.enabled = this.userConfig.enabled || false;
         this.start = this.start.bind(this);
         this.stop = this.stop.bind(this);
     }
@@ -34,6 +33,7 @@ class Plugin {
     get pluginPath() { return this.paths.pluginPath }
     get dirName() { return this.paths.dirName }
     get enabled() { return this.userConfig.enabled }
+    get pluginConfig() { return this.userConfig.pluginConfig }
 
     start() {
         if (this.onStart) {
@@ -152,10 +152,17 @@ class PluginManager extends Module {
             const mainPath = path.join(pluginPath, readConfig.main);
             const userConfigPath = path.join(pluginPath, 'user.config.json');
 
-            let userConfig = readConfig.defaultConfig;
+            const userConfig = {
+                enabled: false,
+                pluginConfig: readConfig.defaultConfig
+            };
             try {
                 const readUserConfig = await FileUtils.readJsonFromFile(userConfigPath);
-                userConfig = Object.assign({}, userConfig, readUserConfig);
+                //userConfig = Object.assign({}, userConfig, readUserConfig);
+                userConfig.pluginConfig = readConfig.defaultConfig.map(config => {
+                    const userSet = readUserConfig.pluginConfig.find(c => c.id === config.id);
+                    return userSet || config;
+                });
             } catch (err) {/*We don't care if this fails it either means that user config doesn't exist or there's something wrong with it so we revert to default config*/}
 
             const configs = {
@@ -179,7 +186,7 @@ class PluginManager extends Module {
     }
 
     async reloadPlugin(plugin) {
-        const _plugin = this.findPlugin(plugin);
+        const _plugin = plugin instanceof Plugin ? plugin : this.findPlugin(plugin);
         if (!_plugin) throw { 'message': 'Attempted to reload a plugin that is not loaded?' };
         if (!_plugin.stop()) throw { 'message': 'Plugin failed to stop!' };
         const index = this.getPluginIndex(_plugin);
@@ -209,7 +216,7 @@ class PluginManager extends Module {
     getPluginByDirName(dirName) { return this.plugins.find(p => p.dirName === dirName) }
 
     stopPlugin(name) {
-        const plugin = this.getPluginByName(name);
+        const plugin = name instanceof Plugin ? name : this.getPluginByName(name);
         try {
             if (plugin) return plugin.stop();
         } catch (err) {
@@ -219,7 +226,7 @@ class PluginManager extends Module {
     }
 
     startPlugin(name) {
-        const plugin = this.getPluginByName(name);
+        const plugin = name instanceof Plugin ? name : this.getPluginByName(name);
         try {
             if (plugin) return plugin.start();
         } catch (err) {
@@ -261,4 +268,4 @@ async function pluginManager(pluginName) {
 if (window.bdTests) window.bdTests.pluginManager = pluginManager;
 else window.bdTests = { pluginManager };
 
-module.exports = { PluginManager: _instance }
\ No newline at end of file
+module.exports = { PluginManager: _instance, Plugin }
\ No newline at end of file
diff --git a/client/src/modules/index.js b/client/src/modules/index.js
index 76422440..5067ecda 100644
--- a/client/src/modules/index.js
+++ b/client/src/modules/index.js
@@ -1,6 +1,6 @@
 export { Global } from './core/global';
 export { Logger, Utils, FileUtils } from './core/utils';
-export { PluginManager } from './core/pluginmanager';
+export { PluginManager, Plugin } from './core/pluginmanager';
 export { Pluging } from './core/plugin';
 export { BDIpc } from './core/bdipc';
 export { WebpackModules } from './core/webpackmodules';
diff --git a/client/src/modules/ui/components/bd/PluginCard.vue b/client/src/modules/ui/components/bd/PluginCard.vue
index 2cc3db9b..9d1841c6 100644
--- a/client/src/modules/ui/components/bd/PluginCard.vue
+++ b/client/src/modules/ui/components/bd/PluginCard.vue
@@ -2,16 +2,28 @@
 
 <script>
     /*Imports*/
-    import { Button, ButtonGroup } from '../generic';
+    import { Button, ButtonGroup, SettingSwitch } from '../generic';
     import MiSettings from 'vue-material-design-icons/settings.vue';
     import MiReload from 'vue-material-design-icons/refresh.vue';
     import MiEdit from 'vue-material-design-icons/pencil.vue';
     import MiDelete from 'vue-material-design-icons/delete.vue';
-    const components = { MiSettings, Button, ButtonGroup, MiReload, MiEdit, MiDelete };
+    const components = { MiSettings, Button, ButtonGroup, SettingSwitch, MiReload, MiEdit, MiDelete };
+
+    /*Methods*/
+    function showSettings() {
+        this.settingsOpen = true;
+    }
+    const methods = {  };
 
     export default {
-        props: ['plugin', 'togglePlugin', 'reloadPlugin'],
+        props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
         components,
-        name: "PluginCard"
+        name: "PluginCard",
+        methods,
+        data() {
+            return {
+                'settingsOpen': false    
+            }
+        }
     }
 </script>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/PluginsView.vue b/client/src/modules/ui/components/bd/PluginsView.vue
index cdd6bcaf..1e57c92c 100644
--- a/client/src/modules/ui/components/bd/PluginsView.vue
+++ b/client/src/modules/ui/components/bd/PluginsView.vue
@@ -1,6 +1,6 @@
 <template src="./templates/PluginsView.html"></template>
 <script>
-    const { PluginManager } = require('../../../'); //#1 require of 2018~ :3
+    const { PluginManager, Plugin } = require('../../../'); //#1 require of 2018~ :3
 
     /*Imports*/
     import { SettingsWrapper } from './';
@@ -29,24 +29,29 @@
 
     function togglePlugin(plugin) {
        if (plugin.enabled) {
-            this.pluginManager.stopPlugin(plugin.name);
+            this.pluginManager.stopPlugin(plugin);
         } else {
-            this.pluginManager.startPlugin(plugin.name);
-        }
+            this.pluginManager.startPlugin(plugin);
+       }
     }
 
     function reloadPlugin(plugin) {
         this.pluginManager.reloadPlugin(plugin.name);
     }
 
-    const methods = { showLocal, showOnline, refreshLocalPlugins, togglePlugin, reloadPlugin };
+    function showSettings(plugin) {
+        this.settingsOpen = plugin;
+    }
+
+    const methods = { showLocal, showOnline, refreshLocalPlugins, togglePlugin, reloadPlugin, showSettings };
 
     export default {
         components,
         data() {
             return {
                 local: true,
-                pluginManager: PluginManager
+                pluginManager: PluginManager,
+                settingsOpen: null
             }
         },
         computed: {
@@ -54,10 +59,7 @@
                 return this.pluginManager.plugins;
             }
         },
-        methods,
-        created: function () {
-            this.refreshLocalPlugins();
-        }
+        methods
     }
 </script>
 
diff --git a/client/src/modules/ui/components/bd/templates/PluginCard.html b/client/src/modules/ui/components/bd/templates/PluginCard.html
index c72ada3a..9bd5c75a 100644
--- a/client/src/modules/ui/components/bd/templates/PluginCard.html
+++ b/client/src/modules/ui/components/bd/templates/PluginCard.html
@@ -7,13 +7,14 @@
             <div class="bd-switch" :class="{'bd-checked': plugin.enabled}" />
         </label>
     </div>
+
     <div class="bd-plugin-body">
         <div class="bd-plugin-description">{{plugin.description}}</div>
         <div class="bd-plugin-footer">
             <div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
             <div class="bd-controls">
                 <ButtonGroup>
-                    <Button>
+                    <Button :onClick="() => showSettings(plugin)">
                         <MiSettings/>
                     </Button>
                     <Button :onClick="() => reloadPlugin(plugin)">
@@ -29,4 +30,5 @@
             </div>
         </div>
     </div>
+
 </div>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/templates/PluginsView.html b/client/src/modules/ui/components/bd/templates/PluginsView.html
index 1c8078da..aea6ed21 100644
--- a/client/src/modules/ui/components/bd/templates/PluginsView.html
+++ b/client/src/modules/ui/components/bd/templates/PluginsView.html
@@ -1,10 +1,11 @@
 <SettingsWrapper headertext="Plugins">
+    
     <div class="bd-flex bd-flex-col bd-pluginsView">
         <div class="bd-flex bd-tabheader">
             <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Local</h3>
                 <div class="bd-material-button" @click="refreshLocalPlugins">
-                    <refresh />
+                    <refresh/>
                 </div>
             </div>
             <div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
@@ -15,10 +16,33 @@
             </div>
         </div>
         <div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">
-            <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :togglePlugin="togglePlugin" :reloadPlugin="reloadPlugin"/>
+            <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :togglePlugin="togglePlugin" :reloadPlugin="reloadPlugin" :showSettings="showSettings"/>
         </div>
         <div v-if="!local" class="bd-spinner-container">
             <div class="bd-spinner-2"></div>
         </div>
     </div>
+    <div v-if="settingsOpen !== null" class="bd-backdrop" @click="settingsOpen = null"></div>
+    <div v-if="settingsOpen !== null" class="bd-modal">
+        <span>{{settingsOpen.name}} Settings</span>
+        <div v-for="setting in settingsOpen.pluginConfig" class="bd-plugin-settings-body">
+            <div class="bd-form-item" v-if="setting.type === 'bool'">
+                <div class="bd-setting-switch">
+                    <div class="bd-title">
+                        <h3>{{setting.text}}</h3>
+                        <label class="bd-switch-wrapper">
+                            <input type="checkbox" class="bd-switch-checkbox"/>
+                            <div class="bd-switch" :class="{'bd-checked': setting.value}"/>
+                        </label>
+                    </div>
+                    <div class="bd-hint">{{setting.hint}}</div>
+                </div>
+                <div class="bd-form-divider"></div>
+            </div>
+
+            <div v-else-if="setting.type === 'text'">
+
+            </div>
+        </div>
+    </div>
 </SettingsWrapper>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/generic/SettingSwitch.vue b/client/src/modules/ui/components/generic/SettingSwitch.vue
index c14db968..28aa91a0 100644
--- a/client/src/modules/ui/components/generic/SettingSwitch.vue
+++ b/client/src/modules/ui/components/generic/SettingSwitch.vue
@@ -4,7 +4,7 @@
             <h3>{{setting.title || setting.text}}</h3>
             <label class="bd-switch-wrapper" @click="!disabled ? onClick(setting) : null">
                 <input type="checkbox" class="bd-switch-checkbox" />
-                <div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled)}" />
+                <div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled || setting.value)}" />
             </label>
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
diff --git a/client/src/modules/ui/components/templates/BdSettings.html b/client/src/modules/ui/components/templates/BdSettings.html
index 475332dd..be10131d 100644
--- a/client/src/modules/ui/components/templates/BdSettings.html
+++ b/client/src/modules/ui/components/templates/BdSettings.html
@@ -11,19 +11,19 @@
             </div>
         </Sidebar>
         <ContentColumn slot="content">
-            <div :class="{active: activeContent('core'), animating: animatingContent('core')}">
+            <div v-if="activeContent('core') || animatingContent('core')" :class="{active: activeContent('core'), animating: animatingContent('core')}">
                 <CoreSettings :settings="coreSettings" :enableSetting="enableSetting" :disableSetting="disableSetting"/>
             </div>
-            <div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
+            <div v-if="activeContent('ui') || animatingContent('ui')" :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
                 <UISettings />
             </div>
-            <div :class="{active: activeContent('css'), animating: animatingContent('css')}">
+            <div v-if="activeContent('css') || animatingContent('css')" :class="{active: activeContent('css'), animating: animatingContent('css')}">
                 <CssEditorView />
             </div>
-            <div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
+            <div v-if="activeContent('emotes') || animatingContent('emotes')" :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
                 <EmoteSettings />
             </div>
-            <div :class="{active: activeContent('plugins'), animating: animatingContent('plugins')}">
+            <div v-if="activeContent('plugins') || animatingContent('plugins')" :class="{active: activeContent('plugins'), animating: animatingContent('plugins')}">
                 <PluginsView />
             </div>
         </ContentColumn>
diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss
index 33e2e2b0..8b038ca9 100644
--- a/client/src/styles/partials/generic.scss
+++ b/client/src/styles/partials/generic.scss
@@ -219,4 +219,35 @@
     .bd-switch:before {
         background: #888888;
     }
-}
\ No newline at end of file
+}
+
+.bd-backdrop {
+    position: absolute;
+    right: 0px;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    background: #000;
+    opacity: .85;
+    padding: 20px;
+}
+
+.bd-modal {
+    background: #36393e;
+    position: absolute;
+    top: 80px;
+    left: 40px;
+    right: 40px;
+    bottom: 80px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+}
+
+.bd-modal span {
+    color: #FFF;
+    font-weight: 700;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+}
diff --git a/client/src/styles/partials/plugincard.scss b/client/src/styles/partials/plugincard.scss
index 83a7f452..b55116b5 100644
--- a/client/src/styles/partials/plugincard.scss
+++ b/client/src/styles/partials/plugincard.scss
@@ -102,3 +102,60 @@
         }
     }
 }
+
+.bd-plugin-settings-header {
+    span {
+        color: #b9bbbe;
+        font-weight: 700;
+        padding: 0 20px;
+    }
+}
+
+.bd-plugin-settings-body {
+
+    .bd-setting-switch {
+        .bd-switch-wrapper {
+            flex: 0 0 auto;
+            user-select: none;
+            position: relative;
+            width: 40px;
+            height: 20px;
+            display: block;
+
+            input {
+                position: absolute;
+                opacity: 0;
+                cursor: pointer;
+                width: 100%;
+                height: 100%;
+                z-index: 1;
+            }
+
+            .bd-switch {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                background: #72767d;
+                border-radius: 14px;
+                transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
+
+                &:before {
+                    content: "";
+                    display: block;
+                    width: 14px;
+                    height: 14px;
+                    position: absolute;
+                    top: 3px;
+                    left: 3px;
+                    bottom: 3px;
+                    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);
+                }
+            }
+        }
+    }
+}
diff --git a/tests/plugins/Example 2/config.json b/tests/plugins/Example 2/config.json
index 9273656f..b9231e86 100644
--- a/tests/plugins/Example 2/config.json	
+++ b/tests/plugins/Example 2/config.json	
@@ -6,7 +6,9 @@
     "description": "Example Plugin 2 Description"
   },
   "main": "index.js",
-  "defaultConfig": {
-    "foo": "bar"
-  }
+    "defaultConfig": [
+        {
+            "foo": "bar"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/tests/plugins/Example/index.js b/tests/plugins/Example/index.js
index 0fc266e6..7a9253c4 100644
--- a/tests/plugins/Example/index.js
+++ b/tests/plugins/Example/index.js
@@ -11,7 +11,7 @@ module.exports = (Plugin, Api, Vendor) => {
         }
 
         onStart() {
-            console.log('On Start!!!!');
+            console.log('On Start!');
             return true;
         }
     }

From d934bc4aff4e78aa4f503c689244b5aea38a1d81 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 25 Jan 2018 09:50:28 +0200
Subject: [PATCH 7/8] Up to date with master

---
 .../modules/ui/components/bd/PluginsView.vue  |   3 +-
 .../components/bd/templates/PluginsView.html  |  31 +-
 .../modules/ui/components/generic/Modal.vue   |  24 +
 .../modules/ui/components/generic/index.js    |   3 +-
 .../ui/components/templates/BdSettings.html   |   2 +-
 .../button.scss}                              |  55 -
 .../src/styles/partials/bdsettings/index.scss |   4 +
 .../partials/{ => bdsettings}/plugincard.scss |  24 +-
 .../styles/partials/bdsettings/plugins.scss   |  55 +
 .../partials/bdsettings/sidebarview.scss      |  65 ++
 client/src/styles/partials/generic.scss       | 253 -----
 .../partials/{ => generic}/buttons.scss       |   8 -
 client/src/styles/partials/generic/forms.scss |  53 +
 client/src/styles/partials/generic/index.scss |   7 +
 .../partials/generic/material-buttons.scss    |  17 +
 .../src/styles/partials/generic/modals.scss   |  77 ++
 .../styles/partials/generic/scrollable.scss   |  51 +
 .../styles/partials/generic/spinners/0.scss   | 131 +++
 .../styles/partials/generic/spinners/1.scss   |   8 +
 .../styles/partials/generic/spinners/10.scss  |  66 ++
 .../styles/partials/generic/spinners/2.scss   |   8 +
 .../styles/partials/generic/spinners/3.scss   | 105 ++
 .../styles/partials/generic/spinners/4.scss   |  59 ++
 .../styles/partials/generic/spinners/5.scss   | 101 ++
 .../styles/partials/generic/spinners/6.scss   | 186 ++++
 .../styles/partials/generic/spinners/7.scss   | 135 +++
 .../styles/partials/generic/spinners/8.scss   |  67 ++
 .../styles/partials/generic/spinners/9.scss   |  51 +
 .../partials/generic/spinners/index.scss      |  11 +
 .../src/styles/partials/generic/switches.scss | 108 ++
 client/src/styles/partials/index.scss         |  13 +-
 client/src/styles/partials/sidebarview.scss   | 155 ---
 .../styles/partials/sidebarview/content.scss  |  56 ++
 .../styles/partials/sidebarview/index.scss    |   3 +
 .../src/styles/partials/sidebarview/main.scss |  47 +
 .../styles/partials/sidebarview/sidebar.scss  |  50 +
 client/src/styles/partials/spinners.scss      | 942 ------------------
 .../partials/{ => variables}/colours.scss     |   2 +-
 .../partials/{ => variables}/images.scss      |   3 +-
 .../src/styles/partials/variables/index.scss  |   2 +
 40 files changed, 1593 insertions(+), 1448 deletions(-)
 create mode 100644 client/src/modules/ui/components/generic/Modal.vue
 rename client/src/styles/partials/{bdsettings.scss => bdsettings/button.scss} (50%)
 create mode 100644 client/src/styles/partials/bdsettings/index.scss
 rename client/src/styles/partials/{ => bdsettings}/plugincard.scss (91%)
 create mode 100644 client/src/styles/partials/bdsettings/plugins.scss
 create mode 100644 client/src/styles/partials/bdsettings/sidebarview.scss
 delete mode 100644 client/src/styles/partials/generic.scss
 rename client/src/styles/partials/{ => generic}/buttons.scss (94%)
 create mode 100644 client/src/styles/partials/generic/forms.scss
 create mode 100644 client/src/styles/partials/generic/index.scss
 create mode 100644 client/src/styles/partials/generic/material-buttons.scss
 create mode 100644 client/src/styles/partials/generic/modals.scss
 create mode 100644 client/src/styles/partials/generic/scrollable.scss
 create mode 100644 client/src/styles/partials/generic/spinners/0.scss
 create mode 100644 client/src/styles/partials/generic/spinners/1.scss
 create mode 100644 client/src/styles/partials/generic/spinners/10.scss
 create mode 100644 client/src/styles/partials/generic/spinners/2.scss
 create mode 100644 client/src/styles/partials/generic/spinners/3.scss
 create mode 100644 client/src/styles/partials/generic/spinners/4.scss
 create mode 100644 client/src/styles/partials/generic/spinners/5.scss
 create mode 100644 client/src/styles/partials/generic/spinners/6.scss
 create mode 100644 client/src/styles/partials/generic/spinners/7.scss
 create mode 100644 client/src/styles/partials/generic/spinners/8.scss
 create mode 100644 client/src/styles/partials/generic/spinners/9.scss
 create mode 100644 client/src/styles/partials/generic/spinners/index.scss
 create mode 100644 client/src/styles/partials/generic/switches.scss
 delete mode 100644 client/src/styles/partials/sidebarview.scss
 create mode 100644 client/src/styles/partials/sidebarview/content.scss
 create mode 100644 client/src/styles/partials/sidebarview/index.scss
 create mode 100644 client/src/styles/partials/sidebarview/main.scss
 create mode 100644 client/src/styles/partials/sidebarview/sidebar.scss
 delete mode 100644 client/src/styles/partials/spinners.scss
 rename client/src/styles/partials/{ => variables}/colours.scss (76%)
 rename client/src/styles/partials/{ => variables}/images.scss (99%)
 create mode 100644 client/src/styles/partials/variables/index.scss

diff --git a/client/src/modules/ui/components/bd/PluginsView.vue b/client/src/modules/ui/components/bd/PluginsView.vue
index 1e57c92c..f6793775 100644
--- a/client/src/modules/ui/components/bd/PluginsView.vue
+++ b/client/src/modules/ui/components/bd/PluginsView.vue
@@ -4,9 +4,10 @@
 
     /*Imports*/
     import { SettingsWrapper } from './';
+    import { Modal } from '../generic';
     import PluginCard from './PluginCard.vue';
     import Refresh from 'vue-material-design-icons/refresh.vue';
-    const components = { SettingsWrapper, PluginCard, Refresh };
+    const components = { SettingsWrapper, PluginCard, Refresh, Modal };
 
     /*Variables*/
 
diff --git a/client/src/modules/ui/components/bd/templates/PluginsView.html b/client/src/modules/ui/components/bd/templates/PluginsView.html
index aea6ed21..ba7b5bb4 100644
--- a/client/src/modules/ui/components/bd/templates/PluginsView.html
+++ b/client/src/modules/ui/components/bd/templates/PluginsView.html
@@ -24,25 +24,26 @@
     </div>
     <div v-if="settingsOpen !== null" class="bd-backdrop" @click="settingsOpen = null"></div>
     <div v-if="settingsOpen !== null" class="bd-modal">
-        <span>{{settingsOpen.name}} Settings</span>
-        <div v-for="setting in settingsOpen.pluginConfig" class="bd-plugin-settings-body">
-            <div class="bd-form-item" v-if="setting.type === 'bool'">
-                <div class="bd-setting-switch">
-                    <div class="bd-title">
-                        <h3>{{setting.text}}</h3>
-                        <label class="bd-switch-wrapper">
-                            <input type="checkbox" class="bd-switch-checkbox"/>
-                            <div class="bd-switch" :class="{'bd-checked': setting.value}"/>
-                        </label>
+        <Modal :headerText="settingsOpen.name + ' Settings'" :close="() => { settingsOpen = null }">
+            <div slot="body" v-for="setting in settingsOpen.pluginConfig" class="bd-plugin-settings-body">
+                <div class="bd-form-item" v-if="setting.type === 'bool'">
+                    <div class="bd-setting-switch">
+                        <div class="bd-title">
+                            <h3>{{setting.text}}</h3>
+                            <label class="bd-switch-wrapper">
+                                <input type="checkbox" class="bd-switch-checkbox"/>
+                                <div class="bd-switch" :class="{'bd-checked': setting.value}"/>
+                            </label>
+                        </div>
+                        <div class="bd-hint">{{setting.hint}}</div>
                     </div>
-                    <div class="bd-hint">{{setting.hint}}</div>
+                    <div class="bd-form-divider"></div>
                 </div>
-                <div class="bd-form-divider"></div>
-            </div>
 
-            <div v-else-if="setting.type === 'text'">
+                <div v-else-if="setting.type === 'text'">
 
+                </div>
             </div>
-        </div>
+        </Modal>
     </div>
 </SettingsWrapper>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/generic/Modal.vue b/client/src/modules/ui/components/generic/Modal.vue
new file mode 100644
index 00000000..326a7f45
--- /dev/null
+++ b/client/src/modules/ui/components/generic/Modal.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="bd-modal">
+        <div class="bd-modal-inner">
+            <div class="bd-modal-header">
+                <span>{{headerText}}</span>
+                <div class="bd-modal-x" @click="close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
+                </div>
+            </div>
+            <div class="bd-modal-body">
+                <slot name="body"></slot>
+            </div>
+            <div class="bd-modal-footer">
+                <slot name="footer"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['headerText', 'close']
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/generic/index.js b/client/src/modules/ui/components/generic/index.js
index 86eb7719..4bb095ce 100644
--- a/client/src/modules/ui/components/generic/index.js
+++ b/client/src/modules/ui/components/generic/index.js
@@ -2,4 +2,5 @@ export { default as ScrollerWrap } from './ScrollerWrap.vue';
 export { default as SettingSwitch } from './SettingSwitch.vue';
 export { default as FormButton } from './FormButton.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
-export { default as Button } from './Button.vue';
\ No newline at end of file
+export { default as Button } from './Button.vue';
+export { default as Modal } from './Modal.vue';
\ No newline at end of file
diff --git a/client/src/modules/ui/components/templates/BdSettings.html b/client/src/modules/ui/components/templates/BdSettings.html
index be10131d..6497be30 100644
--- a/client/src/modules/ui/components/templates/BdSettings.html
+++ b/client/src/modules/ui/components/templates/BdSettings.html
@@ -2,7 +2,7 @@
     <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
         <Sidebar slot="sidebar">
             <div class="bd-settings-x" @click="close">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
                 <span>ESC</span>
             </div>
             <SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
diff --git a/client/src/styles/partials/bdsettings.scss b/client/src/styles/partials/bdsettings/button.scss
similarity index 50%
rename from client/src/styles/partials/bdsettings.scss
rename to client/src/styles/partials/bdsettings/button.scss
index 55d46a07..740772ea 100644
--- a/client/src/styles/partials/bdsettings.scss
+++ b/client/src/styles/partials/bdsettings/button.scss
@@ -1,5 +1,3 @@
-@import './plugincard.scss';
-
 .bd-settings-button {
     position: absolute;
     z-index: 1;
@@ -48,56 +46,3 @@
         }
     }
 }
-
-.bd-settings {
-    position: absolute;
-    top: 22px;
-    left: 0;
-    bottom: 0;
-    z-index: 3000;
-    width: 310px;
-    transform: translateX(-100%) translateY(-100%);
-    opacity: 0;
-    transition: all .4s ease-in-out;
-
-    &.active {
-        width: 900px;
-        transform: none;
-        opacity: 1;
-    }
-
-    .bd-settings-x {
-        position: absolute;
-        top: 15px;
-        left: 250px;
-        border: 2px solid #6e6e6e;
-        border-radius: 50%;
-        width: 25px;
-        height: 25px;
-        justify-content: center;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        span {
-            color: #72767d;
-            position: absolute;
-            top: 32px;
-            font-weight: 600;
-            font-size: 13px;
-        }
-
-        &:hover {
-            background-color: hsla(218,5%,47%,.3);
-        }
-    }
-
-    .platform-darwin & {
-        top: 0px;
-
-        .bd-sidebar-view .bd-sidebar-region,
-        .bd-sidebar-view .bd-content-region {
-            padding-top: 22px;
-        }
-    }
-}
\ No newline at end of file
diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss
new file mode 100644
index 00000000..836a858b
--- /dev/null
+++ b/client/src/styles/partials/bdsettings/index.scss
@@ -0,0 +1,4 @@
+@import './button.scss';
+@import './sidebarview.scss';
+@import './plugins.scss';
+@import './plugincard.scss';
diff --git a/client/src/styles/partials/plugincard.scss b/client/src/styles/partials/bdsettings/plugincard.scss
similarity index 91%
rename from client/src/styles/partials/plugincard.scss
rename to client/src/styles/partials/bdsettings/plugincard.scss
index b55116b5..02578185 100644
--- a/client/src/styles/partials/plugincard.scss
+++ b/client/src/styles/partials/bdsettings/plugincard.scss
@@ -99,15 +99,15 @@
                 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);
             }
-        }
-    }
-}
 
-.bd-plugin-settings-header {
-    span {
-        color: #b9bbbe;
-        font-weight: 700;
-        padding: 0 20px;
+            &.bd-checked {
+                background: $colbdblue;
+
+                &::before {
+                    transform: translateX(20px);
+                }
+            }
+        }
     }
 }
 
@@ -155,6 +155,14 @@
                     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);
                 }
+
+                &.bd-checked {
+                    background: $colbdblue;
+
+                    &::before {
+                        transform: translateX(20px);
+                    }
+                }
             }
         }
     }
diff --git a/client/src/styles/partials/bdsettings/plugins.scss b/client/src/styles/partials/bdsettings/plugins.scss
new file mode 100644
index 00000000..7294c03e
--- /dev/null
+++ b/client/src/styles/partials/bdsettings/plugins.scss
@@ -0,0 +1,55 @@
+/*.bd-pluginsView {
+    .bd-button {
+        text-align: center;
+        background: transparent;
+        display: flex;
+        border-bottom: 2px solid #2b2d31;
+        align-items: center;
+
+        h3 {
+            -webkit-user-select: none;
+            user-select: none;
+            display: block;
+            font-size: 1.17em;
+            margin-top: 1em;
+            margin-bottom: 1em;
+            margin-left: 0;
+            margin-right: 0;
+            font-weight: bold;
+            flex-grow: 1;
+        }
+
+        .material-design-icon {
+            display: flex;
+            align-items: center;
+            fill: #fff;
+        }
+
+        &:hover,
+        &.bd-active {
+            color: #fff;
+            background: transparent;
+            border-bottom: 2px solid #3e82e5;
+        }
+    }
+
+    .bd-spinner-container {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+
+        .bd-spinner-2 {
+            width: 200px;
+            height: 200px;
+         }
+    }
+}
+    */
+
+.bd-pluginsView {
+
+
+
+}
\ No newline at end of file
diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss
new file mode 100644
index 00000000..1b616e28
--- /dev/null
+++ b/client/src/styles/partials/bdsettings/sidebarview.scss
@@ -0,0 +1,65 @@
+.bd-settings {
+    position: absolute;
+    top: 22px;
+    left: 0;
+    bottom: 0;
+    z-index: 3000;
+    width: 310px;
+    transform: translateX(-100%) translateY(-100%);
+    opacity: 0;
+    transition: all .4s ease-in-out;
+
+    &.active {
+        width: 900px;
+        transform: none;
+        opacity: 1;
+    }
+
+    .bd-settings-x {
+        position: absolute;
+        top: 15px;
+        left: 250px;
+        border: 2px solid #6e6e6e;
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        span {
+            color: #72767d;
+            position: absolute;
+            top: 32px;
+            font-weight: 600;
+            font-size: 13px;
+        }
+
+        &:hover {
+            background-color: hsla(218,5%,47%,.3);
+        }
+    }
+
+    .bd-info {
+        display: flex;
+        flex-grow: 1;
+        align-items: flex-end;
+        overflow: hidden;
+
+        span {
+            color: #414245;
+            font-weight: 700;
+            font-size: 12px;
+        }
+    }
+
+    .platform-darwin & {
+        top: 0px;
+
+        .bd-sidebar-view .bd-sidebar-region,
+        .bd-sidebar-view .bd-content-region {
+            padding-top: 22px;
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss
deleted file mode 100644
index 8b038ca9..00000000
--- a/client/src/styles/partials/generic.scss
+++ /dev/null
@@ -1,253 +0,0 @@
-@import './buttons.scss';
-
-.bd-scroller-wrap {
-    display: flex;
-    width: 100%;
-
-    .bd-scroller {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-        overflow-y: auto;
-        overflow-x: hidden;
-
-        &::-webkit-scrollbar {
-            width: 14px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-color: #1e2124;
-            border-color: #36393e;
-            border-color: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb,
-        &::-webkit-scrollbar-track-piece {
-            background-clip: padding-box;
-            border-width: 3px;
-            border-style: solid;
-            border-radius: 7px;
-            border-color: transparent;
-        }
-
-        &::-webkit-scrollbar-track-piece {
-            background-color: #2f3136;
-            border-color: #36393e;
-            border-color: transparent;
-        }
-    }
-
-    &.bd-dark {
-        .bd-scroller {
-            &::-webkit-scrollbar-thumb {
-                background-color: #36393e;
-                border-color: transparent;
-            }
-
-            &::-webkit-scrollbar-track-piece {
-                background-color: #2b2e31;
-                border-color: transparent;
-            }
-        }
-    }
-}
-
-.bd-content-region,
-.bd-content-region .bd-content-column {
-    backface-visibility: hidden;
-}
-
-
-.bd-form-item h5 {
-    color: #b9bbbe;
-    text-transform: uppercase;
-    font-weight: 600;
-    font-size: 12px;
-}
-
-.bd-form-divider {
-    height: 1px;
-    margin-top: 8px;
-    margin-bottom: 40px;
-    background: hsla(218,5%,47%,.3);
-}
-
-.bd-form-warning {
-    display: flex;
-    margin-top: 20px;
-    background: #d84040;
-    border: 1px solid #B30B0B;
-    opacity: .8;
-    border-radius: 4px;
-    padding: 10px;
-}
-
-.bd-form-warning .bd-text {
-    display: flex;
-    color: #FFF;
-    font-weight: 700;
-    align-items: center;
-    flex-grow: 1;
-}
-
-.bd-form-warning .bd-form-button {
-    margin: 0;
-    align-self: flex-end;
-    background: #C42929;
-
-    &:hover {
-        background: darken(#C42929, 2%);
-    }
-}
-
-.bd-form-button {
-    width: 100px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    border-radius: 4px;
-    margin-top: 10px;
-    cursor: pointer;
-    font-weight: 500;
-    user-select: none;
-}
-
-.bd-setting-switch {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    -webkit-box-pack: start;
-    justify-content: flex-start;
-    -webkit-box-align: stretch;
-    align-items: stretch;
-}
-
-.bd-setting-switch .bd-title {
-    display: flex;
-    justify-content: flex-start;
-    -webkit-box-align: stretch;
-    align-items: stretch;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
-}
-
-.bd-setting-switch .bd-switch-wrapper {
-    flex: 0 0 auto;
-    user-select: none;
-    position: relative;
-    width: 44px;
-    height: 24px;
-    display: block;
-}
-
-.bd-switch-wrapper input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-}
-
-.bd-switch-wrapper .bd-switch {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: #72767d;
-    border-radius: 14px;
-    transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
-}
-
-.bd-setting-switch .bd-title h3 {
-    font-weight: 500;
-    color: #f6f6f7;
-    flex: 1;
-    line-height: 24px;
-    margin-bottom: 0;
-    margin-top: 0;
-}
-
-.bd-setting-switch .bd-hint {
-    flex: 1 1 auto;
-    color: #72767d;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 15px;
-    line-height: 30px;
-    border-bottom: 0px solid hsla(218,5%,47%,.1);
-}
-
-.bd-switch-wrapper .bd-switch:before {
-    content: "";
-    display: block;
-    width: 18px;
-    height: 18px;
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    bottom: 3px;
-    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);
-}
-
-.bd-switch-wrapper .bd-switch.bd-checked {
-    background: $colbdblue;
-}
-
-.bd-switch-wrapper .bd-switch.bd-checked:before {
-    transform: translateX(20px);
-}
-
-.bd-setting-switch + .bd-form-divider {
-    margin: 0 0 10px 0;
-}
-
-.bd-setting-switch.bd-disabled {
-
-    input {
-        cursor: not-allowed;
-    }
-    .bd-switch:before {
-        background: #888888;
-    }
-}
-
-.bd-backdrop {
-    position: absolute;
-    right: 0px;
-    left: 0px;
-    top: 0px;
-    bottom: 0px;
-    background: #000;
-    opacity: .85;
-    padding: 20px;
-}
-
-.bd-modal {
-    background: #36393e;
-    position: absolute;
-    top: 80px;
-    left: 40px;
-    right: 40px;
-    bottom: 80px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    border-radius: 8px;
-}
-
-.bd-modal span {
-    color: #FFF;
-    font-weight: 700;
-    margin-bottom: 15px;
-    padding-bottom: 15px;
-}
diff --git a/client/src/styles/partials/buttons.scss b/client/src/styles/partials/generic/buttons.scss
similarity index 94%
rename from client/src/styles/partials/buttons.scss
rename to client/src/styles/partials/generic/buttons.scss
index aace9376..bfa55f40 100644
--- a/client/src/styles/partials/buttons.scss
+++ b/client/src/styles/partials/generic/buttons.scss
@@ -123,12 +123,4 @@
             border-bottom: 2px solid $colbdblue;
         }
     }
-}
-
-.bd-material-button {
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
 }
\ No newline at end of file
diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
new file mode 100644
index 00000000..a611c13f
--- /dev/null
+++ b/client/src/styles/partials/generic/forms.scss
@@ -0,0 +1,53 @@
+.bd-form-item h5 {
+    color: #b9bbbe;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.bd-form-divider {
+    height: 1px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+    background: hsla(218,5%,47%,.3);
+}
+
+.bd-form-warning {
+    display: flex;
+    margin-top: 20px;
+    background: #d84040;
+    border: 1px solid #B30B0B;
+    opacity: .8;
+    border-radius: 4px;
+    padding: 10px;
+
+    .bd-text {
+        display: flex;
+        color: #FFF;
+        font-weight: 700;
+        align-items: center;
+        flex-grow: 1;
+    }
+
+    .bd-form-button {
+        margin: 0;
+        align-self: flex-end;
+        background: #C42929;
+
+        &:hover {
+            background: darken(#C42929, 2%);
+        }
+    }
+}
+
+.bd-form-button {
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 4px;
+    margin-top: 10px;
+    cursor: pointer;
+    font-weight: 500;
+    user-select: none;
+}
diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss
new file mode 100644
index 00000000..4bbcc2ca
--- /dev/null
+++ b/client/src/styles/partials/generic/index.scss
@@ -0,0 +1,7 @@
+@import './switches.scss';
+@import './spinners/index.scss';
+@import './scrollable.scss';
+@import './buttons.scss';
+@import './forms.scss';
+@import './material-buttons.scss';
+@import './modals.scss';
\ No newline at end of file
diff --git a/client/src/styles/partials/generic/material-buttons.scss b/client/src/styles/partials/generic/material-buttons.scss
new file mode 100644
index 00000000..abc7dd5a
--- /dev/null
+++ b/client/src/styles/partials/generic/material-buttons.scss
@@ -0,0 +1,17 @@
+.bd-material-button {
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+
+    > span {
+        display: flex;
+    }
+
+    &:hover {
+        background: #2d2f34;
+    }
+}
diff --git a/client/src/styles/partials/generic/modals.scss b/client/src/styles/partials/generic/modals.scss
new file mode 100644
index 00000000..2595e746
--- /dev/null
+++ b/client/src/styles/partials/generic/modals.scss
@@ -0,0 +1,77 @@
+.bd-backdrop {
+    position: absolute;
+    right: 0px;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    background: #000;
+    opacity: .85;
+    padding: 20px;
+}
+
+.bd-modal {
+    position: fixed;
+    align-content: space-around;
+    display: flex;
+    border-radius: 8px;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    user-select: none;
+    padding: 60px;
+    transform: scale(1) translateZ(0px);
+    -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;
+}
+
+.bd-modal .bd-modal-inner {
+    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;
+    padding: 15px;
+    border-radius: 8px;
+}
+
+.bd-modal {
+    .bd-modal-header {
+        display: flex;
+
+        span {
+            color: #FFF;
+            font-weight: 700;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            flex-grow: 1;
+        }
+
+        .bd-modal-x {
+            display: flex;
+            width: 20px;
+            height: 20px;
+            border: 1px solid transparent;
+            border-radius: 3px;
+            cursor: pointer;
+            align-content: center;
+            justify-content: center;
+            align-items: center;
+
+            &:hover {
+                background: #2d2f34;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/styles/partials/generic/scrollable.scss b/client/src/styles/partials/generic/scrollable.scss
new file mode 100644
index 00000000..e93a426f
--- /dev/null
+++ b/client/src/styles/partials/generic/scrollable.scss
@@ -0,0 +1,51 @@
+.bd-scroller-wrap {
+    display: flex;
+    width: 100%;
+
+    .bd-scroller {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        &::-webkit-scrollbar {
+            width: 14px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: #1e2124;
+            border-color: #36393e;
+            border-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-track-piece {
+            background-clip: padding-box;
+            border-width: 3px;
+            border-style: solid;
+            border-radius: 7px;
+            border-color: transparent;
+        }
+
+        &::-webkit-scrollbar-track-piece {
+            background-color: #2f3136;
+            border-color: #36393e;
+            border-color: transparent;
+        }
+    }
+
+    &.bd-dark {
+        .bd-scroller {
+            &::-webkit-scrollbar-thumb {
+                background-color: #36393e;
+                border-color: transparent;
+            }
+
+            &::-webkit-scrollbar-track-piece {
+                background-color: #2b2e31;
+                border-color: transparent;
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/0.scss b/client/src/styles/partials/generic/spinners/0.scss
new file mode 100644
index 00000000..478cd98d
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/0.scss
@@ -0,0 +1,131 @@
+.bd-spinner {
+    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;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    &::before {
+        content: "";
+        background: #fff;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+    &::after {
+        content: "";
+        background: #fff;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+}
+
+@-webkit-keyframes bd-spinner-anim {
+    from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes bd-spinner-anim {
+    from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes bd-spinner-anim-before {
+    0% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+}
+
+@keyframes bd-spinner-anim-before {
+    0% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+}
+
+@-webkit-keyframes bd-spinner-anim-after {
+    0% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+}
+
+@keyframes bd-spinner-anim-after {
+    0% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/1.scss b/client/src/styles/partials/generic/spinners/1.scss
new file mode 100644
index 00000000..297a144b
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/1.scss
@@ -0,0 +1,8 @@
+.bd-spinner-1 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
diff --git a/client/src/styles/partials/generic/spinners/10.scss b/client/src/styles/partials/generic/spinners/10.scss
new file mode 100644
index 00000000..cdae4a77
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/10.scss
@@ -0,0 +1,66 @@
+.bd-spinner-10 {
+    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;
+
+    &::before {
+        content: "";
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        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;
+    }
+
+    &::after {
+        content: "";
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        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;
+    }
+}
+
+@keyframes bd-spinner-10-anim {
+    0% {
+        transform: scale(0.8) rotate(0.01deg);
+    }
+
+    40% {
+        transform: scale(1.3) rotate(0.01deg);
+    }
+
+    80% {
+        transform: scale(1) rotate(0.01deg);
+    }
+
+    100% {
+        transform: scale(0.8) rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-10-anim1 {
+    0% {
+        transform: rotate(-25deg) rotate(0.01deg);
+    }
+
+    80% {
+        transform: rotate(375deg) rotate(0.01deg);
+    }
+
+    100% {
+        transform: rotate(335deg) rotate(0.01deg);
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/2.scss b/client/src/styles/partials/generic/spinners/2.scss
new file mode 100644
index 00000000..ed19a505
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/2.scss
@@ -0,0 +1,8 @@
+.bd-spinner-2 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
diff --git a/client/src/styles/partials/generic/spinners/3.scss b/client/src/styles/partials/generic/spinners/3.scss
new file mode 100644
index 00000000..375ee639
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/3.scss
@@ -0,0 +1,105 @@
+.bd-spinner-3 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    &::before {
+        content: "";
+        background: #fff;
+        height: 30px;
+        width: 30px;
+        position: absolute;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+    &::after {
+        content: "";
+        background: #202225;
+        height: 20px;
+        width: 20px;
+        position: absolute;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+}
+
+@-webkit-keyframes bd-spinner-3-anim-before {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(1.2)rotate(0.01deg);
+        transform: scale(1.2)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-3-anim-before {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(0.8)rotate(0.01deg);
+        transform: scale(1.2)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@-webkit-keyframes bd-spinner-3-anim-after {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(0.4)rotate(0.01deg);
+        transform: scale(0.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-3-anim-after {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(0.4)rotate(0.01deg);
+        transform: scale(0.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/4.scss b/client/src/styles/partials/generic/spinners/4.scss
new file mode 100644
index 00000000..1a24c74d
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/4.scss
@@ -0,0 +1,59 @@
+.bd-spinner-4 {
+    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;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    &::before {
+        content: "";
+        background: #fff;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        border-radius: 50%;
+        left: 5px;
+        top: 15px;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+    &::after {
+        content: "";
+        background: #fff;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        border-radius: 50%;
+        right: 5px;
+        top: 15px;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+}
+
+@-webkit-keyframes bd-spinner-4-anim {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
+
+@keyframes bd-spinner-4-anim {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/5.scss b/client/src/styles/partials/generic/spinners/5.scss
new file mode 100644
index 00000000..2b345a16
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/5.scss
@@ -0,0 +1,101 @@
+.bd-spinner-5 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    &::before {
+        content: "";
+        background: #fff;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+    &::after {
+        content: "";
+        background: #fff;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+}
+
+@-webkit-keyframes bd-spinner-5-anim-before {
+    0% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    50% {
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    100% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@keyframes bd-spinner-5-anim-before {
+    0% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    50% {
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    100% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/6.scss b/client/src/styles/partials/generic/spinners/6.scss
new file mode 100644
index 00000000..de9d1c55
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/6.scss
@@ -0,0 +1,186 @@
+.bd-spinner-6 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+
+    &::before {
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+    &::after {
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+}
+
+@-webkit-keyframes bd-spinner-6-anim-before {
+    0% {
+        bottom: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        bottom: 10px;
+        right: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        bottom: 20px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@keyframes bd-spinner-6-anim-before {
+    0% {
+        bottom: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        bottom: 10px;
+        right: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        bottom: 20px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@-webkit-keyframes bd-spinner-6-anim-after {
+    0% {
+        top: 10px;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        top: 10px;
+        left: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        top: 20px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@keyframes bd-spinner-6-anim-after {
+    0% {
+        top: 10px;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        top: 10px;
+        left: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        top: 20px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/7.scss b/client/src/styles/partials/generic/spinners/7.scss
new file mode 100644
index 00000000..cab3dd83
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/7.scss
@@ -0,0 +1,135 @@
+.bd-spinner-7 {
+    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;
+
+    &::before {
+        content: "";
+        background: #fff;
+        height: 8px;
+        width: 8px;
+        position: absolute;
+        border-radius: 50%;
+        left: 0px;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+    &::after {
+        content: "";
+        background: #fff;
+        height: 8px;
+        width: 8px;
+        position: absolute;
+        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;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+        -webkit-box-shadow: 15px 0 0 0 #fff;
+        box-shadow: 15px 0 0 0 #fff;
+    }
+}
+
+@-webkit-keyframes bd-spinner-7-anim {
+    0% {
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: translate(30px,0)rotate(0.01deg);
+        transform: translate(30px,0)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-7-anim {
+    0% {
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: translate(30px,0)rotate(0.01deg);
+        transform: translate(30px,0)rotate(0.01deg);
+    }
+}
+
+@-webkit-keyframes bd-spinner-7-anim-before {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    30% {
+        -webkit-transform: scale(1.4)rotate(0.01deg);
+        transform: scale(1.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-7-anim-before {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    30% {
+        -webkit-transform: scale(1.4)rotate(0.01deg);
+        transform: scale(1.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@-webkit-keyframes bd-spinner-7-anim-after {
+    0% {
+        opacity: 1;
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    40% {
+        opacity: .5;
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translate(-45px,0)rotate(0.01deg);
+        transform: translate(-45px,0)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-7-anim-after {
+    0% {
+        opacity: 1;
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    40% {
+        opacity: .5;
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translate(-45px,0)rotate(0.01deg);
+        transform: translate(-45px,0)rotate(0.01deg);
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/8.scss b/client/src/styles/partials/generic/spinners/8.scss
new file mode 100644
index 00000000..e33f77ab
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/8.scss
@@ -0,0 +1,67 @@
+.bd-spinner-8 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    &::before {
+        content: "";
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        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;
+    }
+
+    &::after {
+        content: "";
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        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;
+    }
+}
+
+@keyframes bd-spinner-8-anim-before {
+    0% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+
+    50% {
+        transform: translate(-3px,0)rotate(0.01deg);
+        opacity: .6;
+    }
+
+    100% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+}
+
+@keyframes bd-spinner-8-anim-after {
+    0% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+
+    50% {
+        transform: translate(3px,0)rotate(0.01deg);
+        opacity: .6;
+    }
+
+    100% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/9.scss b/client/src/styles/partials/generic/spinners/9.scss
new file mode 100644
index 00000000..d475f47d
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/9.scss
@@ -0,0 +1,51 @@
+.bd-spinner-9 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    &::before {
+        content: "";
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        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;
+    }
+
+    &::after {
+        content: "";
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        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;
+    }
+}
+
+@keyframes bd-spinner-9-anim {
+    0% {
+        transform: scale(1) rotate(0.01deg);
+    }
+
+    20% {
+        transform: scale(1.3) rotate(0.01deg);
+    }
+
+    40% {
+        transform: scale(0.9) rotate(0.01deg);
+    }
+
+    100% {
+        transform: scale(1) rotate(0.01deg);
+    }
+}
diff --git a/client/src/styles/partials/generic/spinners/index.scss b/client/src/styles/partials/generic/spinners/index.scss
new file mode 100644
index 00000000..fa8058f7
--- /dev/null
+++ b/client/src/styles/partials/generic/spinners/index.scss
@@ -0,0 +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';
diff --git a/client/src/styles/partials/generic/switches.scss b/client/src/styles/partials/generic/switches.scss
new file mode 100644
index 00000000..7d9d8b05
--- /dev/null
+++ b/client/src/styles/partials/generic/switches.scss
@@ -0,0 +1,108 @@
+.bd-setting-switch {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: stretch;
+    align-items: stretch;
+
+    .bd-title {
+        display: flex;
+        justify-content: flex-start;
+        -webkit-box-align: stretch;
+        align-items: stretch;
+        -webkit-box-direction: normal;
+        -webkit-box-orient: horizontal;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        flex-direction: row;
+        box-sizing: border-box;
+    }
+
+    .bd-switch-wrapper {
+        flex: 0 0 auto;
+        user-select: none;
+        position: relative;
+        width: 44px;
+        height: 24px;
+        display: block;
+
+        input {
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+
+        .bd-switch {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: #72767d;
+            border-radius: 14px;
+            transition: background .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out;
+
+            &::before {
+                content: "";
+                display: block;
+                width: 18px;
+                height: 18px;
+                position: absolute;
+                top: 3px;
+                left: 3px;
+                bottom: 3px;
+                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);
+            }
+
+            &.bd-checked {
+                background: $colbdblue;
+
+                &::before {
+                    transform: translateX(20px);
+                }
+            }
+        }
+    }
+
+    .bd-title h3 {
+        font-weight: 500;
+        color: #f6f6f7;
+        flex: 1;
+        line-height: 24px;
+        margin-bottom: 0;
+        margin-top: 0;
+    }
+
+    .bd-hint {
+        flex: 1 1 auto;
+        color: #72767d;
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 15px;
+        line-height: 30px;
+        border-bottom: 0px solid hsla(218,5%,47%,.1);
+    }
+
+    + .bd-form-divider {
+        margin: 0 0 10px 0;
+    }
+
+    &.bd-disabled {
+        input {
+            cursor: not-allowed;
+        }
+
+        .bd-switch::before {
+            background: #888888;
+        }
+    }
+}
diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss
index 5d99201e..d40d30a0 100644
--- a/client/src/styles/partials/index.scss
+++ b/client/src/styles/partials/index.scss
@@ -1,10 +1,9 @@
-@import './images.scss';
-@import './colours.scss';
+@import './variables/index.scss';
 @import './animations.scss';
-@import './spinners.scss';
 @import './layouts.scss';
-@import './bdsettings.scss';
-@import './sidebarview.scss';
-@import './generic.scss';
 
-@import './discordoverrides.scss';
\ No newline at end of file
+@import './sidebarview/index.scss';
+@import './bdsettings/index.scss';
+@import './generic/index.scss';
+
+@import './discordoverrides.scss';
diff --git a/client/src/styles/partials/sidebarview.scss b/client/src/styles/partials/sidebarview.scss
deleted file mode 100644
index 043cb8e7..00000000
--- a/client/src/styles/partials/sidebarview.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-.bd-sidebar-view {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    box-sizing: border-box;
-
-    .bd-sidebar-region {
-        background: #202225;
-        -webkit-box-flex: 1;
-        -webkit-box-pack: end;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        justify-content: flex-end;
-        flex: 1 0 30%;
-        z-index: 5;
-        max-width: 310px;
-        min-width: 310px;
-
-        .bd-settingsWrap {
-            display: flex;
-            height: 100%;
-            -webkit-box-flex: 1;
-            flex: 1;
-            min-height: 1px;
-            box-sizing: border-box;
-            padding: 80px 15px 15px 15px;
-
-            .bd-scroller.bd-sidebar {
-                width: 100%;
-                padding-right: 20px;
-                padding: 0;
-
-                .bd-header {
-                    padding: 6px 0;
-                    margin-left: 10px;
-                    margin-top: 15px;
-                    color: rgba(255, 255, 255, 0.15);
-                    font-size: 14px;
-                    font-weight: 700;
-                    line-height: 16px;
-                    text-transform: uppercase;
-                    font-weight: 600;
-                    flex-shrink: 0;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
-                }
-
-                .bd-item {
-                    border-radius: 3px;
-                    margin-bottom: 2px;
-                    padding-bottom: 6px;
-                    padding-top: 6px;
-                    padding: 6px 10px;
-                    color: $coldimwhite;
-                    cursor: pointer;
-                    font-size: 17px;
-                    line-height: 20px;
-                    position: relative;
-                    flex-shrink: 0;
-                    font-weight: 500;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
-
-                    &:hover,
-                    &.active {
-                        background: $colbdblue;
-                    }
-
-                    &.active {
-                        color: #FFF;
-                    }
-                }
-            }
-        }
-    }
-
-    .bd-content-region {
-        flex-grow: 1;
-        transform: translateX(-100%);
-        background: #36393e;
-        box-shadow: 0 0 4px #202225;
-
-        .bd-content-column {
-            display: flex;
-            flex-grow: 1;
-            flex-direction: column;
-            height: 100%;
-
-            > div {
-                display: flex;
-                flex-direction: column;
-                flex-grow: 1;
-            }
-
-            .bd-settingsWrap {
-                display: flex;
-                flex-direction: column;
-                flex-grow: 1;
-
-                .bd-scroller-wrap {
-                    flex-grow: 1;
-                    height: 100%;
-                }
-
-                .bd-settingsWrap-header {
-                    color: $colbdblue;
-                    text-transform: uppercase;
-                    font-weight: 600;
-                    margin-top: 10px;
-                    margin-bottom: 20px;
-                    font-size: 100%;
-                    outline: 0;
-                    padding: 0;
-                    vertical-align: baseline;
-                }
-            }
-        }
-    }
-
-    .bd-content-column > div:not(.active) {
-        opacity: 0;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-    }
-
-    .bd-content {
-        animation: bd-fade-in .4s forwards;
-
-        .animating {
-            animation: bd-fade-out .4s forwards;
-        }
-
-        .bd-settingsWrap {
-            padding: 20px 15px 15px 15px;
-        }
-    }
-
-
-
-    &.active {
-        .bd-content-region {
-            animation: bd-slidein .6s forwards;
-        }
-    }
-}
diff --git a/client/src/styles/partials/sidebarview/content.scss b/client/src/styles/partials/sidebarview/content.scss
new file mode 100644
index 00000000..adce9648
--- /dev/null
+++ b/client/src/styles/partials/sidebarview/content.scss
@@ -0,0 +1,56 @@
+.bd-content-column {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex-grow: 1;
+    backface-visibility: hidden;
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .bd-settingsWrap {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        .bd-scroller-wrap {
+            flex-grow: 1;
+            height: 100%;
+        }
+
+        .bd-settingsWrap-header {
+            color: $colbdblue;
+            text-transform: uppercase;
+            font-weight: 600;
+            margin-top: 10px;
+            margin-bottom: 20px;
+            font-size: 100%;
+            outline: 0;
+            padding: 0;
+            vertical-align: baseline;
+        }
+    }
+
+    > div:not(.active) {
+        opacity: 0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+}
+
+.bd-content {
+    animation: bd-fade-in .4s forwards;
+
+    .animating {
+        animation: bd-fade-out .4s forwards;
+    }
+
+    .bd-settingsWrap {
+        padding: 20px 15px 15px 15px;
+    }
+}
diff --git a/client/src/styles/partials/sidebarview/index.scss b/client/src/styles/partials/sidebarview/index.scss
new file mode 100644
index 00000000..8345343f
--- /dev/null
+++ b/client/src/styles/partials/sidebarview/index.scss
@@ -0,0 +1,3 @@
+@import './main.scss';
+@import './sidebar.scss';
+@import './content.scss';
diff --git a/client/src/styles/partials/sidebarview/main.scss b/client/src/styles/partials/sidebarview/main.scss
new file mode 100644
index 00000000..f3e14e12
--- /dev/null
+++ b/client/src/styles/partials/sidebarview/main.scss
@@ -0,0 +1,47 @@
+.bd-sidebar-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    box-sizing: border-box;
+
+    .bd-sidebar-region {
+        background: #202225;
+        -webkit-box-flex: 1;
+        -webkit-box-pack: end;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        justify-content: flex-end;
+        flex: 1 0 30%;
+        z-index: 5;
+        max-width: 310px;
+        min-width: 310px;
+
+        .bd-settingsWrap {
+            display: flex;
+            height: 100%;
+            -webkit-box-flex: 1;
+            flex: 1;
+            min-height: 1px;
+            box-sizing: border-box;
+            padding: 80px 15px 15px 15px;
+        }
+    }
+
+    .bd-content-region {
+        flex-grow: 1;
+        transform: translateX(-100%);
+        background: #36393e;
+        box-shadow: 0 0 4px #202225;
+        backface-visibility: hidden;
+    }
+
+    &.active {
+        .bd-content-region {
+            animation: bd-slidein .6s forwards;
+        }
+    }
+}
diff --git a/client/src/styles/partials/sidebarview/sidebar.scss b/client/src/styles/partials/sidebarview/sidebar.scss
new file mode 100644
index 00000000..1a90c637
--- /dev/null
+++ b/client/src/styles/partials/sidebarview/sidebar.scss
@@ -0,0 +1,50 @@
+.bd-sidebar {
+    width: 100%;
+    padding-right: 20px;
+    padding: 0;
+
+    .bd-header {
+        padding: 6px 0;
+        margin-left: 10px;
+        margin-top: 15px;
+        color: rgba(255, 255, 255, 0.15);
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 16px;
+        text-transform: uppercase;
+        font-weight: 600;
+        flex-shrink: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+    }
+
+    .bd-item {
+        border-radius: 3px;
+        margin-bottom: 2px;
+        padding-bottom: 6px;
+        padding-top: 6px;
+        padding: 6px 10px;
+        color: $coldimwhite;
+        cursor: pointer;
+        font-size: 17px;
+        line-height: 20px;
+        position: relative;
+        flex-shrink: 0;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+
+        &:hover,
+        &.active {
+            background: $colbdblue;
+        }
+
+        &.active {
+            color: #FFF;
+        }
+    }
+}
diff --git a/client/src/styles/partials/spinners.scss b/client/src/styles/partials/spinners.scss
deleted file mode 100644
index 9d7bcf7e..00000000
--- a/client/src/styles/partials/spinners.scss
+++ /dev/null
@@ -1,942 +0,0 @@
-.bd-spinner {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    -webkit-animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner::after {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    left: 5px;
-    top: 15px;
-    -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner::before {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    right: 5px;
-    top: 15px;
-    -webkit-animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-anim1 {
-    0% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-}
-
-@keyframes bd-spinner-anim1 {
-    0% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-}
-
-@-webkit-keyframes bd-spinner-anim2 {
-    0% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-}
-
-@keyframes bd-spinner-anim2 {
-    0% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-}
-
-@-webkit-keyframes bd-spinner-anim3 {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0);
-    }
-
-    to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes bd-spinner-anim3 {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0);
-    }
-
-    to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-
-/*BD-SPINNER-1*/
-.bd-spinner-1 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-
-/*BD-SPINNER-2*/
-.bd-spinner-2 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-
-/*BD-SPINNER-3*/
-.bd-spinner-3 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-3::before {
-    content: "";
-    background: #fff;
-    height: 30px;
-    width: 30px;
-    position: absolute;
-    border-radius: 50%;
-    left: 5px;
-    top: 5px;
-    -webkit-animation: bd-spinner-3-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-3-anim1 3s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-3::after {
-    content: "";
-    background: #202225;
-    height: 20px;
-    width: 20px;
-    position: absolute;
-    border-radius: 50%;
-    left: 10px;
-    top: 10px;
-    -webkit-animation: bd-spinner-3-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-3-anim2 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-3-anim1 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(1.2)rotate(0.01deg);
-        transform: scale(1.2)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-3-anim1 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(0.8)rotate(0.01deg);
-        transform: scale(1.2)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@-webkit-keyframes bd-spinner-3-anim2 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(0.4)rotate(0.01deg);
-        transform: scale(0.4)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-3-anim2 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(0.4)rotate(0.01deg);
-        transform: scale(0.4)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-
-/*BD-SPINNER-4*/
-.bd-spinner-4 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    -webkit-animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
-    animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-4::before {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    left: 5px;
-    top: 15px;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-4::after {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    right: 5px;
-    top: 15px;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-4-anim1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-}
-
-@keyframes bd-spinner-4-anim1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-}
-
-/*BD-SPINNER-5*/
-.bd-spinner-5 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-5::after {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 5px;
-    left: 5px;
-    top: 10px;
-    -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-5::before {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 5px;
-    left: 5px;
-    bottom: 10px;
-    -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-5-anim1 {
-    0% {
-        left: 0px;
-        width: 10px;
-        height: 10px;
-    }
-
-    25% {
-        left: 0px;
-        width: 30px;
-        height: 6px;
-    }
-
-    50% {
-        left: 20px;
-        width: 10px;
-        height: 10px;
-    }
-
-    75% {
-        left: 0px;
-        width: 30px;
-        height: 6px;
-    }
-
-    100% {
-        left: 0px;
-        width: 10px;
-        height: 10px;
-    }
-}
-
-@keyframes bd-spinner-5-anim1 {
-    0% {
-        left: 0px;
-        width: 10px;
-        height: 10px;
-    }
-
-    25% {
-        left: 0px;
-        width: 30px;
-        height: 6px;
-    }
-
-    50% {
-        left: 20px;
-        width: 10px;
-        height: 10px;
-    }
-
-    75% {
-        left: 0px;
-        width: 30px;
-        height: 6px;
-    }
-
-    100% {
-        left: 0px;
-        width: 10px;
-        height: 10px;
-    }
-}
-
-/*BD-SPINNER-6*/
-.bd-spinner-6 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg)
-}
-
-.bd-spinner-6::after {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    left: 5px;
-    top: 5px;
-    -webkit-animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite;
-    animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-6::before {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    -webkit-animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite;
-    animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-6-anim1 {
-    0% {
-        top: 10px;
-        left: 10px;
-        width: 10px;
-        height: 10px;
-    }
-
-    25% {
-        top: 10px;
-        left: 10px;
-        width: 20px;
-        height: 10px;
-    }
-
-    50% {
-        top: 10px;
-        left: 20px;
-        width: 10px;
-        height: 10px;
-    }
-
-    75% {
-        top: 10px;
-        left: 20px;
-        width: 10px;
-        height: 20px;
-    }
-
-    100% {
-        top: 20px;
-        left: 20px;
-        width: 10px;
-        height: 10px;
-    }
-}
-
-@keyframes bd-spinner-6-anim1 {
-    0% {
-        top: 10px;
-        left: 10px;
-        width: 10px;
-        height: 10px;
-    }
-
-    25% {
-        top: 10px;
-        left: 10px;
-        width: 20px;
-        height: 10px;
-    }
-
-    50% {
-        top: 10px;
-        left: 20px;
-        width: 10px;
-        height: 10px;
-    }
-
-    75% {
-        top: 10px;
-        left: 20px;
-        width: 10px;
-        height: 20px;
-    }
-
-    100% {
-        top: 20px;
-        left: 20px;
-        width: 10px;
-        height: 10px;
-    }
-}
-
-@-webkit-keyframes bd-spinner-6-anim2 {
-    0% {
-        bottom: 10px;
-        right: 10px;
-        width: 10px;
-        height: 10px;
-    }
-
-    25% {
-        bottom: 10px;
-        right: 10px;
-        width: 20px;
-        height: 10px;
-    }
-
-    50% {
-        bottom: 10px;
-        right: 20px;
-        width: 10px;
-        height: 10px;
-    }
-
-    75% {
-        bottom: 10px;
-        right: 20px;
-        width: 10px;
-        height: 20px;
-    }
-
-    100% {
-        bottom: 20px;
-        right: 20px;
-        width: 10px;
-        height: 10px;
-    }
-}
-
-@keyframes bd-spinner-6-anim2 {
-    0% {
-        bottom: 10px;
-        right: 10px;
-        width: 10px;
-        height: 10px;
-    }
-
-    25% {
-        bottom: 10px;
-        right: 10px;
-        width: 20px;
-        height: 10px;
-    }
-
-    50% {
-        bottom: 10px;
-        right: 20px;
-        width: 10px;
-        height: 10px;
-    }
-
-    75% {
-        bottom: 10px;
-        right: 20px;
-        width: 10px;
-        height: 20px;
-    }
-
-    100% {
-        bottom: 20px;
-        right: 20px;
-        width: 10px;
-        height: 10px;
-    }
-}
-
-
-/*BD-SPINNER-7*/
-.bd-spinner-7 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    -webkit-animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite;
-    animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite;
-}
-
-.bd-spinner-7::before {
-    content: "";
-    background: #fff;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    border-radius: 50%;
-    left: 0px;
-    top: 16px;
-    -webkit-animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite;
-    animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-7::after {
-    content: "";
-    background: #fff;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    border-radius: 50%;
-    left: 15px;
-    top: 16px;
-    -webkit-animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite;
-    animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    -webkit-box-shadow: 15px 0 0 0 #fff;
-    box-shadow: 15px 0 0 0 #fff;
-}
-
-@-webkit-keyframes bd-spinner-7-anim1 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    30% {
-        -webkit-transform: scale(1.4)rotate(0.01deg);
-        transform: scale(1.4)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-7-anim1 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    30% {
-        -webkit-transform: scale(1.4)rotate(0.01deg);
-        transform: scale(1.4)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@-webkit-keyframes bd-spinner-7-anim2 {
-    0% {
-        opacity: 1;
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
-    }
-
-    40% {
-        opacity: .5;
-    }
-
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(-45px,0)rotate(0.01deg);
-        transform: translate(-45px,0)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-7-anim2 {
-    0% {
-        opacity: 1;
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
-    }
-
-    40% {
-        opacity: .5;
-    }
-
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(-45px,0)rotate(0.01deg);
-        transform: translate(-45px,0)rotate(0.01deg);
-    }
-}
-
-@-webkit-keyframes bd-spinner-7-anim3 {
-    0% {
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: translate(30px,0)rotate(0.01deg);
-        transform: translate(30px,0)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-7-anim3 {
-    0% {
-        -webkit-transform: translate(0,0)rotate(0.01deg);
-        transform: translate(0,0)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: translate(30px,0)rotate(0.01deg);
-        transform: translate(30px,0)rotate(0.01deg);
-    }
-}
-
-/*BD-SPINNER-8*/
-.bd-spinner-8 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-8::before {
-    content: "";
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    animation: bd-spinner-8-anim1 1.5s cubic-bezier(.4,0,0,1) infinite;
-}
-
-.bd-spinner-8::after {
-    content: "";
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    animation: bd-spinner-8-anim2 1.5s cubic-bezier(.4,0,0,1) infinite;
-}
-
-@keyframes bd-spinner-8-anim1 {
-    0% {
-        transform: translate(0,0)rotate(0.01deg);
-        opacity: 1;
-    }
-
-    50% {
-        transform: translate(-3px,0)rotate(0.01deg);
-        opacity: .6;
-    }
-
-    100% {
-        transform: translate(0,0)rotate(0.01deg);
-        opacity: 1;
-    }
-}
-
-@keyframes bd-spinner-8-anim2 {
-    0% {
-        transform: translate(0,0)rotate(0.01deg);
-        opacity: 1;
-    }
-
-    50% {
-        transform: translate(3px,0)rotate(0.01deg);
-        opacity: .6;
-    }
-
-    100% {
-        transform: translate(0,0)rotate(0.01deg);
-        opacity: 1;
-    }
-}
-
-/*BD-SPINNER-9*/
-.bd-spinner-9 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-9::before {
-    content: "";
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    animation: bd-spinner-9-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite;
-}
-
-.bd-spinner-9::after {
-    content: "";
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    animation: bd-spinner-9-anim1 1s ease infinite;
-}
-
-@keyframes bd-spinner-9-anim1 {
-    0% {
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    20% {
-        transform: scale(1.3)rotate(0.01deg);
-    }
-
-    40% {
-        transform: scale(0.9)rotate(0.01deg);
-    }
-
-    100% {
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-/*BD-SPINNER-10*/
-.bd-spinner-10 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    animation: bd-spinner-10-anim2 1s cubic-bezier(.4,0,0,1) infinite;
-}
-
-.bd-spinner-10::before {
-    content: "";
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    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;
-}
-
-.bd-spinner-10::after {
-    content: "";
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    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;
-}
-
-@keyframes bd-spinner-10-anim1 {
-    0% {
-        transform: rotate(-25deg)rotate(0.01deg);
-    }
-
-    80% {
-        transform: rotate(375deg)rotate(0.01deg);
-    }
-
-    100% {
-        transform: rotate(335deg)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-10-anim2 {
-    0% {
-        transform: scale(0.8)rotate(0.01deg);
-    }
-
-    40% {
-        transform: scale(1.3)rotate(0.01deg);
-    }
-
-    80% {
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    100% {
-        transform: scale(0.8)rotate(0.01deg);
-    }
-}
diff --git a/client/src/styles/partials/colours.scss b/client/src/styles/partials/variables/colours.scss
similarity index 76%
rename from client/src/styles/partials/colours.scss
rename to client/src/styles/partials/variables/colours.scss
index 57ce15be..65c39906 100644
--- a/client/src/styles/partials/colours.scss
+++ b/client/src/styles/partials/variables/colours.scss
@@ -2,4 +2,4 @@ $colbdblue: #3e82e5;
 $colerr: #d84040;
 $colwarn: #faa61a;
 $colok: #43b581;
-$coldimwhite: #b9bbbe;
\ No newline at end of file
+$coldimwhite: #b9bbbe;
diff --git a/client/src/styles/partials/images.scss b/client/src/styles/partials/variables/images.scss
similarity index 99%
rename from client/src/styles/partials/images.scss
rename to client/src/styles/partials/variables/images.scss
index 7925ce2b..25e043fd 100644
--- a/client/src/styles/partials/images.scss
+++ b/client/src/styles/partials/variables/images.scss
@@ -1,2 +1,3 @@
 $logoSmallBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
-$logoBigBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==);
\ No newline at end of file
+
+$logoBigBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==);
diff --git a/client/src/styles/partials/variables/index.scss b/client/src/styles/partials/variables/index.scss
new file mode 100644
index 00000000..dfd679c8
--- /dev/null
+++ b/client/src/styles/partials/variables/index.scss
@@ -0,0 +1,2 @@
+@import './colours.scss';
+@import './images.scss';

From cb542acbd07313d77d888341d4f98df84955b150 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 25 Jan 2018 09:52:15 +0200
Subject: [PATCH 8/8] Remove any inline styles

---
 client/src/modules/ui/components/BdSettings.vue | 17 +----------------
 .../modules/ui/components/bd/PluginsView.vue    |  6 +-----
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/client/src/modules/ui/components/BdSettings.vue b/client/src/modules/ui/components/BdSettings.vue
index 9f5367a6..e6587a78 100644
--- a/client/src/modules/ui/components/BdSettings.vue
+++ b/client/src/modules/ui/components/BdSettings.vue
@@ -93,19 +93,4 @@
             this.sidebarItems.forEach(item => item.active = false);
         }
     }
-</script>
-
-<style>
-    .bd-info {
-        display: flex;
-        flex-grow: 1;
-        align-items: flex-end;
-        overflow: hidden;
-    }
-
-    .bd-info span {
-        color: #414245;
-        font-weight: 700;
-        font-size: 12px;
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/PluginsView.vue b/client/src/modules/ui/components/bd/PluginsView.vue
index f6793775..03a62cf9 100644
--- a/client/src/modules/ui/components/bd/PluginsView.vue
+++ b/client/src/modules/ui/components/bd/PluginsView.vue
@@ -62,8 +62,4 @@
         },
         methods
     }
-</script>
-
-<style>
-    
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file