From 68b1655e7fb1cf305596e1faaaf3de844e4b216f Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 25 Aug 2022 15:52:11 -0700
Subject: [PATCH] Show the first two letter of user first and last name when
 profile image not existed (#532)

* Added user first name and last name abbreviation to Circle Avatar:

* Remove unsued code
---
 .../shared-components/circle-avatar.svelte    | 39 ++++++++++++++-----
 web/src/routes/+layout.svelte                 |  2 +-
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/shared-components/circle-avatar.svelte b/web/src/lib/components/shared-components/circle-avatar.svelte
index 1c67615266..a5980921c6 100644
--- a/web/src/lib/components/shared-components/circle-avatar.svelte
+++ b/web/src/lib/components/shared-components/circle-avatar.svelte
@@ -8,19 +8,25 @@
 	export let size: number = 48;
 
 	const dispatch = createEventDispatcher();
-	const getUserAvatar = async () => {
-		try {
-			const { data } = await api.userApi.getProfileImage(user.id, {
-				responseType: 'blob'
-			});
 
-			if (data instanceof Blob) {
-				return URL.createObjectURL(data);
-			}
-		} catch (e) {
-			return '/favicon.png';
+	const getUserAvatar = async () => {
+		const { data } = await api.userApi.getProfileImage(user.id, {
+			responseType: 'blob'
+		});
+
+		if (data instanceof Blob) {
+			return URL.createObjectURL(data);
 		}
 	};
+
+	const getFirstLetter = (text?: string) => {
+		return text?.charAt(0).toUpperCase();
+	};
+
+	const getRandomeBackgroundColor = () => {
+		const colors = ['#DE7FB3', '#E64132', '#FFB800', '#4081EF', '#31A452'];
+		return colors[Math.floor(Math.random() * colors.length)];
+	};
 </script>
 
 {#await getUserAvatar()}
@@ -41,4 +47,17 @@
 			title={user.email}
 		/>
 	</button>
+{:catch}
+	<button
+		on:click={() => dispatch('click')}
+		style:width={`${size}px`}
+		style:height={`${size}px`}
+		style:background-color={getRandomeBackgroundColor()}
+		alt="profile-img"
+		class="inline rounded-full object-cover shadow-sm text-white font-semibold"
+	>
+		<div title={user.email}>
+			{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
+		</div>
+	</button>
 {/await}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 537e021998..69b1a3fccd 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -41,8 +41,8 @@
 			{/if}
 
 			<slot />
-			<DownloadPanel />
 
+			<DownloadPanel />
 			<UploadPanel />
 
 			{#if shouldShowAnnouncement}