♻️ Moved buttons into own components

frontend/src/lib/components/buttons/brown.svelte

@@ -0,0 +1,33 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	export let disabled = false;
+	export let flex = false;
+
+	export let href: undefined | string = undefined;
+</script>
+
+{#if href}
+	<a
+		{href}
+		class="text-black hover:bg-opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
+		on:click
+		class:flex
+		class:justify-center={flex}
+	>
+		<slot />
+	</a>
+{:else}
+	<button
+		{disabled}
+		class="text-black hover:opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
+		on:click
+		class:flex
+		class:justify-center={flex}
+	>
+		<slot />
+	</button>
+{/if}

frontend/src/lib/components/buttons/gray.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let disabled = false;
+	export let flex = false;
+
+	export let href: undefined | string = undefined;
+</script>
+
+{#if href}
+	<a
+		{href}
+		class="w-full px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
+		on:click
+		class:flex
+		class:justify-center={flex}
+	>
+		<slot />
+	</a>
+{:else}
+	<button
+		{disabled}
+		class="w-full px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
+		on:click
+		class:flex
+		class:justify-center={flex}
+	>
+		<slot />
+	</button>
+{/if}

frontend/src/lib/dashboard/main_slider.svelte

@@ -16,6 +16,7 @@
 	import { onMount } from 'svelte';
 	import viewport from './useViewportAction.js';
 	import Spinner from '$lib/Spinner.svelte';
+	import GrayButton from '$lib/components/buttons/gray.svelte';
 
 	let copy_toast_open = false;
 	let start_game = null;
@@ -224,24 +225,21 @@
 								</div>
 								<div class="flex justify-center pb-10 pt-8">
 									<div class="grid grid-cols-2 gap-3 w-1/3">
-										<a
+										<GrayButton href="/edit?quiz_id={quiz.id}"
-											href="/edit?quiz_id={quiz.id}"
+											>{$t('words.edit')}</GrayButton
-											class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
-											>{$t('words.edit')}</a
 										>
-										<button
+										<GrayButton
 											on:click={() => {
 												start_game = quiz.id;
 											}}
-											class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
 										>
 											{$t('words.start')}
-										</button>
+										</GrayButton>
-										<button
+										<GrayButton
 											on:click={() => {
 												deleteQuiz(quiz.id);
 											}}
-											class="py-2 w-full flex justify-center text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
+											flex={true}
 										>
 											<!-- heroicons/trash -->
 											<svg
@@ -258,10 +256,8 @@
 													d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
 												/>
 											</svg>
-										</button>
+										</GrayButton>
-										<a
+										<GrayButton href="/api/v1/eximport/{quiz.id}" flex={true}
-											href="/api/v1/eximport/{quiz.id}"
-											class="flex justify-center px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
 											><!-- heroicons/download -->
 											<svg
 												class="w-5 h-5"
@@ -277,7 +273,7 @@
 													d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
 												/>
 											</svg>
-										</a>
+										</GrayButton>
 									</div>
 								</div>
 								<div class="flex justify-center">

frontend/src/routes/account/settings/+page.svelte

@@ -9,6 +9,7 @@
 	import { UAParser } from 'ua-parser-js';
 	import Spinner from '$lib/Spinner.svelte';
 	import { onMount } from 'svelte';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
 
 	const { t } = getLocalization();
 
@@ -176,11 +177,11 @@
 					</p>
 				</div>
 				<div class="p-4 flex justify-center">
-					<a
+					<div class="m-auto">
-						href="/account/settings/security"
+						<BrownButton href="/account/settings/security"
-						class="text-lg rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition h-fit m-auto"
+							>Security-Settings
-						>Security-Settings</a
+						</BrownButton>
-					>
+					</div>
 				</div>
 			</div>
 			<div>
@@ -206,13 +207,11 @@
 							bind:value={changePasswordData.newPasswordConfirm}
 						/></label
 					>
-					<button
+					<div>
-						class="border-2 px-2 py-1 rounded-md border-black text-slate-100 hover:bg-amber-700 hover:text-indigo-100 transition duration-75 disabled:cursor-not-allowed disabled:opacity-50"
+						<BrownButton disabled={!passwordChangeDataValid} type="submit">
-						disabled={!passwordChangeDataValid}
-						type="submit"
-					>
 							{$t('settings_page.change_password_submit')}
-					</button>
+						</BrownButton>
+					</div>
 				</form>
 				<div>
 					<button on:click={add_api_key}>Add API-Key</button>

frontend/src/routes/account/settings/security/+page.svelte

@@ -9,6 +9,7 @@
 	import { startRegistration } from '@simplewebauthn/browser';
 	import TotpSetup from './totp_setup.svelte';
 	import BackupCodes from './backup_codes.svelte';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
 
 	let user_data: object | undefined;
 	let security_keys: Array<{ id: number }> | undefined;
@@ -102,11 +103,9 @@
 			<div class="h-full w-full border-r-2 border-black">
 				<h2 class="text-center text-2xl">Backup-Code</h2>
 				<div class="flex h-full w-full justify-center">
-					<button
+					<div class="m-auto">
-						class="m-auto text-lg rounded-lg bg-[#B07156] p-4 hover:bg-opacity-80 transition"
+						<BrownButton on:click={get_backup_code}>Get Backup-Codes</BrownButton>
-						on:click={get_backup_code}
+					</div>
-						>Get Backup-Codes
-					</button>
 				</div>
 			</div>
 			<div class="h-full w-full">
@@ -171,11 +170,9 @@
 					{/if}
 				</div>
 				<div class="flex justify-center">
-					<button
+					<div class="m-auto">
-						on:click={add_security_key}
+						<BrownButton on:click={add_security_key}>Add Security-Key</BrownButton>
-						class="m-auto rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition m-2"
+					</div>
-						>Add Security-Key</button
-					>
 				</div>
 				<div class="flex justify-center">
 					<ul class="list-disc block">
@@ -203,23 +200,17 @@
 				</div>
 
 				<div class="flex justify-center">
+					<div class="m-auto">
 						{#if totp_activated}
-						<button
+							<BrownButton on:click={disable_totp}>Disable Totp</BrownButton>
-							on:click={disable_totp}
-							class="m-auto rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition m-2"
-							>Disable Totp</button
-						>
 						{:else}
-						<button
+							<BrownButton on:click={enable_totp}>Enable Totp</BrownButton>
-							on:click={enable_totp}
-							class="m-auto rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition m-2"
-							>Enable Totp</button
-						>
 						{/if}
 					</div>
 				</div>
 			</div>
 		</div>
+	</div>
 {/await}
 
 {#if totp_data}

frontend/src/routes/dashboard/+page.svelte

@@ -10,6 +10,7 @@
 	import { navbarVisible, signedIn } from '$lib/stores';
 	import Spinner from '$lib/Spinner.svelte';
 	import Fuse from 'fuse.js';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
 
 	interface QuizData {
 		id: string;
@@ -100,27 +101,12 @@
 					Primary
 				</button>-->
 			<div class="w-full grid grid-cols-4 gap-2">
-				<a
+				<BrownButton href="/create">{$t('words.create')}</BrownButton>
-					href="/create"
+				<BrownButton href="/import">{$t('words.import')}</BrownButton>
-					class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
+				<BrownButton href="/api/v1/users/logout">{$t('words.logout')}</BrownButton>
-					>{$t('words.create')}
+				<BrownButton href="/account/settings">
-				</a>
-				<a
-					href="/import"
-					class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156]  rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
-					>{$t('words.import')}
-				</a>
-				<a
-					href="/api/v1/users/logout"
-					class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156]  rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
-					>{$t('words.logout')}
-				</a>
-				<a
-					href="/account/settings"
-					class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156]  rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
-				>
 					{$t('words.settings')}
-				</a>
+				</BrownButton>
 			</div>
 			{#if quizzes.length !== 0}
 				{#await import('$lib/dashboard/main_slider.svelte')}