added support for legacy tickets, fixed switching of modes and also style updates
This commit is contained in:
Mark Gregory
@@ -684,65 +684,11 @@ html.dark .doc-content code {
|
||||
.doc-pagination nav span[aria-disabled="true"] > span { color: #697180 !important; cursor: not-allowed; }
|
||||
.doc-pagination nav svg { width: 1rem; height: 1rem; }
|
||||
|
||||
/* Appearance switch integration. The Documentation module is hosted inside the
|
||||
backend layout, so scope appearance to its module root rather than <body>. */
|
||||
[dusk="documentation-module"] {
|
||||
--doc-ink: #18181b;
|
||||
--doc-muted: #71717a;
|
||||
--doc-line: #e4e4e7;
|
||||
--doc-panel: #ffffff;
|
||||
--doc-soft: #f4f4f5;
|
||||
color: var(--doc-ink);
|
||||
}
|
||||
|
||||
.dark [dusk="documentation-module"] {
|
||||
--doc-ink: #f4f4f5;
|
||||
--doc-muted: #a1a1aa;
|
||||
--doc-line: #3f3f46;
|
||||
--doc-panel: #18181b;
|
||||
--doc-soft: #09090b;
|
||||
}
|
||||
|
||||
:root:not(.dark) [dusk="documentation-module"] .doc-hero {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%);
|
||||
color: #18181b;
|
||||
border-color: #e4e4e7;
|
||||
}
|
||||
:root:not(.dark) [dusk="documentation-module"] .doc-hero h1 { color: #18181b; }
|
||||
:root:not(.dark) [dusk="documentation-module"] .doc-eyebrow { color: #475569; }
|
||||
:root:not(.dark) [dusk="documentation-module"] .doc-hero p { color: #52525b; }
|
||||
|
||||
.dark [dusk="documentation-module"] .doc-hero {
|
||||
background: linear-gradient(135deg, #020617 0%, #0f172a 48%, #172554 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[dusk="documentation-module"] .doc-card,
|
||||
[dusk="documentation-module"] .doc-card-body,
|
||||
[dusk="documentation-module"] .doc-card-header,
|
||||
[dusk="documentation-module"] table,
|
||||
[dusk="documentation-module"] thead,
|
||||
[dusk="documentation-module"] tbody,
|
||||
[dusk="documentation-module"] tr,
|
||||
[dusk="documentation-module"] td,
|
||||
[dusk="documentation-module"] th {
|
||||
color: var(--doc-ink);
|
||||
border-color: var(--doc-line);
|
||||
}
|
||||
[dusk="documentation-module"] .doc-card { background: var(--doc-panel); }
|
||||
[dusk="documentation-module"] .doc-muted { color: var(--doc-muted); }
|
||||
|
||||
.dark [dusk="documentation-module"] input,
|
||||
.dark [dusk="documentation-module"] textarea,
|
||||
.dark [dusk="documentation-module"] select {
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
:root:not(.dark) [dusk="documentation-module"] input,
|
||||
:root:not(.dark) [dusk="documentation-module"] textarea,
|
||||
:root:not(.dark) [dusk="documentation-module"] select {
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
border-color: #d4d4d8;
|
||||
}
|
||||
/* Documentation: professional contrast and strict light/dark mode parity. */
|
||||
html:not(.dark) .documentation-surface,
|
||||
html:not(.dark) [data-documentation-surface] { color:#18181b !important; }
|
||||
html:not(.dark) .documentation-surface :is(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-gray-400,.text-gray-500,.text-gray-600),
|
||||
html:not(.dark) [data-documentation-surface] :is(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-gray-400,.text-gray-500,.text-gray-600) { color:#52525b !important; }
|
||||
html.dark .documentation-surface :is(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-gray-400,.text-gray-500,.text-gray-600),
|
||||
html.dark [data-documentation-surface] :is(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-gray-400,.text-gray-500,.text-gray-600) { color:#a1a1aa !important; }
|
||||
html:not(.dark) .documentation-surface :is(section,article,.card,[class*="rounded"]):not([class*="bg-"]){ color:#27272a; }
|
||||
|
||||
@@ -1440,112 +1440,71 @@ html:not(.dark) .hd-helpdesk-surface {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* ==========================================================================\n Appearance switch integration\n The module stylesheet is loaded after the backend theme, so light-mode\n overrides must live here rather than only in the shared backend stylesheet.\n ========================================================================== */
|
||||
:root:not(.dark) .hd-helpdesk-surface {
|
||||
/* Professional theme contract: readable contrast in both application modes. */
|
||||
html:not(.dark) .hd-helpdesk-surface {
|
||||
color: #18181b !important;
|
||||
}
|
||||
html:not(.dark) .hd-helpdesk-surface :is(.text-zinc-100,.text-zinc-200,.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700,.text-zinc-900) {
|
||||
color: #3f3f46 !important;
|
||||
}
|
||||
html:not(.dark) .hd-helpdesk-surface :is(h1,h2,h3,h4,.font-semibold,.font-bold,.font-black):not(.hd-btn):not([class*="text-white"]) {
|
||||
color: #18181b;
|
||||
}
|
||||
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-zinc-950,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-zinc-900,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-neutral-950,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-neutral-900,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-slate-950,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-slate-900,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-gray-950,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-gray-900,
|
||||
:root:not(.dark) .hd-helpdesk-surface [class*="bg-zinc-950/"],
|
||||
:root:not(.dark) .hd-helpdesk-surface [class*="bg-zinc-900/"],
|
||||
:root:not(.dark) .hd-helpdesk-surface [class*="bg-slate-950/"],
|
||||
:root:not(.dark) .hd-helpdesk-surface [class*="bg-slate-900/"] {
|
||||
background: #ffffff !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-zinc-800,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-neutral-800,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-slate-800,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-gray-800 {
|
||||
background: #f4f4f5 !important;
|
||||
background-color: #f4f4f5 !important;
|
||||
}
|
||||
|
||||
:root:not(.dark) .hd-helpdesk-surface .border-zinc-800,
|
||||
:root:not(.dark) .hd-helpdesk-surface .border-zinc-700,
|
||||
:root:not(.dark) .hd-helpdesk-surface .border-neutral-800,
|
||||
:root:not(.dark) .hd-helpdesk-surface .border-slate-800,
|
||||
:root:not(.dark) .hd-helpdesk-surface .border-gray-800,
|
||||
:root:not(.dark) .hd-helpdesk-surface [class*="border-zinc-700/"],
|
||||
:root:not(.dark) .hd-helpdesk-surface [class*="border-zinc-800/"] {
|
||||
border-color: #e4e4e7 !important;
|
||||
}
|
||||
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-white:not(.hd-btn):not(button),
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-zinc-100,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-zinc-200,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-slate-100,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-slate-200 {
|
||||
color: #18181b !important;
|
||||
}
|
||||
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-zinc-300,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-zinc-400,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-zinc-500,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-slate-300,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-slate-400,
|
||||
:root:not(.dark) .hd-helpdesk-surface .text-slate-500 {
|
||||
color: #71717a !important;
|
||||
}
|
||||
|
||||
/* Hero/header gradients are decorative, but they must also follow appearance. */
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%) !important;
|
||||
color: #18181b !important;
|
||||
border-color: #e4e4e7 !important;
|
||||
}
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-white {
|
||||
color: #18181b !important;
|
||||
}
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-blue-200,
|
||||
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-blue-100 {
|
||||
html:not(.dark) .hd-helpdesk-surface .text-blue-100\/90,
|
||||
html:not(.dark) .hd-helpdesk-surface .text-blue-100,
|
||||
html:not(.dark) .hd-helpdesk-surface .text-blue-200,
|
||||
html:not(.dark) .hd-helpdesk-surface .text-amber-100\/85,
|
||||
html:not(.dark) .hd-helpdesk-surface .text-amber-100,
|
||||
html:not(.dark) .hd-helpdesk-surface .text-amber-200 {
|
||||
color: #475569 !important;
|
||||
}
|
||||
|
||||
/* Native/select2 controls had unconditional dark colours. */
|
||||
:root:not(.dark) .hd-select,
|
||||
:root:not(.dark) .hd-ticket-board-select,
|
||||
:root:not(.dark) .helpdesk-ticket-form input,
|
||||
:root:not(.dark) .helpdesk-ticket-form textarea,
|
||||
:root:not(.dark) .helpdesk-ticket-form select,
|
||||
:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
||||
:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
|
||||
:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection__rendered {
|
||||
background: #ffffff !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #18181b !important;
|
||||
border-color: #d4d4d8 !important;
|
||||
caret-color: #18181b !important;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
|
||||
}
|
||||
:root:not(.dark) .hd-select option,
|
||||
:root:not(.dark) .hd-ticket-board-select option,
|
||||
:root:not(.dark) .select2-dropdown,
|
||||
:root:not(.dark) .select2-search__field,
|
||||
:root:not(.dark) .select2-container--default .select2-results__option {
|
||||
background: #ffffff !important;
|
||||
/* Heroes are light in light mode and intentionally dark in dark mode. */
|
||||
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) {
|
||||
background: linear-gradient(135deg,#ffffff 0%,#f8fafc 55%,#eef4ff 100%) !important;
|
||||
color: #18181b !important;
|
||||
}
|
||||
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) {
|
||||
background: linear-gradient(135deg,#020617 0%,#0f172a 55%,#172554 100%) !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) :is(h1,h2,h3) { color:#18181b !important; }
|
||||
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) p { color:#475569 !important; }
|
||||
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) :is(h1,h2,h3) { color:#f8fafc !important; }
|
||||
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) p { color:#cbd5e1 !important; }
|
||||
|
||||
/* Kanban/list/settings surfaces that use bespoke hard-coded dark rules. */
|
||||
:root:not(.dark) .helpdesk-kanban-column,
|
||||
:root:not(.dark) .hd-core-settings section,
|
||||
:root:not(.dark) .hd-core-settings table,
|
||||
:root:not(.dark) .hd-helpdesk-surface table {
|
||||
background-color: #ffffff !important;
|
||||
color: #18181b !important;
|
||||
/* Search/filter surface follows the switch instead of remaining black. */
|
||||
html:not(.dark) .hd-helpdesk-surface .hd-filter-panel {
|
||||
background:#ffffff !important; border-color:#d4d4d8 !important; color:#18181b !important;
|
||||
}
|
||||
:root:not(.dark) .helpdesk-kanban-column > div:first-child,
|
||||
:root:not(.dark) .hd-helpdesk-surface thead,
|
||||
:root:not(.dark) .hd-core-settings thead {
|
||||
background-color: #f4f4f5 !important;
|
||||
color: #3f3f46 !important;
|
||||
html.dark .hd-helpdesk-surface .hd-filter-panel {
|
||||
background:#18181b !important; border-color:#3f3f46 !important; color:#f4f4f5 !important;
|
||||
}
|
||||
html:not(.dark) .hd-ticket-search,
|
||||
html:not(.dark) .hd-ticket-search-wrap { background:#fff !important; color:#18181b !important; border-color:#cbd5e1 !important; }
|
||||
html:not(.dark) .hd-ticket-search::placeholder { color:#71717a !important; opacity:1; }
|
||||
html:not(.dark) .hd-ticket-search-icon { color:#52525b !important; }
|
||||
html.dark .hd-ticket-search,
|
||||
html.dark .hd-ticket-search-wrap { background:#09090b !important; color:#f4f4f5 !important; border-color:#3f3f46 !important; }
|
||||
html.dark .hd-ticket-search::placeholder { color:#a1a1aa !important; opacity:1; }
|
||||
html.dark .hd-ticket-search-icon { color:#a1a1aa !important; }
|
||||
|
||||
/* Tables: body copy must never fade into its background. */
|
||||
html:not(.dark) .hd-helpdesk-surface table tbody { color:#27272a !important; }
|
||||
html:not(.dark) .hd-helpdesk-surface table tbody :is(.text-zinc-500,.text-zinc-600,.text-zinc-700) { color:#52525b !important; }
|
||||
html:not(.dark) .hd-helpdesk-surface table tbody :is(.font-medium,.font-semibold) { color:#18181b !important; }
|
||||
html.dark .hd-helpdesk-surface table tbody { color:#e4e4e7 !important; }
|
||||
html.dark .hd-helpdesk-surface table tbody :is(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700) { color:#a1a1aa !important; }
|
||||
html.dark .hd-helpdesk-surface table tbody :is(.font-medium,.font-semibold) { color:#f4f4f5 !important; }
|
||||
|
||||
/* Settings navigation cards use dark copy on translucent pastel cards in light mode. */
|
||||
.hd-settings-section-card { border-color:var(--hd-card-border) !important; background:var(--hd-card-bg) !important; }
|
||||
html:not(.dark) .hd-settings-section-card { color:#18181b !important; box-shadow:0 8px 20px rgba(15,23,42,.08) !important; }
|
||||
html:not(.dark) .hd-settings-section-card.is-active { color:#fff !important; background:var(--hd-card-active) !important; }
|
||||
html.dark .hd-settings-section-card { color:#f8fafc !important; }
|
||||
html.dark .hd-settings-section-card.is-active { background:var(--hd-card-active) !important; }
|
||||
.hd-settings-section-card > div:first-child { opacity:.82 !important; }
|
||||
|
||||
/* Muted text remains secondary, but readable. */
|
||||
html:not(.dark) .hd-helpdesk-surface .hd-muted { color:#52525b !important; }
|
||||
html.dark .hd-helpdesk-surface .hd-muted { color:#a1a1aa !important; }
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
<div class="hd-helpdesk-surface hd-mobile-ready space-y-6" dusk="helpdesk-ticket-archive">
|
||||
<section class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-amber-950 px-6 py-7 text-white">
|
||||
<div class="hd-page-hero bg-gradient-to-br from-slate-950 via-slate-900 to-amber-950 px-6 py-7 text-white">
|
||||
<div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-200">Ticket archive</p>
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<section class="hd-filter-panel rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="hd-ticket-search-wrap max-w-2xl">
|
||||
<i class="fa-solid fa-magnifying-glass hd-ticket-search-icon" aria-hidden="true"></i>
|
||||
<input type="search" class="hd-ticket-search" wire:model.live.debounce.350ms="search"
|
||||
|
||||
+4
-13
@@ -77,22 +77,13 @@
|
||||
default => ['border' => '#71717a', 'bg' => 'rgba(63, 63, 70, .22)', 'active' => '#3f3f46'],
|
||||
};
|
||||
|
||||
$sectionStyle =
|
||||
$section === $key
|
||||
? 'border-color: ' .
|
||||
$sectionPalette['border'] .
|
||||
'; background-color: ' .
|
||||
$sectionPalette['active'] .
|
||||
'; color: #ffffff; box-shadow: 0 16px 36px rgba(0,0,0,.32);'
|
||||
: 'border-color: ' .
|
||||
$sectionPalette['border'] .
|
||||
'; background-color: ' .
|
||||
$sectionPalette['bg'] .
|
||||
'; color: #ffffff; box-shadow: 0 10px 24px rgba(0,0,0,.20);';
|
||||
$sectionStyle = '--hd-card-border: ' . $sectionPalette['border'] .
|
||||
'; --hd-card-bg: ' . $sectionPalette['bg'] .
|
||||
'; --hd-card-active: ' . $sectionPalette['active'] . ';';
|
||||
@endphp
|
||||
<a href="{{ route('helpdesk.settings', ['section' => $key]) }}"
|
||||
dusk="helpdesk-settings-section-{{ $key }}"
|
||||
class="hd-settings-section-card rounded-xl border px-3 py-2 text-left shadow-sm transition hover:-translate-y-0.5"
|
||||
class="hd-settings-section-card {{ $section === $key ? 'is-active' : '' }} rounded-xl border px-3 py-2 text-left shadow-sm transition hover:-translate-y-0.5"
|
||||
style="{{ $sectionStyle }}">
|
||||
<div class="text-xs font-semibold uppercase tracking-wide opacity-70">{{ $item['label'] }}</div>
|
||||
<div class="mt-0.5 text-xl font-semibold">{{ $item['count'] }}</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="hd-helpdesk-surface hd-mobile-ready space-y-6" dusk="helpdesk-ticket-index">
|
||||
<div
|
||||
class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
|
||||
<div class="hd-page-hero bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Ticket management</p>
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="hd-filter-panel rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="grid gap-4 md:grid-cols-4">
|
||||
<div class="hd-ticket-search-wrap">
|
||||
<i class="fa-solid fa-magnifying-glass hd-ticket-search-icon" aria-hidden="true"></i>
|
||||
|
||||
Reference in New Issue
Block a user