From 0cdb98d9694725827f7060b6bec6b09bd078b412 Mon Sep 17 00:00:00 2001 From: Aditya Tripathi Date: Tue, 8 Sep 2026 01:30:20 +0000 Subject: [PATCH] fix(ui): use dropdown-level shadow for popovers and floating menus Replace inline modal-shadow styles on toasts, popups, and warning banners with a shared `surface-popover` utility that uses the lighter dropdown shadow instead of the heavier modal shadow. Apply the same `shadow-dropdown` swap to the deployments indicator pill and the server/deployment log floating menus. Remove now-unused console header and error-contact-link rules from app.css, and add a test asserting these surfaces consistently use the dropdown shadow. --- resources/css/app.css | 149 +----------------- resources/css/utilities.css | 8 + .../configuration-warning.blade.php | 3 +- .../views/components/popup-small.blade.php | 8 +- .../proxy-configuration-warning.blade.php | 3 +- resources/views/components/toast.blade.php | 3 +- .../livewire/deployments-indicator.blade.php | 6 +- .../application/deployment/show.blade.php | 2 +- .../views/livewire/server/show.blade.php | 2 +- tests/Unit/ShadowConsistencyTest.php | 57 +++++++ 10 files changed, 79 insertions(+), 162 deletions(-) create mode 100644 tests/Unit/ShadowConsistencyTest.php diff --git a/resources/css/app.css b/resources/css/app.css index 6efbde121..a6b194454 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -563,14 +563,6 @@ .terminal-fullscreen-shell[data-console-theme="system"] { --console-theme-opacity: 1; } -html:not(.dark) .application-console-shell[data-console-theme="system"] .application-console-header { - background: transparent; - color: #52525b; - border-color: rgb(0 0 0 / 0.1); - backdrop-filter: none; -} - -html:not(.dark) .application-console-shell[data-console-theme="system"] .application-console-header [class*="text-white"], /* Session toolbar (selected-target trigger + label) sits over the white system console in light mode. Without this its text-white/* stayed white on white and the selected server was invisible (issue #11532). */ @@ -789,13 +781,6 @@ body.terminal-is-fullscreen .terminal-fullscreen-shell [data-terminal-mobile-too touch-action: manipulation; } -.application-console-header { - position: relative; - z-index: 2; - background: rgb(0 0 0 / 0.24); - backdrop-filter: blur(20px); -} - /* Session header band: an attached card-style header on top of the console, mirroring the page card header (elevated surface + hairline divider). The System theme uses the neutral card surface in both modes; colorful themes @@ -1601,27 +1586,6 @@ .error-actions { margin-top: 1.75rem; } -.error-contact-link { - display: inline-flex; - align-items: center; - gap: 0.25rem; - margin-left: 0.25rem; - font-size: 0.8125rem; - font-weight: 500; - color: #525252; - text-underline-offset: 3px; - transition: color 0.15s ease; -} - -.dark .error-contact-link { - color: var(--color-fg-dim); -} - -.error-contact-link:hover { - color: var(--color-accent); - text-decoration: underline; -} - /* Layer card root: elevated shell with a hairline ring. overflow stays visible so floating panels (listbox, tooltips) can escape the card. */ .application-settings-section { @@ -2001,7 +1965,7 @@ .resource-heading-tabs-control-icon { margin-inline: 0.25rem; border-radius: 9999px; color: #737373; - background: #ffffff; + background: var(--coollabs-base); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.08); @@ -2075,20 +2039,6 @@ .resource-heading-overflow-items.is-measuring { box-shadow: none !important; } -.resource-heading-overflow-separator { - width: 1px; - align-self: stretch; - margin: 0.25rem 0.25rem; - background: color-mix(in srgb, var(--coollabs-line) 80%, transparent); -} - -.resource-heading-overflow.is-collapsed .resource-heading-overflow-separator { - width: auto; - height: 1px; - align-self: auto; - margin: 0.25rem 0.375rem; -} - .resource-heading-overflow.is-collapsed .resource-heading-overflow-items > .button, .resource-heading-overflow.is-collapsed .resource-heading-overflow-items > a.button { width: 100%; @@ -3403,7 +3353,7 @@ .dark .data-table-cell-dash { /* Shared logs viewer (deployment + runtime) — mobile-first toolbar Mobile stacks: search → meta → full-width actions (no side-by-side overlap). */ .logs-viewer { - background: #fff; + background: var(--coollabs-base); color: #262626; } @@ -3904,7 +3854,7 @@ .runtime-log-menu { .runtime-log-viewport { min-height: 12rem; border-radius: 0 0 8px 8px; - background: #fafafa; + background: var(--coollabs-elevated); color: #262626; } @@ -3919,10 +3869,6 @@ .dark .runtime-log-viewport { color: var(--color-fg-dim); } -.env-table-detail { - padding: 0.25rem 1rem 1.25rem; -} - /* Small pill badges for table cells */ .table-badge { display: inline-flex; @@ -4073,93 +4019,6 @@ .chip-remove:hover { color: inherit; } -/* Detached pill options (segmented radio groups rendered as separate pills) */ -.option-pill-group { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.option-pill-group label { - margin-bottom: 0; -} - -.option-pill { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.375rem; - height: 2rem; - padding: 0 0.875rem; - border-radius: 8px; - border: 1px solid var(--coollabs-line); - background: var(--coollabs-elevated); - font-size: 0.875rem; - font-weight: 500; - white-space: nowrap; - color: #000000; - transition: background-color 0.15s, border-color 0.15s; -} - -.dark .option-pill { - color: var(--color-fg); -} - -.option-pill:hover { - background: var(--coollabs-recessed); -} - -.peer:checked + .option-pill { - background: var(--coollabs-fill); - border-color: var(--coollabs-line); -} - -.peer:disabled + .option-pill { - cursor: not-allowed; - opacity: 0.5; -} - -/* Label column + content rows inside a card body */ -.application-purpose-row { - display: grid; - gap: 1rem; - border-top: 1px solid var(--coollabs-fill); - padding-top: 1.25rem; -} - -@media (min-width: 768px) { - .application-purpose-row { - grid-template-columns: 13rem minmax(0, 1fr); - gap: 2rem; - } -} - -.application-purpose-copy h4 { - font-size: 0.875rem; - font-weight: 600; - color: #000000; -} - -.dark .application-purpose-copy h4 { - color: var(--color-fg); -} - -.application-purpose-copy p { - margin-top: 0.25rem; - font-size: 0.875rem; - line-height: 1.25rem; - color: #71717a; -} - -.dark .application-purpose-copy p { - color: var(--color-fg-dim); -} - -.application-details-card .application-purpose-row { - grid-template-columns: minmax(0, 1fr); - gap: 1rem; -} - /* In-card sub-headings (e.g. "Container labels", "Docker Compose") */ .application-settings-form h4, .application-settings-form .application-settings-section-body h3 { @@ -4316,7 +4175,7 @@ .command-palette { overflow: hidden; border-radius: 10px; background: var(--coollabs-elevated); - box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal); + box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-dropdown); } .command-palette-header { diff --git a/resources/css/utilities.css b/resources/css/utilities.css index 33a7ef3e9..49b3fd2cd 100644 --- a/resources/css/utilities.css +++ b/resources/css/utilities.css @@ -370,6 +370,14 @@ @utility toast { @apply z-[1]; } +/* Floating notice / popover surface: elevated fill, hairline ring, and the + shared dropdown lift. Toasts, change-pending popovers and the deployments + list share this so they match menus/dropdowns instead of the heavier modal. */ +@utility surface-popover { + background: var(--coollabs-elevated); + box-shadow: 0 0 0 1px var(--coollabs-line), var(--shadow-dropdown); +} + @utility dz-button { @apply p-4 py-10 my-4 w-full font-bold bg-white border dark:border-coolgray-400 dark:text-white dark:bg-transparent dark:hover:bg-coolgray-400; } diff --git a/resources/views/components/configuration-warning.blade.php b/resources/views/components/configuration-warning.blade.php index 11f2f86a5..50a84d2cb 100644 --- a/resources/views/components/configuration-warning.blade.php +++ b/resources/views/components/configuration-warning.blade.php @@ -9,8 +9,7 @@ class="flex h-8 items-center justify-center gap-1.5 rounded-lg px-2 text-amber-7