diff options
| author | Adam Soltys <[email protected]> | 2022-08-30 08:07:01 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-08-30 08:07:01 -0700 |
| commit | 8c1497026fbb9a1327d6aae5cf016c58ddb232cf (patch) | |
| tree | 568a366a689a8017b85d0fef1bcc4c8f180ff2d9 /src | |
| parent | 99d537c6cf9feee56b618477ccddf3c1593ff84d (diff) | |
| download | coinos-ui-8c1497026fbb9a1327d6aae5cf016c58ddb232cf.tar.gz coinos-ui-8c1497026fbb9a1327d6aae5cf016c58ddb232cf.zip | |
save settings button
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Icon.svelte | 2 | ||||
| -rw-r--r-- | src/routes/[username]/settings/+page.svelte | 37 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 3 |
3 files changed, 24 insertions, 18 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" |