From c7c81c8f1514161e9dceca9e6688a3de25622f41 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Thu, 22 Apr 2021 21:57:32 +1000
Subject: [PATCH] override some bootstrap styles for night mode

There's probably a better way to accomplish this - fixes welcome!

Also fix the page reloading when enter hit inside the modal.
---
 ts/deckconfig/DeckConfigPage.svelte |  3 ---
 ts/deckconfig/TextInputModal.svelte | 11 ++------
 ts/deckconfig/deckconfig-base.scss  |  2 ++
 ts/sass/BUILD.bazel                 |  1 +
 ts/sass/bootstrap-dark.scss         | 39 +++++++++++++++++++++++++++++
 5 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 ts/sass/bootstrap-dark.scss

diff --git a/ts/deckconfig/DeckConfigPage.svelte b/ts/deckconfig/DeckConfigPage.svelte
index 2997930d1..754807293 100644
--- a/ts/deckconfig/DeckConfigPage.svelte
+++ b/ts/deckconfig/DeckConfigPage.svelte
@@ -16,9 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             evt.getModifierState(primaryModifierForPlatform())
         ) {
             state.save(false);
-        } else {
-            console.log(evt.getModifierState(primaryModifierForPlatform()));
-            console.log(primaryModifierForPlatform());
         }
     }
 </script>
diff --git a/ts/deckconfig/TextInputModal.svelte b/ts/deckconfig/TextInputModal.svelte
index 917e4dbed..7f199a655 100644
--- a/ts/deckconfig/TextInputModal.svelte
+++ b/ts/deckconfig/TextInputModal.svelte
@@ -31,13 +31,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         modal.hide();
     }
 
-    function onKeyUp(evt: KeyboardEvent): void {
-        if (evt.code === "Enter") {
-            evt.stopPropagation();
-            onOkClicked();
-        }
-    }
-
     onMount(() => {
         const container = document.getElementById("modal")!;
         container.addEventListener("shown.bs.modal", onShown);
@@ -54,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
-    <div class="modal-dialog" on:keyup={onKeyUp}>
+    <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="modalLabel">{title}</h5>
@@ -65,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     aria-label="Close" />
             </div>
             <div class="modal-body">
-                <form>
+                <form on:submit|preventDefault={onOkClicked}>
                     <div class="mb-3">
                         <label
                             for="prompt-input"
diff --git a/ts/deckconfig/deckconfig-base.scss b/ts/deckconfig/deckconfig-base.scss
index 12e5905c0..9c050d5b9 100644
--- a/ts/deckconfig/deckconfig-base.scss
+++ b/ts/deckconfig/deckconfig-base.scss
@@ -1,4 +1,5 @@
 @use "ts/sass/scrollbar";
+@use "ts/sass/bootstrap-dark";
 
 @import "ts/sass/base";
 @import "ts/sass/bootstrap/dropdown";
@@ -12,6 +13,7 @@
 
 .night-mode {
     @include scrollbar.night-mode;
+    @include bootstrap-dark.night-mode;
 }
 
 // the unprefixed version wasn't added until Chrome 81
diff --git a/ts/sass/BUILD.bazel b/ts/sass/BUILD.bazel
index 4249d64a2..291691b4f 100644
--- a/ts/sass/BUILD.bazel
+++ b/ts/sass/BUILD.bazel
@@ -5,6 +5,7 @@ sass_library(
     srcs = [
         "_vars.scss",
         "base.scss",
+        "bootstrap-dark.scss",
     ],
     visibility = ["//visibility:public"],
     deps = ["//ts/sass/bootstrap"],
diff --git a/ts/sass/bootstrap-dark.scss b/ts/sass/bootstrap-dark.scss
new file mode 100644
index 000000000..48441617b
--- /dev/null
+++ b/ts/sass/bootstrap-dark.scss
@@ -0,0 +1,39 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
+@use 'vars';
+@use 'fusion_vars';
+
+@mixin night-mode {
+    input,
+    select {
+        background-color: var(--frame-bg);
+        border-color: var(--border);
+
+        &:focus {
+            background-color: var(--window-bg);
+        }
+    }
+
+    .dropdown-menu {
+        background-color: var(--frame-bg);
+
+        .dropdown-item {
+            color: var(--text-fg);
+
+            &:hover,
+            &:active {
+                background-color: var(--window-bg);
+            }
+        }
+    }
+
+    .modal-content {
+        background-color: var(--window-bg);
+        color: var(--text-fg);
+    }
+
+    .btn-close {
+        filter: invert(1) grayscale(100%) brightness(200%);
+    }
+}