0cdb98d969
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.
40 lines
2.4 KiB
PHP
40 lines
2.4 KiB
PHP
@props(['diff' => []])
|
|
|
|
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false">
|
|
<button type="button" aria-label="Configuration changes not applied" aria-haspopup="dialog"
|
|
:aria-expanded="open" @click="open = !open"
|
|
class="flex h-8 items-center justify-center gap-1.5 rounded-lg px-2 text-amber-700 transition-colors hover:bg-amber-100 dark:text-warning dark:hover:bg-warning/10">
|
|
<x-reicon name="alert-triangle" class="size-4" />
|
|
<span class="hidden text-xs font-medium lg:inline">Changes pending</span>
|
|
</button>
|
|
|
|
<div x-show="open" x-cloak x-transition.opacity role="dialog"
|
|
class="surface-popover fixed top-14 left-1/2 z-[1100] w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 rounded-lg p-3 lg:absolute lg:top-full lg:right-0 lg:left-auto lg:mt-2 lg:translate-x-0">
|
|
<div class="flex items-start gap-2.5">
|
|
<span
|
|
class="flex size-7 shrink-0 items-center justify-center rounded-md bg-amber-100 text-amber-700 dark:bg-warning/10 dark:text-warning">
|
|
<x-reicon name="alert-triangle" class="size-4" />
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-[13px] font-semibold leading-4 text-neutral-950 dark:text-fg">
|
|
The latest configuration has not been applied
|
|
</p>
|
|
<p class="mt-0.5 text-[11px] leading-4 text-neutral-600 dark:text-fg-dim">
|
|
@if (data_get($diff, 'count'))
|
|
{{ data_get($diff, 'count') }}
|
|
{{ data_get($diff, 'count') === 1 ? 'change' : 'changes' }} unapplied.
|
|
{{ data_get($diff, 'requires_build') ? 'Rebuild required.' : 'Redeploy to apply.' }}
|
|
<button type="button"
|
|
class="ml-0.5 inline-flex items-center gap-0.5 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-warning dark:hover:text-warning/80"
|
|
@click="open = false; $dispatch('open-configuration-diff')">
|
|
View changes
|
|
<x-reicon name="arrow-right" class="size-2.5" />
|
|
</button>
|
|
@else
|
|
Redeploy to apply.
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|