Add profile picture

charlesharries · Mar 28, 2022 · e4b4c85 · e4b4c85
1 parent 0f066d9
commit e4b4c85
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/src/components/toolbar.svelte b/src/components/toolbar.svelte
@@ -11,21 +11,24 @@
 		<h1>Where You've Been</h1>
 		<span class="toolbar_version">v{version}</span>
 	</small>
-	<div class="toolbar_user">
+	<p class="toolbar_user">
 		{#if isLoggedIn}
-			<p>
-				<strong>
-					{$user.athlete.firstname}
-					{$user.athlete.lastname}
-				</strong>
-				{#if $stats.totalDistance > 0}
-					<small class="text-muted ml-md">
-						{Math.round($stats.totalDistance / 1000)} km traveled
-					</small>
-				{/if}
-			</p>
+			<img
+				src={$user.athlete.profile}
+				class="toolbar_pic"
+				alt={`${$user.athlete.firstname} ${$user.athlete.lastname}`}
+			/>
+			<strong class="ml-md">
+				{$user.athlete.firstname}
+				{$user.athlete.lastname}
+			</strong>
+			{#if $stats.totalDistance > 0}
+				<small class="text-muted ml-md">
+					{Math.round($stats.totalDistance / 1000)} km travelled
+				</small>
+			{/if}
 		{/if}
-	</div>
+	</p>
 	<div class="toolbar_actions">
 		<ToolbarActions />
 	</div>
@@ -62,5 +65,14 @@
 	.toolbar_user {
 		flex: 1;
 		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.toolbar_pic {
+		height: 30px;
+		width: 30px;
+		border-radius: 100%;
 	}
 </style>
diff --git a/src/types.ts b/src/types.ts
@@ -6,6 +6,7 @@ export interface User {
     username: string;
     firstname: string;
     lastname: string;
+    profile: string;
   }
 }