Swap to standalone header (#1530)

* Lazy load sidebar header

* Publish CSS

* Swap to standalone header

renderer/src/styles/index.css

@@ -49,4 +49,4 @@
     height: 1px;
     border-top: thin solid var(--background-modifier-accent);
     margin-bottom: 1em;
-}
+}

renderer/src/styles/ui/sidebar.css

@@ -1,17 +1,33 @@
-.bd-sidebar-header {
-    display: flex;
-    justify-content: space-between;
-}
-
-.bd-sidebar-header .bd-changelog-button {
-    height: 16px;
-}
-
-.bd-sidebar-header .bd-icon {
-    cursor: pointer;
-    fill: var(--interactive-normal);
-}
-
-.bd-sidebar-header .bd-icon:hover {
-    fill: var(--interactive-hover);
-}
+.bd-sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bd-sidebar-header h2 {
+    padding: 6px 10px;
+    box-sizing: border-box;
+    color: #96989d;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .02em;
+    font-size: 12px;
+}
+
+.bd-sidebar-header .bd-changelog-button {
+    height: 16px;
+}
+
+.bd-sidebar-header .bd-icon {
+    cursor: pointer;
+    fill: var(--interactive-normal);
+}
+
+.bd-sidebar-header .bd-icon:hover {
+    fill: var(--interactive-hover);
+}

renderer/src/ui/settings/sidebarheader.jsx

@@ -3,13 +3,16 @@ import {React, WebpackModules} from "modules";
 import HistoryIcon from "../icons/history";
 import Modals from "../modals";
 
-const SidebarComponents = WebpackModules.getModule(m => m.Header && m.Separator && m.Item);
 const Tooltip = WebpackModules.getByPrototypes("renderTooltip");
 
 export default class SettingsTitle extends React.Component {
+    renderHeader() {
+        return <h2 className="bd-sidebar-header-label">BetterDiscord</h2>;
+    }
+
     render() {
         return <div className="bd-sidebar-header">
-                    <SidebarComponents.Header>BetterDiscord</SidebarComponents.Header>
+                    {this.renderHeader()}
                     <Tooltip color="primary" position="top" text="Changelog">
                         {props =>
                             <div {...props} className="bd-changelog-button" onClick={() => Modals.showChangelogModal(Changelog)}>
@@ -19,4 +22,4 @@ export default class SettingsTitle extends React.Component {
                     </Tooltip>
                 </div>;
     }
-}
+}