style adjustments for settings

9 files changed, 63 insertions, 61 deletions

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index fcdc6c7d..b435f1ff 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,11 +1,11 @@
 <script>
-  import { browser } from "$app/env";
+	import { browser } from '$app/env';
 	import { onMount } from 'svelte';
 	import { copy } from '$lib/utils';
 
 	export let image, text;
 
-  let qr;
+	let qr;
 
 	onMount(async () => {
 		if (!(browser && text)) return;
@@ -35,8 +35,7 @@
 
 <style>
 	div {
-		@apply 
-      px-5 
+		@apply px-5 
       md:px-0 
       w-[292px] 
       h-[302px]
diff --git a/src/locales/en.json b/src/locales/en.json
index d246377d..8443ca3c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -145,8 +145,8 @@
 			"showQR": "Show QR"
 		},
 		"settings": {
-      "oneTimeCode": "Enter one-time code to enable",
-      "accountId": "Account ID",
+			"oneTimeCode": "Enter one-time code to enable",
+			"accountId": "Account ID",
 			"header": "Settings",
 			"ACCOUNT": "ACCOUNT",
 			"POINT_OF_SALE": "POINT OF SALE",
@@ -174,7 +174,7 @@
 			"twofa": "2-Factor Authentication",
 			"twofaDescription": "Add an extra level of security to your device by enableing 2-factor authentication.",
 			"twofaSetup": "Set up 2FA",
-      "twofaDisable": "Disable 2FA"
+			"twofaDisable": "Disable 2FA"
 		},
 		"support": {
 			"header": "Support",
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 80f233bb..ed26835d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -52,5 +52,7 @@
 		--toastBackground: #292929;
 	}
 
-  button.primary { @apply rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary }
+	button.primary {
+		@apply rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary;
+	}
 </style>
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index bd5f2bba..e61360c9 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -48,7 +48,7 @@
 
 <div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72">
 	<h2 class="text-2xl font-semibold">{user.username}</h2>
-  <span class="text-secondary">{user.address}</span>
+	<span class="text-secondary">{user.address}</span>
 </div>
 
 <div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 8270ad51..037d44a5 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -30,7 +30,7 @@
 
 <AppHeader />
 
-<form on:submit|preventDefault={save} class="mb-20">
+<form on:submit|preventDefault={save} class="mb-28">
 	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
@@ -46,11 +46,10 @@
 
 		<svelte:component this={comp} />
 	</div>
-	<div class="fixed bottom-0 bg-white shadow border w-full">
+	<div class="z-10 fixed bottom-0 bg-white shadow border w-full">
 		<button type="submit" class="primary">
 			<Icon icon="save" style="w-6 h-6 mr-1" />
 			<div class="my-auto">Save Settings</div>
 		</button>
 	</div>
 </form>
-
diff --git a/src/routes/[username]/settings/_pos.svelte b/src/routes/[username]/settings/_pos.svelte
index f44f8312..83a942bc 100644
--- a/src/routes/[username]/settings/_pos.svelte
+++ b/src/routes/[username]/settings/_pos.svelte
@@ -10,7 +10,7 @@
 		try {
 			$user.currency = e.target.value;
 			let r = await put('/' + $user.username, { user: $user });
-			success('Local currency updated!');
+			success('Local currency updated');
 		} catch (e) {
 			failure(e.message);
 		}
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index dd184fe4..5b7aaf8e 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -27,7 +27,7 @@
 				await put('/enable2fa', { token });
 				success('2fa enabled');
 				$user.twofa = 1;
-        toggleEnabling();
+				toggleEnabling();
 			}
 		} catch (e) {
 			failure('Failed to enable 2fa, try again');
@@ -41,7 +41,7 @@
 				await put('/disable2fa', { token });
 				success('2fa disabled');
 				$user.twofa = 0;
-        toggleDisabling();
+				toggleDisabling();
 			}
 		} catch (e) {
 			failure('Failed to disable 2fa, try again');
@@ -88,50 +88,52 @@
 	</select>
 </div>
 
-{#if setting2fa}
-	<Qr text={$user.otpsecret} />
+<div>
+	{#if setting2fa}
+		<Qr text={$user.otpsecret} />
 
-	<div class="text-center my-4">
-		{$t('user.settings.accountId')}<br />
-		<b>{$user.otpsecret}</b>
-	</div>
-	<div class="text-center my-4">
-		{$t('user.settings.oneTimeCode')}<br />
-		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-		</Pincode>
-	</div>
-{:else if disabling2fa}
-	<div class="text-center my-4">
-		{$t('user.settings.oneTimeCode')}<br />
-		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-		</Pincode>
-	</div>
-{:else}
-	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
-	<p class="text-secondary mb-1">
-		{$t('user.settings.twofaDescription')}
-	</p>
-	{#if $user.twofa}
-		<button type="button" class="primary" on:click={toggleDisabling}>
-			<Icon icon="mobile" style="mr-1" />
-			{$t('user.settings.twofaDisable')}
-		</button>
+		<div class="text-center my-4">
+			{$t('user.settings.accountId')}<br />
+			<b>{$user.otpsecret}</b>
+		</div>
+		<div class="text-center my-4">
+			{$t('user.settings.oneTimeCode')}<br />
+			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+			</Pincode>
+		</div>
+	{:else if disabling2fa}
+		<div class="text-center my-4">
+			{$t('user.settings.oneTimeCode')}<br />
+			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+			</Pincode>
+		</div>
 	{:else}
-		<button type="button" class="primary" on:click={toggleEnabling}>
-			<Icon icon="mobile" style="mr-1" />
-			{$t('user.settings.twofaSetup')}
-		</button>
+		<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
+		<p class="text-secondary mb-1">
+			{$t('user.settings.twofaDescription')}
+		</p>
+		{#if $user.twofa}
+			<button type="button" class="primary" on:click={toggleDisabling}>
+				<Icon icon="mobile" style="mr-1" />
+				{$t('user.settings.twofaDisable')}
+			</button>
+		{:else}
+			<button type="button" class="primary" on:click={toggleEnabling}>
+				<Icon icon="mobile" style="mr-1" />
+				{$t('user.settings.twofaSetup')}
+			</button>
+		{/if}
 	{/if}
-{/if}
+</div>
diff --git a/src/routes/disable2fa/+server.js b/src/routes/disable2fa/+server.js
index 98063773..be09f3f4 100644
--- a/src/routes/disable2fa/+server.js
+++ b/src/routes/disable2fa/+server.js
@@ -1,7 +1,7 @@
 import { auth, post } from '$lib/utils';
 
 export async function PUT({ request }) {
-  let body = await request.json();
+	let body = await request.json();
 	let res = await post('/disable2fa', body, auth(request));
 
 	return new Response(JSON.stringify(res));
diff --git a/src/routes/enable2fa/+server.js b/src/routes/enable2fa/+server.js
index 7bee4f4b..eb69a341 100644
--- a/src/routes/enable2fa/+server.js
+++ b/src/routes/enable2fa/+server.js
@@ -1,7 +1,7 @@
 import { auth, post } from '$lib/utils';
 
 export async function PUT({ request }) {
-  let body = await request.json();
+	let body = await request.json();
 	let res = await post('/2fa', body, auth(request));
 
 	return new Response(JSON.stringify(res));