style: badge code_to_icon refactor + core variant-* → preset-* migration
badge ae_comp__badge_obj_view_v2.svelte:
- Replace FA HTML string dict (code_to_html) with Lucide component map
(code_to_icon) — no FontAwesome dependency for dietary/option icons
- option_1 maps: Biohazard (generic/allergy), Utensils (dietary), Bone,
Fish, Carrot for specific diets
- option_2 maps: Asterisk (generic flag), Hand (first-time attendee)
- Template: replace {@html option_other_*} with {@const Icon}<Icon /> pattern
- Back-of-badge: shows text label + inline icon
core/ (21 files):
- variant-soft-* → preset-tonal-* (6 variants)
- variant-filled-* → preset-filled-* (6 variants)
- variant-glass-surface → preset-tonal-surface (Skeleton v4 has no glass)
- bare variant-soft → preset-tonal-surface
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -33,7 +33,7 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<!-- Account Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -43,13 +43,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage client accounts and high-level system settings.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
|
||||
<a class="btn preset-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Site Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -59,13 +59,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Configure sites and domains associated with the active account.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
|
||||
<a class="btn preset-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- User Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -75,13 +75,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage system access, permissions, and user credentials.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
|
||||
<a class="btn preset-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Person Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -91,13 +91,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Search and manage person records and their user linking.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
|
||||
<a class="btn preset-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Address Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -107,13 +107,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage physical locations, shipping, and billing addresses.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contact Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -123,13 +123,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Maintain support contacts, office numbers, and digital links.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Activity Log Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -139,13 +139,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Monitor system actions and historical changes for the account.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
|
||||
<a class="btn preset-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
|
||||
View Logs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Lookups Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -155,7 +155,7 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">View system lookup tables (countries, time zones, etc).</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user