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