Adding warning color to the remove button.

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>

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>

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>

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);

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;

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);
 }