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

replace DaisyUI components with admin CSS, remove DaisyUI plugin (Phase 6)

Browse Source 
Add admin/components.css with custom admin-* component classes replacing
all DaisyUI component usage across admin LiveViews, auth pages, layout,
and core_components. Delete daisyui.js vendor file (246KB). Theme plugin
stays for color variables until Phase 7.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-17 23:05:01 +00:00
parent b25e04d1b2
commit af0b0c217f
15 changed files with 751 additions and 1189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lib/simpleshop_theme_web/live/admin/order_show.ex
View File

@@ -43,9 +43,9 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
<div class="grid gap-6 mt-6 lg:grid-cols-2">
<%!-- order info --%>
<div class="card bg-base-100 shadow-sm border border-base-200">
<div class="card-body">
<h3 class="card-title text-base">Order details</h3>
<div class="admin-card">
<div class="admin-card-body">
<h3 class="admin-card-title">Order details</h3>
<.list>
<:item title="Date">{format_date(@order.inserted_at)}</:item>
<:item title="Customer">{@order.customer_email || "—"}</:item>
@@ -61,9 +61,9 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</div>
<%!-- shipping address --%>
<div class="card bg-base-100 shadow-sm border border-base-200">
<div class="card-body">
<h3 class="card-title text-base">Shipping address</h3>
<div class="admin-card">
<div class="admin-card-body">
<h3 class="admin-card-title">Shipping address</h3>
<%= if @order.shipping_address != %{} do %>
<.list>
<:item :if={@order.shipping_address["name"]} title="Name">
@@ -96,10 +96,10 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</div>
<%!-- fulfilment --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
<div class="card-body">
<div class="admin-card mt-6">
<div class="admin-card-body">
<div class="flex items-center justify-between">
<h3 class="card-title text-base">Fulfilment</h3>
<h3 class="admin-card-title">Fulfilment</h3>
<.fulfilment_badge status={@order.fulfilment_status} />
</div>
<.list>
@@ -114,7 +114,7 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</:item>
<:item :if={@order.tracking_number} title="Tracking">
<%= if @order.tracking_url do %>
<a href={@order.tracking_url} target="_blank" class="link link-primary">
<a href={@order.tracking_url} target="_blank" class="admin-link">
{@order.tracking_number}
</a>
<% else %>
@@ -135,7 +135,7 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
<button
:if={can_submit?(@order)}
phx-click="submit_to_provider"
class="btn btn-primary btn-sm"
class="admin-btn admin-btn-primary admin-btn-sm"
>
<.icon name="hero-paper-airplane-mini" class="size-4" />
{if @order.fulfilment_status == "failed",
@@ -145,7 +145,7 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
<button
:if={can_refresh?(@order)}
phx-click="refresh_status"
class="btn btn-ghost btn-sm"
class="admin-btn admin-btn-ghost admin-btn-sm"
>
<.icon name="hero-arrow-path-mini" class="size-4" /> Refresh status
</button>
@@ -154,10 +154,10 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</div>
<%!-- line items --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
<div class="card-body">
<h3 class="card-title text-base">Items</h3>
<table class="table table-zebra">
<div class="admin-card mt-6">
<div class="admin-card-body">
<h3 class="admin-card-title">Items</h3>
<table class="admin-table admin-table-zebra">
<thead>
<tr>
<th>Product</th>

8
lib/simpleshop_theme_web/live/admin/orders.ex
View File

@@ -109,13 +109,13 @@ defmodule SimpleshopThemeWeb.Admin.Orders do
phx-click="filter"
phx-value-status={@status}
class={[
"btn btn-sm",
@active && "btn-primary",
!@active && "btn-ghost"
"admin-btn admin-btn-sm",
@active && "admin-btn-primary",
!@active && "admin-btn-ghost"
]}
>
{@label}
<span :if={@count > 0} class="badge badge-sm ml-1">{@count}</span>
<span :if={@count > 0} class="admin-badge admin-badge-sm ml-1">{@count}</span>
</button>
"""
end

41
lib/simpleshop_theme_web/live/admin/product_show.ex
View File

@@ -106,12 +106,15 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
href={provider_edit_url(@product)}
target="_blank"
rel="noopener"
class="btn btn-ghost btn-sm"
class="admin-btn admin-btn-ghost admin-btn-sm"
>
Edit on {provider_label(@product)}
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" />
</.link>
<.link navigate={~p"/products/#{@product.slug}"} class="btn btn-ghost btn-sm">
<.link
navigate={~p"/products/#{@product.slug}"}
class="admin-btn admin-btn-ghost admin-btn-sm"
>
View on shop <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" />
</.link>
</:actions>
@@ -136,9 +139,9 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
<p :if={@product.images == []} class="text-base-content/40 text-sm">No images</p>
</div>
<div class="card bg-base-100 shadow-sm border border-base-200">
<div class="card-body">
<h3 class="card-title text-base">Details</h3>
<div class="admin-card">
<div class="admin-card-body">
<h3 class="admin-card-title">Details</h3>
<.list>
<:item :if={@product.provider_connection} title="Provider">
{provider_label(@product)} via {@product.provider_connection.name}
@@ -161,19 +164,19 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
<%!-- storefront controls --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
<div class="card-body">
<h3 class="card-title text-base">Storefront controls</h3>
<div class="admin-card-body">
<h3 class="admin-card-title">Storefront controls</h3>
<.form
for={@form}
phx-submit="save_storefront"
phx-change="validate_storefront"
class="flex flex-wrap gap-4 items-end"
>
<label class="form-control w-auto">
<span class="label-text text-xs mb-0.5">Visibility</span>
<label class="w-auto">
<span class="text-xs mb-0.5">Visibility</span>
<select
name="product[visible]"
class="select select-bordered select-sm"
class="admin-select admin-select-sm"
aria-label="Visibility"
>
<option
@@ -190,25 +193,25 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
</option>
</select>
</label>
<label class="form-control w-auto flex-1 min-w-48">
<span class="label-text text-xs mb-0.5">Category</span>
<label class="w-auto flex-1 min-w-48">
<span class="text-xs mb-0.5">Category</span>
<input
type="text"
name="product[category]"
value={@form[:category].value}
class="input input-bordered input-sm"
class="admin-input admin-input-sm"
placeholder="e.g. Apparel"
/>
</label>
<.button type="submit" class="btn-sm btn-primary">Save</.button>
<.button type="submit" class="admin-btn-sm admin-btn-primary">Save</.button>
</.form>
</div>
</div>
<%!-- variants --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
<div class="card-body">
<h3 class="card-title text-base">Variants ({length(@product.variants)})</h3>
<div class="admin-card-body">
<h3 class="admin-card-title">Variants ({length(@product.variants)})</h3>
<.table id="variants" rows={@product.variants}>
<:col :let={variant} label="Options">{ProductVariant.options_title(variant)}</:col>
<:col :let={variant} label="SKU">{variant.sku || "—"}</:col>
@@ -242,8 +245,8 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
:if={@product.provider_connection}
class="card bg-base-100 shadow-sm border border-base-200 mt-6"
>
<div class="card-body">
<h3 class="card-title text-base">Provider data</h3>
<div class="admin-card-body">
<h3 class="admin-card-title">Provider data</h3>
<.list>
<:item title="Provider">
{provider_label(@product)} via {@product.provider_connection.name}
@@ -253,7 +256,7 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
<:item title="Sync status">{@product.provider_connection.sync_status}</:item>
</.list>
<div class="mt-4">
<button phx-click="resync" class="btn btn-outline btn-sm">
<button phx-click="resync" class="admin-btn admin-btn-outline admin-btn-sm">
<.icon name="hero-arrow-path" class="size-4" /> Re-sync
</button>
</div>

10
lib/simpleshop_theme_web/live/admin/products.ex
View File

@@ -166,7 +166,7 @@ defmodule SimpleshopThemeWeb.Admin.Products do
aria-pressed={to_string(product.visible)}
aria-label={"Toggle visibility for #{product.title}"}
class={[
"swap swap-rotate btn btn-ghost btn-xs",
"admin-btn admin-btn-ghost admin-btn-sm",
product.visible && "text-green-600",
!product.visible && "text-base-content/30"
]}
@@ -181,7 +181,7 @@ defmodule SimpleshopThemeWeb.Admin.Products do
<.icon name="hero-cube" class="size-12 mx-auto mb-4" />
<p class="text-lg font-medium">No products yet</p>
<p class="text-sm mt-1">
<.link navigate={~p"/admin/providers"} class="link link-primary">
<.link navigate={~p"/admin/providers"} class="admin-link">
Connect a provider
</.link>
to sync your products.
@@ -196,9 +196,9 @@ defmodule SimpleshopThemeWeb.Admin.Products do
defp filter_select(assigns) do
~H"""
<label class="form-control w-auto">
<span class="label-text text-xs mb-0.5">{@label}</span>
<select name={@name} class="select select-bordered select-sm" aria-label={@label}>
<label class="w-auto">
<span class="text-xs mb-0.5">{@label}</span>
<select name={@name} class="admin-select admin-select-sm" aria-label={@label}>
<option :for={{label, value} <- @options} value={value} selected={value == @value}>
{label}
</option>

12
lib/simpleshop_theme_web/live/admin/providers/form.html.heex
View File

@@ -22,7 +22,7 @@
href="https://printify.com/app/auth/login"
target="_blank"
rel="noopener"
class="link"
class="admin-link"
>
Log in to Printify
</a>
@@ -30,7 +30,7 @@
href="https://printify.com/app/auth/register"
target="_blank"
rel="noopener"
class="link"
class="admin-link"
>create a free account</a>)
</li>
<li>Click <strong>Account</strong> (top right)</li>
@@ -52,7 +52,7 @@
href="https://www.printful.com/auth/login"
target="_blank"
rel="noopener"
class="link"
class="admin-link"
>
Log in to Printful
</a>
@@ -60,7 +60,7 @@
href="https://www.printful.com/auth/signup"
target="_blank"
rel="noopener"
class="link"
class="admin-link"
>create a free account</a>)
</li>
<li>Go to <strong>Settings</strong> &rarr; <strong>API access</strong></li>
@@ -90,7 +90,7 @@
<div class="flex items-center gap-3 mb-6">
<button
type="button"
class="btn btn-outline btn-sm"
class="admin-btn admin-btn-outline admin-btn-sm"
phx-click="test_connection"
disabled={@testing}
>
@@ -127,7 +127,7 @@
do: "Connect to #{provider_label(@provider_type)}",
else: "Save changes"}
</.button>
<.link navigate={~p"/admin/providers"} class="btn btn-ghost">
<.link navigate={~p"/admin/providers"} class="admin-btn admin-btn-ghost">
Cancel
</.link>
</div>

