Style changes and class prefix

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

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

client/src/styles/partials/generic.scss

@@ -16,6 +16,7 @@
         &::-webkit-scrollbar-thumb {
             background-color: #1e2124;
             border-color: #36393e;
+            border-color: transparent;
         }
 
         &::-webkit-scrollbar-thumb,
@@ -24,11 +25,13 @@
             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;
         }
     }
 

client/src/styles/partials/sidebarview.scss

@@ -84,7 +84,39 @@
     .bd-content-region {
         flex-grow: 1;
         transform: translateX(-100%);
-        background: #2F3136;
+        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-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 > div:not(.active) {
@@ -103,9 +135,11 @@
         }
     }
 
+
+
     &.active {
         .bd-content-region {
             animation: bd-slidein .6s forwards;
         }
     }
-}
+}