From a592f4dff28577e9123a5bcca1e46335028f42c4 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 6 Oct 2022 09:50:59 -0700
Subject: avatar component and bg cover

---
 src/components/AppHeader.svelte                    | 30 +++++-----------------
 src/components/Avatar.svelte                       | 25 ++++++++++++++++++
 src/components/index.js                            |  1 +
 .../send/user/[username]/[...amount]/+page.svelte  | 10 +++++---
 4 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Avatar.svelte

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 94bd9b1a..59cd70da 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -2,7 +2,7 @@
 	import OutClick from 'svelte-outclick';
 	import { newPayment, colorTheme, tempProfileFiles } from '$lib/store';
 	import { goto } from '$app/navigation';
-	import { Icon } from '$comp';
+	import { Avatar, Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { page } from '$app/stores';
 
@@ -31,7 +31,7 @@
 		}
 	};
 
-	$: background =
+	$: bg =
 		$tempProfileFiles && $tempProfileFiles.banner
 			? `url(${$tempProfileFiles.banner})`
 			: subject?.banner
@@ -39,7 +39,7 @@
 			: undefined;
 </script>
 
-<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background>
+<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover" style:background-image={bg} >
 	<nav class="flex justify-end items-center space-x-4 p-5">
 		{#if user}
 			<a href={`/${user.username}/receive`}>
@@ -119,27 +119,9 @@
 			</a>
 		{/if}
 	</nav>
-	{#if subject?.profile}
-		<div
-			class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white overflow-hidden w-32 h-32"
-		>
-			<a href={`/${subject.username}`}>
-				<img
-					src={$tempProfileFiles && $tempProfileFiles.profile
-						? $tempProfileFiles.profile
-						: `/api/public/${subject.username}-profile.png`}
-					class="w-full h-full object-cover object-center overflow-hidden"
-					alt={subject.username}
-				/>
-			</a>
-		</div>
-	{:else}
-		<div
-			class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-32 h-32 flex justify-center items-center"
-		>
-			<Icon icon="logo-symbol-white" />
-		</div>
-	{/if}
+	<div class="absolute left-[calc(50vw-64px)] md:left-[calc(15vw-48px)] -bottom-[64px]">
+		<Avatar user={subject} />
+	</div>
 </header>
 
 <style>
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
new file mode 100644
index 00000000..9b9547da
--- /dev/null
+++ b/src/components/Avatar.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { colorTheme, tempProfileFiles } from '$lib/store';
+	import { Icon } from '$comp';
+
+	export let avatarPosition;
+	export let user;
+</script>
+
+<div
+	class="rounded-full border-4 border-white overflow-hidden w-32 h-32 bg-gradient-to-r {$colorTheme} flex justify-center items-center"
+>
+	<a href={`/${user.username}`}>
+		{#if user?.profile}
+			<img
+				src={$tempProfileFiles && $tempProfileFiles.profile
+					? $tempProfileFiles.profile
+					: `/api/public/${user.username}-profile.png`}
+				class="w-full h-full object-cover object-center overflow-hidden"
+				alt={user.username}
+			/>
+		{:else}
+			<Icon icon="logo-symbol-white" />
+		{/if}
+	</a>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 59ee6f14..08ec217a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Avatar } from './Avatar.svelte';
 export { default as Left } from './Left.svelte';
 export { default as Numpad } from './Numpad.svelte';
 export { default as Spinner } from './Spinner.svelte';
diff --git a/src/routes/send/user/[username]/[...amount]/+page.svelte b/src/routes/send/user/[username]/[...amount]/+page.svelte
index 21460342..a50dea53 100644
--- a/src/routes/send/user/[username]/[...amount]/+page.svelte
+++ b/src/routes/send/user/[username]/[...amount]/+page.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { goto } from "$app/navigation";
+	import { goto } from '$app/navigation';
 	import { selectedRate } from '$lib/store';
 	import { enhance } from '$app/forms';
-	import { Icon, Numpad, Spinner } from '$comp';
+	import { Avatar, Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
 	import { back, f, s, sats } from '$lib/utils';
 	export let data;
@@ -49,7 +49,11 @@
 			</p>
 
 			<h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1>
-			<p class="text-6xl break-words">{recipient.username}</p>
+
+			<div class="flex p-1 gap-2 justify-center">
+				<Avatar user={recipient} />
+				<p class="text-6xl break-words my-auto">{recipient.username}</p>
+			</div>
 		</div>
 	{:else}
 		<Numpad bind:amount={a} bind:amountFiat={af} {currency} bind:fiat />
-- 
cgit v1.2.3