Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- +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
Download Patch File Download Diff File Expand all files Collapse all files

7
src/routes/+layout.svelte
View File

@@ -38,6 +38,7 @@
// *** Import Aether specific variables and functions
// import Analytics from '$lib/app_components/analytics.svelte';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_auth_error } from '$lib/stores/ae_stores';
import { LoaderCircle } from 'lucide-svelte';
// import { events_loc, events_slct } from '$lib/stores/ae_events_stores';
// import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
@@ -313,7 +314,7 @@
{#if is_hydrating}
<div class="print:hidden fixed inset-0 z-99 flex flex-col items-center justify-center bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-sm transition-opacity duration-500">
<div class="preset-filled-surface-100-900 p-8 rounded-2xl shadow-2xl flex flex-col items-center gap-4">
<span class="fas fa-cog fa-spin text-5xl text-primary-500"></span>
<LoaderCircle size="3rem" class="animate-spin text-primary-500" />
<div class="text-center font-bold text-xl">Hydrating Aether...</div>
</div>
</div>
@@ -321,10 +322,10 @@
{:else if browser && flag_denied}
<div class="flex flex-col items-center justify-center h-screen gap-6 p-8">
<h1 class="text-4xl font-black text-error-500">Access Denied</h1>
<button class="btn variant-filled-primary" onclick={() => window.location.reload()}>Reload</button>
<button class="btn preset-filled-primary" onclick={() => window.location.reload()}>Reload</button>
</div>
{:else if browser}
<div class="flex items-center justify-center h-screen"><span class="fas fa-spinner fa-spin text-4xl opacity-20"></span></div>
<div class="flex items-center justify-center h-screen"><LoaderCircle size="2.5rem" class="animate-spin opacity-20" /></div>
{/if}
{#if browser && (!$ae_loc?.iframe || $ae_loc?.trusted_access)}

11
src/routes/events/+page.svelte
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}

5
src/routes/events/[event_id]/sign_in_out.svelte
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>

4
src/routes/journals/+layout.svelte
View File

@@ -8,7 +8,7 @@
import { goto } from '$app/navigation';
// *** Import other supporting libraries
import { ArrowDownUp, House, RefreshCw, Satellite } from '@lucide/svelte';
import { ArrowDownUp, ArrowRight, House, RefreshCw, Satellite } from '@lucide/svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
@@ -323,7 +323,7 @@
}}
title="Scroll to right"
>
<span class="fas fa-arrow-right"></span>
<ArrowRight size="1em" class="inline" />
<!-- Scroll to Right
xLeft={xLeft} xScroll={xScroll} xWidth={xWidth} xScroll={xScroll} scrollLeft={scroll_container().scrollLeft}
total={xLeft + xWidth} -->

2
src/routes/journals/ae_comp__journal_entry_header.svelte
View File

@@ -105,7 +105,7 @@
<input
type="text"
bind:value={tmp_entry_obj.name}
class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-2 focus:ring-primary-500"
placeholder="Entry Title..."
onchange={on_save}
/>