From aecf415145d50404bfe7170d0e04ae7a5d297e25 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 31 Aug 2022 23:31:28 -0700
Subject: image selection mockups

---
 src/locales/en.json                            |  2 +
 src/routes/[username]/settings/_account.svelte | 54 +++++++++++++++++++-------
 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>
@@ -92,6 +80,42 @@
 	</p>
 </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>
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'
 			}
 		}
 	},
-- 
cgit v1.2.3