From 7c129d323794343cefd3adc4e8df8bbefa2959b3 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Tue, 23 Jun 2026 17:56:29 -0400 Subject: [PATCH] polish(pres_mgmt): dark-mode token cleanup on agree/consent forms + style guide update Replace all forbidden hardcoded colors (red/green bg, text-red-*, text-green-*) with Skeleton semantic tokens (error/success) so forms render correctly in dark mode. Update agreement text wrapper from bg-white/dark:bg-gray-900 to bg-surface-50-950. Document Flowbite Svelte Modal standard pattern (incl. note that classes.footer padding override does not work in current version). Co-Authored-By: Claude Sonnet 4.6 --- .../GUIDE__AE_UI_Style_Guidelines.md | 42 ++++++++++++++++++- ...ae_comp__event_presenter_form_agree.svelte | 38 +++++++++-------- .../session/[session_id]/+page.svelte | 3 +- ..._comp__event_session_poc_form_agree.svelte | 24 +++++------ .../[session_id]/ae_comp__session_view.svelte | 3 +- 5 files changed, 78 insertions(+), 32 deletions(-) diff --git a/documentation/GUIDE__AE_UI_Style_Guidelines.md b/documentation/GUIDE__AE_UI_Style_Guidelines.md index 1d4b9980..c93b5d3d 100644 --- a/documentation/GUIDE__AE_UI_Style_Guidelines.md +++ b/documentation/GUIDE__AE_UI_Style_Guidelines.md @@ -277,7 +277,47 @@ $events_sess.pres_mgmt.session_qr_url[$lq__obj.id] = result; // ← URL string --- -## 12. Known Issues & Workarounds +## 12. Flowbite Svelte Modal — Standard Usage + +**LLM docs:** [flowbite-svelte.com/llm/components/modal.md](https://flowbite-svelte.com/llm/components/modal.md) + +All consent/agreement modals in pres_mgmt use this pattern. Do not deviate. + +```svelte + + + + + {#snippet footer()} +
+ +
+ {/snippet} + +``` + +**Rules:** +- `classes` prop, not deprecated `bodyClass`/`headerClass`/`footerClass` +- **`classes={{ footer: '...' }}` does NOT override footer padding** in the current Flowbite Svelte version — the default `p-4 md:p-5` applies regardless +- `autoclose={false}` — prevents backdrop click from dismissing the dialog +- `placement="top-center"` — keeps long forms near the top so content is immediately visible +- Scrolling inside a long body is **automatic** — never add `max-h` or `overflow` to the body +- The modal title should include the person's name so the inner component doesn't need a redundant `

` + +--- + +## 13. Known Issues & Workarounds ### `btn` + `preset-filled-*` resolves to transparent inside `card` components diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte index 7421655b..86def99f 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte @@ -156,12 +156,12 @@ async function handle_update__event_presenter({ {#if $lq__event_presenter_obj} {#if !$lq__event_presenter_obj?.agree} -
-
- +
+
+ Not Yet Agreed
-
+
Waiting for agreement to the Guest Speaker Consent and Release and Terms and Conditions before you can move on. Please review and mark as agreed below. @@ -170,7 +170,7 @@ async function handle_update__event_presenter({ {/if}
+ class="border-surface-200-800 prose dark:prose-invert max-w-none space-y-4 rounded-lg border bg-surface-50-950 text-surface-900-100 p-4">
+ class="space-y-2 rounded-lg border-2 text-lg p-2" + class:border-warning-300-700={!$lq__event_presenter_obj?.agree} + class:preset-filled-surface-400-600={!$lq__event_presenter_obj?.agree} + class:border-success-300={$lq__event_presenter_obj?.agree} + class:preset-tonal-success={$lq__event_presenter_obj?.agree}> -

{#if $lq__event_presenter_obj?.agree} - + {/if} {$lq__event_presenter_obj.full_name} ({$lq__event_presenter_obj.email}) @@ -275,8 +275,10 @@ async function handle_update__event_presenter({ onclick={() => { console.log('*** Save button clicked ***'); }} - class="btn btn-md preset-tonal-warning border-warning-500 hover:preset-filled-secondary-500 m-2 border"> - + class="btn btn-md + preset-filled-secondary-50-950 preset-outlined-secondary-300-700 + hover:preset-filled-secondary-400-600 m-2"> + Save Opt-Out? {#await ae_promises.update__event_presenter_obj} @@ -313,7 +315,7 @@ async function handle_update__event_presenter({ {#if !$lq__event_presenter_obj?.agree}

Not Agreed: - +
@@ -323,7 +325,7 @@ async function handle_update__event_presenter({ {:else}
Agreed: - + Marked as agreed
{/if} @@ -372,7 +374,9 @@ async function handle_update__event_presenter({ 'saved'; }); }} - class="btn btn-lg preset-tonal-primary border-primary-500 hover:preset-filled-success-500 m-2 border"> + class="btn btn-lg preset-filled-primary-100-900 + preset-outlined-primary-400-600 + hover:preset-filled-success-400-600 m-2"> Mark as agreed? diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte index c1286bdb..5cd960bf 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte @@ -298,7 +298,8 @@ if (!$events_sess.pres_mgmt) $events_sess.pres_mgmt = {}; bind:open={$events_sess.pres_mgmt.show_modal__presenter_agree} autoclose={false} placement="top-center" - size="lg"> + size="lg" + > {@const FormAgreeComp = Comp_event_presenter_form_agree as any} {#snippet footer()} diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte index 8afc00cb..99e1edf4 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte @@ -128,12 +128,12 @@ async function handle_submit_form(event: SubmitEvent) { {#if lq__event_session_obj} {#if !lq__event_session_obj?.poc_agree} -
-
- +
+
+ Not Yet Agreed
-
+
Waiting for agreement to the {pres_mgmt_loc.current.label__session_poc_name} Consent and Release and Terms and Conditions before you can move on. Please review and mark as agreed below.
@@ -141,7 +141,7 @@ async function handle_submit_form(event: SubmitEvent) { {/if}
+ class="border-surface-200-800 prose dark:prose-invert max-w-none space-y-4 rounded-lg border bg-surface-50-950 text-surface-900-100 p-4"> + class:border-error-300={!lq__event_session_obj?.poc_agree} + class:bg-error-100={!lq__event_session_obj?.poc_agree} + class:border-success-300={lq__event_session_obj?.poc_agree} + class:bg-success-100={lq__event_session_obj?.poc_agree}>

{#if lq__event_session_obj?.poc_agree} - + {/if} {lq__event_session_obj.poc_person_full_name} ({lq__event_session_obj.poc_person_primary_email}) @@ -281,7 +281,7 @@ async function handle_submit_form(event: SubmitEvent) { {#if !lq__event_session_obj?.poc_agree}

Not Agreed: - +
@@ -291,7 +291,7 @@ async function handle_submit_form(event: SubmitEvent) { {:else}
Agreed: - + Marked as agreed
{/if} diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__session_view.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__session_view.svelte index 7df0170b..9402a680 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__session_view.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__session_view.svelte @@ -534,7 +534,8 @@ async function send_poc_email_link() { bind:open={$events_sess.pres_mgmt.show_modal__session_poc_agree} autoclose={false} placement="top-center" - size="lg"> + size="lg" + > {#snippet footer()}