From 94cdebe59c2de04ad09b0c95f9cc1818fbd91d69 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 18 May 2021 17:50:18 +0200
Subject: [PATCH] Make styling on select button behave correctly

---
 ts/components/SelectButton.svelte | 22 +++++++------
 ts/sass/bootstrap-dark.scss       | 23 --------------
 ts/sass/button_mixins.scss        | 51 ++++++++++++++++++-------------
 3 files changed, 43 insertions(+), 53 deletions(-)

diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index b260f295d..5dca8013d 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string | undefined = undefined;
     let className = "";
@@ -15,16 +15,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let disables = true;
 
+    const nightMode = getContext<boolean>(nightModeKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
+    $: _disabled = disables && $disabled;
+
     let buttonRef: HTMLSelectElement;
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
-
-    const disabled = getContext<Readable<boolean>>(disabledKey);
-    $: _disabled = disables && $disabled;
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     select {
         display: inline-block;
         vertical-align: middle;
@@ -37,14 +40,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         box-shadow: none;
         border-radius: 0;
 
-        &:hover {
-            background-color: #eee;
-        }
-
         &:focus {
             outline: none;
         }
     }
+
+    @include button.btn-day($with-hover: false);
+    @include button.btn-night($with-hover: false);
 </style>
 
 <!-- svelte-ignore a11y-no-onchange -->
@@ -54,7 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     disabled={_disabled}
     {id}
-    class={` ${className}`}
+    class={className}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     title={tooltip}
     on:change>
     <slot />
diff --git a/ts/sass/bootstrap-dark.scss b/ts/sass/bootstrap-dark.scss
index 48441617b..4d857ee5e 100644
--- a/ts/sass/bootstrap-dark.scss
+++ b/ts/sass/bootstrap-dark.scss
@@ -5,29 +5,6 @@
 @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);
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 4720df764..15956c196 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -17,22 +17,26 @@ $btn-base-color-day: white;
     border-color: var(--medium-border) !important;
 }
 
-@mixin btn-day($with-disabled: true, $with-margin: true) {
+@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
     .btn-day {
         @include btn-day-base;
         @content ($btn-base-color-day);
 
-        &:hover {
-            background-color: darken($btn-base-color-day, 8%);
+        @if ($with-hover) {
+            &:hover {
+                background-color: darken($btn-base-color-day, 8%);
+            }
         }
 
-        &:active,
-        &.active {
-            @include impressed-shadow(0.25);
-        }
+        @if ($with-active) {
+            &:active,
+            &.active {
+                @include impressed-shadow(0.25);
+            }
 
-        &:active.active {
-            box-shadow: none;
+            &:active.active {
+                box-shadow: none;
+            }
         }
 
         @if ($with-disabled) {
@@ -56,25 +60,30 @@ $btn-base-color-night: #666;
     border-color: $btn-base-color-night;
 }
 
-@mixin btn-night($with-disabled: true, $with-margin: true) {
+@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
+
     .btn-night {
         @include btn-night-base;
         @content ($btn-base-color-night);
 
-        &:hover {
-            background-color: lighten($btn-base-color-night, 8%);
-            border-color: lighten($btn-base-color-night, 8%);
+        @if ($with-hover) {
+            &:hover {
+                background-color: lighten($btn-base-color-night, 8%);
+                border-color: lighten($btn-base-color-night, 8%);
+            }
         }
 
-        &:active,
-        &.active {
-            @include impressed-shadow(0.35);
-            border-color: darken($btn-base-color-night, 8%);
-        }
+        @if ($with-disabled) {
+            &:active,
+            &.active {
+                @include impressed-shadow(0.35);
+                border-color: darken($btn-base-color-night, 8%);
+            }
 
-        &:active.active {
-            box-shadow: none;
-            border-color: $btn-base-color-night;
+            &:active.active {
+                box-shadow: none;
+                border-color: $btn-base-color-night;
+            }
         }
 
         @if ($with-disabled) {