From 8c1497026fbb9a1327d6aae5cf016c58ddb232cf Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 30 Aug 2022 08:07:01 -0700
Subject: save settings button

---
 src/components/Icon.svelte                     |  2 +-
 src/routes/[username]/settings/+page.svelte    | 37 +++++++++++++++-----------
 src/routes/[username]/settings/_account.svelte |  3 +--
 3 files changed, 24 insertions(+), 18 deletions(-)

(limited to 'src')

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"
-- 
cgit v1.2.3