From 2d05ee26bd2f987ed9eac56e3b775c7d671392a7 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Fri, 27 Jan 2023 22:25:57 +0100
Subject: [PATCH] :recycle: Moved buttons into own components

---
 .../src/lib/components/buttons/brown.svelte   | 33 +++++++++++++++++
 .../src/lib/components/buttons/gray.svelte    | 28 ++++++++++++++
 frontend/src/lib/dashboard/main_slider.svelte | 24 +++++-------
 .../src/routes/account/settings/+page.svelte  | 23 ++++++------
 .../account/settings/security/+page.svelte    | 37 +++++++------------
 frontend/src/routes/dashboard/+page.svelte    | 26 +++----------
 6 files changed, 102 insertions(+), 69 deletions(-)
 create mode 100644 frontend/src/lib/components/buttons/brown.svelte
 create mode 100644 frontend/src/lib/components/buttons/gray.svelte

diff --git a/frontend/src/lib/components/buttons/brown.svelte b/frontend/src/lib/components/buttons/brown.svelte
new file mode 100644
index 0000000..63a4394
--- /dev/null
+++ b/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}
diff --git a/frontend/src/lib/components/buttons/gray.svelte b/frontend/src/lib/components/buttons/gray.svelte
new file mode 100644
index 0000000..fd0972a
--- /dev/null
+++ b/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}
diff --git a/frontend/src/lib/dashboard/main_slider.svelte b/frontend/src/lib/dashboard/main_slider.svelte
index 810d9dc..8c3a332 100644
--- a/frontend/src/lib/dashboard/main_slider.svelte
+++ b/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
-											href="/edit?quiz_id={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.edit')}</a
+										<GrayButton href="/edit?quiz_id={quiz.id}"
+											>{$t('words.edit')}</GrayButton
 										>
-										<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>
-										<button
+										</GrayButton>
+										<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>
-										<a
-											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"
+										</GrayButton>
+										<GrayButton href="/api/v1/eximport/{quiz.id}" flex={true}
 											><!-- 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">
diff --git a/frontend/src/routes/account/settings/+page.svelte b/frontend/src/routes/account/settings/+page.svelte
index 86fa11e..1a64995 100644
--- a/frontend/src/routes/account/settings/+page.svelte
+++ b/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>
diff --git a/frontend/src/routes/account/settings/security/+page.svelte b/frontend/src/routes/account/settings/security/+page.svelte
index e4ff190..b78ea15 100644
--- a/frontend/src/routes/account/settings/security/+page.svelte
+++ b/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>
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 80ffbd9..7123c3b 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/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
-					href="/create"
-					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.create')}
-				</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"
-				>
+				<BrownButton href="/create">{$t('words.create')}</BrownButton>
+				<BrownButton href="/import">{$t('words.import')}</BrownButton>
+				<BrownButton href="/api/v1/users/logout">{$t('words.logout')}</BrownButton>
+				<BrownButton href="/account/settings">
 					{$t('words.settings')}
-				</a>
+				</BrownButton>
 			</div>
 			{#if quizzes.length !== 0}
 				{#await import('$lib/dashboard/main_slider.svelte')}