complete admin CSS refactor: delete utilities.css, add layout primitives
- 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
@@ -63,11 +63,11 @@ defmodule BerrypodWeb.Admin.Dashboard do
|
||||
</.header>
|
||||
|
||||
<%!-- Celebration after go-live --%>
|
||||
<div :if={@just_went_live} class="setup-complete" style="margin-top: 1.5rem;">
|
||||
<div :if={@just_went_live} class="setup-complete admin-card-spaced">
|
||||
<.icon name="hero-check-badge" class="setup-complete-icon" />
|
||||
<h2>Your shop is live!</h2>
|
||||
<p>Customers can now browse and buy from your shop.</p>
|
||||
<div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
|
||||
<div class="setup-complete-actions">
|
||||
<.link href={~p"/"} class="admin-btn admin-btn-primary">
|
||||
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> View your shop
|
||||
</.link>
|
||||
@@ -103,36 +103,33 @@ defmodule BerrypodWeb.Admin.Dashboard do
|
||||
</div>
|
||||
|
||||
<%!-- Recent orders --%>
|
||||
<section style="margin-top: 2rem;">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
|
||||
<h2 style="font-size: 1.125rem; font-weight: 600;">Recent orders</h2>
|
||||
<.link
|
||||
navigate={~p"/admin/orders"}
|
||||
style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);"
|
||||
>
|
||||
<section class="dashboard-section">
|
||||
<div class="dashboard-section-header">
|
||||
<h2 class="admin-section-heading">Recent orders</h2>
|
||||
<.link navigate={~p"/admin/orders"} class="dashboard-view-all">
|
||||
View all →
|
||||
</.link>
|
||||
</div>
|
||||
|
||||
<%= if @recent_orders == [] do %>
|
||||
<div style="border: 1px solid var(--color-base-200, #e5e5e5); border-radius: 0.5rem; padding: 2rem; text-align: center; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
|
||||
<div style="margin: 0 auto 0.75rem; width: 2.5rem; opacity: 0.3;">
|
||||
<div class="dashboard-empty-orders">
|
||||
<div class="dashboard-empty-icon">
|
||||
<.icon name="hero-inbox" class="size-10" />
|
||||
</div>
|
||||
<p style="font-weight: 500;">No orders yet</p>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.25rem;">
|
||||
<p class="admin-text-medium">No orders yet</p>
|
||||
<p class="admin-help-text">
|
||||
Orders will appear here once customers check out.
|
||||
</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<div style="overflow-x: auto;">
|
||||
<div class="dashboard-recent-orders">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order</th>
|
||||
<th>Date</th>
|
||||
<th>Customer</th>
|
||||
<th style="text-align: right;">Total</th>
|
||||
<th class="admin-cell-end">Total</th>
|
||||
<th>Fulfilment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -140,12 +137,12 @@ defmodule BerrypodWeb.Admin.Dashboard do
|
||||
<tr
|
||||
:for={order <- @recent_orders}
|
||||
phx-click={JS.navigate(~p"/admin/orders/#{order}")}
|
||||
style="cursor: pointer;"
|
||||
class="admin-table-row-clickable"
|
||||
>
|
||||
<td style="font-weight: 500;">{order.order_number}</td>
|
||||
<td class="admin-text-medium">{order.order_number}</td>
|
||||
<td>{format_date(order.inserted_at)}</td>
|
||||
<td>{order.customer_email || "—"}</td>
|
||||
<td style="text-align: right;">{Cart.format_price(order.total)}</td>
|
||||
<td class="admin-cell-end">{Cart.format_price(order.total)}</td>
|
||||
<td><.fulfilment_pill status={order.fulfilment_status} /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -185,7 +182,7 @@ defmodule BerrypodWeb.Admin.Dashboard do
|
||||
|> assign(:can_go_live, can_go_live)
|
||||
|
||||
~H"""
|
||||
<div class="admin-checklist" style="margin-top: 1.5rem;">
|
||||
<div class="admin-checklist admin-card-spaced">
|
||||
<div class="admin-checklist-header">
|
||||
<h2 class="admin-checklist-title">Launch checklist</h2>
|
||||
<div class="admin-checklist-progress">
|
||||
@@ -252,20 +249,14 @@ defmodule BerrypodWeb.Admin.Dashboard do
|
||||
|
||||
defp stat_card(assigns) do
|
||||
~H"""
|
||||
<.link
|
||||
navigate={@href}
|
||||
class="admin-card"
|
||||
style="display: block; text-decoration: none;"
|
||||
>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem;">
|
||||
<div style="background: var(--color-base-200, #e5e5e5); border-radius: 0.5rem; padding: 0.5rem;">
|
||||
<.link navigate={@href} class="admin-card dashboard-stat-link">
|
||||
<div class="admin-stat-card-body">
|
||||
<div class="admin-stat-icon">
|
||||
<.icon name={@icon} class="size-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-size: 1.5rem; font-weight: 700;">{@value}</p>
|
||||
<p style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
|
||||
{@label}
|
||||
</p>
|
||||
<p class="admin-stat-value">{@value}</p>
|
||||
<p class="admin-stat-label">{@label}</p>
|
||||
</div>
|
||||
</div>
|
||||
</.link>
|
||||
@@ -273,23 +264,21 @@ defmodule BerrypodWeb.Admin.Dashboard do
|
||||
end
|
||||
|
||||
defp fulfilment_pill(assigns) do
|
||||
{color, label} =
|
||||
{color_class, label} =
|
||||
case assigns.status do
|
||||
"unfulfilled" -> {"var(--color-base-200, #e5e5e5)", "unfulfilled"}
|
||||
"submitted" -> {"#dbeafe", "submitted"}
|
||||
"processing" -> {"#fef3c7", "processing"}
|
||||
"shipped" -> {"#f3e8ff", "shipped"}
|
||||
"delivered" -> {"#dcfce7", "delivered"}
|
||||
"failed" -> {"#fee2e2", "failed"}
|
||||
_ -> {"var(--color-base-200, #e5e5e5)", assigns.status || "—"}
|
||||
"unfulfilled" -> {"admin-status-pill-zinc", "unfulfilled"}
|
||||
"submitted" -> {"admin-status-pill-blue", "submitted"}
|
||||
"processing" -> {"admin-status-pill-amber", "processing"}
|
||||
"shipped" -> {"admin-status-pill-purple", "shipped"}
|
||||
"delivered" -> {"admin-status-pill-green", "delivered"}
|
||||
"failed" -> {"admin-status-pill-red", "failed"}
|
||||
_ -> {"admin-status-pill-zinc", assigns.status || "—"}
|
||||
end
|
||||
|
||||
assigns = assign(assigns, color: color, label: label)
|
||||
assigns = assign(assigns, color_class: color_class, label: label)
|
||||
|
||||
~H"""
|
||||
<span style={"display: inline-flex; border-radius: 9999px; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; background: #{@color};"}>
|
||||
{@label}
|
||||
</span>
|
||||
<span class={["admin-status-pill", @color_class]}>{@label}</span>
|
||||
"""
|
||||
end
|
||||
|
||||
|
||||
Reference in New Issue
Block a user