save settings button

5 files changed, 26 insertions, 21 deletions

diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index 58a61033..da32dbf0 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -3,4 +3,4 @@
 	export let style;
 </script>
 
-<img src="/icons/{icon}.svg" alt={icon} class={style} />
+<img src="/icons/{icon}.svg" alt={icon} class={style} style="width: 26px; height: 26px" />
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index de012ddc..1d162ef2 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -3,7 +3,7 @@
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
 
-	import { AppHeader } from '$comp';
+	import { AppHeader, Icon } from '$comp';
 	import { t } from '$lib/translations';
 
 	let tab = 'account';
@@ -17,20 +17,27 @@
 	$: ({ comp } = tabs.find((t) => t.name === tab));
 </script>
 
-	<AppHeader />
+<AppHeader />
 
-	<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')}
-		</h1>
+<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')}
+	</h1>
 
-		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
-			{#each tabs as { name, key }}
-				<button class:text-black={tab === name} on:click={() => (tab = name)}
-					>{$t(`user.settings.${key}`)}</button
-				>
-			{/each}
-		</div>
-
-		<svelte:component this={comp} />
+	<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+		{#each tabs as { name, key }}
+			<button class:text-black={tab === name} on:click={() => (tab = name)}
+				>{$t(`user.settings.${key}`)}</button
+			>
+		{/each}
 	</div>
+
+	<svelte:component this={comp} />
+</div>
+
+<div class="fixed bottom-0 bg-white shadow border w-full">
+	<button class="rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto">
+		<Icon icon="save" style="m-auto mr-2" />
+		<div class="my-auto">Save Settings</div>
+	</button>
+</div>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 084a39c8..2ce78554 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -24,14 +24,13 @@
 
 <div>
 	<label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label>
-	<input type="email" disabled name="email" class="block border rounded-xl p-3 w-full" />
+  <input type="email" name="email" class="block border rounded-xl p-3 w-full" bind:value={$user.email} />
 </div>
 
 <div>
 	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
 	<input
 		type="text"
-		disabled
 		name="username"
 		value={$user.username}
 		class="block border rounded-xl p-3 w-full"
diff --git a/static/icons/save.svg b/static/icons/save.svg
new file mode 100644
index 00000000..d1398ec4
--- /dev/null
+++ b/static/icons/save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433.1 129.1l-83.9-83.9C342.3 38.32 327.1 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 152.9 441.7 137.7 433.1 129.1zM224 416c-35.34 0-64-28.66-64-64s28.66-64 64-64s64 28.66 64 64S259.3 416 224 416zM320 208C320 216.8 312.8 224 304 224h-224C71.16 224 64 216.8 64 208v-96C64 103.2 71.16 96 80 96h224C312.8 96 320 103.2 320 112V208z"/></svg>
diff --git a/static/icons/send.svg b/static/icons/send.svg
index 1d20f7aa..d1398ec4 100644
--- a/static/icons/send.svg
+++ b/static/icons/send.svg
@@ -1,3 +1 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 12.9953L3.99392 21.9939L22 13.0061L4.00608 3.99393L6 12.9953ZM6 12.9953L14 13.0007" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433.1 129.1l-83.9-83.9C342.3 38.32 327.1 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 152.9 441.7 137.7 433.1 129.1zM224 416c-35.34 0-64-28.66-64-64s28.66-64 64-64s64 28.66 64 64S259.3 416 224 416zM320 208C320 216.8 312.8 224 304 224h-224C71.16 224 64 216.8 64 208v-96C64 103.2 71.16 96 80 96h224C312.8 96 320 103.2 320 112V208z"/></svg>