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

30
lib/berrypod_web/live/admin/providers/form.html.heex
View File

@@ -4,18 +4,16 @@
else: "#{@provider.name} settings"}
</.header>
<div class="max-w-xl mt-6">
<div class="admin-form-narrow">
<%= if @live_action == :new do %>
<div class="prose prose-sm mb-6">
<p>
{@provider.name} is a print-on-demand service that prints and ships products for you.
Connect your account to automatically import your products into your shop.
</p>
</div>
<p class="admin-text-secondary" style="margin-bottom: 1.5rem;">
{@provider.name} is a print-on-demand service that prints and ships products for you.
Connect your account to automatically import your products into your shop.
</p>
<div class="rounded-lg bg-base-200 p-4 mb-6 text-sm">
<p class="font-medium mb-2">Get your API key from {@provider.name}:</p>
<ol class="list-decimal list-inside space-y-1 text-base-content/80">
<div class="admin-callout">
<p class="admin-callout-title">Get your API key from {@provider.name}:</p>
<ol class="admin-callout-list">
<li>
<a href={@provider.login_url} target="_blank" rel="noopener" class="admin-link">
Log in to {@provider.name}
@@ -44,7 +42,7 @@
autocomplete="off"
/>
<div class="flex items-center gap-3 mb-6">
<div class="admin-inline-group">
<button
type="button"
class="admin-btn admin-btn-outline admin-btn-sm"
@@ -58,27 +56,27 @@
{if @testing, do: "Checking...", else: "Check connection"}
</button>
<div :if={@test_result} class="text-sm">
<%= if @test_result do %>
<%= case @test_result do %>
<% {:ok, _info} -> %>
<span class="text-success flex items-center gap-1">
<span class="admin-status-success">
<.icon name="hero-check-circle" class="size-4" />
Connected to {connection_name(@test_result) || @provider.name}
</span>
<% {:error, reason} -> %>
<span class="text-error flex items-center gap-1">
<span class="admin-status-error">
<.icon name="hero-x-circle" class="size-4" />
{format_error(reason)}
</span>
<% end %>
</div>
<% end %>
</div>
<%= if @live_action == :edit do %>
<.input field={@form[:enabled]} type="checkbox" label="Connection enabled" />
<% end %>
<div class="flex gap-2 mt-6">
<div class="admin-form-actions">
<.button type="submit" disabled={@testing}>
{if @live_action == :new,
do: "Connect to #{@provider.name}",

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"