feat: revamp styling on stats page

Abstracted away CSS into stats_styling.tsx

frontend/src/App.css

@@ -1,42 +1,10 @@
+html,
+body,
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  height: 100%;
+  width: 100%;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+body {
+  margin: 0;
 }

frontend/src/pages/Stats.tsx

@@ -12,6 +12,7 @@ import {
 
 import ActivityHeatmap from "../stats/ActivityHeatmap";
 import { ReactWordcloud } from '@cp949/react-wordcloud';
+import StatsStyling from "../styles/stats_styling";
 
 type BackendWord = {
     word: string;
@@ -24,6 +25,8 @@ type TopUser = {
   count: number;
 };
 
+const styles = StatsStyling;
+
 const StatPage = () => {
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(true);
@@ -110,52 +113,59 @@ const StatPage = () => {
     getStats();
   }, [])
 
-  if (loading) return <p className="p-6">Loading insights…</p>;
-  if (error) return <p className="p-6 text-red-500">{error}</p>;
+  if (loading) return <p style={{...styles.page, minWidth: "100vh", minHeight: "100vh"}}>Loading insights…</p>;
+  if (error) return <p style={{...styles.page}}>{error}</p>;
 
 return (
-    <div>
-
+  <div style={styles.page}>
+    <div style={{ ...styles.container, ...styles.card, ...styles.headerBar }}>
+      <div style={styles.controls}>
         <input
           type="text"
           id="query"
           ref={inputRef}
+          placeholder="Search events..."
+          style={styles.input}
         />
 
-        <button onClick={onSearch}>Search</button>
-        <button onClick={resetFilters}>Reset</button>
+        <button onClick={onSearch} style={styles.buttonPrimary}>
+          Search
+        </button>
 
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "2fr 2fr 2fr",
-          gap: 12,
-          margin: "0 auto",
-          width: "100%",
-          height: "100%"
-        }}
-      >
+        <button onClick={resetFilters} style={styles.buttonSecondary}>
+          Reset
+        </button>
+      </div>
 
-        <div>
-          <h2>Events per Day</h2>
+      <div style={{ fontSize: 13, color: "#6b7280" }}>Analytics Dashboard</div>
+    </div>
 
-          <ResponsiveContainer width={600} height={350}>
+    {/* main grid*/}
+    <div style={{ ...styles.container, ...styles.grid }}>
+      {/* events per day */}
+      <div style={{ ...styles.card, gridColumn: "span 5" }}>
+        <h2 style={styles.sectionTitle}>Events per Day</h2>
+        <p style={styles.sectionSubtitle}>Trend of activity over time</p>
+
+        <div style={styles.chartWrapper}>
+          <ResponsiveContainer width="100%" height="100%">
             <LineChart data={postsPerDay}>
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="date" />
               <YAxis />
               <Tooltip />
-              <Line
-                type="monotone"
-                dataKey="count"
-                name="Events"
-              />
+              <Line type="monotone" dataKey="count" name="Events" />
             </LineChart>
           </ResponsiveContainer>
         </div>
+      </div>
 
-        <div>
-          <h2>Word Cloud</h2>
+      {/* Word Cloud */}
+      <div style={{ ...styles.card, gridColumn: "span 4" }}>
+        <h2 style={styles.sectionTitle}>Word Cloud</h2>
+        <p style={styles.sectionSubtitle}>Most common terms across events</p>
+
+        <div style={styles.chartWrapper}>
           <ReactWordcloud
             words={wordFrequencyData}
             options={{
@@ -166,32 +176,47 @@ const StatPage = () => {
             }}
           />
         </div>
+      </div>
 
+      {/* Top Users */}
       {topUserData?.length > 0 && (
         <div
           style={{
-              maxHeight: 450,
-              width: "100%",
-              overflowY: "auto",
-              padding: 12
+            ...styles.card,
+            ...styles.scrollArea,
+            gridColumn: "span 3",
           }}
         >
-            <h2>Top Users</h2>
+          <h2 style={styles.sectionTitle}>Top Users</h2>
+          <p style={styles.sectionSubtitle}>Most active authors</p>
+
+          <div style={styles.topUsersList}>
             {topUserData.map((item) => (
-              <p key={`${item.author}-${item.source}`}>
-                {item.author} ({item.source}): {item.count}
-              </p>
+              <div
+                key={`${item.author}-${item.source}`}
+                style={styles.topUserItem}
+              >
+                <div style={styles.topUserName}>{item.author}</div>
+                <div style={styles.topUserMeta}>
+                  {item.source} • {item.count} events
+                </div>
+              </div>
             ))}
           </div>
+        </div>
       )}
 
-        </div>
+      {/* Heatmap */}
+      <div style={{ ...styles.card, gridColumn: "span 12" }}>
+        <h2 style={styles.sectionTitle}>Heatmap</h2>
+        <p style={styles.sectionSubtitle}>Activity density across time</p>
 
-      <div style={{ width: "100%", height: 320}}>
-        <h2>Heatmap</h2>
+        <div style={styles.heatmapWrapper}>
           <ActivityHeatmap data={heatmapData} />
         </div>
       </div>
+    </div>
+  </div>
 );
 }
 

