fix: Better highlight warnings in SecurityWarningBanner.tsx

Author: driaug

apps/web/src/components/SecurityWarningBanner.tsx

@@ -13,27 +13,27 @@ export function SecurityWarningBanner({status}: SecurityWarningBannerProps) {
     return null;
   }
 
-  const sevenDayBounceRate = status.sevenDay.bounceRate.toFixed(2);
-  const sevenDayComplaintRate = status.sevenDay.complaintRate.toFixed(3);
-
   return (
     <Alert variant="warning">
       <AlertTriangle className="h-4 w-4" />
       <AlertTitle>Security Warning - Action Required</AlertTitle>
-      <AlertDescription className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-        <div className="space-y-1">
-          <p className="text-sm">
-            Your project has exceeded security thresholds. Current rates: 7-day bounce rate{' '}
-            <strong>{sevenDayBounceRate}%</strong>, 7-day complaint rate{' '}
-            <strong>{sevenDayComplaintRate}%</strong>.
+      <AlertDescription className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+        <div className="space-y-2 flex-1">
+          <p className="text-sm font-medium">
+            Your project has exceeded the following security thresholds:
           </p>
-          <p className="text-xs text-amber-800">
+          <ul className="list-disc list-inside space-y-1 text-sm text-amber-800">
+            {status.warnings.map((warning, idx) => (
+              <li key={idx}>{warning}</li>
+            ))}
+          </ul>
+          <p className="text-xs text-amber-800 mt-2">
             High bounce or complaint rates can lead to project suspension. Review the detailed metrics
             and take action to improve your email quality.
           </p>
         </div>
         <Link href="/settings?tab=security">
-          <Button size="sm" variant="outline" className="w-full sm:w-auto">
+          <Button size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
             View Details
           </Button>
         </Link>