From 4208b9440174309e3fe81df15ca981d58a03dc13 Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Tue, 10 Feb 2026 14:20:58 +0000
Subject: [PATCH] feat(frontend): improve top emotion card styling

---
 frontend/src/components/EmotionalStats.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/EmotionalStats.tsx b/frontend/src/components/EmotionalStats.tsx
index 62b9605..07b2eea 100644
--- a/frontend/src/components/EmotionalStats.tsx
+++ b/frontend/src/components/EmotionalStats.tsx
@@ -33,6 +33,11 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
     };
   });
 
+  const formatEmotion = (value: string) => {
+    if (!value) return "Unknown";
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  };
+
   if (!rows.length) {
     return (
       <div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
@@ -53,10 +58,19 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
         {strongestPerTopic.map((topic) => (
           <div key={topic.topic} style={{ ...styles.card, gridColumn: "span 4" }}>
             <h3 style={{ ...styles.sectionTitle, marginBottom: 6 }}>{topic.topic}</h3>
-            <div style={{ fontSize: 20, fontWeight: 700 }}>Top emotion: {topic.emotion}</div>
-            <p style={styles.sectionSubtitle}>Model Confidence: {topic.value.toFixed(3)}</p>
-            <div style={{ fontSize: 13, color: "#6b7280", marginTop: 6 }}>
-              Based on {topic.count} events
+            <div style={{ fontSize: 12, fontWeight: 700, color: "#6b7280", letterSpacing: "0.02em", textTransform: "uppercase" }}>
+              Top Emotion
+            </div>
+            <div style={{ fontSize: 24, fontWeight: 800, marginTop: 4, lineHeight: 1.2 }}>
+              {formatEmotion(topic.emotion)}
+            </div>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 10, fontSize: 13, color: "#6b7280" }}>
+              <span>Confidence</span>
+              <span style={{ fontWeight: 700, color: "#111827" }}>{topic.value.toFixed(3)}</span>
+            </div>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 4, fontSize: 13, color: "#6b7280" }}>
+              <span>Sample Size</span>
+              <span style={{ fontWeight: 700, color: "#111827" }}>{topic.count} events</span>
             </div>
           </div>
         ))}