♻️ Moved buttons into own components

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
-						href="/account/settings/security"
-						class="text-lg rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition h-fit m-auto"
-						>Security-Settings</a
-					>
+					<div class="m-auto">
+						<BrownButton href="/account/settings/security"
+							>Security-Settings
+						</BrownButton>
+					</div>
 				</div>
 			</div>
 			<div>
@@ -206,13 +207,11 @@
 							bind:value={changePasswordData.newPasswordConfirm}
 						/></label
 					>
-					<button
-						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"
-						disabled={!passwordChangeDataValid}
-						type="submit"
-					>
-						{$t('settings_page.change_password_submit')}
-					</button>
+					<div>
+						<BrownButton disabled={!passwordChangeDataValid} type="submit">
+							{$t('settings_page.change_password_submit')}
+						</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
-						class="m-auto text-lg rounded-lg bg-[#B07156] p-4 hover:bg-opacity-80 transition"
-						on:click={get_backup_code}
-						>Get Backup-Codes
-					</button>
+					<div class="m-auto">
+						<BrownButton on:click={get_backup_code}>Get Backup-Codes</BrownButton>
+					</div>
 				</div>
 			</div>
 			<div class="h-full w-full">
@@ -171,11 +170,9 @@
 					{/if}
 				</div>
 				<div class="flex justify-center">
-					<button
-						on:click={add_security_key}
-						class="m-auto rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition m-2"
-						>Add Security-Key</button
-					>
+					<div class="m-auto">
+						<BrownButton on:click={add_security_key}>Add Security-Key</BrownButton>
+					</div>
 				</div>
 				<div class="flex justify-center">
 					<ul class="list-disc block">
@@ -203,19 +200,13 @@
 				</div>
 
 				<div class="flex justify-center">
-					{#if totp_activated}
-						<button
-							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
-							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 class="m-auto">
+						{#if totp_activated}
+							<BrownButton on:click={disable_totp}>Disable Totp</BrownButton>
+						{:else}
+							<BrownButton on:click={enable_totp}>Enable Totp</BrownButton>
+						{/if}
+					</div>
 				</div>
 			</div>
 		</div>