Styling fixes

client/src/modules/ui/vue/components/BdSettings.vue

@@ -3,8 +3,8 @@
 <script>
     /*Imports*/
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
-    import { CoreSettings } from './bd';
-    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings };
+    import { CoreSettings, UISettings, EmoteSettings } from './bd';
+    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings };
 
     /*Constants*/
     const sidebarItems = [

client/src/modules/ui/vue/components/bd/CoreSettings.vue

@@ -1,6 +1,5 @@
 <template>
     <SettingsWrapper headertext="Core Settings">
-        Hello Core Settings!
     </SettingsWrapper>
 </template>
 

client/src/modules/ui/vue/components/bd/EmoteSettings.vue

@@ -0,0 +1,14 @@
+<template>
+    <SettingsWrapper headertext="Emote Settings">
+    </SettingsWrapper>
+</template>
+
+<script>
+    /*Imports*/
+    import { SettingsWrapper } from './';
+    const components = { SettingsWrapper };
+
+    export default {
+        components
+    }
+</script>

client/src/modules/ui/vue/components/bd/UISettings.vue

@@ -0,0 +1,14 @@
+<template>
+    <SettingsWrapper headertext="UI Settings">
+    </SettingsWrapper>
+</template>
+
+<script>
+    /*Imports*/
+    import { SettingsWrapper } from './';
+    const components = { SettingsWrapper };
+
+    export default {
+        components
+    }
+</script>

client/src/modules/ui/vue/components/bd/index.js

@@ -1,2 +1,4 @@
 export { default as SettingsWrapper } from './SettingsWrapper.vue';
-export { default as CoreSettings } from './CoreSettings.vue';
+export { default as CoreSettings } from './CoreSettings.vue';
+export { default as UISettings } from './UISettings.vue';
+export { default as EmoteSettings } from './EmoteSettings.vue';

client/src/modules/ui/vue/components/bd/templates/SettingsWrapper.html

@@ -1,6 +1,8 @@
 <div class="bd-settingsWrap">
     <div class="bd-settingsWrap-header">{{headertext}}</div>
     <ScrollerWrap>
-        <div class="bd-scroller"></div>
+        <div class="bd-scroller">
+            <slot/>
+        </div>
     </ScrollerWrap>
 </div>

client/src/modules/ui/vue/components/templates/BdSettings.html

@@ -11,6 +11,12 @@
             <div :class="{active: activeContent('core'), animating: animatingContent('core')}">
                 <CoreSettings />
             </div>
+            <div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
+                <UISettings />
+            </div>
+            <div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
+                <EmoteSettings />
+            </div>
         </ContentColumn>
 
     </SidebarView>

client/src/styles/partials/discordoverrides.scss

@@ -5,3 +5,7 @@
 [class*="guilds-wrapper"] + [class*="flex"] {
     border-radius: 0 0 0 5px;
 }
+
+.unread-mentions-indicator-top {
+    top: 45px;
+}

client/src/styles/partials/sidebarview.scss

@@ -104,6 +104,11 @@
                 flex-direction: column;
                 flex-grow: 1;
 
+                .bd-scroller-wrap {
+                    flex-grow: 1;
+                    height: 100%;
+                }
+
                 .bd-settingsWrap-header {
                     color: $colbdblue;
                     text-transform: uppercase;
@@ -119,8 +124,12 @@
         }
     }
 
-    .bd-content > div:not(.active) {
+    .bd-content-column > div:not(.active) {
         opacity: 0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
     }
 
     .bd-content {