style: fix missed Phase 1/2 items — FA→Lucide, a11y, variant-* cleanup

- +layout.svelte: replace fa-cog/fa-spinner spinners with LoaderCircle;
  variant-filled-primary → preset-filled-primary on reload button
- events/+page.svelte: fa-calendar-alt → CalendarDays, fa-exclamation-triangle
  → TriangleAlert (+ text-red-500 → text-error-500), fa-spinner → LoaderCircle
- sign_in_out.svelte: fa-times → X, fa-sign-in-alt → LogIn
- journals/+layout.svelte: fa-arrow-right → ArrowRight
- journal_entry_header.svelte: fix focus:ring-0 → focus:ring-2 focus:ring-primary-500
  (WCAG 2.1 AA — removes keyboard focus indicator violation)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-16 13:31:21 -04:00
parent efc0f46079
commit 338cfd4ec0
5 changed files with 16 additions and 13 deletions

View File

@@ -19,6 +19,7 @@
// events_trigger
// } from '$lib/stores/ae_events_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { CalendarDays, TriangleAlert, LoaderCircle } from 'lucide-svelte';
import { page } from '$app/stores';
@@ -124,7 +125,7 @@
<!-- We do not want to show events more than 8 months old. -->
{#if new Date(event_obj.start_datetime ?? '').getTime() > new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 8 || $ae_loc.trusted_access}
<span>
<span class="fas fa-calendar-alt mx-1"></span>
<CalendarDays size="1em" class="inline mx-1" />
{ae_util.iso_datetime_formatter(
event_obj.start_datetime,
'date_long'
@@ -135,7 +136,7 @@
</strong>
{:else}
<span>
<span class="fas fa-calendar-alt mx-1"></span>
<CalendarDays size="1em" class="inline mx-1" />
{ae_util.iso_datetime_formatter(
event_obj.start_datetime,
'date_long'
@@ -212,14 +213,14 @@
</div>
{:else}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
<TriangleAlert size="1em" class="inline text-error-500 mx-1" />
<span>No events available to display.</span>
<span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
<TriangleAlert size="1em" class="inline text-error-500 mx-1" />
</div>
{/if}
{:else}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>
<LoaderCircle size="1em" class="inline animate-spin mx-1" />
<span>Loading...</span>
</div>
{/if}

View File

@@ -33,6 +33,7 @@
events_trigger,
events_trig_kv
} from '$lib/stores/ae_events_stores';
import { X, LogIn } from 'lucide-svelte';
onMount(() => {
console.log('Browser environment detected.');
@@ -209,7 +210,7 @@
alert('You have been signed out.');
}}
>
<span class="fas fa-times mx-1"></span>
<X size="1em" class="inline mx-1" />
Sign Out
{$lq__auth__event_presenter_obj?.given_name
? `- ${$lq__auth__event_presenter_obj?.given_name}`
@@ -269,7 +270,7 @@
// $events_slct.event_presenter_id = $events_sess.auth__person.presenter_id;
}}
>
<span class="fas fa-sign-in-alt mx-1"></span>
<LogIn size="1em" class="inline mx-1" />
Sign In
</button>
</div>