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

polish(pres_mgmt): dark-mode token cleanup on agree/consent forms + style guide update

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-23 17:56:29 -04:00
parent 7e255a7845
commit 7c129d3237
5 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
documentation/GUIDE__AE_UI_Style_Guidelines.md
View File

@@ -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
<Modal
title="Person Name — Agreement Title"
bind:open={$store.show_modal__thing}
autoclose={false}
placement="top-center"
size="lg">
<YourFormComponent {prop} />
{#snippet footer()}
<div class="w-full text-center">
<button
type="button"
onclick={() => ($store.show_modal__thing = false)}
class="btn preset-tonal-warning border border-warning-500">
<X size="1em" class="mr-1" />
Close
</button>
</div>
{/snippet}
</Modal>
```
**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 `<h2>`
---
## 13. Known Issues & Workarounds
### `btn` + `preset-filled-*` resolves to transparent inside `card` components

38
src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte
View File

@@ -156,12 +156,12 @@ async function handle_update__event_presenter({
{#if $lq__event_presenter_obj}
{#if !$lq__event_presenter_obj?.agree}
<div class="text-center text-red-500">
<div class="text-red-500">
<X size="1em" class="m-1 text-red-500" />
<div class="text-center text-error-700-300">
<div class="">
<X size="1.3em" class="text-error-700-300" />
Not Yet Agreed
</div>
<div class="rounded-md border border-red-200 bg-red-100 p-4">
<div class="rounded-md border border-error-300-700 preset-tonal-error p-4">
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}
<div
class="border-surface-200-800 prose dark:prose-invert max-w-none space-y-4 rounded-lg border bg-white p-4 dark:bg-gray-900">
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">
<Element_data_store
ds_code="event_presenter_agree_text"
ds_type="html"
@@ -178,17 +178,17 @@ async function handle_update__event_presenter({
</div>
<section
class="space-y-2 rounded-md border text-lg"
class:border-red-200={!$lq__event_presenter_obj?.agree}
class:bg-red-100={!$lq__event_presenter_obj?.agree}
class:border-green-200={$lq__event_presenter_obj?.agree}
class:bg-green-50={$lq__event_presenter_obj?.agree}>
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}>
<!-- Highlight the persons name, email, and that whole line. -->
<p class="rounded-t-md p-2 text-lg"
<p class="rounded-md p-2 text-lg"
class:preset-tonal-warning={!$lq__event_presenter_obj?.agree}
class:preset-tonal-success={$lq__event_presenter_obj?.agree}>
{#if $lq__event_presenter_obj?.agree}
<Check size="1em" class="mr-1 inline text-green-700" />
<Check size="1em" class="mr-1 inline text-success-700" />
{/if}
<strong
>{$lq__event_presenter_obj.full_name} ({$lq__event_presenter_obj.email})</strong>
@@ -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">
<Check size="1em" class="m-1 text-orange-500" />
class="btn btn-md
preset-filled-secondary-50-950 preset-outlined-secondary-300-700
hover:preset-filled-secondary-400-600 m-2">
<Check size="1em" class="m-1 text-orange-700-300" />
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}
<div>
Not Agreed:
<X size="1em" class="m-1 text-red-500" />
<X size="1em" class="m-1 text-error-500" />
<!-- <span class="fas fa-question text-red-500 m-1"></span> -->
</div>
<div>
@@ -323,7 +325,7 @@ async function handle_update__event_presenter({
{:else}
<div>
Agreed:
<Check size="1em" class="m-1 text-green-500" />
<Check size="1em" class="m-1 text-success-500" />
Marked as agreed
</div>
{/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">
<Check size="1em" class="m-1 text-orange-500" />
Mark as agreed?

3
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte
View File

@@ -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}
<FormAgreeComp {lq__event_presenter_obj} />
{#snippet footer()}

24
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte
View File

@@ -128,12 +128,12 @@ async function handle_submit_form(event: SubmitEvent) {
{#if lq__event_session_obj}
{#if !lq__event_session_obj?.poc_agree}
<div class="text-center text-red-500">
<div class="text-red-500">
<X size="1em" class="m-1 text-red-500" />
<div class="text-center text-error-500">
<div class="text-error-500">
<X size="1em" class="m-1 text-error-500" />
Not Yet Agreed
</div>
<div class="rounded-md border border-red-200 bg-red-100 p-4">
<div class="rounded-md border border-error-300 bg-error-100 p-4">
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.
</div>
@@ -141,7 +141,7 @@ async function handle_submit_form(event: SubmitEvent) {
{/if}
<div
class="border-surface-200-800 prose dark:prose-invert max-w-none space-y-4 rounded-lg border bg-white p-4 dark:bg-gray-900">
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">
<Element_data_store
ds_code="event_session_poc_agree_text"
ds_type="html"
@@ -150,16 +150,16 @@ async function handle_submit_form(event: SubmitEvent) {
<section
class="space-y-2 rounded-md border text-lg"
class:border-red-200={!lq__event_session_obj?.poc_agree}
class:bg-red-100={!lq__event_session_obj?.poc_agree}
class:border-green-200={lq__event_session_obj?.poc_agree}
class:bg-green-50={lq__event_session_obj?.poc_agree}>
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}>
<!-- Highlight the persons name, email, and that whole line. -->
<p class="rounded-t-md p-2 text-lg"
class:preset-tonal-warning={!lq__event_session_obj?.poc_agree}
class:preset-tonal-success={lq__event_session_obj?.poc_agree}>
{#if lq__event_session_obj?.poc_agree}
<Check size="1em" class="mr-1 inline text-green-700" />
<Check size="1em" class="mr-1 inline text-success-700" />
{/if}
<strong
>{lq__event_session_obj.poc_person_full_name} ({lq__event_session_obj.poc_person_primary_email})</strong>
@@ -281,7 +281,7 @@ async function handle_submit_form(event: SubmitEvent) {
{#if !lq__event_session_obj?.poc_agree}
<div>
Not Agreed:
<X size="1em" class="m-1 text-red-500" />
<X size="1em" class="m-1 text-error-500" />
<!-- <span class="fas fa-question text-red-500 m-1"></span> -->
</div>
<div>
@@ -291,7 +291,7 @@ async function handle_submit_form(event: SubmitEvent) {
{:else}
<div>
Agreed:
<Check size="1em" class="m-1 text-green-500" />
<Check size="1em" class="m-1 text-success-500" />
Marked as agreed
</div>
{/if}

3
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__session_view.svelte
View File

@@ -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"
>
<Comp_event_session_poc_form_agree
lq__event_session_obj={$lq__event_session_obj} />
{#snippet footer()}