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 observationSummary = createMemo(() => {
const count = violationCount(); const count = violationCount();
if (count <= 0) { if (count <= 0) {
return 'No alert violations detected during observation yet.'; return 'All systems healthy — no alerts triggered.';
} }
const label = count === 1 ? 'issue' : 'issues'; const label = count === 1 ? 'issue' : 'issues';
return `${count} ${label} detected during observation.`; return `${count} ${label} detected.`;
}); });
const handleReview = async () => { const handleReview = async () => {
@ -76,12 +76,12 @@ export function ActivationBanner(props: ActivationBannerProps): JSX.Element {
</svg> </svg>
<div class="space-y-1"> <div class="space-y-1">
<p class="text-sm font-medium"> <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>
<p class="text-xs text-blue-700 dark:text-blue-200">{observationSummary()}</p> <p class="text-xs text-blue-700 dark:text-blue-200">{observationSummary()}</p>
<Show when={props.isPastObservationWindow()}> <Show when={props.isPastObservationWindow()}>
<p class="text-xs font-semibold text-blue-800 dark:text-blue-100"> <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> </p>
</Show> </Show>
</div> </div>

View file

@ -163,13 +163,13 @@ export function ActivationModal(props: ActivationModalProps): JSX.Element {
if (success) { if (success) {
await props.refreshActiveAlerts(); 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) { if (props.onActivated) {
await props.onActivated(); await props.onActivated();
} }
props.onClose(); props.onClose();
} else { } else {
showError('Failed to activate alert notifications. Please try again.'); showError('Unable to activate notifications. Please try again.');
} }
setIsSubmitting(false); 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="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 class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div> <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"> <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> </p>
</div> </div>
<button <button
@ -248,14 +248,14 @@ export function ActivationModal(props: ActivationModalProps): JSX.Element {
</div> </div>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1"> <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
{violationCount() > 0 {violationCount() > 0
? 'These alerts are currently open. Activating notifications will send them to configured channels.' ? 'These alerts are currently active. When you activate, notifications will be sent to your configured channels.'
: 'No alerts have breached thresholds yet. Activation will notify you immediately when new issues appear.'} : 'No alerts triggered yet. When you activate, you'll be notified immediately if any issues are detected.'}
</p> </p>
<Show <Show
when={violationCount() > 0} when={violationCount() > 0}
fallback={ 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"> <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> </div>
} }
> >