format

4 files changed, 46 insertions, 35 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 8b10f19e..d6ef6158 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -25,7 +25,12 @@
 		}
 	};
 
-	$: background = $tempProfileFiles && $tempProfileFiles.banner ? `url(${$tempProfileFiles.banner})` : $user?.banner ? `url(/api/public/${$user.username}-banner.png)` : undefined;
+	$: background =
+		$tempProfileFiles && $tempProfileFiles.banner
+			? `url(${$tempProfileFiles.banner})`
+			: $user?.banner
+			? `url(/api/public/${$user.username}-banner.png)`
+			: undefined;
 </script>
 
 <header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background>
@@ -92,9 +97,13 @@
 		{/if}
 	</nav>
 	{#if $user.profile}
-		<div class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full overflow-hidden text-center w-24 h-24 my-auto">
+		<div
+			class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full overflow-hidden text-center w-24 h-24 my-auto"
+		>
 			<img
-				src={$tempProfileFiles && $tempProfileFiles.profile ? $tempProfileFiles.profile : `/api/public/${$user.username}-profile.png`}
+				src={$tempProfileFiles && $tempProfileFiles.profile
+					? $tempProfileFiles.profile
+					: `/api/public/${$user.username}-profile.png`}
 				class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 			/>
 		</div>
diff --git a/src/lib/store.js b/src/lib/store.js
index 1412c4e3..3cbd9038 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -38,5 +38,5 @@ export const invoices = writable({});
 export const newPayment = persistLocal('newPayment');
 export const colorTheme = writable('from-primary to-gradient');
 export const tempProfileFiles = writable();
-export const avatarUpload = writable()
-export const bannerUpload = writable()
+export const avatarUpload = writable();
+export const bannerUpload = writable();
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 997d95d1..4821d50a 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -20,16 +20,14 @@
 	$: ({ comp } = tabs.find((t) => t.name === tab));
 
 	let save = async () => {
-
 		try {
 			await put('/user', $user);
-if ($avatarUpload) {
-
-		await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress);
-}
-if ($bannerUpload) {
-		await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress);
-}
+			if ($avatarUpload) {
+				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress);
+			}
+			if ($bannerUpload) {
+				await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress);
+			}
 			success('Settings saved');
 		} catch (e) {
 			failure('Something went wrong');
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index c478a5dc..aec336c7 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -1,6 +1,13 @@
 <script>
 	import { tick } from 'svelte';
-	import { user, colorTheme, rates, tempProfileFiles, avatarUpload, bannerUpload } from '$lib/store';
+	import {
+		user,
+		colorTheme,
+		rates,
+		tempProfileFiles,
+		avatarUpload,
+		bannerUpload
+	} from '$lib/store';
 	import { Icon, Toggle, LocaleSelector } from '$comp';
 	import { t } from '$lib/translations';
 	import { upload } from '$lib/upload';
@@ -13,7 +20,7 @@
 
 	$: profile = files.profile.src || user.profile;
 	$: banner = files.banner.src || user.banner;
-$: $tempProfileFiles = {profile: files.profile.src, banner: files.banner.src}
+	$: $tempProfileFiles = { profile: files.profile.src, banner: files.banner.src };
 
 	let colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
@@ -42,15 +49,13 @@ $: $tempProfileFiles = {profile: files.profile.src, banner: files.banner.src}
 			files[type].src = e.target.result;
 		};
 		reader.readAsDataURL(file);
-	
-		files[type].filename = file.name;
-if (type === 'profile') {
-$avatarUpload = {file, type, progress}
-}
-else if (type === 'banner') {
-$bannerUpload = {file, type, progress}
-}
 
+		files[type].filename = file.name;
+		if (type === 'profile') {
+			$avatarUpload = { file, type, progress };
+		} else if (type === 'banner') {
+			$bannerUpload = { file, type, progress };
+		}
 	};
 
 	$: $user.password = $user.confirm = password;
@@ -113,7 +118,7 @@ $bannerUpload = {file, type, progress}
 </div>
 
 <div>
-		<span class="font-bold">{$t('user.settings.profileImage')}</span>
+	<span class="font-bold">{$t('user.settings.profileImage')}</span>
 	<div class="flex">
 		{#if profile}
 			<div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto">
@@ -129,22 +134,18 @@ $bannerUpload = {file, type, progress}
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 				/>
 			</div>
-{:else}
+		{:else}
 			<div
 				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto"
 			>
 				<Icon icon="logo-symbol-white" style="mx-auto" />
 			</div>
 		{/if}
-		<div
-			class="ml-2 p-2"
-
-		>
+		<div class="ml-2 p-2">
 			<button
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary"
-on:click={() => select('profile')}
-				>Select</button
+				on:click={() => select('profile')}>Select</button
 			>
 			<input
 				type="file"
@@ -163,19 +164,22 @@ on:click={() => select('profile')}
 	<div class="flex justify-between items-center">
 		<span class="font-bold">{$t('user.settings.bannerImage')}</span>
 	</div>
-<!-- found missing translation -->
+	<!-- found missing translation -->
 	<p class="text-secondary mb-4">Recommended size: 1920x540px</p>
 	{#if banner}
 		<img src={banner} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" />
 	{:else if $user.banner}
-	<img src={`/api/public/${$user.username}-banner.png`} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" />
-{:else}
+		<img
+			src={`/api/public/${$user.username}-banner.png`}
+			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4"
+		/>
+	{:else}
 		<div
 			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer"
 			on:click={() => select('banner')}
 		/>
 	{/if}
-<!-- found missing translation -->
+	<!-- found missing translation -->
 	<button
 		type="button"
 		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary"