4 files changed, 33 insertions(+), 18 deletions(-)

A starkingdoms-client/src/components/ui/Button.svelte
M starkingdoms-client/src/components/ui/Popup.svelte
M starkingdoms-client/src/css/form.scss
M starkingdoms-client/src/pages/Home.svelte

@@ 0,0 1,28 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id: string = "";
+  export let disabled = false;
+  export let style = "";
+</script>
+
+<button {id} class="btn {clazz}" {disabled} on:click on:focus {style}>
+  <slot />
+</button>
+
+<style lang="scss">
+  .btn {
+    appearance: none;
+    background: transparent;
+    color: var(--text);
+    padding: 0.675em 1em;
+    border-radius: 0.25rem;
+    cursor: text;
+    border: 2px solid var(--links);
+    transition: 0.1s ease-in-out;
+  }
+  .btn:hover {
+    cursor: pointer;
+    background-color: var(--links-transparent);
+  }
+</style>

@@ 3,6 3,7 @@
   import MovableIcon from "../../icons/MovableIcon.svelte";
   import ChevronDown from "../../icons/ChevronDown.svelte";
   import ChevronUp from "../../icons/ChevronUp.svelte";
+  import Button from "./Button.svelte";
 
   let clazz = "";
   export { clazz as class };


@@ 87,13 88,13 @@
         {title}
       </h1>
       {#if minimizable}
-        <button class="hdrbtn" on:click|preventDefault={toggleMinimized}>
+        <Button class="hdrbtn" on:click={toggleMinimized}>
           {#if minimized}
             <ChevronDown class="hdrbtn-icon" />
           {:else}
             <ChevronUp class="hdrbtn-icon" />
           {/if}
-        </button>
+        </Button>
       {/if}
     </div>
   {/if}


@@ 124,16 125,11 @@
   }
 
   :global(.hdrbtn) {
-    cursor: pointer;
     position: absolute;
     width: 2rem;
     height: 2rem;
     right: 1em;
     top: 1em;
-    border: 1px solid var(--links);
-    border-radius: 0.25rem;
-    appearance: none;
-    background: transparent;
   }
 
   :global(.hdrbtn-icon) {

@@ 22,16 22,6 @@
   max-width: 100%;
 }
 
-.btn {
-  @extend %form-element-shared;
-  border: 2px solid var(--links);
-  transition: 0.1s ease-in-out;
-}
-.btn:hover {
-  cursor: pointer;
-  background-color: var(--links-transparent);
-}
-
 .textentry {
   @extend %form-element-shared;
 }

@@ 7,6 7,7 @@
   import HeartIcon from "../icons/HeartIcon.svelte";
   import WarningIcon from "../icons/WarningIcon.svelte";
   import Popup from "../components/ui/Popup.svelte";
+  import Button from "../components/ui/Button.svelte";
 
   let config = DEFAULT_CONFIG;
   // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!


@@ 81,7 82,7 @@
       {/each}
     </select>
 
-    <button id="launch-btn" class="btn">Launch!</button>
+    <Button style="width: 100%; max-width: 100%;">Launch!</Button>
 
     <span bind:this={nonprod_warning} class="server-danger hidden">
       <WarningIcon class="server-danger-icon" />