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

complete admin CSS refactor: delete utilities.css, add layout primitives

Browse Source 
- Delete utilities.css (701 lines / 24 KB of Tailwind utility clones)
- Add layout.css with admin-stack, admin-row, admin-cluster, admin-grid
  primitives and gap variants (sm, md, lg, xl)
- Add transitions.css import and layout.css import to admin.css entry point
- Replace all Tailwind utility classes across 26 admin templates with
  semantic admin-*/theme-*/page-specific CSS classes
- Replace all non-dynamic inline styles with semantic classes
- Add ~100 new semantic classes to components.css (analytics, dashboard,
  order detail, settings, theme editor, generic utilities)
- Fix stray text-error → admin-text-error in media.ex
- Add missing .truncate definition to admin CSS
- Only remaining inline styles are dynamic data values (progress bars,
  chart dimensions) and one JS.toggle target

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-01 21:40:21 +00:00
parent 22d3e36ed5
commit ae6cf209aa
26 changed files with 1343 additions and 1247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
<div class="admin-form-narrow">
<%= if @live_action == :new do %>
<p class="admin-text-secondary" style="margin-bottom: 1.5rem;">
<p class="admin-section-desc">
{@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>

14
lib/berrypod_web/live/admin/providers/index.ex
View File

@@ -54,13 +54,13 @@ defmodule BerrypodWeb.Admin.Providers.Index do
defp status_indicator(assigns) do
~H"""
<span class={[
"inline-flex size-3 rounded-full",
"admin-provider-dot",
cond do
not @enabled -> "bg-base-content/30"
@status == "syncing" -> "bg-warning animate-pulse"
@status == "completed" -> "bg-success"
@status == "failed" -> "bg-error"
true -> "bg-base-content/30"
not @enabled -> "admin-provider-dot-idle"
@status == "syncing" -> "admin-provider-dot-syncing"
@status == "completed" -> "admin-provider-dot-ok"
@status == "failed" -> "admin-provider-dot-error"
true -> "admin-provider-dot-idle"
end
]} />
"""
@@ -81,7 +81,7 @@ defmodule BerrypodWeb.Admin.Providers.Index do
<.icon name="hero-clock" class="size-4 inline" />
Last synced {format_relative_time(@connection.last_synced_at)}
</span>
<span :if={!@connection.last_synced_at} class="text-warning">
<span :if={!@connection.last_synced_at} class="admin-text-warning">
<.icon name="hero-exclamation-triangle" class="size-4 inline" /> Never synced
</span>
"""

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

@@ -14,7 +14,7 @@
</:actions>
</.header>
<div id="connections" phx-update="stream" class="admin-stack" style="margin-top: 1.5rem;">
<div id="connections" phx-update="stream" class="admin-stack admin-card-spaced">
<div id="connections-empty" class="hidden only:block">
<div class="admin-empty-state">
<.icon name="hero-cube" class="admin-empty-state-icon" />
@@ -41,9 +41,9 @@
<div class="admin-card-body">
<div class="admin-card-row">
<div class="admin-card-content">
<div class="admin-row" style="--admin-row-gap: 0.5rem;">
<div class="admin-row">
<.status_indicator status={connection.sync_status} enabled={connection.enabled} />
<h3 class="admin-card-title" style="margin-bottom: 0; font-size: 1.125rem;">
<h3 class="admin-card-title admin-section-heading admin-section-desc-flush">
{provider_name(connection.provider_type)}
</h3>
</div>
@@ -64,7 +64,7 @@
phx-click="delete"
phx-value-id={connection.id}
data-confirm={"Disconnect from #{provider_name(connection.provider_type)}? Your synced products will remain in your shop."}
class="admin-btn admin-btn-ghost admin-btn-sm text-error"
class="admin-btn admin-btn-ghost admin-btn-sm admin-text-error"
>
Disconnect
</button>