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

Compare commits

merge into: pantheon:main
Branches Tags
pantheon:main
pantheon:use-atlas
pantheon:chore-settings-ui-migration
pantheon:staging
...
pull from: pantheon:chore-settings-ui-migration
Branches Tags
pantheon:main
pantheon:use-atlas
pantheon:chore-settings-ui-migration
pantheon:staging
Sign in to create a new pull request.

1 commit
main ... chore-sett

Author SHA1 Message Date
Benjamin Palko
cb11794963 reformat settings page 2025-02-28 14:33:01 -05:00
2 changed files with 18 additions and 26 deletions
Show stats Expand all files Collapse all files

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

@ -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>
<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 absolute -top-20">
<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>
{/if}
</div>
<form id="sms" method="POST" use:enhance>
<div class="card-body">
<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>
</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 { 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>