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

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) {
+	const getUserAvatar = async () => {
-				return URL.createObjectURL(data);
+		const { data } = await api.userApi.getProfileImage(user.id, {
-			}
+			responseType: 'blob'
-		} catch (e) {
+		});
-			return '/favicon.png';
+
+		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}

web/src/routes/+layout.svelte

@@ -41,8 +41,8 @@
 			{/if}
 
 			<slot />
-			<DownloadPanel />
 
+			<DownloadPanel />
 			<UploadPanel />
 
 			{#if shouldShowAnnouncement}