✨ Improved button colors

frontend/src/lib/admin.svelte

@@ -13,6 +13,7 @@
 	import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
 	import CircularTimer from '$lib/play/circular_progress.svelte';
 	import Spinner from '$lib/Spinner.svelte';
+	import { get_foreground_color } from '$lib/helpers';
 
 	export let game_token: string;
 	export let quiz_data: QuizData;
@@ -20,6 +21,7 @@
 	export let bg_color;
 
 	const { t } = getLocalization();
+	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
 
 	let question_results = null;
 	export let final_results: Array<null> | Array<Array<PlayerAnswer>> = [null];
@@ -233,16 +235,26 @@
 				<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4">
 					{#each quiz_data.questions[selected_question].answers as answer, i}
 						<div
-							class="rounded-lg h-fit flex"
-							style="background-color: {answer.color ?? '#B45309'}"
+							class="rounded-lg h-fit flex border-2 border-black"
+							style="background-color: {answer.color ?? default_colors[i]};"
 							class:opacity-50={!answer.right &&
 								timer_res === '0' &&
 								quiz_data.questions[selected_question].type ===
 									QuizQuestionType.ABCD}
 						>
-							<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
-							<span class="text-center text-2xl px-2 py-4 w-full text-black"
-								>{answer.answer}</span
+							<img
+								class="w-14 inline-block pl-4"
+								alt="icon"
+								style="color: {get_foreground_color(
+									answer.color ?? default_colors[i]
+								)}"
+								src={kahoot_icons[i]}
+							/>
+							<span
+								class="text-center text-2xl px-2 py-4 w-full"
+								style="color: {get_foreground_color(
+									answer.color ?? default_colors[i]
+								)}">{answer.answer}</span
 							>
 							<span class="pl-4 w-10" />
 						</div>