20
lib/simpleshop_theme_web/live/admin/providers/index.html.heex
View File

@@ -1,11 +1,11 @@
<.header>
Providers
<:actions>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-primary">
<div class="admin-dropdown">
<div tabindex="0" role="button" class="admin-btn admin-btn-primary">
<.icon name="hero-plus" class="size-4 mr-1" /> Connect provider
</div>
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box shadow-lg w-52 z-10">
<ul tabindex="0" class="admin-dropdown-content">
<li>
<.link navigate={~p"/admin/providers/new?type=printify"}>Printify</.link>
</li>
@@ -29,7 +29,7 @@
<.button navigate={~p"/admin/providers/new?type=printify"}>
Connect Printify
</.button>
<.button navigate={~p"/admin/providers/new?type=printful"} class="btn-outline">
<.button navigate={~p"/admin/providers/new?type=printful"} class="admin-btn-outline">
Connect Printful
</.button>
</div>
@@ -38,9 +38,9 @@
<div
:for={{dom_id, connection} <- @streams.connections}
id={dom_id}
class="card bg-base-100 shadow-sm border border-base-200"
class="admin-card"
>
<div class="card-body">
<div class="admin-card-body">
<div class="flex items-start justify-between gap-4">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
@@ -58,7 +58,7 @@
<div class="flex items-center gap-2">
<.link
navigate={~p"/admin/providers/#{connection.id}/edit"}
class="btn btn-ghost btn-sm"
class="admin-btn admin-btn-ghost admin-btn-sm"
>
Settings
</.link>
@@ -66,19 +66,19 @@
phx-click="delete"
phx-value-id={connection.id}
data-confirm={"Disconnect from #{String.capitalize(connection.provider_type)}? Your synced products will remain in your shop."}
class="btn btn-ghost btn-sm text-error"
class="admin-btn admin-btn-ghost admin-btn-sm text-error"
>
Disconnect
</button>
</div>
</div>
<div class="card-actions justify-end mt-4 pt-4 border-t border-base-200">
<div class="admin-card-actions">
<button
phx-click="sync"
phx-value-id={connection.id}
disabled={connection.sync_status == "syncing"}
class="btn btn-outline btn-sm"
class="admin-btn admin-btn-outline admin-btn-sm"
>
<.icon
name="hero-arrow-path"

