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

fix dark mode in admin pages

Browse Source 
Replace hardcoded zinc/white Tailwind colors with DaisyUI semantic
colors (base-content, base-200, etc.) that adapt to light/dark themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-12 22:55:34 +00:00
parent 2fb88df853
commit 0b4fe031b7
3 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -262,10 +262,12 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
{"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
"cancelled" ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-no-symbol-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-no-symbol-mini"}
_ ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-minus-circle-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-minus-circle-mini"}
end
assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
@ -295,10 +297,12 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
{"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
"refunded" ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-arrow-uturn-left-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-arrow-uturn-left-mini"}
_ ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-question-mark-circle-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-question-mark-circle-mini"}
end
assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)

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

@ -133,10 +133,12 @@ defmodule SimpleshopThemeWeb.Admin.Orders do
{"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
"refunded" ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-arrow-uturn-left-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-arrow-uturn-left-mini"}
_ ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-question-mark-circle-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-question-mark-circle-mini"}
end
assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
@ -176,10 +178,12 @@ defmodule SimpleshopThemeWeb.Admin.Orders do
{"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
"cancelled" ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-no-symbol-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-no-symbol-mini"}
_ ->
{"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-minus-circle-mini"}
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
"hero-minus-circle-mini"}
end
assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)

67
lib/simpleshop_theme_web/live/admin/settings.ex
View File

@ -275,7 +275,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
<.status_pill color="zinc">Offline</.status_pill>
<% end %>
</div>
<p class="mt-2 text-sm text-zinc-600">
<p class="mt-2 text-sm text-base-content/60">
<%= if @site_live do %>
Your shop is visible to the public.
<% else %>
@ -288,7 +288,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
class={[
"inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold shadow-xs",
if(@site_live,
do: "bg-zinc-100 text-zinc-700 hover:bg-zinc-200 ring-1 ring-zinc-300 ring-inset",
do: "bg-base-200 text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset",
else: "bg-green-600 text-white hover:bg-green-500"
)
]}
@ -352,13 +352,13 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
<.printify_connected printify={@printify} />
<% else %>
<div class="mt-4">
<p class="text-sm text-zinc-600">
<p class="text-sm text-base-content/60">
Connect a print-on-demand provider to import products into your shop.
</p>
<div class="mt-4">
<.link
navigate={~p"/admin/providers/new"}
class="inline-flex items-center gap-2 rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-zinc-700"
class="inline-flex items-center gap-2 rounded-md bg-base-content px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-base-content/80"
>
<.icon name="hero-plus-mini" class="size-4" /> Connect to Printify
</.link>
@ -390,7 +390,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
</div>
</.form>
<div class="border-t border-zinc-200 pt-6">
<div class="border-t border-base-200 pt-6">
<.form
for={@password_form}
id="password_form"
@ -433,10 +433,13 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
<h2 class="text-lg font-semibold">Advanced</h2>
<div class="mt-4 flex flex-col gap-2">
<.link href={~p"/admin/dashboard"} class="text-sm text-zinc-600 hover:text-zinc-900">
<.link
href={~p"/admin/dashboard"}
class="text-sm text-base-content/60 hover:text-base-content"
>
<.icon name="hero-chart-bar" class="size-4 inline" /> System dashboard
</.link>
<.link href={~p"/admin/errors"} class="text-sm text-zinc-600 hover:text-zinc-900">
<.link href={~p"/admin/errors"} class="text-sm text-base-content/60 hover:text-base-content">
<.icon name="hero-bug-ant" class="size-4 inline" /> Error tracker
</.link>
</div>
@ -455,8 +458,8 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
case assigns.color do
"green" -> "bg-green-50 text-green-700 ring-green-600/20"
"amber" -> "bg-amber-50 text-amber-700 ring-amber-600/20"
"zinc" -> "bg-zinc-50 text-zinc-600 ring-zinc-500/10"
_ -> "bg-zinc-50 text-zinc-600 ring-zinc-500/10"
"zinc" -> "bg-base-200/50 text-base-content/60 ring-base-content/10"
_ -> "bg-base-200/50 text-base-content/60 ring-base-content/10"
end
assigns = assign(assigns, :classes, classes)
@ -486,20 +489,20 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
<div class="mt-4">
<dl class="text-sm">
<div class="flex gap-2 py-1">
<dt class="text-zinc-500 w-28 shrink-0">Provider</dt>
<dd class="text-zinc-700">Printify</dd>
<dt class="text-base-content/60 w-28 shrink-0">Provider</dt>
<dd class="text-base-content">Printify</dd>
</div>
<div class="flex gap-2 py-1">
<dt class="text-zinc-500 w-28 shrink-0">Shop</dt>
<dd class="text-zinc-700">{@connection.name}</dd>
<dt class="text-base-content/60 w-28 shrink-0">Shop</dt>
<dd class="text-base-content">{@connection.name}</dd>
</div>
<div class="flex gap-2 py-1">
<dt class="text-zinc-500 w-28 shrink-0">Products</dt>
<dd class="text-zinc-700">{@product_count}</dd>
<dt class="text-base-content/60 w-28 shrink-0">Products</dt>
<dd class="text-base-content">{@product_count}</dd>
</div>
<div class="flex gap-2 py-1">
<dt class="text-zinc-500 w-28 shrink-0">Last synced</dt>
<dd class="text-zinc-700">
<dt class="text-base-content/60 w-28 shrink-0">Last synced</dt>
<dd class="text-base-content">
<%= if @connection.last_synced_at do %>
{format_relative_time(@connection.last_synced_at)}
<% else %>
@ -514,7 +517,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
phx-click="sync"
phx-value-id={@connection.id}
disabled={@syncing}
class="inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-200 ring-1 ring-zinc-300 ring-inset"
class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-1.5 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
>
<.icon
name="hero-arrow-path"
@ -524,7 +527,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
</button>
<.link
navigate={~p"/admin/providers/#{@connection.id}/edit"}
class="inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-200 ring-1 ring-zinc-300 ring-inset"
class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-1.5 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
>
<.icon name="hero-cog-6-tooth" class="size-4" /> Settings
</.link>
@ -544,14 +547,14 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
defp stripe_setup_form(assigns) do
~H"""
<div class="mt-4">
<p class="text-sm text-zinc-600">
<p class="text-sm text-base-content/60">
To accept payments, connect your Stripe account by entering your secret key.
You can find it in your
<a
href="https://dashboard.stripe.com/apikeys"
target="_blank"
rel="noopener"
class="text-zinc-900 underline"
class="text-base-content underline"
>
Stripe dashboard
</a>
@ -566,7 +569,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
autocomplete="off"
placeholder="sk_test_... or sk_live_..."
/>
<p class="text-xs text-zinc-500 mt-1">
<p class="text-xs text-base-content/60 mt-1">
Starts with <code>sk_test_</code> (test mode) or <code>sk_live_</code> (live mode).
This key is encrypted at rest in the database.
</p>
@ -585,18 +588,18 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
<div class="mt-4 space-y-4">
<dl class="text-sm">
<div class="flex gap-2 py-1">
<dt class="text-zinc-500 w-28 shrink-0">API key</dt>
<dd><code class="text-zinc-700">{@stripe_api_key_hint}</code></dd>
<dt class="text-base-content/60 w-28 shrink-0">API key</dt>
<dd><code class="text-base-content">{@stripe_api_key_hint}</code></dd>
</div>
<div class="flex gap-2 py-1">
<dt class="text-zinc-500 w-28 shrink-0">Webhook URL</dt>
<dd><code class="text-zinc-700 text-xs break-all">{@stripe_webhook_url}</code></dd>
<dt class="text-base-content/60 w-28 shrink-0">Webhook URL</dt>
<dd><code class="text-base-content text-xs break-all">{@stripe_webhook_url}</code></dd>
</div>
<div class="flex gap-2 py-1">
<dt class="text-zinc-500 w-28 shrink-0">Webhook secret</dt>
<dt class="text-base-content/60 w-28 shrink-0">Webhook secret</dt>
<dd>
<%= if @stripe_has_signing_secret do %>
<code class="text-zinc-700">{@stripe_signing_secret_hint}</code>
<code class="text-base-content">{@stripe_signing_secret_hint}</code>
<% else %>
<span class="text-amber-600">Not set</span>
<% end %>
@ -628,10 +631,10 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
</div>
</.form>
<% else %>
<div class="border-t border-zinc-200 pt-3">
<div class="border-t border-base-200 pt-3">
<button
phx-click="toggle_stripe_advanced"
class="flex items-center gap-1 text-sm text-zinc-500 hover:text-zinc-700"
class="flex items-center gap-1 text-sm text-base-content/60 hover:text-base-content"
>
<.icon
name={if @advanced_open, do: "hero-chevron-down-mini", else: "hero-chevron-right-mini"}
@ -641,7 +644,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
<%= if @advanced_open do %>
<div class="mt-3">
<p class="text-xs text-zinc-500 mb-3">
<p class="text-xs text-base-content/60 mb-3">
Override the webhook signing secret if you need to use a custom endpoint or the Stripe CLI.
</p>
<.form for={@secret_form} phx-submit="save_signing_secret">
@ -661,7 +664,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
</div>
<% end %>
<div class="border-t border-zinc-200 pt-4">
<div class="border-t border-base-200 pt-4">
<button
phx-click="disconnect_stripe"
data-confirm="This will remove your Stripe API key and delete the webhook endpoint. Are you sure?"