From afa2ee472e1ceda0b11323563f72cc751d50ca0e Mon Sep 17 00:00:00 2001 From: Mark Gregory Date: Mon, 28 Sep 2026 15:40:20 +0100 Subject: [PATCH] added support for legacy tickets, fixed switching of modes and also style updates --- .../Resources/assets/css/app.css | 70 +------- Modules/Helpdesk/Resources/assets/css/app.css | 157 +++++++----------- .../livewire/archived-ticket-index.blade.php | 4 +- .../livewire/settings-manager.blade.php | 17 +- .../helpdesk/livewire/ticket-index.blade.php | 4 +- 5 files changed, 74 insertions(+), 178 deletions(-) diff --git a/Modules/Documentation/Resources/assets/css/app.css b/Modules/Documentation/Resources/assets/css/app.css index 5bdc5d1..01e8cb3 100644 --- a/Modules/Documentation/Resources/assets/css/app.css +++ b/Modules/Documentation/Resources/assets/css/app.css @@ -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 . */ -[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; } diff --git a/Modules/Helpdesk/Resources/assets/css/app.css b/Modules/Helpdesk/Resources/assets/css/app.css index c36b886..e4f9397 100755 --- a/Modules/Helpdesk/Resources/assets/css/app.css +++ b/Modules/Helpdesk/Resources/assets/css/app.css @@ -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; } diff --git a/resources/themes/backend/views/modules/helpdesk/livewire/archived-ticket-index.blade.php b/resources/themes/backend/views/modules/helpdesk/livewire/archived-ticket-index.blade.php index 612e39d..7448ab2 100755 --- a/resources/themes/backend/views/modules/helpdesk/livewire/archived-ticket-index.blade.php +++ b/resources/themes/backend/views/modules/helpdesk/livewire/archived-ticket-index.blade.php @@ -1,6 +1,6 @@
-
+

Ticket archive

@@ -16,7 +16,7 @@
-
+
['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
{{ $item['label'] }}
{{ $item['count'] }}
diff --git a/resources/themes/backend/views/modules/helpdesk/livewire/ticket-index.blade.php b/resources/themes/backend/views/modules/helpdesk/livewire/ticket-index.blade.php index 3c7331b..88ab9f8 100755 --- a/resources/themes/backend/views/modules/helpdesk/livewire/ticket-index.blade.php +++ b/resources/themes/backend/views/modules/helpdesk/livewire/ticket-index.blade.php @@ -1,7 +1,7 @@
-
+

Ticket management

@@ -27,7 +27,7 @@
-
+