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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

610
assets/css/admin/components.css Normal file
View File

@ -0,0 +1,610 @@
/* Admin component styles — replaces DaisyUI components.
Uses DaisyUI theme variables (--color-*) which stay until Phase 7. */
/* ── Layout ── */
.admin-layout {
display: grid;
grid-template-columns: 0 1fr;
height: 100%;
}
.admin-layout-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
.admin-layout-content {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
grid-column: 2;
}
.admin-sidebar-wrapper {
grid-column: 1;
grid-row: 1;
z-index: 40;
display: none;
}
/* When checkbox is checked, show sidebar overlay on mobile */
.admin-layout-toggle:checked ~ .admin-sidebar-wrapper {
display: block;
position: fixed;
inset: 0;
z-index: 40;
}
.admin-sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.admin-sidebar {
position: relative;
z-index: 1;
width: 16rem;
min-height: 100%;
display: flex;
flex-direction: column;
background-color: var(--color-base-200);
}
@media (min-width: 64em) {
.admin-layout {
grid-template-columns: 16rem 1fr;
}
.admin-sidebar-wrapper {
display: block;
position: relative;
}
.admin-sidebar-overlay {
display: none;
}
.admin-topbar {
display: none;
}
}
/* ── Top bar (mobile only) ── */
.admin-topbar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background-color: var(--color-base-100);
border-bottom: 1px solid var(--color-base-200);
}
.admin-topbar-title {
flex: 1;
font-size: 1.125rem;
font-weight: 600;
}
/* ── Sidebar nav ── */
.admin-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.125rem;
& li a,
& li button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
text-decoration: none;
color: inherit;
font-size: 0.875rem;
transition: background-color 0.1s;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
&:hover {
background-color: var(--color-base-300);
}
&.active {
background-color: var(--color-base-300);
font-weight: 600;
}
}
}
/* ── Buttons ── */
.admin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
border-radius: 0.375rem;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.1s, opacity 0.1s;
background-color: var(--color-primary);
color: var(--color-primary-content);
&:hover { opacity: 0.85; }
&:disabled { opacity: 0.5; cursor: not-allowed; }
}
.admin-btn-primary {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
.admin-btn-soft {
background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
color: var(--color-primary);
&:hover { background-color: color-mix(in oklch, var(--color-primary) 20%, transparent); opacity: 1; }
}
.admin-btn-ghost {
background: none;
color: inherit;
&:hover { background-color: var(--color-base-200); opacity: 1; }
}
.admin-btn-outline {
background: none;
color: inherit;
border-color: var(--color-base-300);
&:hover { background-color: var(--color-base-200); opacity: 1; }
}
.admin-btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.admin-btn-icon {
padding: 0.5rem;
aspect-ratio: 1;
border-radius: 0.375rem;
}
.admin-btn-icon-round {
padding: 0.25rem;
aspect-ratio: 1;
border-radius: 9999px;
}
/* ── Cards ── */
.admin-card {
background-color: var(--color-base-100);
border: 1px solid var(--color-base-200);
border-radius: 0.5rem;
overflow: hidden;
}
.admin-card-body {
padding: 1rem 1.25rem;
}
.admin-card-title {
font-weight: 600;
margin-bottom: 0.75rem;
}
.admin-card-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
padding-top: 0.75rem;
border-top: 1px solid var(--color-base-200);
margin-top: 0.75rem;
}
/* ── Tables ── */
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
& th {
text-align: left;
padding: 0.5rem 0.75rem;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
border-bottom: 1px solid var(--color-base-200);
}
& td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid color-mix(in oklch, var(--color-base-200) 50%, transparent);
vertical-align: middle;
}
& tbody tr:last-child td {
border-bottom: none;
}
}
.admin-table-zebra tbody tr:nth-child(even) {
background-color: color-mix(in oklch, var(--color-base-200) 30%, transparent);
}
/* ── Forms ── */
.admin-fieldset {
margin-bottom: 0.5rem;
}
.admin-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.admin-input,
.admin-select,
.admin-textarea {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-base-content);
background-color: var(--color-base-100);
border: 1px solid var(--color-base-300);
border-radius: 0.375rem;
transition: border-color 0.15s;
&:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary) 20%, transparent);
}
}
.admin-select {
appearance: auto;
}
.admin-input-error {
border-color: var(--color-error);
&:focus {
border-color: var(--color-error);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-error) 20%, transparent);
}
}
.admin-checkbox {
width: 1rem;
height: 1rem;
accent-color: var(--color-primary);
vertical-align: middle;
cursor: pointer;
}
.admin-checkbox-sm {
width: 0.875rem;
height: 0.875rem;
}
.admin-select-sm,
.admin-input-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
/* ── Toggle ── */
.admin-toggle {
appearance: none;
width: 2.5rem;
height: 1.25rem;
background-color: var(--color-base-300);
border-radius: 9999px;
position: relative;
cursor: pointer;
transition: background-color 0.2s;
vertical-align: middle;
flex-shrink: 0;
&::after {
content: "";
position: absolute;
top: 0.125rem;
left: 0.125rem;
width: 1rem;
height: 1rem;
background: white;
border-radius: 9999px;
transition: transform 0.2s;
}
&:checked {
background-color: var(--color-primary);
}
&:checked::after {
transform: translateX(1.25rem);
}
}
.admin-toggle-sm {
width: 2rem;
height: 1rem;
&::after {
width: 0.75rem;
height: 0.75rem;
}
&:checked::after {
transform: translateX(1rem);
}
}
/* ── Feedback ── */
.admin-toast {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 50;
}
.admin-alert {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
}
.admin-alert-info {
background-color: color-mix(in oklch, var(--color-info) 10%, transparent);
color: var(--color-info);
border: 1px solid color-mix(in oklch, var(--color-info) 25%, transparent);
}
.admin-alert-error {
background-color: color-mix(in oklch, var(--color-error) 10%, transparent);
color: var(--color-error);
border: 1px solid color-mix(in oklch, var(--color-error) 25%, transparent);
}
/* ── Modal ── */
.admin-modal {
border: none;
border-radius: 0.75rem;
padding: 0;
max-width: 32rem;
width: calc(100% - 2rem);
background-color: var(--color-base-100);
color: var(--color-base-content);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
&::backdrop {
background: rgba(0, 0, 0, 0.4);
}
}
.admin-modal-box {
padding: 1.5rem;
position: relative;
}
.admin-modal-close {
position: absolute;
right: 0.5rem;
top: 0.5rem;
}
.admin-modal-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 1.5rem;
}
/* ── Badge ── */
.admin-badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
background-color: var(--color-base-200);
color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}
.admin-badge-sm {
padding: 0 0.375rem;
font-size: 0.625rem;
}
/* ── Dropdown ── */
.admin-dropdown {
position: relative;
display: inline-block;
& .admin-dropdown-content {
display: none;
position: absolute;
right: 0;
top: 100%;
margin-top: 0.25rem;
min-width: 12rem;
background-color: var(--color-base-100);
border: 1px solid var(--color-base-200);
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 50;
padding: 0.25rem;
}
&:focus-within .admin-dropdown-content,
&[open] .admin-dropdown-content {
display: block;
}
}
/* ── Spinner ── */
@keyframes admin-spin {
to { transform: rotate(360deg); }
}
.admin-spinner {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--color-base-300);
border-top-color: var(--color-primary);
border-radius: 9999px;
animation: admin-spin 0.6s linear infinite;
}
/* ── Divider ── */
.admin-divider {
display: flex;
align-items: center;
gap: 1rem;
color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
font-size: 0.75rem;
&::before,
&::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--color-base-300);
}
}
/* ── List ── */
.admin-list {
list-style: none;
padding: 0;
margin: 0;
}
.admin-list-row {
display: flex;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-base-200);
&:last-child { border-bottom: none; }
}
.admin-list-grow {
flex: 1;
}
/* ── Form error text ── */
.admin-error {
color: var(--color-error);
}
/* ── Link ── */
.admin-link {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.125em;
&:hover {
opacity: 0.8;
}
}
/* ── Range ── */
.admin-range {
appearance: none;
width: 100%;
height: 0.375rem;
background-color: var(--color-base-300);
border-radius: 9999px;
cursor: pointer;
vertical-align: middle;
&::-webkit-slider-thumb {
appearance: none;
width: 1rem;
height: 1rem;
background: var(--color-primary);
border-radius: 9999px;
border: 2px solid var(--color-base-100);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
&::-moz-range-thumb {
width: 1rem;
height: 1rem;
background: var(--color-primary);
border-radius: 9999px;
border: 2px solid var(--color-base-100);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
}
/* ── Alert outline ── */
.admin-alert-outline {
background: none;
color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
border: 1px solid var(--color-base-300);
}
/* ── Swap (visibility toggle) ── */
.admin-swap {
position: relative;
display: inline-flex;
& .admin-swap-on,
& .admin-swap-off {
display: none;
}
& .admin-swap-off { display: inline-flex; }
&.active .admin-swap-on { display: inline-flex; }
&.active .admin-swap-off { display: none; }
}

10
assets/css/app.css
View File

@ -10,13 +10,6 @@
The heroicons installation itself is managed by your mix.exs */ The heroicons installation itself is managed by your mix.exs */
@plugin "../vendor/heroicons"; @plugin "../vendor/heroicons";
/* daisyUI Tailwind Plugin. You can update this file by fetching the latest version with:
curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.js
Make sure to look at the daisyUI changelog: https://daisyui.com/docs/changelog/ */
@plugin "../vendor/daisyui" {
themes: false;
}
/* daisyUI theme plugin. You can update this file by fetching the latest version with: /* daisyUI theme plugin. You can update this file by fetching the latest version with:
curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js
We ship with two themes, a light one inspired on Phoenix colors and a dark one inspired We ship with two themes, a light one inspired on Phoenix colors and a dark one inspired
@ -111,7 +104,8 @@
/* Theme CSS - Layer 3: Semantic aliases */ /* Theme CSS - Layer 3: Semantic aliases */
@import "./theme-semantic.css"; @import "./theme-semantic.css";
/* This file is for your main application CSS */ /* Admin component styles (replaces DaisyUI components) */
@import "./admin/components.css";
/* Cart drawer open state styles */ /* Cart drawer open state styles */
.cart-drawer.open { .cart-drawer.open {

1031
assets/vendor/daisyui.js vendored
View File

File diff suppressed because one or more lines are too long

74
lib/simpleshop_theme_web/components/core_components.ex
View File

@ -8,16 +8,7 @@ defmodule SimpleshopThemeWeb.CoreComponents do
with doc strings and declarative assigns. You may customize and style with doc strings and declarative assigns. You may customize and style
them in any way you want, based on your application growth and needs. them in any way you want, based on your application growth and needs.
The foundation for styling is Tailwind CSS, a utility-first CSS framework, Styled with custom admin CSS (`assets/css/admin/components.css`).
augmented with daisyUI, a Tailwind CSS plugin that provides UI components
and themes. Here are useful references:
* [daisyUI](https://daisyui.com/docs/intro/) - a good place to get
started and see the available components.
* [Tailwind CSS](https://tailwindcss.com) - the foundational framework
we build on. You will use it for layout, sizing, flexbox, grid, and
spacing.
* [Heroicons](https://heroicons.com) - see `icon/1` for usage. * [Heroicons](https://heroicons.com) - see `icon/1` for usage.
@ -56,13 +47,13 @@ defmodule SimpleshopThemeWeb.CoreComponents do
id={@id} id={@id}
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")} phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert" role="alert"
class="toast toast-top toast-end z-50" class="admin-toast"
{@rest} {@rest}
> >
<div class={[ <div class={[
"alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap", "admin-alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
@kind == :info && "alert-info", @kind == :info && "admin-alert-info",
@kind == :error && "alert-error" @kind == :error && "admin-alert-error"
]}> ]}>
<.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" /> <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
<.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" /> <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
@ -94,11 +85,11 @@ defmodule SimpleshopThemeWeb.CoreComponents do
slot :inner_block, required: true slot :inner_block, required: true
def button(%{rest: rest} = assigns) do def button(%{rest: rest} = assigns) do
variants = %{"primary" => "btn-primary", nil => "btn-primary btn-soft"} variants = %{"primary" => "admin-btn-primary", nil => "admin-btn-primary admin-btn-soft"}
assigns = assigns =
assign_new(assigns, :class, fn -> assign_new(assigns, :class, fn ->
["btn", Map.fetch!(variants, assigns[:variant])] ["admin-btn", Map.fetch!(variants, assigns[:variant])]
end) end)
if rest[:href] || rest[:navigate] || rest[:patch] do if rest[:href] || rest[:navigate] || rest[:patch] do
@ -185,17 +176,17 @@ defmodule SimpleshopThemeWeb.CoreComponents do
end) end)
~H""" ~H"""
<div class="fieldset mb-2"> <div class="admin-fieldset">
<label> <label>
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} /> <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
<span class="label"> <span class="admin-label">
<input <input
type="checkbox" type="checkbox"
id={@id} id={@id}
name={@name} name={@name}
value="true" value="true"
checked={@checked} checked={@checked}
class={@class || "checkbox checkbox-sm"} class={@class || "admin-checkbox admin-checkbox-sm"}
{@rest} {@rest}
/>{@label} />{@label}
</span> </span>
@ -207,13 +198,13 @@ defmodule SimpleshopThemeWeb.CoreComponents do
def input(%{type: "select"} = assigns) do def input(%{type: "select"} = assigns) do
~H""" ~H"""
<div class="fieldset mb-2"> <div class="admin-fieldset">
<label> <label>
<span :if={@label} class="label mb-1">{@label}</span> <span :if={@label} class="admin-label">{@label}</span>
<select <select
id={@id} id={@id}
name={@name} name={@name}
class={[@class || "w-full select", @errors != [] && (@error_class || "select-error")]} class={[@class || "admin-select", @errors != [] && (@error_class || "admin-input-error")]}
multiple={@multiple} multiple={@multiple}
{@rest} {@rest}
> >
@ -228,15 +219,15 @@ defmodule SimpleshopThemeWeb.CoreComponents do
def input(%{type: "textarea"} = assigns) do def input(%{type: "textarea"} = assigns) do
~H""" ~H"""
<div class="fieldset mb-2"> <div class="admin-fieldset">
<label> <label>
<span :if={@label} class="label mb-1">{@label}</span> <span :if={@label} class="admin-label">{@label}</span>
<textarea <textarea
id={@id} id={@id}
name={@name} name={@name}
class={[ class={[
@class || "w-full textarea", @class || "admin-textarea",
@errors != [] && (@error_class || "textarea-error") @errors != [] && (@error_class || "admin-input-error")
]} ]}
{@rest} {@rest}
>{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea> >{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
@ -249,17 +240,17 @@ defmodule SimpleshopThemeWeb.CoreComponents do
# All other inputs text, datetime-local, url, password, etc. are handled here... # All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do def input(assigns) do
~H""" ~H"""
<div class="fieldset mb-2"> <div class="admin-fieldset">
<label> <label>
<span :if={@label} class="label mb-1">{@label}</span> <span :if={@label} class="admin-label">{@label}</span>
<input <input
type={@type} type={@type}
name={@name} name={@name}
id={@id} id={@id}
value={Phoenix.HTML.Form.normalize_value(@type, @value)} value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[ class={[
@class || "w-full input", @class || "admin-input",
@errors != [] && (@error_class || "input-error") @errors != [] && (@error_class || "admin-input-error")
]} ]}
{@rest} {@rest}
/> />
@ -272,7 +263,7 @@ defmodule SimpleshopThemeWeb.CoreComponents do
# Helper used by inputs to generate form errors # Helper used by inputs to generate form errors
defp error(assigns) do defp error(assigns) do
~H""" ~H"""
<p class="mt-1.5 flex gap-2 items-center text-sm text-error"> <p class="admin-error mt-1.5 flex gap-2 items-center text-sm">
<.icon name="hero-exclamation-circle" class="size-5" /> <.icon name="hero-exclamation-circle" class="size-5" />
{render_slot(@inner_block)} {render_slot(@inner_block)}
</p> </p>
@ -334,7 +325,7 @@ defmodule SimpleshopThemeWeb.CoreComponents do
end end
~H""" ~H"""
<table class="table table-zebra"> <table class="admin-table admin-table-zebra">
<thead> <thead>
<tr> <tr>
<th :for={col <- @col}>{col[:label]}</th> <th :for={col <- @col}>{col[:label]}</th>
@ -381,9 +372,9 @@ defmodule SimpleshopThemeWeb.CoreComponents do
def list(assigns) do def list(assigns) do
~H""" ~H"""
<ul class="list"> <ul class="admin-list">
<li :for={item <- @item} class="list-row"> <li :for={item <- @item} class="admin-list-row">
<div class="list-col-grow"> <div class="admin-list-grow">
<div class="font-bold">{item.title}</div> <div class="font-bold">{item.title}</div>
<div>{render_slot(item)}</div> <div>{render_slot(item)}</div>
</div> </div>
@ -497,14 +488,14 @@ defmodule SimpleshopThemeWeb.CoreComponents do
~H""" ~H"""
<dialog <dialog
id={@id} id={@id}
class="modal" class="admin-modal"
phx-mounted={@show && show_modal(@id)} phx-mounted={@show && show_modal(@id)}
phx-remove={hide_modal(@id)} phx-remove={hide_modal(@id)}
> >
<div class="modal-box max-w-lg"> <div class="admin-modal-box">
<form method="dialog"> <form method="dialog" class="admin-modal-close">
<button <button
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" class="admin-btn admin-btn-ghost admin-btn-icon-round admin-btn-sm"
phx-click={@on_cancel} phx-click={@on_cancel}
aria-label={gettext("close")} aria-label={gettext("close")}
> >
@ -512,13 +503,10 @@ defmodule SimpleshopThemeWeb.CoreComponents do
</button> </button>
</form> </form>
{render_slot(@inner_block)} {render_slot(@inner_block)}
<div :if={@actions != []} class="modal-action"> <div :if={@actions != []} class="admin-modal-actions">
{render_slot(@actions)} {render_slot(@actions)}
</div> </div>
</div> </div>
<form method="dialog" class="modal-backdrop">
<button phx-click={@on_cancel}>close</button>
</form>
</dialog> </dialog>
""" """
end end

42
lib/simpleshop_theme_web/components/layouts/admin.html.heex
View File

@ -1,23 +1,21 @@
<div class="drawer lg:drawer-open h-full"> <div class="admin-layout h-full">
<input id="admin-drawer" type="checkbox" class="drawer-toggle" /> <input id="admin-drawer" type="checkbox" class="admin-layout-toggle" />
<%!-- main content area --%> <%!-- main content area --%>
<div class="drawer-content flex flex-col min-h-screen"> <div class="admin-layout-content">
<%!-- mobile header --%> <%!-- mobile header --%>
<header class="navbar bg-base-100 border-b border-base-200 lg:hidden"> <header class="admin-topbar">
<div class="flex-none"> <label
<label for="admin-drawer" class="btn btn-square btn-ghost" aria-label="Open navigation"> for="admin-drawer"
<.icon name="hero-bars-3" class="size-5" /> class="admin-btn admin-btn-ghost admin-btn-icon"
</label> aria-label="Open navigation"
</div> >
<div class="flex-1"> <.icon name="hero-bars-3" class="size-5" />
<span class="text-lg font-semibold">SimpleShop</span> </label>
</div> <span class="admin-topbar-title">SimpleShop</span>
<div class="flex-none"> <.link href={~p"/"} class="admin-btn admin-btn-ghost admin-btn-sm">
<.link href={~p"/"} class="btn btn-ghost btn-sm"> <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> Shop
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> Shop </.link>
</.link>
</div>
</header> </header>
<%!-- page content --%> <%!-- page content --%>
@ -29,9 +27,9 @@
</div> </div>
<%!-- sidebar --%> <%!-- sidebar --%>
<div class="drawer-side z-40"> <div class="admin-sidebar-wrapper">
<label for="admin-drawer" class="drawer-overlay" aria-label="Close navigation"></label> <label for="admin-drawer" class="admin-sidebar-overlay" aria-label="Close navigation"></label>
<aside class="bg-base-200 w-64 min-h-full flex flex-col"> <aside class="admin-sidebar">
<%!-- sidebar header --%> <%!-- sidebar header --%>
<div class="p-4 border-b border-base-300"> <div class="p-4 border-b border-base-300">
<.link navigate={~p"/admin"} class="text-lg font-bold tracking-tight"> <.link navigate={~p"/admin"} class="text-lg font-bold tracking-tight">
@ -44,7 +42,7 @@
<%!-- nav links --%> <%!-- nav links --%>
<nav class="flex-1 p-2" aria-label="Admin navigation"> <nav class="flex-1 p-2" aria-label="Admin navigation">
<ul class="menu gap-0.5"> <ul class="admin-nav">
<li> <li>
<.link <.link
navigate={~p"/admin"} navigate={~p"/admin"}
@ -90,7 +88,7 @@
<%!-- sidebar footer --%> <%!-- sidebar footer --%>
<div class="p-2 border-t border-base-300"> <div class="p-2 border-t border-base-300">
<ul class="menu gap-0.5"> <ul class="admin-nav">
<li> <li>
<.link href={~p"/"}> <.link href={~p"/"}>
<.icon name="hero-arrow-top-right-on-square" class="size-5" /> View shop <.icon name="hero-arrow-top-right-on-square" class="size-5" /> View shop

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"> <div class="grid gap-6 mt-6 lg:grid-cols-2">
<%!-- order info --%> <%!-- order info --%>
<div class="card bg-base-100 shadow-sm border border-base-200"> <div class="admin-card">
<div class="card-body"> <div class="admin-card-body">
<h3 class="card-title text-base">Order details</h3> <h3 class="admin-card-title">Order details</h3>
<.list> <.list>
<:item title="Date">{format_date(@order.inserted_at)}</:item> <:item title="Date">{format_date(@order.inserted_at)}</:item>
<:item title="Customer">{@order.customer_email || "—"}</:item> <:item title="Customer">{@order.customer_email || "—"}</:item>
@ -61,9 +61,9 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</div> </div>
<%!-- shipping address --%> <%!-- shipping address --%>
<div class="card bg-base-100 shadow-sm border border-base-200"> <div class="admin-card">
<div class="card-body"> <div class="admin-card-body">
<h3 class="card-title text-base">Shipping address</h3> <h3 class="admin-card-title">Shipping address</h3>
<%= if @order.shipping_address != %{} do %> <%= if @order.shipping_address != %{} do %>
<.list> <.list>
<:item :if={@order.shipping_address["name"]} title="Name"> <:item :if={@order.shipping_address["name"]} title="Name">
@ -96,10 +96,10 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</div> </div>
<%!-- fulfilment --%> <%!-- fulfilment --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6"> <div class="admin-card mt-6">
<div class="card-body"> <div class="admin-card-body">
<div class="flex items-center justify-between"> <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} /> <.fulfilment_badge status={@order.fulfilment_status} />
</div> </div>
<.list> <.list>
@ -114,7 +114,7 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</:item> </:item>
<:item :if={@order.tracking_number} title="Tracking"> <:item :if={@order.tracking_number} title="Tracking">
<%= if @order.tracking_url do %> <%= 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} {@order.tracking_number}
</a> </a>
<% else %> <% else %>
@ -135,7 +135,7 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
<button <button
:if={can_submit?(@order)} :if={can_submit?(@order)}
phx-click="submit_to_provider" 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" /> <.icon name="hero-paper-airplane-mini" class="size-4" />
{if @order.fulfilment_status == "failed", {if @order.fulfilment_status == "failed",
@ -145,7 +145,7 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
<button <button
:if={can_refresh?(@order)} :if={can_refresh?(@order)}
phx-click="refresh_status" 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 <.icon name="hero-arrow-path-mini" class="size-4" /> Refresh status
</button> </button>
@ -154,10 +154,10 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
</div> </div>
<%!-- line items --%> <%!-- line items --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6"> <div class="admin-card mt-6">
<div class="card-body"> <div class="admin-card-body">
<h3 class="card-title text-base">Items</h3> <h3 class="admin-card-title">Items</h3>
<table class="table table-zebra"> <table class="admin-table admin-table-zebra">
<thead> <thead>
<tr> <tr>
<th>Product</th> <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-click="filter"
phx-value-status={@status} phx-value-status={@status}
class={[ class={[
"btn btn-sm", "admin-btn admin-btn-sm",
@active && "btn-primary", @active && "admin-btn-primary",
!@active && "btn-ghost" !@active && "admin-btn-ghost"
]} ]}
> >
{@label} {@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> </button>
""" """
end 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)} href={provider_edit_url(@product)}
target="_blank" target="_blank"
rel="noopener" rel="noopener"
class="btn btn-ghost btn-sm" class="admin-btn admin-btn-ghost admin-btn-sm"
> >
Edit on {provider_label(@product)} Edit on {provider_label(@product)}
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" />
</.link> </.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" /> View on shop <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" />
</.link> </.link>
</:actions> </:actions>
@ -136,9 +139,9 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
<p :if={@product.images == []} class="text-base-content/40 text-sm">No images</p> <p :if={@product.images == []} class="text-base-content/40 text-sm">No images</p>
</div> </div>
<div class="card bg-base-100 shadow-sm border border-base-200"> <div class="admin-card">
<div class="card-body"> <div class="admin-card-body">
<h3 class="card-title text-base">Details</h3> <h3 class="admin-card-title">Details</h3>
<.list> <.list>
<:item :if={@product.provider_connection} title="Provider"> <:item :if={@product.provider_connection} title="Provider">
{provider_label(@product)} via {@product.provider_connection.name} {provider_label(@product)} via {@product.provider_connection.name}
@ -161,19 +164,19 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
<%!-- storefront controls --%> <%!-- storefront controls --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6"> <div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
<div class="card-body"> <div class="admin-card-body">
<h3 class="card-title text-base">Storefront controls</h3> <h3 class="admin-card-title">Storefront controls</h3>
<.form <.form
for={@form} for={@form}
phx-submit="save_storefront" phx-submit="save_storefront"
phx-change="validate_storefront" phx-change="validate_storefront"
class="flex flex-wrap gap-4 items-end" class="flex flex-wrap gap-4 items-end"
> >
<label class="form-control w-auto"> <label class="w-auto">
<span class="label-text text-xs mb-0.5">Visibility</span> <span class="text-xs mb-0.5">Visibility</span>
<select <select
name="product[visible]" name="product[visible]"
class="select select-bordered select-sm" class="admin-select admin-select-sm"
aria-label="Visibility" aria-label="Visibility"
> >
<option <option
@ -190,25 +193,25 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
</option> </option>
</select> </select>
</label> </label>
<label class="form-control w-auto flex-1 min-w-48"> <label class="w-auto flex-1 min-w-48">
<span class="label-text text-xs mb-0.5">Category</span> <span class="text-xs mb-0.5">Category</span>
<input <input
type="text" type="text"
name="product[category]" name="product[category]"
value={@form[:category].value} value={@form[:category].value}
class="input input-bordered input-sm" class="admin-input admin-input-sm"
placeholder="e.g. Apparel" placeholder="e.g. Apparel"
/> />
</label> </label>
<.button type="submit" class="btn-sm btn-primary">Save</.button> <.button type="submit" class="admin-btn-sm admin-btn-primary">Save</.button>
</.form> </.form>
</div> </div>
</div> </div>
<%!-- variants --%> <%!-- variants --%>
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6"> <div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
<div class="card-body"> <div class="admin-card-body">
<h3 class="card-title text-base">Variants ({length(@product.variants)})</h3> <h3 class="admin-card-title">Variants ({length(@product.variants)})</h3>
<.table id="variants" rows={@product.variants}> <.table id="variants" rows={@product.variants}>
<:col :let={variant} label="Options">{ProductVariant.options_title(variant)}</:col> <:col :let={variant} label="Options">{ProductVariant.options_title(variant)}</:col>
<:col :let={variant} label="SKU">{variant.sku || "—"}</:col> <:col :let={variant} label="SKU">{variant.sku || "—"}</:col>
@ -242,8 +245,8 @@ defmodule SimpleshopThemeWeb.Admin.ProductShow do
:if={@product.provider_connection} :if={@product.provider_connection}
class="card bg-base-100 shadow-sm border border-base-200 mt-6" class="card bg-base-100 shadow-sm border border-base-200 mt-6"
> >
<div class="card-body"> <div class="admin-card-body">
<h3 class="card-title text-base">Provider data</h3> <h3 class="admin-card-title">Provider data</h3>
<.list> <.list>
<:item title="Provider"> <:item title="Provider">
{provider_label(@product)} via {@product.provider_connection.name} {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> <:item title="Sync status">{@product.provider_connection.sync_status}</:item>
</.list> </.list>
<div class="mt-4"> <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 <.icon name="hero-arrow-path" class="size-4" /> Re-sync
</button> </button>
</div> </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-pressed={to_string(product.visible)}
aria-label={"Toggle visibility for #{product.title}"} aria-label={"Toggle visibility for #{product.title}"}
class={[ 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-green-600",
!product.visible && "text-base-content/30" !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" /> <.icon name="hero-cube" class="size-12 mx-auto mb-4" />
<p class="text-lg font-medium">No products yet</p> <p class="text-lg font-medium">No products yet</p>
<p class="text-sm mt-1"> <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 Connect a provider
</.link> </.link>
to sync your products. to sync your products.
@ -196,9 +196,9 @@ defmodule SimpleshopThemeWeb.Admin.Products do
defp filter_select(assigns) do defp filter_select(assigns) do
~H""" ~H"""
<label class="form-control w-auto"> <label class="w-auto">
<span class="label-text text-xs mb-0.5">{@label}</span> <span class="text-xs mb-0.5">{@label}</span>
<select name={@name} class="select select-bordered select-sm" aria-label={@label}> <select name={@name} class="admin-select admin-select-sm" aria-label={@label}>
<option :for={{label, value} <- @options} value={value} selected={value == @value}> <option :for={{label, value} <- @options} value={value} selected={value == @value}>
{label} {label}
</option> </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" href="https://printify.com/app/auth/login"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
class="link" class="admin-link"
> >
Log in to Printify Log in to Printify
</a> </a>
@ -30,7 +30,7 @@
href="https://printify.com/app/auth/register" href="https://printify.com/app/auth/register"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
class="link" class="admin-link"
>create a free account</a>) >create a free account</a>)
</li> </li>
<li>Click <strong>Account</strong> (top right)</li> <li>Click <strong>Account</strong> (top right)</li>
@ -52,7 +52,7 @@
href="https://www.printful.com/auth/login" href="https://www.printful.com/auth/login"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
class="link" class="admin-link"
> >
Log in to Printful Log in to Printful
</a> </a>
@ -60,7 +60,7 @@
href="https://www.printful.com/auth/signup" href="https://www.printful.com/auth/signup"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
class="link" class="admin-link"
>create a free account</a>) >create a free account</a>)
</li> </li>
<li>Go to <strong>Settings</strong> &rarr; <strong>API access</strong></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"> <div class="flex items-center gap-3 mb-6">
<button <button
type="button" type="button"
class="btn btn-outline btn-sm" class="admin-btn admin-btn-outline admin-btn-sm"
phx-click="test_connection" phx-click="test_connection"
disabled={@testing} disabled={@testing}
> >
@ -127,7 +127,7 @@
do: "Connect to #{provider_label(@provider_type)}", do: "Connect to #{provider_label(@provider_type)}",
else: "Save changes"} else: "Save changes"}
</.button> </.button>
<.link navigate={~p"/admin/providers"} class="btn btn-ghost"> <.link navigate={~p"/admin/providers"} class="admin-btn admin-btn-ghost">
Cancel Cancel
</.link> </.link>
</div> </div>

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

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

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

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

12
lib/simpleshop_theme_web/live/auth/confirmation.ex
View File

@ -26,11 +26,11 @@ defmodule SimpleshopThemeWeb.Auth.Confirmation do
name={@form[:remember_me].name} name={@form[:remember_me].name}
value="true" value="true"
phx-disable-with="Confirming..." phx-disable-with="Confirming..."
class="btn btn-primary w-full" class="admin-btn-primary w-full"
> >
Confirm and stay logged in Confirm and stay logged in
</.button> </.button>
<.button phx-disable-with="Confirming..." class="btn btn-primary btn-soft w-full mt-2"> <.button phx-disable-with="Confirming..." class="admin-btn-soft w-full mt-2">
Confirm and log in only this time Confirm and log in only this time
</.button> </.button>
</.form> </.form>
@ -46,7 +46,7 @@ defmodule SimpleshopThemeWeb.Auth.Confirmation do
> >
<input type="hidden" name={@form[:token].name} value={@form[:token].value} /> <input type="hidden" name={@form[:token].name} value={@form[:token].value} />
<%= if @current_scope do %> <%= if @current_scope do %>
<.button phx-disable-with="Logging in..." class="btn btn-primary w-full"> <.button phx-disable-with="Logging in..." class="admin-btn-primary w-full">
Log in Log in
</.button> </.button>
<% else %> <% else %>
@ -54,17 +54,17 @@ defmodule SimpleshopThemeWeb.Auth.Confirmation do
name={@form[:remember_me].name} name={@form[:remember_me].name}
value="true" value="true"
phx-disable-with="Logging in..." phx-disable-with="Logging in..."
class="btn btn-primary w-full" class="admin-btn-primary w-full"
> >
Keep me logged in on this device Keep me logged in on this device
</.button> </.button>
<.button phx-disable-with="Logging in..." class="btn btn-primary btn-soft w-full mt-2"> <.button phx-disable-with="Logging in..." class="admin-btn-soft w-full mt-2">
Log me in only this time Log me in only this time
</.button> </.button>
<% end %> <% end %>
</.form> </.form>
<p :if={!@user.confirmed_at} class="alert alert-outline mt-8"> <p :if={!@user.confirmed_at} class="admin-alert admin-alert-outline mt-8">
Tip: If you prefer passwords, you can enable them in the user settings. Tip: If you prefer passwords, you can enable them in the user settings.
</p> </p>
</div> </div>

10
lib/simpleshop_theme_web/live/auth/login.ex
View File

@ -25,7 +25,7 @@ defmodule SimpleshopThemeWeb.Auth.Login do
</.header> </.header>
</div> </div>
<div :if={local_mail_adapter?()} class="alert alert-info"> <div :if={local_mail_adapter?()} class="admin-alert admin-alert-info">
<.icon name="hero-information-circle" class="size-6 shrink-0" /> <.icon name="hero-information-circle" class="size-6 shrink-0" />
<div> <div>
<p>You are running the local mail adapter.</p> <p>You are running the local mail adapter.</p>
@ -51,12 +51,12 @@ defmodule SimpleshopThemeWeb.Auth.Login do
required required
phx-mounted={JS.focus()} phx-mounted={JS.focus()}
/> />
<.button class="btn btn-primary w-full"> <.button class="admin-btn-primary w-full">
Log in with email <span aria-hidden="true">→</span> Log in with email <span aria-hidden="true">→</span>
</.button> </.button>
</.form> </.form>
<div class="divider">or</div> <div class="admin-divider">or</div>
<.form <.form
:let={f} :let={f}
@ -80,10 +80,10 @@ defmodule SimpleshopThemeWeb.Auth.Login do
label="Password" label="Password"
autocomplete="current-password" autocomplete="current-password"
/> />
<.button class="btn btn-primary w-full" name={@form[:remember_me].name} value="true"> <.button class="admin-btn-primary w-full" name={@form[:remember_me].name} value="true">
Log in and stay logged in <span aria-hidden="true">→</span> Log in and stay logged in <span aria-hidden="true">→</span>
</.button> </.button>
<.button class="btn btn-primary btn-soft w-full mt-2"> <.button class="admin-btn-soft w-full mt-2">
Log in only this time Log in only this time
</.button> </.button>
</.form> </.form>

2
lib/simpleshop_theme_web/live/auth/registration.ex
View File

@ -32,7 +32,7 @@ defmodule SimpleshopThemeWeb.Auth.Registration do
phx-mounted={JS.focus()} phx-mounted={JS.focus()}
/> />
<.button phx-disable-with="Creating account..." class="btn btn-primary w-full"> <.button phx-disable-with="Creating account..." class="admin-btn-primary w-full">
Create an account Create an account
</.button> </.button>
</.form> </.form>