From c98fe537d3a5e8509a57361a397862992ac78513 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 21 Oct 2025 11:09:59 +0000
Subject: [PATCH] fix: improve alert activation messaging for clarity and
 friendliness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../src/components/Alerts/ActivationBanner.tsx     |  8 ++++----
 .../src/components/Alerts/ActivationModal.tsx      | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend-modern/src/components/Alerts/ActivationBanner.tsx b/frontend-modern/src/components/Alerts/ActivationBanner.tsx
index ecfec49..6f3b04a 100644
--- a/frontend-modern/src/components/Alerts/ActivationBanner.tsx
+++ b/frontend-modern/src/components/Alerts/ActivationBanner.tsx
@@ -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 ending—activate to start notifications.
+                      24-hour setup period ending soon — activate to start receiving notifications.
                     </p>
                   </Show>
                 </div>
diff --git a/frontend-modern/src/components/Alerts/ActivationModal.tsx b/frontend-modern/src/components/Alerts/ActivationModal.tsx
index f68c4ef..937e40b 100644
--- a/frontend-modern/src/components/Alerts/ActivationModal.tsx
+++ b/frontend-modern/src/components/Alerts/ActivationModal.tsx
@@ -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>
                   }
                 >