feat: easier to follow scoring for spam checker

Author: gabrielmfern

packages/react-email/src/components/toolbar/spam-assassin.tsx

@@ -100,20 +100,25 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
             </Results.Column>
             <Results.Column>
               {result.points === 0
-                ? 'Congratulations! Your email is clean of abuse indicators.'
-                : 'Lower scores are better'}
+                ? 'Congratulations! Younr email is clean of abuse indicators.'
+                : 'Higher scores are better'}
             </Results.Column>
             <Results.Column
-              className={cn(
-                'text-right text-3xl tracking-tighter font-bold',
-                result.points === 0 ? 'text-green-400' : null,
-                result.points > 0 && result.points <= 1.5 ? null : null,
-                result.points > 1.5 ? 'text-yellow-200' : null,
-                result.points > 3 ? 'text-orange-400' : null,
-                result.points >= 5 ? 'text-red-400' : null,
-              )}
+              className="text-right tracking-tighter font-bold"
             >
-              {result.points.toFixed(1)}
+              <span
+                className={cn(
+                  "text-3xl",
+                  result.points === 0 ? 'text-green-400' : null,
+                  result.points > 0 && result.points <= 1.5 ? null : null,
+                  result.points > 1.5 ? 'text-yellow-200' : null,
+                  result.points > 3 ? 'text-orange-400' : null,
+                  result.points >= 5 ? 'text-red-400' : null,
+                )}
+              >
+                {(10 - result.points).toFixed(1)}
+              </span>{' '}
+              <span className="text-lg">/ 10</span>
             </Results.Column>
           </Results.Row>
           {toSorted(result.checks, (a, b) => b.points - a.points).map(
@@ -140,7 +145,7 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
                     check.points > 3 ? 'text-red-400' : null,
                   )}
                 >
-                  {check.points.toFixed(1)}
+                  -{check.points.toFixed(1)}
                 </Results.Column>
               </Results.Row>
             ),