jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor admin CSS: replace utility classes with semantic styles

Browse Source 
Replace Tailwind utility soup across admin templates with semantic
CSS classes. Add layout primitives (stack, row, cluster, grid),
extract JS transition helpers into transitions.css, and refactor
core_components, layouts, settings, newsletter, order_show, providers,
and theme editor templates.

Utility occurrences reduced from 290+ to 127 across admin files.
All 1679 tests pass.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-01 17:15:25 +00:00
parent edef628214
commit b7ec41b0cf
13 changed files with 2661 additions and 1643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lib/berrypod_web/live/admin/providers/index.html.heex
View File

@@ -3,7 +3,7 @@
<:actions>
<div class="admin-dropdown">
<div tabindex="0" role="button" class="admin-btn admin-btn-primary">
<.icon name="hero-plus" class="size-4 mr-1" /> Connect provider
<.icon name="hero-plus" class="size-4" /> Connect provider
</div>
<ul tabindex="0" class="admin-dropdown-content">
<li :for={provider <- @available_providers}>
@@ -14,20 +14,22 @@
</:actions>
</.header>
<div id="connections" phx-update="stream" class="mt-6 space-y-4">
<div id="connections-empty" class="hidden only:block text-center py-12">
<.icon name="hero-cube" class="size-16 mx-auto mb-4 text-base-content/30" />
<h2 class="text-xl font-medium">Connect a print-on-demand provider</h2>
<p class="mt-2 text-base-content/60 max-w-md mx-auto">
Connect your account to import products and start selling.
</p>
<div class="flex justify-center gap-3 mt-6">
<.button
:for={provider <- @available_providers}
navigate={~p"/admin/providers/new?type=#{provider.type}"}
>
Connect {provider.name}
</.button>
<div id="connections" phx-update="stream" class="admin-stack" style="margin-top: 1.5rem;">
<div id="connections-empty" class="hidden only:block">
<div class="admin-empty-state">
<.icon name="hero-cube" class="admin-empty-state-icon" />
<h2 class="admin-empty-state-title">Connect a print-on-demand provider</h2>
<p class="admin-empty-state-text">
Connect your account to import products and start selling.
</p>
<div class="admin-empty-state-actions">
<.button
:for={provider <- @available_providers}
navigate={~p"/admin/providers/new?type=#{provider.type}"}
>
Connect {provider.name}
</.button>
</div>
</div>
</div>
@@ -37,21 +39,21 @@
class="admin-card"
>
<div class="admin-card-body">
<div class="flex items-start justify-between gap-4">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<div class="admin-card-row">
<div class="admin-card-content">
<div class="admin-row" style="--admin-row-gap: 0.5rem;">
<.status_indicator status={connection.sync_status} enabled={connection.enabled} />
<h3 class="font-semibold text-lg">
<h3 class="admin-card-title" style="margin-bottom: 0; font-size: 1.125rem;">
{provider_name(connection.provider_type)}
</h3>
</div>
<p class="text-base-content/70 mt-1">{connection.name}</p>
<div class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-sm text-base-content/60">
<p class="admin-card-subtitle">{connection.name}</p>
<div class="admin-card-meta">
<.connection_info connection={connection} />
</div>
</div>
<div class="flex items-center gap-2">
<div class="admin-card-toolbar">
<.link
navigate={~p"/admin/providers/#{connection.id}/edit"}
class="admin-btn admin-btn-ghost admin-btn-sm"