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
@@ -200,7 +200,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div class="max-w-2xl">
|
||||
<div class="admin-content-medium">
|
||||
<.header>
|
||||
Email settings
|
||||
<:subtitle>
|
||||
@@ -211,14 +211,16 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
</.header>
|
||||
|
||||
<%= if @env_locked do %>
|
||||
<div class="mt-6 rounded-md bg-amber-50 p-4 ring-1 ring-amber-600/10 ring-inset">
|
||||
<div class="flex gap-3">
|
||||
<.icon name="hero-lock-closed" class="size-5 text-amber-600 shrink-0 mt-0.5" />
|
||||
<div class="admin-callout-warning">
|
||||
<div class="admin-callout-warning-body">
|
||||
<span class="admin-callout-warning-icon">
|
||||
<.icon name="hero-lock-closed" class="size-5" />
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-amber-800">
|
||||
<p class="admin-callout-warning-title">
|
||||
Controlled by environment variables
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-amber-700">
|
||||
<p class="admin-callout-warning-desc">
|
||||
Email is configured via <code>SMTP_HOST</code> and related env vars.
|
||||
Remove them to configure email from this page instead.
|
||||
</p>
|
||||
@@ -227,7 +229,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<section class="mt-8">
|
||||
<section class="admin-section">
|
||||
<.form for={@form} phx-change="change_adapter" phx-submit="save">
|
||||
<div id="email-provider-cards" phx-hook="CardRadioScroll">
|
||||
<.card_radio_group
|
||||
@@ -244,24 +246,24 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
<% selected = @adapter_key == adapter.key %>
|
||||
<div
|
||||
id={"adapter-config-#{adapter.key}"}
|
||||
class="mt-6 space-y-4"
|
||||
class="admin-adapter-config"
|
||||
hidden={!selected}
|
||||
data-adapter={adapter.key}
|
||||
>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold">
|
||||
<h3 class="admin-section-subheading">
|
||||
{adapter.name}
|
||||
<a
|
||||
:if={adapter.url}
|
||||
href={adapter.url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="text-sm font-normal text-base-content/50 hover:text-base-content/80"
|
||||
class="admin-link-subtle admin-adapter-link"
|
||||
>
|
||||
↗
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/60">{adapter.description}</p>
|
||||
<p class="admin-section-desc">{adapter.description}</p>
|
||||
</div>
|
||||
<.input
|
||||
name="email[from_address]"
|
||||
@@ -279,7 +281,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
/>
|
||||
<% end %>
|
||||
<%= unless @env_locked do %>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="admin-row admin-row-lg">
|
||||
<.button phx-disable-with="Saving..." disabled={!selected}>
|
||||
Save settings
|
||||
</.button>
|
||||
@@ -288,7 +290,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
type="button"
|
||||
phx-click="disconnect"
|
||||
data-confirm="Remove email configuration? Transactional emails will stop being sent."
|
||||
class="text-sm text-red-600 hover:text-red-800"
|
||||
class="admin-link-danger"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
@@ -301,17 +303,17 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
</section>
|
||||
|
||||
<%= if @email_configured do %>
|
||||
<section class="mt-8 border-t border-base-200 pt-6">
|
||||
<h2 class="text-lg font-semibold">Test email</h2>
|
||||
<p class="mt-1 text-sm text-base-content/60">
|
||||
<section class="admin-section-bordered">
|
||||
<h2 class="admin-section-heading">Test email</h2>
|
||||
<p class="admin-help-text">
|
||||
Send a test email to <strong>{@current_scope.user.email}</strong>
|
||||
to verify delivery works.
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<div class="admin-section-body">
|
||||
<button
|
||||
phx-click="send_test"
|
||||
disabled={@sending_test}
|
||||
class="inline-flex items-center gap-2 rounded-md bg-base-200 px-3 py-2 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
|
||||
class="admin-btn admin-btn-outline"
|
||||
>
|
||||
<.icon name="hero-paper-airplane" class="size-4" />
|
||||
{if @sending_test, do: "Sending...", else: "Send test email"}
|
||||
@@ -341,7 +343,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|
||||
disabled={@disabled}
|
||||
/>
|
||||
<%= if @value && !@disabled do %>
|
||||
<p class="text-xs text-base-content/60 mt-1">
|
||||
<p class="admin-help-text">
|
||||
Current: <code>{@value}</code> — leave blank to keep existing value
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user