From cb11794963b90f7c414156f5b49c8337e63bc9ae Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 28 Feb 2025 14:33:01 -0500
Subject: [PATCH] reformat settings page

---
 src/routes/app/settings/+page.svelte | 38 ++++++++++------------------
 src/routes/app/sms/+page.svelte      |  6 +++--
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/routes/app/settings/+page.svelte b/src/routes/app/settings/+page.svelte
index 8c96065..81fca7a 100644
--- a/src/routes/app/settings/+page.svelte
+++ b/src/routes/app/settings/+page.svelte
@@ -16,20 +16,18 @@
 	let configs = $derived(form?.configs ?? data.configs);
 </script>
 
-<div class="page">
-	<div class="card w-full max-w-xl bg-base-200 px-4 pt-4 shadow-xl">
-		<div class="card-title justify-center">
-			<h2 class="text-2xl font-semibold">{messages.settings_title()}</h2>
-			{#if form?.error}
-				<div role="alert" class="alert alert-error absolute -top-20">
-					<i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
-					<span>{form.error}</span>
-				</div>
-			{/if}
+<div class="flex flex-col items-stretch justify-around">
+	<h2 class="text-center text-2xl font-semibold">{messages.settings_title()}</h2>
+	{#if form?.error}
+		<div role="alert" class="alert alert-error">
+			<i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
+			<span>{form.error}</span>
 		</div>
-		<form id="sms" method="POST" use:enhance>
-			<div class="card-body">
-				<Divider />
+	{/if}
+	<Divider />
+	<form id="sms" method="POST" use:enhance>
+		<div class="mx-auto flex w-1/3 flex-col gap-4">
+			<div class="flex flex-col gap-2">
 				<!-- Twilio -->
 				<h2 class="text-2xl font-semibold">{messages.settings_category_twilio()}</h2>
 				<TextInput
@@ -76,15 +74,7 @@
 					{/snippet}
 				</TextInput>
 			</div>
-			<div class="card-actions justify-center px-8 pb-4">
-				<Button type="submit" variant="outline" full>{messages.settings_save()}</Button>
-			</div>
-		</form>
-	</div>
+			<Button type="submit" variant="outline" full>{messages.settings_save()}</Button>
+		</div>
+	</form>
 </div>
-
-<style>
-	.page {
-		@apply flex flex-col items-center justify-around gap-24 py-[10%];
-	}
-</style>
diff --git a/src/routes/app/sms/+page.svelte b/src/routes/app/sms/+page.svelte
index 073fef3..0941c37 100644
--- a/src/routes/app/sms/+page.svelte
+++ b/src/routes/app/sms/+page.svelte
@@ -9,6 +9,7 @@
 	import { messages } from '$lib/i18n';
 	import { CircleX, MessageCircleMore, TriangleAlert } from 'lucide-svelte';
 	import type { ActionData, PageData } from './$types';
+	import Divider from '$lib/components/Layout/Divider.svelte';
 
 	type Props = {
 		data: PageData;
@@ -22,7 +23,7 @@
 	let selectedRecipients: Recipient[] = $state([]);
 </script>
 
-<div class="flex flex-col items-center gap-4">
+<div class="flex flex-col items-center">
 	{#if form?.error}
 		<Alert class="flex w-fit justify-center" status="error">
 			{#snippet icon()}
@@ -42,7 +43,8 @@
 			</span>
 		</Alert>
 	{/if}
-	<h2 class="text-4xl font-semibold">{messages.sms_prompt()}</h2>
+	<h2 class="text-2xl font-semibold">{messages.sms_prompt()}</h2>
+	<Divider />
 	<div class="flex justify-center gap-4">
 		<div class="flex flex-col items-center gap-2">
 			<h2 class="text-3xl font-medium">Recipients</h2>