From 65f0e7a4ea9404088e8ec39f5350c233c77e0e76 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 30 May 2021 19:46:39 +0200
Subject: [PATCH] Use custom down arrow for both SelectButton and EnumSelector

---
 ts/components/SelectButton.svelte  |  5 +++--
 ts/deckoptions/EnumSelector.svelte | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 801fc0fb5..d9598b0a9 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -35,6 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="{className} form-select"
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
+    class:visible-down-arrow={nightMode}
     title={tooltip}
     on:change
 >
@@ -50,9 +51,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow-x: hidden;
     }
 
-    .btn-night {
+    .visible-down-arrow {
         /* override the default down arrow */
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+        @include button.select-night-mode;
     }
 
     @include button.btn-day($with-hover: false);
diff --git a/ts/deckoptions/EnumSelector.svelte b/ts/deckoptions/EnumSelector.svelte
index c1a2660c0..70c440399 100644
--- a/ts/deckoptions/EnumSelector.svelte
+++ b/ts/deckoptions/EnumSelector.svelte
@@ -3,12 +3,26 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
+
     export let choices: string[];
     export let value: number = 0;
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
-<select bind:value class="form-select">
+<select bind:value class:visible-down-arrow={nightMode} class="form-select">
     {#each choices as choice, idx}
         <option value={idx}>{choice}</option>
     {/each}
 </select>
+
+<style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
+    .visible-down-arrow {
+        /* override the default down arrow */
+        @include button.select-night-mode;
+    }
+</style>