Make SaveButton functional

ts/components/WithDropdownMenu.svelte

@@ -15,6 +15,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 
     const menuId = Math.random().toString(36).substring(2);
+    let dropdown: Dropdown;
+
+    function activateDropdown(_event: MouseEvent): void {
+        dropdown.toggle();
+    }
 
     /* Normally dropdown and trigger are associated with a
     /* common ancestor with .dropdown class */
@@ -31,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
         } else {
-            const dropdown = new Dropdown(button);
+            dropdown = new Dropdown(button);
 
             /* Set custom menu without using common element with .dropdown */
             (dropdown as any)._menu = menu;
@@ -39,4 +44,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<slot {createDropdown} {menuId} />
+<slot {createDropdown} {activateDropdown} {menuId} />

ts/deckoptions/ConfigSelector.svelte

@@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import SelectButton from "components/SelectButton.svelte";
     import SelectOption from "components/SelectOption.svelte";
-    import OptionsDropdown from "./OptionsDropdown.svelte";
+    import SaveButton from "./SaveButton.svelte";
 
     export let state: DeckOptionsState;
     let configList = state.configList;
@@ -52,7 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonToolbarItem>
 
             <ButtonToolbarItem>
-                <OptionsDropdown {state} />
+                <SaveButton {state} />
             </ButtonToolbarItem>
         </ButtonToolbar>
     </WithTheming>

ts/deckoptions/DeckOptionsPage.svelte

@@ -48,13 +48,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
+<ConfigSelector {state} />
+
 <div>
     <div id="modal">
         <!-- filled in later-->
     </div>
 
-    <ConfigSelector {state} />
-
     <div class="editor">
         <ConfigEditor {state} />
     </div>

ts/deckoptions/SaveButton.svelte

@@ -75,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithDropdownMenu let:createDropdown let:menuId>
-            <LabelButton on:mount={createDropdown} />
+        <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
+            <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
             <DropdownMenu id={menuId}>
                 <DropdownItem on:click={addConfig}>Add Config</DropdownItem>
                 <DropdownItem on:click={renameConfig}>Rename Config</DropdownItem>

ts/deckoptions/deckoptions-base.scss

@@ -1,3 +1,4 @@
+@use "ts/sass/vars";
 @use "ts/sass/scrollbar";
 @use "ts/sass/bootstrap-dark";
 

ts/sass/button_mixins.scss

@@ -17,7 +17,12 @@ $btn-base-color-day: white;
     border-color: var(--medium-border) !important;
 }
 
-@mixin btn-day($with-hover: true, $with-active: true, $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);
@@ -60,8 +65,12 @@ $btn-base-color-night: #666;
     border-color: $btn-base-color-night;
 }
 
-@mixin btn-night($with-hover: true, $with-active: true, $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);