,
- iconClassName: 'text-red-400',
+ border: 'border-red-400/35 bg-[rgba(26,10,16,0.9)]',
};
case 'warning':
return {
- border: 'border-amber-400/35 bg-[rgba(31,18,8,0.92)]',
- badge: 'border-amber-500/30 text-amber-200',
- icon:
,
- iconClassName: 'text-amber-400',
+ border: 'border-amber-400/35 bg-[rgba(31,18,8,0.9)]',
};
case 'success':
return {
- border: 'border-emerald-400/35 bg-[rgba(8,24,18,0.92)]',
- badge: 'border-emerald-500/30 text-emerald-200',
- icon:
,
- iconClassName: 'text-emerald-400',
+ border: 'border-emerald-400/35 bg-[rgba(8,24,18,0.9)]',
};
default:
return {
- border: 'border-cyan-400/25 bg-[rgba(8,14,26,0.92)]',
- badge: 'border-cyan-500/20 text-cyan-200',
- icon:
,
- iconClassName: 'text-cyan-300',
+ border: 'border-cyan-400/25 bg-[rgba(8,14,26,0.9)]',
};
}
}
@@ -109,14 +92,10 @@ export const GraphProvisioningHud = ({
}
}, [presentation]);
- const compactLabel = useMemo(() => {
- if (!presentation?.compactDetail) {
- return null;
- }
- return presentation.compactDetail.length > 54
- ? `${presentation.compactDetail.slice(0, 54)}...`
- : presentation.compactDetail;
- }, [presentation?.compactDetail]);
+ const ariaLabel = useMemo(() => {
+ const parts = [presentation?.compactTitle, presentation?.compactDetail].filter(Boolean);
+ return parts.join(' - ') || 'Open launch details';
+ }, [presentation?.compactDetail, presentation?.compactTitle]);
if (!shouldRender || !presentation || !tone) {
return null;
@@ -131,44 +110,20 @@ export const GraphProvisioningHud = ({
tone.border
)}
onClick={() => setDetailsOpen(true)}
- aria-label="Open launch details"
+ aria-label={ariaLabel}
>
-
-
{tone.icon}
-
-
-
- {presentation.compactTitle}
-
-
- {presentation.isFailed
- ? 'Issue'
- : presentation.hasMembersStillJoining
- ? 'Joining'
- : presentation.isActive
- ? 'Live'
- : 'Ready'}
-
-
- {compactLabel ? (
-
- {compactLabel}
-
- ) : null}
-
-
-
+
{ariaLabel}