replace orphaned tailwind classes with project CSS
All checks were successful
deploy / deploy (push) Successful in 1m27s

auth pages (login, registration, confirmation, recover) now use
setup-page/setup-header/admin-btn-block. theme toggle indicator
gets proper CSS. cleaned up dead h-full, size-3.5, ml-2 classes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-03-04 17:12:21 +00:00
parent 7547d0d4b8
commit dd659e4c61
11 changed files with 58 additions and 55 deletions

View File

@ -324,7 +324,7 @@ defmodule BerrypodWeb.BlockEditorComponents do
aria-label={"Move item #{idx + 1} up"}
disabled={idx == 0}
>
<.icon name="hero-chevron-up-mini" class="size-3.5" />
<.icon name="hero-chevron-up-mini" class="size-4" />
</button>
<button
type="button"
@ -337,7 +337,7 @@ defmodule BerrypodWeb.BlockEditorComponents do
aria-label={"Move item #{idx + 1} down"}
disabled={idx == @item_count - 1}
>
<.icon name="hero-chevron-down-mini" class="size-3.5" />
<.icon name="hero-chevron-down-mini" class="size-4" />
</button>
<button
type="button"
@ -348,7 +348,7 @@ defmodule BerrypodWeb.BlockEditorComponents do
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-xs repeater-remove-btn"
aria-label={"Remove item #{idx + 1}"}
>
<.icon name="hero-x-mark-mini" class="size-3.5" />
<.icon name="hero-x-mark-mini" class="size-4" />
</button>
</div>
</fieldset>
@ -362,7 +362,7 @@ defmodule BerrypodWeb.BlockEditorComponents do
phx-value-field={@field.key}
class="admin-btn admin-btn-outline admin-btn-xs repeater-add-btn"
>
<.icon name="hero-plus-mini" class="size-3.5" /> Add item
<.icon name="hero-plus-mini" class="size-4" /> Add item
</button>
</div>
"""

View File

@ -109,14 +109,14 @@ defmodule BerrypodWeb.Layouts do
def theme_toggle(assigns) do
~H"""
<div class="theme-toggle">
<div class="theme-toggle-indicator absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0" />
<div class="theme-toggle-indicator" />
<button
class="theme-toggle-btn"
phx-click={JS.dispatch("phx:set-theme")}
data-phx-theme="system"
>
<.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
<.icon name="hero-computer-desktop-micro" class="size-4" />
</button>
<button
@ -124,7 +124,7 @@ defmodule BerrypodWeb.Layouts do
phx-click={JS.dispatch("phx:set-theme")}
data-phx-theme="light"
>
<.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
<.icon name="hero-sun-micro" class="size-4" />
</button>
<button
@ -132,7 +132,7 @@ defmodule BerrypodWeb.Layouts do
phx-click={JS.dispatch("phx:set-theme")}
data-phx-theme="dark"
>
<.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
<.icon name="hero-moon-micro" class="size-4" />
</button>
</div>
"""

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="h-full">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -28,7 +28,7 @@
<script defer phx-track-static src={~p"/assets/js/app.js"}>
</script>
</head>
<body class="h-full">
<body>
<div class="themed" data-mood={@theme_settings.mood} style="min-height:100%">
{@inner_content}
</div>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="h-full">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -27,7 +27,7 @@
<script defer phx-track-static src={~p"/assets/js/app.js"}>
</script>
</head>
<body class="h-full">
<body>
<div class="themed" data-mood={@theme_settings.mood} style="min-height:100%">
{@inner_content}
</div>

View File

@ -928,12 +928,10 @@ defmodule BerrypodWeb.ShopComponents.Content do
## Attributes
* `text` - Required. The title text.
* `class` - Optional. Additional CSS classes.
## Examples
<.page_title text="Your basket" />
<.page_title text="Order History" class="mb-4" />
"""
attr :text, :string, required: true

View File

@ -111,7 +111,7 @@ defmodule BerrypodWeb.ErrorHTML do
~H"""
<!DOCTYPE html>
<html lang="en" class="h-full">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -121,9 +121,9 @@ defmodule BerrypodWeb.ErrorHTML do
<%= Phoenix.HTML.raw(@generated_css) %>
</style>
</head>
<body class="h-full">
<body>
<div
class="shop-root themed h-full"
class="shop-root themed"
data-mood={@theme_settings.mood}
data-typography={@theme_settings.typography}
data-shape={@theme_settings.shape}

View File

@ -109,7 +109,7 @@ defmodule BerrypodWeb.Admin.Pages.Index do
<span class="page-card-info">
<span class="page-card-title">
{page.title}
<span :if={!page.published} class="admin-badge admin-badge-warning ml-2">
<span :if={!page.published} class="admin-badge admin-badge-warning ml-1">
Draft
</span>
</span>

View File

@ -7,8 +7,8 @@ defmodule BerrypodWeb.Auth.Confirmation do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_scope={@current_scope}>
<div class="mx-auto max-w-sm">
<div class="text-center">
<div class="setup-page">
<div class="setup-header">
<.header>Welcome {@user.email}</.header>
</div>
@ -27,11 +27,11 @@ defmodule BerrypodWeb.Auth.Confirmation do
value="true"
phx-disable-with="Confirming..."
variant="primary"
class="w-full"
class="admin-btn-block"
>
Confirm and stay logged in
</.button>
<.button phx-disable-with="Confirming..." class="w-full mt-2">
<.button phx-disable-with="Confirming..." class="admin-btn-block">
Confirm and log in only this time
</.button>
</.form>
@ -47,7 +47,7 @@ defmodule BerrypodWeb.Auth.Confirmation do
>
<input type="hidden" name={@form[:token].name} value={@form[:token].value} />
<%= if @current_scope do %>
<.button phx-disable-with="Logging in..." variant="primary" class="w-full">
<.button phx-disable-with="Logging in..." variant="primary" class="admin-btn-block">
Log in
</.button>
<% else %>
@ -56,19 +56,19 @@ defmodule BerrypodWeb.Auth.Confirmation do
value="true"
phx-disable-with="Logging in..."
variant="primary"
class="w-full"
class="admin-btn-block"
>
Keep me logged in on this device
</.button>
<.button phx-disable-with="Logging in..." class="w-full mt-2">
<.button phx-disable-with="Logging in..." class="admin-btn-block">
Log me in only this time
</.button>
<% end %>
</.form>
<p :if={!@user.confirmed_at} class="admin-alert admin-alert-outline mt-8">
<div :if={!@user.confirmed_at} class="admin-alert admin-alert-outline">
Tip: If you prefer passwords, you can enable them in the user settings.
</p>
</div>
</div>
</Layouts.app>
"""

