diff options
| author | Adam Soltys <[email protected]> | 2022-08-31 23:31:28 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-08-31 23:31:28 -0700 |
| commit | aecf415145d50404bfe7170d0e04ae7a5d297e25 (patch) | |
| tree | c22a6bca945649170e341d35a7a3db6fa3f73776 /src | |
| parent | a1e4f707a8d54bc41e38b38a49e9cb8839ed5bf7 (diff) | |
| download | coinos-ui-aecf415145d50404bfe7170d0e04ae7a5d297e25.tar.gz coinos-ui-aecf415145d50404bfe7170d0e04ae7a5d297e25.zip | |
image selection mockups
Diffstat (limited to 'src')
| -rw-r--r-- | src/locales/en.json | 2 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 54 |
2 files changed, 41 insertions, 15 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} |