From db84e73f50a5974b4afffae2f69b22325a16a47c Mon Sep 17 00:00:00 2001
From: Tropical <42101043+Tropix126@users.noreply.github.com>
Date: Thu, 19 Nov 2020 11:48:51 -0600
Subject: [PATCH] Fixes minor UI issues (#496)

* Minimal mode fixes/improvements, fix addon list names wrapping, improvements to secondary card text.

* bd-addon-card minimal mode fix

* fix a blankstate typo

* move noresults to it's own file, add notes for utilclasses,

* css cleanup, remove pointless feature, changelog stuff

* typo in changelog

* editor autoresize with css

* forgot to scale that properly

* linter issues

* add support for inline codeblocks in changelog and card desc

* forgot something in the editor

* this looks better as tertiary

* make bd-button-success consistent, add more button states

* change coloring on bd-meta

* fix icon in light mode

* linter
---
 assets/locales/de.json                 |  4 --
 assets/locales/en.json                 |  4 --
 assets/locales/ja.json                 |  4 --
 assets/locales/sv.json                 |  4 --
 src/builtins/appearance/minimalmode.js | 20 ------
 src/data/changelog.js                  | 22 +++----
 src/data/settings/config.js            |  1 -
 src/data/strings.js                    |  6 +-
 src/modules/componentpatcher.js        | 21 ++++++-
 src/modules/datastore.js               |  2 +-
 src/styles/blankslates/noresults.css   | 15 +++++
 src/styles/builtins/customcss.css      | 86 ++++++--------------------
 src/styles/builtins/darkmode.css       | 18 ------
 src/styles/builtins/minimalmode.css    | 18 ++++--
 src/styles/builtins/publicservers.css  | 12 ----
 src/styles/buttons.css                 | 18 +++++-
 src/styles/index.css                   | 13 +++-
 src/styles/ui/addonlist.css            | 22 ++++++-
 src/ui/blankslates/noresults.jsx       |  4 +-
 src/ui/modals.js                       |  2 +-
 20 files changed, 134 insertions(+), 162 deletions(-)
 create mode 100644 src/styles/blankslates/noresults.css

diff --git a/assets/locales/de.json b/assets/locales/de.json
index 205522ad..f745b316 100644
--- a/assets/locales/de.json
+++ b/assets/locales/de.json
@@ -44,10 +44,6 @@
 					"name": "Minimaler Modus",
 					"note": "Verbirgt Elemente und reduziert die Größe von elementen."
 				},
-				"hideChannels": {
-					"name": "Kanäle verbergen",
-					"note": "Verbirgt Kanäle, wenn \"Minimaler Modus\" aktiviert ist."
-				},
 				"darkMode": {
 					"name": "Dunkelmodus",
 					"note": "Aktivert einen noch dunkleren Modus in Discord."
diff --git a/assets/locales/en.json b/assets/locales/en.json
index bbf2d6d4..b61c477c 100644
--- a/assets/locales/en.json
+++ b/assets/locales/en.json
@@ -44,10 +44,6 @@
                     "name": "24-Hour Timestamps",
                     "note": "Converts 12-hour timestamps to 24-hour format"
                 },
-                "hideChannels": {
-                    "name": "Hide Channels",
-                    "note": "Hides channels when in minimal mode"
-                },
                 "darkMode": {
                     "name": "Dark Mode",
                     "note": "Make certain elements dark by default"
diff --git a/assets/locales/ja.json b/assets/locales/ja.json
index f1f64bf1..ae5d6d05 100644
--- a/assets/locales/ja.json
+++ b/assets/locales/ja.json
@@ -44,10 +44,6 @@
                     "name": "コンパクトモード",
                     "note": "表示をコンパクトにします。"
                 },
-                "hideChannels": {
-                    "name": "チャンネルリストを非表示",
-                    "note": "コンパクトモードのときは、チャンネルリストを表示しません"
-                },
                 "darkMode": {
                     "name": "ダークモード",
                     "note": "ダークモードを有効にします"
diff --git a/assets/locales/sv.json b/assets/locales/sv.json
index cc5b09e9..04df37ca 100644
--- a/assets/locales/sv.json
+++ b/assets/locales/sv.json
@@ -44,10 +44,6 @@
                     "name": "Minimalt Läge",
                     "note": "Gömmer och förminskar komponenter"
                 },
