From 9541bf144fb09e46ebb5d0ee51ef4ab06fa6097f Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Wed, 15 Dec 2021 02:42:45 -0600
Subject: [PATCH] Tweak the button to allow fixed-colour background when using
 it with icons

---
 web-svelte/src/components/SciFi-Button.svelte | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/web-svelte/src/components/SciFi-Button.svelte b/web-svelte/src/components/SciFi-Button.svelte
index 714e0af..baf0fb8 100644
--- a/web-svelte/src/components/SciFi-Button.svelte
+++ b/web-svelte/src/components/SciFi-Button.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	export let height: string|number = 50;
+	export let height: string|number = "50px";
 	export let width: string|number = "unset";
+	export let background: string = "#00aa00";
 	export let handler: (e: Event) => unknown;
+	export let hoverBackground: string = "transparent";
 
 	// Add the units to the height value if not provided, and ensure that the
 	// provided height is not less than 50 (the default)
@@ -31,7 +33,11 @@
 </script>
 
 <div
-	style="--height: {height}; --width: {width};"
+	style="
+		--height: {height};
+		--width: {width};
+		--background-colour: {background};
+		--hover-background-colour: {hoverBackground};"
 	class="button-container"
 >
 	<button on:click={handler}>
@@ -43,12 +49,12 @@
 div.button-container {
 	display: inline-block;
 	position: relative;
-	margin: 10px;
 	width: var(--width);
 	height: var(--height);
 }
 
-$button-background: #0a0;
+$button-background: var(--background-colour);
+$hover-background: var(--hover-background-colour);
 
 button {
 	background: $button-background;
@@ -59,8 +65,8 @@ button {
 	height: calc(100% - 20px);
 	margin: 10px;
 	padding: 5px 7px;
-	transition: all .5s ease;
-	transition: opacity .2s ease;
+	transition: all .6s ease;
+	transition: opacity .3s ease;
 	width: calc(100% - 20px);
 
 	&:active {
@@ -69,12 +75,15 @@ button {
 	}
 
 	&:hover {
-		background-color: transparent;
+		background-color: $hover-background;
 		border-radius: 20px;
 		color: white;
 
 		&:before {
-			border-radius: min(calc(((var(--height) - 20px) / 2) + 5px), 25px);
+			border-radius: min(
+				calc(((var(--height) - 20px) / 2) + 5px),
+				25px
+			);
 			border: 2px $button-background solid;
 		}
 	}
@@ -87,7 +96,7 @@ button {
 		top: 5px;
 		box-sizing: border-box;
 		width: calc(100% - 10px);
-		height: calc(calc(100% - 20px) + 10px);
+		height: calc(100% - 10px); /* 100% - 20px + 10px */
 		transition: all .7s ease;
 	}
 }