26
lib/simpleshop_theme_web/live/admin/theme/index.html.heex
View File

@@ -219,7 +219,7 @@
max="120"
value={@theme_settings.logo_size}
name="logo_size"
class="range range-xs range-primary w-full"
class="admin-range w-full"
/>
</form>
@@ -235,7 +235,7 @@
phx-value-setting_value={
if @theme_settings.logo_recolor, do: "false", else: "true"
}
class="toggle toggle-sm toggle-primary"
class="admin-toggle admin-toggle-sm"
/>
<span class="text-sm text-base-content/70">Recolour logo</span>
</label>
@@ -277,7 +277,7 @@
phx-value-setting_value={
if @theme_settings.header_background_enabled, do: "false", else: "true"
}
class="toggle toggle-sm toggle-primary"
class="admin-toggle admin-toggle-sm"
/>
<span class="text-sm text-base-content/80">Header background image</span>
</label>
@@ -328,7 +328,7 @@
max="200"
value={@theme_settings.header_zoom}
name="header_zoom"
class="range range-xs range-primary w-full"
class="admin-range w-full"
/>
</form>
<form phx-change="update_setting" phx-value-field="header_position_x">
@@ -346,7 +346,7 @@
max="100"
value={@theme_settings.header_position_x}
name="header_position_x"
class="range range-xs range-primary w-full"
class="admin-range w-full"
/>
</form>
<form phx-change="update_setting" phx-value-field="header_position_y">
@@ -364,7 +364,7 @@
max="100"
value={@theme_settings.header_position_y}
name="header_position_y"
class="range range-xs range-primary w-full"
class="admin-range w-full"
/>
</form>
</div>
@@ -771,7 +771,7 @@
checked={@theme_settings.announcement_bar}
phx-click="toggle_setting"
phx-value-field="announcement_bar"
class="checkbox checkbox-sm"
class="admin-checkbox admin-checkbox-sm"
/>
<span class="text-sm text-base-content">Announcement bar</span>
</label>
@@ -784,7 +784,7 @@
checked={@theme_settings.sticky_header}
phx-click="toggle_setting"
phx-value-field="sticky_header"
class="checkbox checkbox-sm"
class="admin-checkbox admin-checkbox-sm"
/>
<span class="text-sm text-base-content">Sticky header</span>
</label>
@@ -988,7 +988,7 @@
checked={@theme_settings.hover_image}
phx-click="toggle_setting"
phx-value-field="hover_image"
class="checkbox checkbox-sm"
class="admin-checkbox admin-checkbox-sm"
/>
<span class="text-sm text-base-content">Second image on hover</span>
</label>
@@ -1001,7 +1001,7 @@
checked={@theme_settings.show_prices}
phx-click="toggle_setting"
phx-value-field="show_prices"
class="checkbox checkbox-sm"
class="admin-checkbox admin-checkbox-sm"
/>
<span class="text-sm text-base-content">Show prices</span>
</label>
@@ -1031,7 +1031,7 @@
checked={@theme_settings.pdp_trust_badges}
phx-click="toggle_setting"
phx-value-field="pdp_trust_badges"
class="checkbox checkbox-sm"
class="admin-checkbox admin-checkbox-sm"
/>
<span class="text-sm text-base-content">Trust badges</span>
</label>
@@ -1044,7 +1044,7 @@
checked={@theme_settings.pdp_reviews}
phx-click="toggle_setting"
phx-value-field="pdp_reviews"
class="checkbox checkbox-sm"
class="admin-checkbox admin-checkbox-sm"
/>
<span class="text-sm text-base-content">Reviews section</span>
</label>
@@ -1057,7 +1057,7 @@
checked={@theme_settings.pdp_related_products}
phx-click="toggle_setting"
phx-value-field="pdp_related_products"
class="checkbox checkbox-sm"
class="admin-checkbox admin-checkbox-sm"
/>
<span class="text-sm text-base-content">Related products</span>
</label>