From 011c52171088f2a1a8d938cf6ac5c558fefd0656 Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Thu, 4 Jan 2024 10:48:38 -0500
Subject: [PATCH] Button ui component

---
 .../src/components/ui/Button.svelte           | 28 +++++++++++++++++++
 .../src/components/ui/Popup.svelte            | 10 ++-----
 starkingdoms-client/src/css/form.scss         | 10 -------
 starkingdoms-client/src/pages/Home.svelte     |  3 +-
 4 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 starkingdoms-client/src/components/ui/Button.svelte

diff --git a/starkingdoms-client/src/components/ui/Button.svelte b/starkingdoms-client/src/components/ui/Button.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d462fbc767be736c95393fcf6c50cb24ff6984d8
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/Button.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>
diff --git a/starkingdoms-client/src/components/ui/Popup.svelte b/starkingdoms-client/src/components/ui/Popup.svelte
index c19037258ea775dd5e8938504c234072a768d90e..2075186e474763029e098e9c6b860e64f7f29f9e 100644
--- a/starkingdoms-client/src/components/ui/Popup.svelte
+++ b/starkingdoms-client/src/components/ui/Popup.svelte
@@ -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) {
diff --git a/starkingdoms-client/src/css/form.scss b/starkingdoms-client/src/css/form.scss
index 9123d56e94769e9b4f8a8bdb39c79742622b9070..c8074f2b941c3ef11171fe366960066c9e38dc54 100644
--- a/starkingdoms-client/src/css/form.scss
+++ b/starkingdoms-client/src/css/form.scss
@@ -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;
 }
diff --git a/starkingdoms-client/src/pages/Home.svelte b/starkingdoms-client/src/pages/Home.svelte
index f523de7978ab0368a48007867139ab0694f0e9c5..58ed506c0e32de3b046c82b61603c9459966fc3d 100644
--- a/starkingdoms-client/src/pages/Home.svelte
+++ b/starkingdoms-client/src/pages/Home.svelte
@@ -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" />