pantheon/hestia
2
0
Fork 0
Code Issues 23 Pull requests Projects Releases Packages Wiki Activity Actions

reformat settings page

Browse source
This commit is contained in:
Benjamin Palko 2025-02-28 14:33:01 -05:00
parent 3f83ee6dc1
commit cb11794963
2 changed files with 18 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/routes/app/settings/+page.svelte
View file

@ -16,20 +16,18 @@
let configs = $derived(form?.configs ?? data.configs); let configs = $derived(form?.configs ?? data.configs);
</script> </script>
<div class="page"> <div class="flex flex-col items-stretch justify-around">
<div class="card w-full max-w-xl bg-base-200 px-4 pt-4 shadow-xl"> <h2 class="text-center text-2xl font-semibold">{messages.settings_title()}</h2>
<div class="card-title justify-center"> {#if form?.error}
<h2 class="text-2xl font-semibold">{messages.settings_title()}</h2> <div role="alert" class="alert alert-error">
{#if form?.error} <i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
<div role="alert" class="alert alert-error absolute -top-20"> <span>{form.error}</span>
<i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
<span>{form.error}</span>
</div>
{/if}
</div> </div>
<form id="sms" method="POST" use:enhance> {/if}
<div class="card-body"> <Divider />
<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 --> <!-- Twilio -->
<h2 class="text-2xl font-semibold">{messages.settings_category_twilio()}</h2> <h2 class="text-2xl font-semibold">{messages.settings_category_twilio()}</h2>
<TextInput <TextInput
@ -76,15 +74,7 @@
{/snippet} {/snippet}
</TextInput> </TextInput>
</div> </div>
<div class="card-actions justify-center px-8 pb-4"> <Button type="submit" variant="outline" full>{messages.settings_save()}</Button>
<Button type="submit" variant="outline" full>{messages.settings_save()}</Button> </div>
</div> </form>
</form>
</div>
</div> </div>
<style>
.page {
@apply flex flex-col items-center justify-around gap-24 py-[10%];
}
</style>

6
src/routes/app/sms/+page.svelte
View file

@ -9,6 +9,7 @@
import { messages } from '$lib/i18n'; import { messages } from '$lib/i18n';
import { CircleX, MessageCircleMore, TriangleAlert } from 'lucide-svelte'; import { CircleX, MessageCircleMore, TriangleAlert } from 'lucide-svelte';
import type { ActionData, PageData } from './$types'; import type { ActionData, PageData } from './$types';
import Divider from '$lib/components/Layout/Divider.svelte';
type Props = { type Props = {
data: PageData; data: PageData;
@ -22,7 +23,7 @@
let selectedRecipients: Recipient[] = $state([]); let selectedRecipients: Recipient[] = $state([]);
</script> </script>
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center">
{#if form?.error} {#if form?.error}
<Alert class="flex w-fit justify-center" status="error"> <Alert class="flex w-fit justify-center" status="error">
{#snippet icon()} {#snippet icon()}
@ -42,7 +43,8 @@
</span> </span>
</Alert> </Alert>
{/if} {/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 justify-center gap-4">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<h2 class="text-3xl font-medium">Recipients</h2> <h2 class="text-3xl font-medium">Recipients</h2>