From 37bcb7940de850225739f93d2127198cca735faa Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 14 Jul 2025 14:30:00 -0400
Subject: [PATCH] More work on the IDAA Recovery Meetings edit styling and
 related

---
 .../ae_idaa_comp__event_obj_id_edit.svelte    | 214 +++++++++++++-----
 1 file changed, 160 insertions(+), 54 deletions(-)

diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
index 9a7caa78..0114ca0c 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
@@ -708,11 +708,11 @@ $effect(() => {
 
     <input type="hidden" value={$idaa_slct.event_id} />
 
-    <div class="ae_section event__general_information border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section event__general_information -->
+    <div class="ae_section event__general_information p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"> <!-- BEGIN: section event__general_information -->
 
         <div>
         <label for="name" class="w-full">
-            <span class="text-base font-semibold">
+            <span class="text-lg font-semibold">
                 Name of Recovery Meeting
             </span>
             <input
@@ -734,7 +734,7 @@ $effect(() => {
         </div>
 
         <label for="description" class="ae_label event__description w-full">
-            <span class="text-base font-semibold">
+            <span class="text-lg font-semibold">
                 Short description
             </span>
             <!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} ></textarea> -->
@@ -770,17 +770,17 @@ $effect(() => {
 
         <div>
             <label class="form-group w-100">
-                <span class="text-base font-semibold">
+                <span class="text-lg font-semibold">
                     Type of Recovery Meeting
                 </span>
                 <select
                     name="type"
-                    class="
-                        select w-48 px-1
-                        preset-tonal-surface hover:preset-filled-surface-100-900
-                        form-control col-sm-12
-                        "
                     value={$lq__event_obj?.type}
+                    class="
+                        form-control col-sm-12
+                        select w-48 p-1
+                        preset-tonal-surface hover:preset-filled-surface-100-900
+                        "
                      >
                     <option value="IDAA">IDAA</option>
                     <option value="Caduceus">Caduceus</option>
@@ -798,7 +798,7 @@ $effect(() => {
     </div> <!-- END: section event__general_information -->
 
 
-    <div class="ae_section event__how_to_attend border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section event__how_to_attend -->
+    <div class="ae_section event__how_to_attend p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"> <!-- BEGIN: section event__how_to_attend -->
         <h3 class="h2">How to Attended</h3>
 
         <fieldset class="event__physical_virtual">
@@ -813,7 +813,7 @@ $effect(() => {
                     >
                     <span
                         class="
-                            text-base font-semibold text-surface-600-400
+                            text-base font-semibold text-neutral-600-400
                             "
                         >
                         <!-- <span class="fas fa-map-marker-alt"></span> -->
@@ -836,7 +836,7 @@ $effect(() => {
                     >
                     <span
                         class="
-                            text-base font-semibold text-surface-600-400
+                            text-base font-semibold text-neutral-600-400
                             "
                         >
                         <span class="fas fa-laptop"></span>
@@ -885,7 +885,11 @@ $effect(() => {
 
         <fieldset
             id="physical_address"
-            class="physical_address fieldset space-y-1"
+            class="
+                physical_address
+                fieldset space-y-1
+                flex flex-row flex-wrap gap-1
+                "
             class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
             >
 
@@ -893,41 +897,81 @@ $effect(() => {
 
             <input id="" name="address_location_id_random" type="hidden" value="{$lq__event_obj?.address_location_id_random}">
 
-            <label for="address_name">Location name
-                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_name" name="address_name" placeholder="The name of the place or location" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json?.name ? $lq__event_obj?.location_address_json?.name : $lq__event_obj?.address_name ?? '')}" autocomplete="off">
+            <label for="address_name form-group">
+                <span class="text-sm font-semibold">
+                    Location name
+                </span>
+                <input type="text"
+                    class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
+                    id="address_name" name="address_name" placeholder="The name of the place or location" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json?.name ? $lq__event_obj?.location_address_json?.name : $lq__event_obj?.address_name ?? '')}" autocomplete="off">
             </label>
 
-            <label for="address_line_1">Line 1
-                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_line_1" name="address_line_1" placeholder="Address line 1" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_1 ? $lq__event_obj?.location_address_json.line_1 : $lq__event_obj?.address_line_1 ?? '')}" autocomplete="address-line1">
+            <label for="address_line_1 form-group">
+                <span class="text-sm font-semibold">
+                    Line 1
+                </span>
+                <input type="text"
+                    class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
+                    id="address_line_1" name="address_line_1" placeholder="Address line 1" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_1 ? $lq__event_obj?.location_address_json.line_1 : $lq__event_obj?.address_line_1 ?? '')}" autocomplete="address-line1">
             </label>
 
-            <label for="address_line_2">Line 2
-                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_line_2" name="address_line_2" placeholder="Address line 2" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_2 ? $lq__event_obj?.location_address_json.line_2 : $lq__event_obj?.address_line_2 ?? '')}" autocomplete="address-line2">
+            <label for="address_line_2 form-group">
+                <span class="text-sm font-semibold">
+                    Line 2
+                </span>
+                <input type="text"
+                    class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
+                    id="address_line_2" name="address_line_2" placeholder="Address line 2" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_2 ? $lq__event_obj?.location_address_json.line_2 : $lq__event_obj?.address_line_2 ?? '')}" autocomplete="address-line2">
             </label>
 
-            <label for="address_line_3">Line 3
-                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_line_3" name="address_line_3" placeholder="Address line 3" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_3 ? $lq__event_obj?.location_address_json.line_3 : $lq__event_obj?.address_line_3 ?? '')}" autocomplete="address-line3">
+            <label for="address_line_3 form-group">
+                <span class="text-sm font-semibold">
+                    Line 3
+                </span>
+                <input type="text"
+                    class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
+                    id="address_line_3" name="address_line_3" placeholder="Address line 3" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_3 ? $lq__event_obj?.location_address_json.line_3 : $lq__event_obj?.address_line_3 ?? '')}" autocomplete="address-line3">
             </label>
 
         </fieldset>
 
         <fieldset
             id="physical_city_state_province_postal_code_country"
-            class="physical_city_state_province_postal_code_country space-y-1"
+            class="
+                physical_city_state_province_postal_code_country
+                fieldset space-y-1
+                flex flex-row flex-wrap gap-1
+                "
             class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
             >
 
-            <label for="address_city">City
-                <input type="text" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city ?? '')}" autocomplete="address-level2">
+            <label for="address_city form-group w-56">
+                <span class="text-sm font-semibold">
+                    City
+                </span>
+                <input type="text"
+                    class="
+                        form-control col-sm-4
+                        input w-40
+                        preset-tonal-surface hover:preset-filled-surface-100-900
+                        "
+                    id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city ?? '')}" autocomplete="address-level2">
             </label>
 
             {#if lu_country_subdivision_list}
-            <label for="address_country_subdivision_code" class="">State or province
+            <label for="address_country_subdivision_code" class="form-group w-56">
+                <span class="text-sm font-semibold">
+                    State or province
+                </span>
                 <select
                     id="address_country_subdivision_code"
                     name="address_country_subdivision_code"
                     value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_subdivision_code ? $lq__event_obj?.location_address_json.country_subdivision_code : $lq__event_obj?.address_country_subdivision_code ?? '')}"
-                    class="select w-56 preset-tonal-surface hover:preset-filled-surface-100-900 p-1"
+                    class="
+                        form-control col-sm-4
+                        select w-56 p-1
+                        preset-tonal-surface hover:preset-filled-surface-100-900
+                        "
                     title="Select the state or province for the meeting">
                     <option value="">-- None --</option>
                     {#each lu_country_subdivision_list as lu_country_subdivision}
@@ -936,22 +980,46 @@ $effect(() => {
                 </select>
             </label>
             {:else}
-            <label for="address_country_subdivision_code">State or province code
-                <input type="text" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_country_subdivision_code" name="address_country_subdivision_code" placeholder="State or province code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_subdivision_code ? $lq__event_obj?.location_address_json.country_subdivision_code : $lq__event_obj?.address_country_subdivision_code)}" autocomplete="address-level1">
+            <label for="address_country_subdivision_code" class="form-group col-sm-2">
+                <span class="text-sm font-semibold">
+                    State or province code
+                </span>
+                <input type="text"
+                    class="
+                        form-control col-sm-4
+                        input w-40
+                        preset-tonal-surface hover:preset-filled-surface-100-900
+                        "
+                    id="address_country_subdivision_code" name="address_country_subdivision_code" placeholder="State or province code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_subdivision_code ? $lq__event_obj?.location_address_json.country_subdivision_code : $lq__event_obj?.address_country_subdivision_code)}" autocomplete="address-level1">
             </label>
             {/if}
-
-            <label for="address_postal_code">Postal code or zip code
-                <input type="text" class="input w-32 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_postal_code" name="address_postal_code" placeholder="Postal code or zip code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.postal_code ? $lq__event_obj?.location_address_json.postal_code : $lq__event_obj?.address_postal_code ?? '')}" autocomplete="postal-code">
+            <label for="address_postal_code" class="form-group col-sm-2">
+                <span class="text-sm font-semibold">
+                    Postal or zip code
+                </span>
+                <input type="text"
+                    class="
+                        form-control col-sm-4
+                        input w-40
+                        preset-tonal-surface hover:preset-filled-surface-100-900
+                        "
+                    id="address_postal_code" name="address_postal_code" placeholder="Postal code or zip code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.postal_code ? $lq__event_obj?.location_address_json.postal_code : $lq__event_obj?.address_postal_code ?? '')}" autocomplete="postal-code">
             </label>
 
             {#if lu_country_list}
-            <label for="address_country_alpha_2_code" class="">Country
+            <label for="address_country_alpha_2_code" class="form-group col-sm-3">
+                <span class="text-sm font-semibold">
+                    Country
+                </span>
                 <select
                     id="address_country_alpha_2_code"
                     name="address_country_alpha_2_code"
                     value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_alpha_2_code ? $lq__event_obj?.location_address_json.country_alpha_2_code : $lq__event_obj?.address_country_alpha_2_code ?? '')}"
-                    class="select w-64 preset-tonal-surface hover:preset-filled-surface-100-900 p-1"
+                    class="
+                        form-control
+                        select w-64 p-1
+                        preset-tonal-surface hover:preset-filled-surface-100-900
+                        "
                     title="Select the country for the meeting">
                     <option value="">-- None --</option>
                     {#each lu_country_list as lu_country}
@@ -960,7 +1028,10 @@ $effect(() => {
                 </select>
             </label>
             {:else}
-            <label for="address_country_alpha_2_code">Country
+            <label for="address_country_alpha_2_code">
+                <span class="text-sm font-semibold">
+                    Country alpha 2 code
+                </span>
                 <input type="text" class="input preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_country_alpha_2_code" name="address_country_alpha_2_code" placeholder="Country alpha 2 code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_alpha_2_code ? $lq__event_obj?.location_address_json.country_alpha_2_code : $lq__event_obj?.address_country_alpha_2_code)}" autocomplete="country">
             </label>
             {/if}
@@ -972,7 +1043,9 @@ $effect(() => {
             class="w-full"
             class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
             >
-            Additional information the meeting location
+            <span class="text-lg font-semibold">
+                Additional information about the meeting location
+            </span>
             <!-- <textarea class="ae_value event__location_text tinymce_editor editor_less_100 textarea" id="location_text" name="location_text" placeholder="Additional information about the meeting location" rows="2" cols="70" bind:value={$idaa_slct.event_obj.location_text}></textarea> -->
             <Tiptap_editor
                 default_minimal={true}
@@ -1029,7 +1102,11 @@ $effect(() => {
 
         <fieldset
             id="virtual"
-            class="virtual space-y-1"
+            class="
+                virtual
+                fieldset space-y-1
+                flex flex-row flex-wrap gap-1
+                "
             class:hidden={!$idaa_slct.event_obj.virtual && !$idaa_slct.event_obj?.more__virtual_fields}
             >
             <legend class="legend text-lg font-semibold">Virtual/Online</legend>
@@ -1050,7 +1127,10 @@ $effect(() => {
 
         </fieldset>
 
-        <label for="attend_text" class="w-full">Additional information on how to attend
+        <label for="attend_text" class="w-full">
+            <span class="text-lg font-semibold">
+                Additional information on how to attend
+            </span>
             <!-- <textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text ?? ''}></textarea> -->
             <Tiptap_editor
                 default_minimal={true}
@@ -1081,7 +1161,7 @@ $effect(() => {
     </div> <!-- END: section event__how_to_attend -->
 
 
-    <div class="ae_section event__timing border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section event__timing -->
+    <div class="ae_section event__timing p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"> <!-- BEGIN: section event__timing -->
 
         <h3 class="h3">Recurring and When</h3>
 
@@ -1120,13 +1200,15 @@ $effect(() => {
             >
 
             <!-- <legend class="legend">Recurring</legend> -->
-            <label for="recurring_pattern" class="form-group w-100">
-                Recurring Repeats
+            <label for="recurring_pattern" class="form-group w-100 col-12">
+                <span class="text-lg font-semibold">
+                    Recurring Repeats
+                </span>
                 <select
                     class="
-                        select w-48 px-1
+                        form-control col-6
+                        select w-48 p-1
                         preset-tonal-surface hover:preset-filled-surface-100-900
-                        form-control col-sm-12
                         "
                     name="recurring_pattern"
                     id="recurring_pattern"
@@ -1143,36 +1225,53 @@ $effect(() => {
         <fieldset class="flex flex-col sm:flex-row flex-wrap gap-1 items-start justify-start">
             <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input type="checkbox" name="weekday_sunday" value="Sunday" bind:checked={($idaa_slct.event_obj.weekday_sunday)} class="checkbox form-check-input d-inline-block">
-                Sunday
+                <span class="text-sm font-semibold">
+                    Sunday
+                </span>
             </label>
             <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input type="checkbox" name="weekday_monday" value="Monday" bind:checked={($idaa_slct.event_obj.weekday_monday)} class="checkbox form-check-input d-inline-block">
-                Monday
+                <span class="text-sm font-semibold">
+                    Monday
+                </span>
             </label>
             <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input type="checkbox" name="weekday_tuesday" value="Tuesday" bind:checked={($idaa_slct.event_obj.weekday_tuesday)} class="checkbox form-check-input d-inline-block">
-                Tuesday
+                <span class="text-sm font-semibold">
+                    Tuesday
+                </span>
             </label>
             <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input type="checkbox" name="weekday_wednesday" value="Wednesday" bind:checked={($idaa_slct.event_obj.weekday_wednesday)} class="checkbox form-check-input d-inline-block">
-                Wednesday
+                <span class="text-sm font-semibold">
+                    Wednesday
+                </span>
             </label>
             <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input type="checkbox" name="weekday_thursday" value="Thursday" bind:checked={($idaa_slct.event_obj.weekday_thursday)} class="checkbox form-check-input d-inline-block">
-                Thursday
+                <span class="text-sm font-semibold">
+                    Thursday
+                </span>
             </label>
             <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input type="checkbox" name="weekday_friday" value="Friday" bind:checked={($idaa_slct.event_obj.weekday_friday)} class="checkbox form-check-input d-inline-block">
-                Friday
+                <span class="text-sm font-semibold">
+                    Friday
+                </span>
             </label>
             <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input type="checkbox" name="weekday_saturday" value="Saturday" bind:checked={($idaa_slct.event_obj.weekday_saturday)} class="checkbox form-check-input d-inline-block">
-                Saturday
+                <span class="text-sm font-semibold">
+                    Saturday
+                </span>
             </label>
         </fieldset>
 
         <fieldset class="flex flex-row flex-wrap gap-1 items-center justify-start flex_row flex_gap_md flex_justify_around space-y-1">
-            <label class="form-group w-56">Timezone
+            <label class="form-group w-56">
+                <span class="text-lg font-semibold">
+                    Timezone
+                </span>
                 {#if $ae_loc?.lu_time_zone_list && $ae_loc?.lu_time_zone_list.length > 0}
                     <select
                         name="timezone"
@@ -1197,7 +1296,9 @@ $effect(() => {
                 <!-- client TZ: {$ae_loc?.current_timezone} -->
             </label>
             <label class="form-group">
-                Start Time
+                <span class="text-lg font-semibold">
+                    Start Time
+                </span>
                 <input name="recurring_start_time"
                 type="time"
                 value={$lq__event_obj?.recurring_start_time}
@@ -1210,7 +1311,9 @@ $effect(() => {
                 />
             </label>
             <label class="form-group">
-                End Time
+                <span class="text-lg font-semibold">
+                    End Time
+                </span>
                 <input
                     name="recurring_end_time"
                     type="time"
@@ -1227,7 +1330,10 @@ $effect(() => {
 
         {#if ( $ae_loc.administrator_access || $lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
             <p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this meeting shows up in search results.</p>
-            <label for="recurring_text" class="w-full">Additional information on when and how often
+            <label for="recurring_text" class="w-full">
+                <span class="text-lg font-semibold">
+                    Additional information on when and how often
+                </span>
                 <!-- <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> -->
                 <Tiptap_editor
                     default_minimal={true}
@@ -1311,7 +1417,7 @@ $effect(() => {
     </div> <!-- END: section event__timing -->
 
 
-    <div class="ae_section event__contacts border border-gray-200 rounded p-2 space-y-2">
+    <div class="ae_section event__contacts p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all">
 
         <h3 class="h3">Contacts</h3>