fix: improve alert activation messaging for clarity and friendliness

Replace harsh/technical language with clearer, more positive messaging:

BEFORE → AFTER:
- "No alert violations detected during observation yet" → "All systems healthy — no alerts triggered"
- "Monitoring is live; notifications will start after..." → "Monitoring is active. Review your settings..."
- "24h observation ending" → "24-hour setup period ending soon"
- "Review alerts before activating" → "Ready to activate notifications"
- "breached thresholds" → "triggered"
- "violations" → "alerts"

Key improvements:
- Removed jargon: "observation window", "during observation"
- Removed ominous language: "yet", harsh "violations"
- More conversational: "You'll receive" vs "will dispatch to configured destinations"
- Positive framing: "All systems healthy" vs absence-focused language
- Clearer actions: "turning on alerts" vs "enabling notifications"
- Enthusiastic success messages: "Notifications activated!" with exclamation

Affected components:
- ActivationBanner.tsx: 4 text improvements
- ActivationModal.tsx: 5 text improvements

Impact: Better first-run UX, less intimidating language, clearer call-to-action
This commit is contained in:
rcourtman 2025-10-21 11:09:59 +00:00
parent ad371bf412
commit c98fe537d3
2 changed files with 11 additions and 11 deletions

View file

@ -34,10 +34,10 @@ export function ActivationBanner(props: ActivationBannerProps): JSX.Element {
const observationSummary = createMemo(() => {
const count = violationCount();
if (count <= 0) {
return 'No alert violations detected during observation yet.';
return 'All systems healthy — no alerts triggered.';
}
const label = count === 1 ? 'issue' : 'issues';
return `${count} ${label} detected during observation.`;
return `${count} ${label} detected.`;
});
const handleReview = async () => {
@ -76,12 +76,12 @@ export function ActivationBanner(props: ActivationBannerProps): JSX.Element {
</svg>
<div class="space-y-1">
<p class="text-sm font-medium">
Monitoring is live; notifications will start after you review settings.
Monitoring is active. Review your settings to enable notifications.
</p>
<p class="text-xs text-blue-700 dark:text-blue-200">{observationSummary()}</p>
<Show when={props.isPastObservationWindow()}>
<p class="text-xs font-semibold text-blue-800 dark:text-blue-100">
24h observation endingactivate to start notifications.
24-hour setup period ending soon activate to start receiving notifications.
</p>
</Show>
</div>

View file

@ -163,13 +163,13 @@ export function ActivationModal(props: ActivationModalProps): JSX.Element {
if (success) {
await props.refreshActiveAlerts();
showSuccess('Alert notifications activated. Notifications will now dispatch to configured destinations.');
showSuccess('Notifications activated! You'll now receive alerts when issues are detected.');
if (props.onActivated) {
await props.onActivated();
}
props.onClose();
} else {
showError('Failed to activate alert notifications. Please try again.');
showError('Unable to activate notifications. Please try again.');
}
setIsSubmitting(false);
@ -188,9 +188,9 @@ export function ActivationModal(props: ActivationModalProps): JSX.Element {
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Review alerts before activating</h2>
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Ready to activate notifications</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">
Monitoring is already running. Confirm thresholds and destinations before enabling notifications.
Review your alert thresholds and notification channels before turning on alerts.
</p>
</div>
<button
@ -248,14 +248,14 @@ export function ActivationModal(props: ActivationModalProps): JSX.Element {
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
{violationCount() > 0
? 'These alerts are currently open. Activating notifications will send them to configured channels.'
: 'No alerts have breached thresholds yet. Activation will notify you immediately when new issues appear.'}
? 'These alerts are currently active. When you activate, notifications will be sent to your configured channels.'
: 'No alerts triggered yet. When you activate, you'll be notified immediately if any issues are detected.'}
</p>
<Show
when={violationCount() > 0}
fallback={
<div class="mt-4 rounded-md border border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900/30 p-4 text-sm text-gray-600 dark:text-gray-400">
No active violations detected during the observation window.
All systems healthy no alerts triggered.
</div>
}
>