diff options
| -rw-r--r-- | src/locales/en.json | 2 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 54 | ||||
| -rw-r--r-- | tailwind.config.cjs | 3 |
3 files changed, 43 insertions, 16 deletions
diff --git a/src/locales/en.json b/src/locales/en.json index a1688524..3c75edee 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -146,6 +146,8 @@ "showQR": "Show QR" }, "settings": { + "bannerImage": "Banner Image", + "profileImage": "Profile Image", "oneTimeCode": "Enter one-time code", "accountId": "Account Secret", "header": "Settings", diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte index ff718637..f34828e5 100644 --- a/src/routes/[username]/settings/_account.svelte +++ b/src/routes/[username]/settings/_account.svelte @@ -31,20 +31,12 @@ <div> <label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label> - <input - type="email" - name="email" - bind:value={$user.email} - /> + <input type="email" name="email" bind:value={$user.email} /> </div> <div> <label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label> - <input - type="text" - name="username" - bind:value={$user.username} - /> + <input type="text" name="username" bind:value={$user.username} /> </div> <div class="relative"> @@ -65,11 +57,7 @@ <div> <label for="address" class="font-bold mb-1 block">{$t('user.settings.businessAddress')}</label> - <input - type="text" - name="address" - bind:value={$user.address} - /> + <input type="text" name="address" bind:value={$user.address} /> </div> <div> @@ -93,6 +81,42 @@ </div> <div> + <div class="flex justify-between items-center"> + <span class="font-bold">{$t('user.settings.profileImage')}</span> + </div> + + <div class="flex"> + <div class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24"> + <Icon icon="logo-symbol-white" style="mx-auto" /> + </div> + <div class="ml-2"> + <button + type="button" + class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary" + >Select</button + > + <div class="mt-2 text-sm">gumbo.jpg</div> + </div> + </div> +</div> + +<div> + <div class="flex justify-between items-center"> + <span class="font-bold">{$t('user.settings.bannerImage')}</span> + </div> + <p class="text-secondary mb-4"> + Recommended size: 1920x540px + </p> + <div class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4"></div> + <button + type="button" + class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary" + >Select</button + > + <div class="mt-2 text-sm">gumbo.jpg</div> +</div> + +<div> <span class="font-bold mb-1 block">{$t('user.settings.theme')}</span> <p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p> {#each colorThemes as colors} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index d8b7f6d4..2941c890 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -7,7 +7,8 @@ module.exports = { primary: '#F5F7FA', secondary: '#70757E', gradient: '#C3CFE2', - lightgrey: '#EAECEF' + lightgrey: '#EAECEF', + grey: '#70757E' } } }, |