frontend/src/styles/stats_styling.tsx

@@ -0,0 +1,134 @@
+import type { CSSProperties } from "react";
+
+const StatsStyling: Record<string, CSSProperties> = {
+  page: {
+    width: "100%",
+    height: "100%",
+    minHeight: "100vh",
+    minWidth: "100vh",
+    padding: 24,
+    background: "#f6f7fb",
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif',
+    color: "#111827",
+  },
+
+  container: {
+    maxWidth: 1400,
+    margin: "0 auto",
+  },
+
+  card: {
+    background: "white",
+    borderRadius: 16,
+    padding: 16,
+    border: "1px solid rgba(0,0,0,0.06)",
+    boxShadow: "0 6px 20px rgba(0,0,0,0.06)",
+  },
+
+  headerBar: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+  },
+
+  controls: {
+    display: "flex",
+    gap: 10,
+    alignItems: "center",
+  },
+
+  input: {
+    width: 320,
+    maxWidth: "70vw",
+    padding: "10px 12px",
+    borderRadius: 12,
+    border: "1px solid rgba(0,0,0,0.12)",
+    outline: "none",
+    fontSize: 14,
+    background: "#fff",
+    color: "black"
+  },
+
+  buttonPrimary: {
+    padding: "10px 14px",
+    borderRadius: 12,
+    border: "1px solid rgba(0,0,0,0.08)",
+    background: "#2563eb",
+    color: "white",
+    fontWeight: 600,
+    cursor: "pointer",
+    boxShadow: "0 6px 16px rgba(37,99,235,0.25)",
+  },
+
+  buttonSecondary: {
+    padding: "10px 14px",
+    borderRadius: 12,
+    border: "1px solid rgba(0,0,0,0.12)",
+    background: "#fff",
+    color: "#111827",
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+
+  grid: {
+    marginTop: 18,
+    display: "grid",
+    gridTemplateColumns: "repeat(12, 1fr)",
+    gap: 16,
+  },
+
+  sectionTitle: {
+    margin: 0,
+    fontSize: 16,
+    fontWeight: 700,
+  },
+
+  sectionSubtitle: {
+    margin: "6px 0 14px",
+    fontSize: 13,
+    color: "#6b7280",
+  },
+
+  chartWrapper: {
+    width: "100%",
+    height: 350,
+  },
+
+  heatmapWrapper: {
+    width: "100%",
+    height: 320,
+  },
+
+  topUsersList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+  },
+
+  topUserItem: {
+    padding: "10px 12px",
+    borderRadius: 12,
+    background: "#f9fafb",
+    border: "1px solid rgba(0,0,0,0.06)",
+  },
+
+  topUserName: {
+    fontWeight: 700,
+    fontSize: 14,
+  },
+
+  topUserMeta: {
+    fontSize: 13,
+    color: "#6b7280",
+  },
+
+  scrollArea: {
+    maxHeight: 450,
+    overflowY: "auto",
+  },
+};
+
+export default StatsStyling;