-                "hideChannels": {
-                    "name": "Göm Kanaler",
-                    "note": "Gömmer kanaler när minimalt läge är aktiverat"
-                },
                 "darkMode": {
                     "name": "Mörkt Läge",
                     "note": "Gör vissa komponenter mörka"
diff --git a/src/builtins/appearance/minimalmode.js b/src/builtins/appearance/minimalmode.js
index c15b812b..f635e3ab 100644
--- a/src/builtins/appearance/minimalmode.js
+++ b/src/builtins/appearance/minimalmode.js
@@ -4,32 +4,12 @@ export default new class MinimalMode extends Builtin {
     get name() {return "MinimalMode";}
     get category() {return "appearance";}
     get id() {return "minimalMode";}
-    get hideChannelsID() {return "hideChannels";}
-    get hideChannels() {return this.get(this.hideChannelsID);}
-
-    constructor() {
-        super();
-        this.enableHideChannels = this.enableHideChannels.bind(this);
-        this.disableHideChannels = this.disableHideChannels.bind(this);
-    }
 
     enabled() {
         document.body.classList.add("bd-minimal");
-        if (this.hideChannels) this.enableHideChannels();
-        this.hideChannelCancel = this.registerSetting(this.hideChannelsID, this.enableHideChannels, this.disableHideChannels);
     }
 
     disabled() {
         document.body.classList.remove("bd-minimal");
-        if (this.hideChannels) this.disableHideChannels();
-        if (this.hideChannelCancel) this.hideChannelCancel();
-    }
-
-    enableHideChannels() {
-        document.body.classList.add("bd-minimal-chan");
-    }
-
-    disableHideChannels() {
-        document.body.classList.remove("bd-minimal-chan");
     }
 };
\ No newline at end of file
diff --git a/src/data/changelog.js b/src/data/changelog.js
index 989028b8..f1466c82 100644
--- a/src/data/changelog.js
+++ b/src/data/changelog.js
@@ -1,20 +1,19 @@
 export default {
-    video: "https://i.zackrauen.com/EEM6Nor0XW.mp4",
-    poster: "https://i.imgur.com/tNGALts.jpeg",
+    video: "https://cdn.discordapp.com/attachments/769669826120777739/777059779368976394/b0cs2x.mp4",
+    poster: "https://i.imgur.com/P50xFON.png",
     description: "The rewrite you didn't even know about is finally here.",
     changes: [
         {
             title: "What's New?",
             items: [
                 "**Everything** is entirely rewritten, for better or worse.",
-                "**Emotes and CustomCSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.",
-                "**Floating editors** for both custom css and plugins/themes are now available. (See video above)",
-                "**Ace**, the editor from the previous version, has been replaced with **Monaco** which is the editor used in VSCode.",
+                "**Emotes and Custom CSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.",
+                "**Floating editors** for both custom css and plugins/themes are now available.",
+                "**Monaco** is now used as the main CSS editor, in place of Ace.",
                 "**Settings panels** are completely new and sleek. They are also highly extensible for potential future features :eyes:",
                 "**Translations** are now integrated starting with only a couple languages, but feel free to contribute your own!",
-                "**Emote menu** now uses React Patching and properly integrates into the new Emoji Picker. (Thanks Strencher#1044!)",
                 "**Public servers** got a new makeover thanks to some design help from Tropical and Gibbu!",
-                "We added a setting to **hide the Gif Picker and the Nitro Gift Picker** in the textarea."
+                "We added settings to hide the **Gif Picker** and the **Nitro Gift** buttons in the textarea."
             ]
         },
         {
@@ -26,16 +25,17 @@ export default {
                 "**General performance** improvements throughout the app, from startup to emotes to addons.",
                 "**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name.",
                 "**Plugins and Themes** pages have more options for sorting, views and more. The entire panel got a facelift!",
-                "**Blankslates** have been added all over for that added UX."
+                "**Blankslates** have been added all over for that added UX.",
+                "**Several unused UI features** have been removed for a more performant and usable experience.",
+                "**Debugger Hotkey** is now a built-in feature!"
             ]
         },
         {
             title: "Fixes",
             type: "fixed",
             items: [
-                "There are a lot of little issues that this rewrite fixes.",
-                "I forgot to write them down",
-                "But I'm sure many more will be found soon"
+                "**Minimal mode** has been redesigned from the ground up and now works as intended.",
+                "**Emote menus** are fixed and now use React Patching to properly integrate into the new Emoji Picker. (Thanks Strencher#1044!)"
             ]
         }
     ]
diff --git a/src/data/settings/config.js b/src/data/settings/config.js
index ccd72c32..c30fd0ac 100644
--- a/src/data/settings/config.js
+++ b/src/data/settings/config.js
@@ -21,7 +21,6 @@ export default [
             {type: "switch", id: "hideGIFButton", value: false},
             {type: "switch", id: "voiceMode", value: false},
             {type: "switch", id: "minimalMode", value: false},
-            {type: "switch", id: "hideChannels", value: false, enableWith: "minimalMode"},
             {type: "switch", id: "darkMode", value: false},
             {type: "switch", id: "coloredText", value: false}
         ]
diff --git a/src/data/strings.js b/src/data/strings.js
index fdf8a351..ef42be06 100644
--- a/src/data/strings.js
+++ b/src/data/strings.js
@@ -44,10 +44,6 @@ export default {
                     name: "24-Hour Timestamps",
                     note: "Converts 12-hour timestamps to 24-hour format"
                 },
-                hideChannels: {
-                    name: "Hide Channels",
-                    note: "Hides channels when in minimal mode"
-                },
                 darkMode: {
                     name: "Dark Mode",
                     note: "Make certain elements dark by default"
@@ -231,7 +227,7 @@ export default {
         metaNotFound: "META was not found.",
         compileError: "Could not be compiled.",
         wasUnloaded: "{{name}} was unloaded.",
-        blankSlateHeader: "You don't have any {{type}}!",
+        blankSlateHeader: "You don't have any {{type}}s!",
         blankSlateMessage: "Grab some from [this website]({{link}}) and add them to your {{type}} folder."
     },
     CustomCSS: {
diff --git a/src/modules/componentpatcher.js b/src/modules/componentpatcher.js
index d6c050fc..74a9b882 100644
--- a/src/modules/componentpatcher.js
+++ b/src/modules/componentpatcher.js
@@ -151,4 +151,23 @@ export default new class ComponentPatcher {
 
 };
 
-// as part of utility classes, i would like a way to distinguish channel types from the .content-3at_AU element. other than that, can't think of anything
\ No newline at end of file
+// as part of utility classes, i would like a way to distinguish channel types from the .content-3at_AU element. other than that, can't think of anything
+
+// Tropical's notes
+
+/* 
+html [maximized | bd]
+.iconWrapper-2OrFZ1 [type]
+.sidebar-2K8pFh [guild-id]
+.wrapper-2jXpOf [voice | text | announcement | store | private | nsfw]
+.chat-3bRxxu [channnel | guild-id]
+.listItem-2P_4kh [type | state]
+.privateChannels-1nO12o [library-hidden]
+.member-3-YXUe [user-id]
+.message-2qnXI6 [type | author-id | group-end]
+.wrapper-3t9DeA [user-id | status]
+.userPopout-3XzG_A [state | user-id]
+.root-SR8cQa [state | user-id]
+.contentRegion-3nDuYy [settings-page]
+.item-PXvHYJ [settings-page]
+*/
\ No newline at end of file
diff --git a/src/modules/datastore.js b/src/modules/datastore.js
index cf9bd7b7..e399e41c 100644
--- a/src/modules/datastore.js
+++ b/src/modules/datastore.js
@@ -59,7 +59,7 @@ export default new class DataStore {
             const oldSettings = channelData.settings;
             const newSettings = {
                 general: {publicServers: oldSettings["bda-gs-1"], voiceDisconnect: oldSettings["bda-dc-0"], classNormalizer: oldSettings["fork-ps-4"], showToasts: oldSettings["fork-ps-2"]},
-                appearance: {twentyFourHour: oldSettings["bda-gs-6"], voiceMode: oldSettings["bda-gs-4"], minimalMode: oldSettings["bda-gs-2"], hideChannels: oldSettings["bda-gs-3"], darkMode: oldSettings["bda-gs-5"], coloredText: oldSettings["bda-gs-7"]},
+                appearance: {twentyFourHour: oldSettings["bda-gs-6"], voiceMode: oldSettings["bda-gs-4"], minimalMode: oldSettings["bda-gs-2"], darkMode: oldSettings["bda-gs-5"], coloredText: oldSettings["bda-gs-7"]},
                 addons: {addonErrors: oldSettings["fork-ps-1"], autoReload: oldSettings["fork-ps-5"]},
                 developer: {debuggerHotkey: oldSettings["bda-gs-8"], copySelector: oldSettings["fork-dm-1"], reactDevTools: oldSettings.reactDevTools}
             };
diff --git a/src/styles/blankslates/noresults.css b/src/styles/blankslates/noresults.css
new file mode 100644
index 00000000..1317550c
--- /dev/null
+++ b/src/styles/blankslates/noresults.css
@@ -0,0 +1,15 @@
+.bd-empty-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--text-normal);
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 100px;
+}
+
+.bd-empty-results-text {
+    width: 280px;
+    margin-top: 40px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/styles/builtins/customcss.css b/src/styles/builtins/customcss.css
index bc94a98f..ce5210ea 100644
--- a/src/styles/builtins/customcss.css
+++ b/src/styles/builtins/customcss.css
@@ -43,45 +43,13 @@
     display: flex;
 }
 
-.editor,
-.ace_editor {
+.editor {
     box-sizing: border-box;
     height: calc(100vh - 250px);
     font-size: 14px;
     width: 100%;
 }
 
-.bd-monokai .editor .ace_gutter {
-    background: var(--background-secondary-alt);
-    color: var(--header-secondary);
-    font-size: 12px;
-}
-
-.bd-monokai .ace_editor {
-    background: var(--background-secondary);
-}
-
-.bd-monokai .ace_line {
-    color: var(--text-normal);
-}
-
-.editor-wrapper .bd-monokai .ace_cursor {
-    color: var(--text-normal);
-}
-
-.editor-wrapper .bd-monokai .ace_gutter-active-line {
-    background: var(--background-tertiary);
-}
-
-.editor-wrapper .bd-monokai .ace_marker-layer .ace_active-line {
-    background: var(--background-secondary-alt);
-}
-
-.editor-wrapper .bd-monokai .ace_marker-layer .ace_selection {
-    background: #3e82e5;
-    opacity: 0.5;
-}
-
 .controls-section {
     display: flex;
     align-items: center;
@@ -102,45 +70,31 @@
     font-weight: 500;
 }
 
-/* Ace Editor Settings */
-#ace_settingsmenu_container {
-    background: rgba(0, 0, 0, 0.7) !important; /* stylelint-disable-line important */
+.monaco-editor:not(.rename-box),
+.monaco-editor .overflow-guard,
+.monaco-editor .editor-scrollable,
+.monaco-editor .minimap-shadow-visible,
+.monaco-editor .decorationsOverviewRuler {
+    height: 100% !important;
 }
 
-body #ace_settingsmenu {
-    padding-top: 35px;
+.monaco-editor:not(.rename-box),
+.monaco-editor .overflow-guard,
+.monaco-editor .overlayWidgets,
+#bd-customcss-editor > div > .overflow-guard > div:nth-child(3) {
+    width: 100% !important;
 }
 
-body .ace_closeButton {
-    position: absolute;
-    top: 8px;
-    right: 12px;
-    z-index: 10000;
-    padding: 0;
-    cursor: pointer;
-    background: none;
-    border: none;
+.monaco-editor .minimap {
+    right: 14px;
+    left: unset !important;
+    height: 100% !important;
 }
 
-body .ace_closeButton::before {
-    content: "✖";
-    color: #36393f;
+.monaco-editor .editor-scrollable {
+    width: calc(100% - 64px) !important;
 }
 
-body .ace_closeButton:active {
-    transform: translateY(2px);
-}
-
-/* editor help text */
-#bd-editor-controls .help-text {
-    margin-top: 8px;
-    margin-bottom: 3px;
-    font-size: 14px;
-}
-
-#bd-editor-controls .help-text .inline {
-    background: #2f3129;
-    padding: 0.2em;
-    margin: -0.2em 0;
-    border-radius: 3px;
+.monaco-editor .view-overlays .current-line {
+    width: 1e+06px !important;
 }
\ No newline at end of file
diff --git a/src/styles/builtins/darkmode.css b/src/styles/builtins/darkmode.css
index 853451da..3b444b2e 100644
--- a/src/styles/builtins/darkmode.css
+++ b/src/styles/builtins/darkmode.css
@@ -126,22 +126,4 @@
 .bd-dark .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3 {
     background: #2f3136;
     border: 2px solid #484b52;
-}
-
-/* Ace Editor Settings */
-.bd-dark ~ div #ace_settingsmenu {
-    color: #f6f6f7;
-    background: #36393f;
-    box-shadow: 0 0 0 1px rgba(32, 34, 37, 0.6), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
-}
-
-.bd-dark ~ div #ace_settingsmenu select,
-.bd-dark ~ div #ace_settingsmenu input[type="text"] {
-    color: #f6f6f7;
-    background: #2f3136;
-    border: 1px solid #484b52;
-}
-
-.bd-dark ~ div .ace_closeButton::before {
-    color: #f6f6f7;
 }
\ No newline at end of file
diff --git a/src/styles/builtins/minimalmode.css b/src/styles/builtins/minimalmode.css
index e95db3a9..516421dd 100644
--- a/src/styles/builtins/minimalmode.css
+++ b/src/styles/builtins/minimalmode.css
@@ -4,7 +4,7 @@
 .bd-minimal .members-1998pB,
 .bd-minimal .membersWrap-2h-GB4,
 .bd-minimal .nowPlayingColumn-2sl4cE,
-.bd-minimal .bannerImage-1jOskm {
+.bd-minimal .bannerImage-3KhIJ6 {
     width: 200px;
     min-width: auto;
 }
@@ -30,7 +30,7 @@
 /* Header container heights */
 
 .bd-minimal .container-1r6BKw,
-.bd-minimal .header-2o-2hj,
+.bd-minimal .header-2V-4Sw,
 .bd-minimal .searchBar-6Kv8R2 {
     height: 40px;
 }
@@ -57,7 +57,6 @@
 }
 
 .bd-minimal .bd-addon-list .bd-addon-card {
-    padding: 10px;
     margin-bottom: 10px;
 }
 
@@ -159,6 +158,17 @@
     font-size: 13px;
 }
 
+/* Messages */
+
+.bd-minimal .cozy-3raOZG.wrapper-2a6GCs .avatar-1BDn8e {
+    width: 32px;
+    height: 32px;
+}
+
+.bd-minimal .cozy-3raOZG.wrapper-2a6GCs {
+    padding-left: 64px;
+}
+
 /* Chat input */
 
 .bd-minimal .form-2fGMdU {
@@ -249,4 +259,4 @@
 
 .bd-minimal .layout-2DM8Md {
     justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/src/styles/builtins/publicservers.css b/src/styles/builtins/publicservers.css
index 6010e95f..0f514b8a 100644
--- a/src/styles/builtins/publicservers.css
+++ b/src/styles/builtins/publicservers.css
@@ -48,18 +48,6 @@
     margin-bottom: 5px;
 }
 
-.bd-empty-results {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: var(--text-normal);
-    margin-top: 100px;
-}
-
-.bd-empty-results svg {
-    margin-bottom: 20px;
-}
-
 .bd-card-list {
     display: grid;
     grid-gap: 16px;
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
index 53206c9d..5b51dded 100644
--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@@ -18,15 +18,27 @@
 }
 
 .bd-button.bd-button-success {
-    background-color: #3ac15c;
+    background-color: #43b581;
 }
 
 .bd-button.bd-button-success:hover {
-    background-color: rgb(52, 174, 83);
+    background-color: #3ca374;
 }
 
 .bd-button.bd-button-success:active {
-    background-color: rgb(46, 154, 74);
+    background-color: #369167;
+}
+
+.bd-button.bd-button-warning {
+    background-color: #faa61a;
+}
+
+.bd-button.bd-button-warning:hover {
+    background-color: #e19517;
+}
+
+.bd-button.bd-button-warning:active {
+    background-color: #c88515;
 }
 
 .bd-button.bd-button-danger {
diff --git a/src/styles/index.css b/src/styles/index.css
index 0f6d9137..cb0f0415 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -19,12 +19,23 @@
     margin-left: 4px;
 }
 
-.bd-changelog-modal video {
+.bd-changelog-modal video,
+.bd-changelog-modal img {
     width: 100%;
     border-radius: 5px;
     outline: none;
 }
 
+.bd-changelog-modal code.inline {
+    padding: 0.2em;
+    margin: -0.2em 0;
+    border-radius: 3px;
+    font-size: 85%;
+    line-height: 1.125rem;
+    white-space: pre-wrap;
+    background: var(--background-secondary);
+}
+
 .bd-link {
     text-decoration: none;
 }
diff --git a/src/styles/ui/addonlist.css b/src/styles/ui/addonlist.css
index 4895a5e4..baf8cfca 100644
--- a/src/styles/ui/addonlist.css
+++ b/src/styles/ui/addonlist.css
@@ -60,20 +60,30 @@
 
 .bd-addon-header .bd-icon {
     margin-right: 8px;
+    fill: var(--header-primary);
 }
 
 .bd-title,
 .bd-name,
 .bd-meta {
     display: inline;
+    line-height: normal;
 }
 
 .bd-title {
     flex: 1;
+    min-width: 0;
 }
 
 .bd-meta {
-    color: var(--text-muted);
+    color: var(--channels-default);
+    font-weight: 500;
+}
+
+.bd-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .bd-name::after,
@@ -112,6 +122,16 @@
     font-style: italic;
 }
 
+.bd-description code {
+    padding: 0.2em;
+    margin: -0.2em 0;
+    border-radius: 3px;
+    font-size: 85%;
+    line-height: 1.125rem;
+    white-space: pre-wrap;
+    background: var(--background-tertiary);
+}
+
 .bd-addon-list .scroller::-webkit-scrollbar-track-piece,
 .bd-addon-list .scroller::-webkit-scrollbar-thumb {
     border-radius: 0 !important;
diff --git a/src/ui/blankslates/noresults.jsx b/src/ui/blankslates/noresults.jsx
index 6b58aef5..c30cc156 100644
--- a/src/ui/blankslates/noresults.jsx
+++ b/src/ui/blankslates/noresults.jsx
@@ -5,7 +5,9 @@ export default class NoResults extends React.Component {
     render() {
         return <div className={"bd-empty-results" + (this.props.className ? ` ${this.props.className}` : "")}>
                     <MagnifyingGlass />
-                    {DiscordModules.Strings.SEARCH_NO_RESULTS || ""}
+                    <div className="bd-empty-results-text">
+                        {DiscordModules.Strings.SEARCH_NO_RESULTS || ""}
+                    </div>
                 </div>;
     }
 }
\ No newline at end of file
diff --git a/src/ui/modals.js b/src/ui/modals.js
index 23ac42b8..2f9537dc 100644
--- a/src/ui/modals.js
+++ b/src/ui/modals.js
@@ -180,7 +180,7 @@ export default class Modals {
         const MarkdownParser = WebpackModules.getByProps("defaultRules", "parse");
         if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return Logger.warn("Modals", "showChangelogModal missing modules");
     
-        const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.bdVersion}`, footer} = options;
+        const {image = "https://i.imgur.com/8sctUVV.png", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.bdVersion}`, footer} = options;
         const ce = React.createElement;
         const changelogItems = [options.video ? ce("video", {src: options.video, poster: options.poster, controls: true, className: ChangelogClasses.video}) : ce("img", {src: image})];
         if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));