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

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()}