refactor admin CSS: replace utility classes with semantic styles
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:
@@ -35,8 +35,8 @@ defmodule BerrypodWeb.Layouts do
|
||||
|
||||
def app(assigns) do
|
||||
~H"""
|
||||
<main class="px-4 py-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-lg flex flex-col gap-4">
|
||||
<main class="app-main">
|
||||
<div class="app-container">
|
||||
{render_slot(@inner_block)}
|
||||
</div>
|
||||
</main>
|
||||
@@ -108,11 +108,11 @@ defmodule BerrypodWeb.Layouts do
|
||||
"""
|
||||
def theme_toggle(assigns) do
|
||||
~H"""
|
||||
<div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
|
||||
<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" />
|
||||
|
||||
<button
|
||||
class="flex p-2 cursor-pointer w-1/3"
|
||||
class="theme-toggle-btn"
|
||||
phx-click={JS.dispatch("phx:set-theme")}
|
||||
data-phx-theme="system"
|
||||
>
|
||||
@@ -120,7 +120,7 @@ defmodule BerrypodWeb.Layouts do
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex p-2 cursor-pointer w-1/3"
|
||||
class="theme-toggle-btn"
|
||||
phx-click={JS.dispatch("phx:set-theme")}
|
||||
data-phx-theme="light"
|
||||
>
|
||||
@@ -128,7 +128,7 @@ defmodule BerrypodWeb.Layouts do
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex p-2 cursor-pointer w-1/3"
|
||||
class="theme-toggle-btn"
|
||||
phx-click={JS.dispatch("phx:set-theme")}
|
||||
data-phx-theme="dark"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user