feat(#59): Add styling to account page

src/routes/account/+page.svelte

@@ -19,41 +19,138 @@
 		};
 	};
 
-	const handleSignOut: SubmitFunction = () => {
+	const subscriptions = [
-		loading = true;
+		{ name: 'Premium Plan', nextBillingDate: '12th August 2021' },
-		return async ({ update }) => {
+		{ name: 'Basic Plan', nextBillingDate: '12th August 2021' }
-			loading = false;
+	];
-			update();
+
-		};
+	const billingHistory = [
-	};
+		{ id: 123, date: '12th August 2021', amount: 9.99, downloadLink: '#' },
+		{ id: 122, date: '12th July 2021', amount: 9.99, downloadLink: '#' }
+	];
 </script>
 
-<div class="form-widget">
+<div
-	<form
+	class="account-page max-w-4xl mx-auto p-6 bg-base-100 rounded-lg shadow-md space-y-6 overflow-y-auto"
-		class="form-widget"
+>
-		method="post"
+	<!-- Flex container for two columns -->
-		action="?/update"
+	<div class="flex flex-col lg:flex-row gap-6">
-		use:enhance={handleSubmit}
+		<!-- Left Column: Account Overview, Active Subscriptions, and Billing History -->
-		bind:this={profileForm}
+		<div class="flex-1 space-y-6">
-	>
+			<!-- Account Overview -->
-		<div>
+			<section class="space-y-4">
-			<label for="name">Name</label>
+				<h2 class="text-xl font-semibold">Account Overview</h2>
-			<input id="name" name="name" type="text" value={form?.name ?? name} />
+				<div class="form-control">
+					<label for="email" class="label font-medium">Email</label>
+					<input
+						id="email"
+						type="email"
+						class="input input-bordered"
+						value={session.user.email}
+						disabled
+					/>
+				</div>
+				<div class="text-sm text-gray-500">Signed in with magic link.</div>
+				<form
+					class="form-widget space-y-4"
+					method="post"
+					action="?/update"
+					use:enhance={handleSubmit}
+					bind:this={profileForm}
+				>
+					<div class="form-control">
+						<label for="name" class="label font-medium">Name</label>
+						<input
+							id="name"
+							name="name"
+							type="text"
+							value={form?.name ?? name}
+							class="input input-bordered w-full"
+							placeholder="Enter your name"
+						/>
+					</div>
+
+					<div>
+						<input
+							type="submit"
+							class="btn btn-primary w-full"
+							value={loading ? 'Loading...' : 'Update Name'}
+							disabled={loading}
+						/>
+					</div>
+				</form>
+			</section>
+
+			<!-- Active Subscriptions -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Active Subscriptions</h2>
+				<ul class="space-y-3">
+					{#each subscriptions as subscription}
+						<li class="p-4 border border-gray-200 rounded-md">
+							<div class="flex items-center justify-between">
+								<div>
+									<p class="font-semibold">{subscription.name}</p>
+									<p class="text-sm text-gray-500">Renewal Date: {subscription.nextBillingDate}</p>
+								</div>
+								<button class="btn btn-secondary btn-sm">Manage</button>
+							</div>
+						</li>
+					{/each}
+				</ul>
+			</section>
+
+			<!-- Billing History -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Billing History</h2>
+				<ul class="space-y-3">
+					{#each billingHistory as invoice}
+						<li class="flex justify-between p-4 border border-gray-200 rounded-md">
+							<div>
+								<p class="font-semibold">Invoice #{invoice.id}</p>
+								<p class="text-sm text-gray-500">Date: {invoice.date}</p>
+								<p class="text-sm text-gray-500">Amount: £{invoice.amount}</p>
+							</div>
+							<a href={invoice.downloadLink} class="btn btn-outline btn-sm" target="_blank"
+								>Download</a
+							>
+						</li>
+					{/each}
+				</ul>
+			</section>
 		</div>
 
-		<div>
+		<!-- Right Column: Notification Preferences and Feedback -->
-			<input
+		<div class="flex-none w-full lg:w-64 space-y-6">
-				type="submit"
+			<!-- Notification Preferences -->
-				class="button block primary"
+			<section class="space-y-4">
-				value={loading ? 'Loading...' : 'Update'}
+				<h2 class="text-xl font-semibold">Notification Preferences</h2>
-				disabled={loading}
+				<form method="post" action="?/update_notifications" class="space-y-2">
-			/>
+					<label class="flex items-center space-x-3">
-		</div>
+						<input type="checkbox" class="checkbox checkbox-primary" />
-	</form>
+						<!-- checked={user.notifications.productUpdates} -->
+						<span>Product Updates</span>
+					</label>
+					<label class="flex items-center space-x-3">
+						<input type="checkbox" class="checkbox checkbox-primary" />
+						<!-- checked={user.notifications.billingReminders} -->
+						<span>Billing Reminders</span>
+					</label>
+					<label class="flex items-center space-x-3">
+						<input type="checkbox" class="checkbox checkbox-primary" />
+						<!-- checked={user.notifications.promotions} -->
+						<span>Promotional Emails</span>
+					</label>
+				</form>
+			</section>
 
-	<form method="post" action="?/signout" use:enhance={handleSignOut}>
+			<!-- Feedback Section -->
-		<div>
+			<section class="space-y-4">
-			<button class="button block" disabled={loading}>Sign Out</button>
+				<h2 class="text-xl font-semibold">Feedback</h2>
+				<p class="text-gray-600">
+					We'd love to hear your thoughts! Please feel free to provide any feedback.
+				</p>
+				<a href="/contact" class="btn btn-outline w-full">Provide Feedback</a>
+			</section>
 		</div>
-	</form>
+	</div>
 </div>