fix(260924-h7x): verwaiste Karte daempft nur Symbol und Name
Gedaempfte muted-Schrift fiele auf 2,75:1 (hell) bzw. 3,0:1 (dunkel), gemessen; Produktname, Adresse und Fussangabe bleiben deshalb voll lesbar. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -427,6 +427,9 @@ describe('ServerCard — offline & verwaist', () => {
|
|||||||
|
|
||||||
expect(el).toHaveAttribute('data-health', 'orphan');
|
expect(el).toHaveAttribute('data-health', 'orphan');
|
||||||
expect(el).toHaveClass('border-dashed');
|
expect(el).toHaveClass('border-dashed');
|
||||||
|
// gedaempft wird nur der Name (Vordergrundfarbe haelt 7,5:1), die Adresse bleibt lesbar
|
||||||
|
expect(within(el).getByText('pve-1')).toHaveClass('opacity-70', 'saturate-50');
|
||||||
|
expect(within(el).getByText('https://pve.intern')).not.toHaveClass('opacity-70');
|
||||||
expect(within(el).getByTestId('status-pill')).toHaveTextContent('Offline & verwaist');
|
expect(within(el).getByTestId('status-pill')).toHaveTextContent('Offline & verwaist');
|
||||||
expect(
|
expect(
|
||||||
within(el).getByText('Dieser Server ist deaktiviert und wird nicht mehr abgefragt.'),
|
within(el).getByText('Dieser Server ist deaktiviert und wird nicht mehr abgefragt.'),
|
||||||
|
|||||||
@@ -438,8 +438,11 @@ export function ServerCard({ server, isAdmin = false, now = Date.now() }: Server
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Gedaempft wird bei „verwaist“ nur, was zum Server gehoert (Symbol, Name,
|
// Gedaempft (`opacity-70 saturate-50`) wird bei „verwaist“ nur Symbol und
|
||||||
// Adresse, Fussangabe) — Pille und Hinweistext bleiben voll lesbar.
|
// Name. Gedaempfte Schrift in `muted-foreground` fiele auf 2,75:1 (hell)
|
||||||
|
// bzw. 3,0:1 (dunkel) — gemessen — und damit unter 4,5:1; Produktname,
|
||||||
|
// Adresse, Fussangabe, Pille und Hinweistext bleiben deshalb voll lesbar.
|
||||||
|
// Der Name in Vordergrundfarbe haelt gedaempft noch 7,5:1 bzw. 7,1:1.
|
||||||
const dim = isOrphan ? 'opacity-70 saturate-50' : '';
|
const dim = isOrphan ? 'opacity-70 saturate-50' : '';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -455,14 +458,14 @@ export function ServerCard({ server, isAdmin = false, now = Date.now() }: Server
|
|||||||
|
|
||||||
<div className="flex flex-1 flex-col gap-4 py-4 pl-5 pr-4">
|
<div className="flex flex-1 flex-col gap-4 py-4 pl-5 pr-4">
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className={`flex min-w-0 items-start gap-3 ${dim}`}>
|
<div className="flex min-w-0 items-start gap-3">
|
||||||
<div
|
<div
|
||||||
className={`${WELL} flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground`}
|
className={`${WELL} flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground ${dim}`}
|
||||||
>
|
>
|
||||||
<ProductIcon productType={server.productType} />
|
<ProductIcon productType={server.productType} />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<div className="truncate font-semibold leading-tight" title={server.name}>
|
<div className={`truncate font-semibold leading-tight ${dim}`} title={server.name}>
|
||||||
{server.name}
|
{server.name}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-0.5 text-xs text-muted-foreground">
|
<div className="mt-0.5 text-xs text-muted-foreground">
|
||||||
@@ -481,7 +484,7 @@ export function ServerCard({ server, isAdmin = false, now = Date.now() }: Server
|
|||||||
{polledAge && (
|
{polledAge && (
|
||||||
<div
|
<div
|
||||||
data-testid="last-polled"
|
data-testid="last-polled"
|
||||||
className={`mt-auto border-t border-border/60 pt-3 text-xs text-muted-foreground ${dim}`}
|
className="mt-auto border-t border-border/60 pt-3 text-xs text-muted-foreground"
|
||||||
title={exactTime(status?.lastPolledAt, locale)}
|
title={exactTime(status?.lastPolledAt, locale)}
|
||||||
>
|
>
|
||||||
{t('card.lastPolledAgo', { age: polledAge })}
|
{t('card.lastPolledAgo', { age: polledAge })}
|
||||||
|
|||||||
Reference in New Issue
Block a user