View File

@ -7,10 +7,10 @@ defmodule BerrypodWeb.Auth.Login do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_scope={@current_scope}>
<div class="mx-auto max-w-sm flex flex-col gap-4">
<div class="text-center">
<div class="setup-page">
<div class="setup-header">
<.header>
<p>Log in</p>
Log in
<:subtitle>
<%= if @current_scope do %>
You need to reauthenticate to perform sensitive actions on your account.
@ -26,7 +26,7 @@ defmodule BerrypodWeb.Auth.Login do
<div>
<p>You are running the local mail adapter.</p>
<p>
To see sent emails, visit <.link href="/dev/mailbox" class="underline">the mailbox page</.link>.
To see sent emails, visit <.link href="/dev/mailbox" class="admin-link">the mailbox page</.link>.
</p>
</div>
</div>
@ -48,8 +48,8 @@ defmodule BerrypodWeb.Auth.Login do
required
phx-mounted={JS.focus()}
/>
<.button variant="primary" class="w-full">
Log in with email <span aria-hidden="true"></span>
<.button variant="primary" class="admin-btn-block">
Log in with email <span aria-hidden="true">&rarr;</span>
</.button>
</.form>
@ -78,17 +78,22 @@ defmodule BerrypodWeb.Auth.Login do
label="Password"
autocomplete="current-password"
/>
<.button variant="primary" class="w-full" name={@form[:remember_me].name} value="true">
Log in and stay logged in <span aria-hidden="true"></span>
<.button
variant="primary"
class="admin-btn-block"
name={@form[:remember_me].name}
value="true"
>
Log in and stay logged in <span aria-hidden="true">&rarr;</span>
</.button>
<.button class="w-full mt-2">
<.button class="admin-btn-block">
Log in only this time
</.button>
</.form>
<p :if={!@email_configured} class="text-sm text-center text-base-content/60">
<p :if={!@email_configured} class="setup-footer">
Locked out?
<.link navigate={~p"/recover"} class="font-semibold text-brand hover:underline">
<.link navigate={~p"/recover"} class="admin-link">
Recover with setup secret
</.link>
</p>

View File

@ -8,15 +8,13 @@ defmodule BerrypodWeb.Auth.Registration do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_scope={@current_scope}>
<div class="mx-auto max-w-sm">
<div class="text-center">
<div class="setup-page">
<div class="setup-header">
<.header>
Register for an account
<:subtitle>
Already registered?
<.link navigate={~p"/users/log-in"} class="font-semibold text-brand hover:underline">
Log in
</.link>
<.link navigate={~p"/users/log-in"} class="admin-link">Log in</.link>
to your account now.
</:subtitle>
</.header>
@ -32,7 +30,7 @@ defmodule BerrypodWeb.Auth.Registration do
phx-mounted={JS.focus()}
/>
<.button phx-disable-with="Creating account..." variant="primary" class="w-full">
<.button phx-disable-with="Creating account..." variant="primary" class="admin-btn-block">
Create an account
</.button>
</.form>

View File

@ -69,13 +69,15 @@ defmodule BerrypodWeb.Setup.Recover do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_scope={@current_scope}>
<div class="mx-auto max-w-sm flex flex-col gap-4">
<.header>
Account recovery
<:subtitle>
Reset your admin password using the setup secret from your server logs.
</:subtitle>
</.header>
<div class="setup-page">
<div class="setup-header">
<.header>
Account recovery
<:subtitle>
Reset your admin password using the setup secret from your server logs.
</:subtitle>
</.header>
</div>
<div class="admin-alert admin-alert-info">
<.icon name="hero-information-circle" class="size-6 shrink-0" />
@ -100,14 +102,14 @@ defmodule BerrypodWeb.Setup.Recover do
autocomplete="new-password"
required
/>
<p class="text-xs text-base-content/60 -mt-2">Minimum 12 characters</p>
<.button variant="primary" class="w-full">
<p class="setup-hint">Minimum 12 characters</p>
<.button variant="primary" class="admin-btn-block">
Reset password and log in
</.button>
</.form>
<p class="text-sm text-center text-base-content/60">
<.link navigate={~p"/users/log-in"} class="font-semibold text-brand hover:underline">
<p class="setup-footer">
<.link navigate={~p"/users/log-in"} class="admin-link">
Back to login
</.link>
</p>