diff --git a/renderer/src/styles/index.css b/renderer/src/styles/index.css index 465c2941..fd1bc78b 100644 --- a/renderer/src/styles/index.css +++ b/renderer/src/styles/index.css @@ -49,4 +49,4 @@ height: 1px; border-top: thin solid var(--background-modifier-accent); margin-bottom: 1em; -} \ No newline at end of file +} diff --git a/renderer/src/styles/ui/sidebar.css b/renderer/src/styles/ui/sidebar.css index be199584..4ab912ed 100644 --- a/renderer/src/styles/ui/sidebar.css +++ b/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); -} \ No newline at end of file +.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); +} diff --git a/renderer/src/ui/settings/sidebarheader.jsx b/renderer/src/ui/settings/sidebarheader.jsx index f2186fa3..0ec3236f 100644 --- a/renderer/src/ui/settings/sidebarheader.jsx +++ b/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

BetterDiscord

; + } + render() { return
- BetterDiscord + {this.renderHeader()} {props =>
Modals.showChangelogModal(Changelog)}> @@ -19,4 +22,4 @@ export default class SettingsTitle extends React.Component {
; } -} \ No newline at end of file +}