From f2e313664c90471ae7cdefc8fc630a18a497b1ff Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 16 Apr 2021 17:14:47 +0200
Subject: [PATCH] Adjust ButtonDropdown for night mode

---
 ts/editor-toolbar/ButtonDropdown.svelte | 15 ++++++++++++++-
 ts/editor-toolbar/ButtonGroup.svelte    |  5 ++---
 ts/editor-toolbar/EditorToolbar.svelte  |  2 +-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index fa1c5b26c..1cf83c43b 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -3,6 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
     import type { ToolbarItem } from "./types";
     import ButtonGroup from "./ButtonGroup.svelte";
 
@@ -10,10 +12,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let className = "";
 
     function extendClassName(className: string): string {
-        return `dropdown-menu bg-transparent border-0 ${className}`;
+        return `dropdown-menu py-1 mb-0 ${
+            nightMode ? "btn-dropdown-menu--night-mode " : ""
+        }${className}`;
     }
 
     export let buttons: ToolbarItem[];
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
+<style>
+    :global(.btn-dropdown-menu--night-mode) {
+        background-color: var(--window-bg);
+        border-color: var(--medium-border);
+    }
+</style>
+
 <ButtonGroup {id} className={extendClassName(className)} {buttons} />
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 18ff29fe0..98a6cb760 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -20,14 +20,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     ul {
-        display: inline-flex;
+        display: flex;
         justify-items: start;
 
         flex-wrap: var(--toolbar-wrap);
         overflow-y: auto;
 
         padding-inline-start: 0;
-        margin-bottom: 0;
+        margin: 0 0 calc(var(--toolbar-size) / 15);
     }
 
     .border-group {
@@ -40,7 +40,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     li {
         display: inline-block;
-        margin-bottom: calc(var(--toolbar-size) / 15);
 
         > :global(button),
         > :global(select) {
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 13a0d9b7c..11f51b413 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -74,5 +74,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <nav {style}>
-    <ButtonGroup buttons={_buttons} />
+    <ButtonGroup buttons={_buttons} className="mt-0" />
 </nav>