Use custom down arrow for both SelectButton and EnumSelector

ankitects · Jun 4, 2021 · edab766 · edab766
1 parent c2a9754
commit edab766
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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>