From b2e34606feb70e61144919d7000f3728fac4ff86 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Tue, 1 Nov 2022 11:49:10 -0500
Subject: [PATCH] Adding warning color to the remove button.

---
 .../components/dialog/RemoveCollectionDialog.svelte    | 10 +++++++++-
 src/lib/components/dialog/RemoveWishlistDialog.svelte  | 10 +++++++++-
 src/lib/components/game/index.svelte                   | 10 +++++++++-
 src/routes/game/[id]/+page.svelte                      | 10 +++++++++-
 src/styles/global.scss                                 | 10 +++++++++-
 src/styles/theme.scss                                  |  8 ++++++++
 6 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/dialog/RemoveCollectionDialog.svelte b/src/lib/components/dialog/RemoveCollectionDialog.svelte
index e6f090f..d9e56d7 100644
--- a/src/lib/components/dialog/RemoveCollectionDialog.svelte
+++ b/src/lib/components/dialog/RemoveCollectionDialog.svelte
@@ -38,7 +38,7 @@
 			<DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
 
 			<div class="dialog-footer">
-				<button on:click={removeGame}>Remove</button>
+				<button class="remove" on:click={removeGame}>Remove</button>
 				<button
 					on:click={() => {
 						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@@ -82,6 +82,14 @@
 					background-color: var(--color-btn-primary-active-hover);
 				}
 			}
+
+			.remove {
+				background-color: var(--warning);
+
+				&:hover {
+					background-color: var(--warning-hover);
+				}
+			}
 		}
 	}
 </style>
diff --git a/src/lib/components/dialog/RemoveWishlistDialog.svelte b/src/lib/components/dialog/RemoveWishlistDialog.svelte
index 4e0a71a..d2de2c0 100644
--- a/src/lib/components/dialog/RemoveWishlistDialog.svelte
+++ b/src/lib/components/dialog/RemoveWishlistDialog.svelte
@@ -38,7 +38,7 @@
 			<DialogDescription>Are you sure you want to remove from your wishlist?</DialogDescription>
 
 			<div class="dialog-footer">
-				<button on:click={removeGame}>Remove</button>
+				<button class="remove" on:click={removeGame}>Remove</button>
 				<button
 					on:click={() => {
 						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@@ -82,6 +82,14 @@
 					background-color: var(--color-btn-primary-active-hover);
 				}
 			}
+
+			.remove {
+				background-color: var(--warning);
+
+				&:hover {
+					background-color: var(--warning-hover);
+				}
+			}
 		}
 	}
 </style>
diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index ed9c74c..db1ed15 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -144,7 +144,15 @@
 		}
 
 		.btn {
-			max-height: 50px;
+			max-height: 100px;
+		}
+
+		.remove {
+			background-color: var(--warning);
+
+			&:hover {
+				background-color: var(--warning-hover);
+			}
 		}
 	}
 </style>
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index 5f21e04..e9e5bfa 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -73,7 +73,7 @@
 		</div>
 		<div>
 			{#if existsInCollection}
-				<button class="btn button-icon" type="button" on:click={() => removeGame()}
+				<button class="btn button-icon remove" type="button" on:click={() => removeGame()}
 					>Remove from collection <MinusCircleIcon width="24" height="24" /></button
 				>
 			{:else}
@@ -139,6 +139,14 @@
 		background-color: var(--color-btn-primary-active);
 	}
 
+	.remove {
+		background-color: var(--warning);
+
+		&:hover {
+			background-color: var(--warning-hover);
+		}
+	}
+
 	.button-icon {
 		display: grid;
 		grid-template-columns: repeat(2, auto);
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 0ccf65b..47e79a3 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -18,7 +18,7 @@
   --clr-input-txt: hsl(177 100% 15%);
 
   --red: #990000;
-  --tomatoOrange: #e54b4b;
+  --tomatoOrange: hsla(0, 75%, 60%, 1);
   --redBrown: #633539;
   --blue: #336699;
   --black: #1f273a;
@@ -318,6 +318,14 @@ input {
   cursor: not-allowed;
 }
 
+.remove {
+  background-color: var(--warning);
+
+  &:hover {
+    background-color: var(--warning-hover);
+  }
+}
+
 ul,
 ol {
   list-style: none;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 1436267..aec2fbe 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -61,6 +61,10 @@ html[data-theme='🌛 Night'] {
 
   /* Input Fields */
   --input-bg: #181a1b;
+
+  /* Button */
+  --warning: hsla(0, 75%, 60%, 0.90);
+  --warning-hover: hsla(0, 75%, 60%, 1);
 }
 
 html[data-theme='☀️ Daylight'] {
@@ -126,4 +130,8 @@ html[data-theme='☀️ Daylight'] {
 
   /* Input Fields */
   --input-bg: #181a1b;
+
+  /* Button */
+  --warning: hsla(0, 75%, 60%, 0.90);
+  --warning-hover: hsla(0, 75%, 60%, 1);
 }
\ No newline at end of file