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
+	class="account-page max-w-4xl mx-auto p-6 bg-base-100 rounded-lg shadow-md space-y-6 overflow-y-auto"
+>
+	<!-- Flex container for two columns -->
+	<div class="flex flex-col lg:flex-row gap-6">
+		<!-- Left Column: Account Overview, Active Subscriptions, and Billing History -->
+		<div class="flex-1 space-y-6">
+			<!-- Account Overview -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Account Overview</h2>
+				<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"
+					class="form-widget space-y-4"
 					method="post"
 					action="?/update"
 					use:enhance={handleSubmit}
 					bind:this={profileForm}
 				>
-		<div>
+					<div class="form-control">
-			<label for="name">Name</label>
+						<label for="name" class="label font-medium">Name</label>
-			<input id="name" name="name" type="text" value={form?.name ?? name} />
+						<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="button block primary"
+							class="btn btn-primary w-full"
-				value={loading ? 'Loading...' : 'Update'}
+							value={loading ? 'Loading...' : 'Update Name'}
 							disabled={loading}
 						/>
 					</div>
 				</form>
+			</section>
 
-	<form method="post" action="?/signout" use:enhance={handleSignOut}>
+			<!-- 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>
-			<button class="button block" disabled={loading}>Sign Out</button>
+									<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>
+
+		<!-- Right Column: Notification Preferences and Feedback -->
+		<div class="flex-none w-full lg:w-64 space-y-6">
+			<!-- Notification Preferences -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Notification Preferences</h2>
+				<form method="post" action="?/update_notifications" class="space-y-2">
+					<label class="flex items-center space-x-3">
+						<input type="checkbox" class="checkbox checkbox-primary" />
+						<!-- 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>
+
+			<!-- Feedback Section -->
+			<section class="space-y-4">
+				<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>
+	</div>
 </div>