From d80202e35ba62a9d1dc852d1211e8c8a462e19cd Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 2 Apr 2026 21:31:58 -0400
Subject: [PATCH] Style clean up. Making things nicer again.

---
 .../badges/ae_comp__badge_obj_li.svelte       | 114 ++++++++++++------
 .../badges/ae_comp__badge_search.svelte       |  20 ++-
 .../ae_comp__event_session_obj_li.svelte      |   4 +-
 3 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
index 211905a1..c8a5f151 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
@@ -140,6 +140,9 @@ let visible_badge_obj_li = $derived(
                     event_badge_obj?.full_name_override ??
                     event_badge_obj?.full_name ??
                     `${event_badge_obj?.given_name ?? ''} ${event_badge_obj?.family_name ?? ''}`.trim()}
+                    {@const can_print = is_trusted && (!is_printed || is_edit_mode)}
+                    {@const print_href = `/events/${event_badge_obj?.event_id}/badges/${event_badge_obj?.event_badge_id}/print`}
+                    {@const review_href = build_review_url(event_badge_obj)}
 
                 <li
                     class="
@@ -150,43 +153,75 @@ let visible_badge_obj_li = $derived(
                     ">
                     <div
                         class="flex w-full flex-row flex-wrap items-center justify-between gap-2">
-                        <!-- Left cluster: name (display only) + info chips -->
-                        <div
-                            class="flex min-w-0 grow flex-row flex-wrap items-center gap-x-3 gap-y-1">
-                            <!-- Name: always plain display — print action is a separate button -->
-                            <span
-                                class="flex shrink-0 flex-row items-center gap-1.5 text-lg font-bold">
-                                {#if event_badge_obj?.hide}
-                                    <EyeOff
-                                        size="1.1em"
-                                        class="text-gray-400" />
-                                {:else}
-                                    <User
-                                        size="1.1em"
-                                        class="text-surface-400" />
-                                {/if}
-                                <span>{display_name}</span>
-                            </span>
+                        <!-- Left cluster: main action (name + email + affiliations) -->
+                        <div class="flex min-w-0 grow flex-row flex-wrap items-center gap-x-3 gap-y-1">
+                            {#if can_print}
+                                <a
+                                    href={print_href}
+                                    class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-3 justify-start px-3 py-2 text-left text-lg font-bold flex-1 transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg"
+                                    title="
+    Print badge for
+    {display_name}
+    email: <{is_trusted ? event_badge_obj?.email : obscure_email(event_badge_obj?.email)}>
+    {event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations}
+    type: {event_badge_obj?.badge_type}
+    id: {event_badge_obj.event_badge_id}
+                                    "
+                                    >
+                                    {#if event_badge_obj?.hide}
+                                        <EyeOff size="1.1em" class="text-gray-400" />
+                                    {:else}
+                                        <User size="1.1em" class="text-primary-500" />
+                                    {/if}
 
-                            <!-- Email chip — obscured for non-trusted -->
-                            {#if show_sensitive_fields && event_badge_obj?.email}
-                                <span
-                                    class="text-surface-400 flex items-center gap-1 text-xs">
-                                    <Mail size="1em" />
-                                    {is_trusted
-                                        ? event_badge_obj.email
-                                        : obscure_email(event_badge_obj.email)}
-                                </span>
-                            {/if}
+                                    <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0">
+                                        <span class="truncate font-semibold min-w-44">{display_name}</span>
 
-                            <!-- Affiliations chip (prefers override) -->
-                            {#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
-                                <span
-                                    class="text-surface-400 flex items-center gap-1 text-xs">
-                                    <MapPin size="1em" />
-                                    {event_badge_obj.affiliations_override ??
-                                        event_badge_obj.affiliations}
-                                </span>
+                                        {#if show_sensitive_fields && event_badge_obj?.email}
+
+                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm select-all hover:bg-surface-100-900 truncate min-w-52">
+                                                {is_trusted
+                                                    ? event_badge_obj.email
+                                                    : obscure_email(event_badge_obj.email)}
+                                            </span>
+                                        {/if}
+
+                                        {#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
+
+                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm italic select-all hover:bg-surface-100-900 truncate min-w-52">
+                                                {event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </a>
+                            {:else}
+                                <div
+                                    class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-3 justify-start px-3 py-2 text-left text-lg font-bold flex-1 transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg cursor-not-allowed"
+                                    title="Printing not permitted">
+                                    {#if event_badge_obj?.hide}
+                                        <EyeOff size="1.1em" class="text-gray-400" />
+                                    {:else}
+                                        <User size="1.1em" class="text-surface-400" />
+                                    {/if}
+
+                                    <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0">
+                                        <span class="truncate font-semibold min-w-44">{display_name}</span>
+
+                                        {#if show_sensitive_fields && event_badge_obj?.email}
+                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm select-all hover:bg-surface-100-900 truncate min-w-52">
+                                                {is_trusted
+                                                    ? event_badge_obj.email
+                                                    : obscure_email(event_badge_obj.email)}
+                                            </span>
+                                        {/if}
+
+                                        {#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
+                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm italic select-all hover:bg-surface-100-900 truncate min-w-52">
+                                                {event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </div>
                             {/if}
 
                             <!-- Badge type chip -->
@@ -205,10 +240,11 @@ let visible_badge_obj_li = $derived(
                             {#if is_trusted && (!is_printed || is_edit_mode)}
                                 <a
                                     href={`/events/${event_badge_obj?.event_id}/badges/${event_badge_obj?.event_badge_id}/print`}
-                                    class="btn btn-sm preset-tonal-primary flex items-center gap-1"
+                                    class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-1 px-3 py-2 text-base font-bold transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg border border-primary-200-800
+                                    "
                                     title={is_printed
                                         ? `Reprint badge (printed ${print_count}×)`
-                                        : 'Print badge'}>
+                                        : `Print badge for ${display_name}`}>
                                     <Printer size="1em" />
                                     {#if is_printed}
                                         <span class="text-xs font-bold"
@@ -260,10 +296,10 @@ let visible_badge_obj_li = $derived(
                             {#if !is_printed || (is_trusted && is_edit_mode)}
                                 <button
                                     type="button"
-                                    class="btn btn-sm preset-tonal-surface flex items-center gap-1"
+                                    class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-1 px-3 py-2 text-base font-bold transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg border border-primary-200-800"
                                     onclick={() =>
                                         send_review_email(event_badge_obj)}
-                                    title="Email a review link to this attendee">
+                                    title="Email a review link to {display_name}">
                                     <Mail size="1em" />
                                     <span class="hidden sm:inline"
                                         >Email Link</span>
diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte
index c997e900..f1ee111b 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte
@@ -82,10 +82,11 @@ function handle_qr_scan_result(event: {
                 handle_search_trigger();
             })}
             autocomplete="off"
-            class="search_form preset-tonal-success flex w-full max-w-7xl flex-row flex-wrap items-center justify-center gap-1 rounded-lg px-2 py-2 shadow-sm md:px-12">
+            class="search_form bg-primary-50-950 border-primary-100-900 flex w-full max-w-7xl flex-col sm:flex-row flex-wrap items-center justify-center gap-1 rounded-lg px-2 py-2 shadow-md md:px-12">
             <div
-                class="flex grow flex-col items-center justify-center gap-1 md:flex-row">
+                class="flex grow flex-col md:flex-row flex-wrap items-center justify-center gap-1">
                 {#if $ae_loc.trusted_access}
+                    <span class="flex flex-row flex-wrap items-center justify-center gap-1">
                     <select
                         bind:value={badges_loc.current.search_badge_type_code}
                         onchange={handle_search_trigger}
@@ -125,6 +126,7 @@ function handle_qr_scan_result(event: {
                         <option value="affiliations_asc"
                             >Affiliations ASC</option>
                     </select>
+                    </span>
 
                     <input
                         type="search"
@@ -144,12 +146,12 @@ function handle_qr_scan_result(event: {
 
                 <input
                     type="search"
-                    placeholder="name, email"
+                    placeholder="name, email, company, organization, etc."
                     id="badge_fulltext_search_qry_str"
                     bind:value={badges_loc.current.fulltext_search_qry_str}
                     autocomplete="off"
                     data-lpignore="true"
-                    class="input grow font-mono text-lg transition-all"
+                    class="input grow font-mono text-lg transition-all focus:bg-white min-w-96 md:max-w-1/2 border-l-2 border-b-2 border-l-primary-500 border-b-primary-500"
                     onkeyup={(e) => {
                         if (e.key === 'Enter') {
                             handle_search_trigger();
@@ -161,7 +163,10 @@ function handle_qr_scan_result(event: {
             <div class="flex flex-row items-center justify-center gap-1">
                 <button
                     type="submit"
-                    class="btn btn-lg preset-tonal-success border-success-500 hover:preset-tonal-success w-48 border text-2xl font-bold transition-all">
+                    class="
+                    hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center justify-center gap-1 px-3 py-2 text-2xl font-bold transition-all duration-1000 hover:duration-300 min-w-0 preset-tonal-success rounded-lg border border-success-200-800
+                    w-48
+                    ">
                     {#if $events_sess.badges.search_status === 'loading'}
                         <LoaderCircle class="mx-1 animate-spin" />
                     {:else}
@@ -182,7 +187,10 @@ function handle_qr_scan_result(event: {
                         badges_loc.current.qry_affiliations = '';
                         handle_search_trigger();
                     }}
-                    class="btn btn-sm preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-100-900 text-xs transition-all"
+                    class="
+                    hover:text-tertiary-800-200 hover:bg-tertiary-200-800 active:bg-surface-200-700 flex items-center justify-center gap-1 px-3 py-2 text-sm font-bold transition-all duration-1000 hover:duration-300 min-w-0 preset-outlined-tertiary rounded-lg border border-tertiary-200-800
+
+                    "
                     title="Clear search query">
                     <RemoveFormatting size="1.25em" />
                     <span class="hidden md:inline"> Clear </span>
diff --git a/src/routes/events/ae_comp__event_session_obj_li.svelte b/src/routes/events/ae_comp__event_session_obj_li.svelte
index 3e7888ec..6f5fbe9a 100644
--- a/src/routes/events/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events/ae_comp__event_session_obj_li.svelte
@@ -155,11 +155,11 @@ function toggle_details(id: string) {
                                         {#if session_obj?.hide}
                                             <EyeOff
                                                 size="1em"
-                                                class="flex-none text-gray-400" />
+                                                class="text-gray-400" />
                                         {:else}
                                             <Presentation
                                                 size="1em"
-                                                class="text-primary-500 flex-none" />
+                                                class="text-primary-500" />
                                         {/if}
 
                                         <span class="flex-1">{session_obj?.name}</span>