Unified theme for all Sign in buttons

Um, so I made all the Sign in buttons look the same now - same like styling and functiounality across all of them.
Also, the button that used to send people to /login (which doesn’t even exist .-. ) now opens the sign-in popup instead.
Did the same for the one on the coinSymbol page so no more redirect to "/", it just opens the popup now.
Oh, and the comments section button also opens the Popup. Just annoyed me that they looked differently and redirected to 404 Pages.

website/src/lib/components/self/CommentSection.svelte

@@ -219,7 +219,7 @@
 		{:else}
 			<div class="text-center">
 				<p class="text-muted-foreground mb-3 text-sm">Sign in to join the discussion</p>
-				<Button onclick={() => goto('/')} size="sm">Sign In</Button>
+				<Button onclick={() => (shouldSignIn = true)} size="sm">Sign In</Button>
 			</div>
 		{/if}
 

website/src/routes/coin/[coinSymbol]/+page.svelte

@@ -27,6 +27,7 @@
 	import { getPublicUrl, getTimeframeInSeconds, timeToLocal } from '$lib/utils.js';
 	import { websocketController, type PriceUpdate, isConnectedStore } from '$lib/stores/websocket';
 	import SEO from '$lib/components/self/SEO.svelte';
+	import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
 
 	const { data } = $props();
 	let coinSymbol = $derived(data.coinSymbol);
@@ -39,6 +40,7 @@
 	let sellModalOpen = $state(false);
 	let selectedTimeframe = $state('1m');
 	let lastPriceUpdateTime = 0;
+	let shouldSignIn = $state(false);
 
 	let previousCoinSymbol = $state<string | null>(null);
 
@@ -370,6 +372,8 @@
 	imageAlt={coin ? `${coin.name} (${coin.symbol}) logo` : `${coinSymbol} cryptocurrency logo`}
 />
 
+<SignInConfirmDialog bind:open={shouldSignIn} />
+
 {#if coin}
 	<TradeModal bind:open={buyModalOpen} type="BUY" {coin} onSuccess={handleTradeSuccess} />
 	<TradeModal
@@ -552,7 +556,7 @@
 							{:else}
 								<div class="py-4 text-center">
 									<p class="text-muted-foreground mb-3 text-sm">Sign in to start trading</p>
-									<Button onclick={() => goto('/')}>Sign In</Button>
+									<Button onclick={() => (shouldSignIn = true)}>Sign In</Button>
 								</div>
 							{/if}
 						</Card.Content>

website/src/routes/gambling/+page.svelte

@@ -55,12 +55,7 @@
 			<div class="text-center">
 				<div class="text-muted-foreground mb-4 text-xl">Sign in to start gambling</div>
 				<p class="text-muted-foreground mb-4 text-sm">You need an account to place bets</p>
-				<button
+				<Button onclick={() => (shouldSignIn = true)}>Sign In</Button>
-					class="text-primary underline hover:cursor-pointer"
-					onclick={() => (shouldSignIn = true)}
-				>
-					Sign in to continue
-				</button>
 			</div>
 		</div>
 	{:else}

website/src/routes/portfolio/+page.svelte

@@ -11,6 +11,7 @@
 	import { goto } from '$app/navigation';
 	import { USER_DATA } from '$lib/stores/user-data';
 	import SendMoneyModal from '$lib/components/self/SendMoneyModal.svelte';
+	import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
 
 	// TODO: add type definitions
 	let portfolioData = $state<any>(null);
@@ -18,6 +19,7 @@
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 	let sendMoneyModalOpen = $state(false);
+	let shouldSignIn = $state(false);
 
 	onMount(async () => {
 		await Promise.all([fetchPortfolioData(), fetchRecentTransactions()]);
@@ -234,6 +236,7 @@
 />
 
 <SendMoneyModal bind:open={sendMoneyModalOpen} onSuccess={handleTransferSuccess} />
+<SignInConfirmDialog bind:open={shouldSignIn} />
 
 <div class="container mx-auto max-w-7xl p-6">
 	<div class="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
@@ -241,12 +244,14 @@
 			<h1 class="text-3xl font-bold">Portfolio</h1>
 			<p class="text-muted-foreground">Manage your investments and transactions</p>
 		</div>
-		<div class="flex gap-2">
+		{#if $USER_DATA}
-			<Button onclick={() => (sendMoneyModalOpen = true)}>
+			<div class="flex gap-2">
-				<Send class="h-4 w-4" />
+				<Button onclick={() => (sendMoneyModalOpen = true)}>
-				Send Money
+					<Send class="h-4 w-4" />
-			</Button>
+					Send Money
-		</div>
+				</Button>
+			</div>
+		{/if}
 	</div>
 
 	{#if loading}
@@ -257,7 +262,7 @@
 				<div class="text-muted-foreground mb-4 text-xl">
 					You need to be logged in to view your portfolio
 				</div>
-				<Button onclick={() => goto('/login')}>Log In</Button>
+				<Button onclick={() => (shouldSignIn = true)}>Sign In</Button>
 			</div>
 		</div>
 	{:else if error}

website/src/routes/settings/+page.svelte

@@ -16,7 +16,9 @@
 	import { USER_DATA } from '$lib/stores/user-data';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import SEO from '$lib/components/self/SEO.svelte';
+	import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
 
+	let shouldSignIn = $state(false);
 	let name = $state($USER_DATA?.name || '');
 	let bio = $state($USER_DATA?.bio ?? '');
 	let username = $state($USER_DATA?.username || '');
@@ -36,7 +38,7 @@
 			avatarFile !== undefined
 	);
 
-	let fileInput: HTMLInputElement;
+	let fileInput: HTMLInputElement | undefined = $state(undefined);
 
 	let loading = $state(false);
 	let usernameAvailable: boolean | null = $state(null);
@@ -66,7 +68,7 @@
 	});
 
 	function handleAvatarClick() {
-		fileInput.click();
+		fileInput?.click();
 	}
 	function handleAvatarChange(e: Event) {
 		const f = (e.target as HTMLInputElement).files?.[0];
@@ -293,6 +295,16 @@
 <div class="container mx-auto max-w-2xl p-6">
 	<h1 class="mb-6 text-2xl font-bold">Settings</h1>
 
+	{#if !$USER_DATA}
+	<div class="flex h-96 items-center justify-center">
+		<div class="text-center">
+			<div class="text-muted-foreground mb-4 text-xl">
+				You need to be logged in to view your settings
+			</div>
+			<Button onclick={() => (shouldSignIn = true)}>Sign In</Button>
+		</div>
+	</div>
+{:else}
 	<div class="space-y-6">
 		<Card.Root>
 			<Card.Header>
@@ -476,6 +488,7 @@
 			</Card.Content>
 		</Card.Root>
 	</div>
+	{/if}
 </div>
 
 <Dialog.Root bind:open={deleteDialogOpen}>