Redesign savings streak with flame icon and metric card layout

Author: rollecode

CHANGELOG.md

@@ -7,7 +7,8 @@
 * Income matched via payee patterns is marked as received instantly
 * Webhook signature verification with HMAC-SHA256
 * Exempt Synci webhook endpoint from auth middleware
-* Show 12 days in savings streak
+* Redesign savings streak card with flame icon matching other metric cards
+* Show 7 days in savings streak
 
 ### 1.9.4: 2026-03-25
 

src/components/dashboard/savings-streak.tsx

@@ -15,6 +15,25 @@ interface HistoryEntry {
   spent: number;
 }
 
+function FlameIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 2C12 2 6 8.5 6 14C6 17.31 8.69 20 12 20C15.31 20 18 17.31 18 14C18 8.5 12 2 12 2Z" fill="url(#flame-grad)" />
+      <path d="M12 20C10.34 20 9 18.66 9 17C9 14.5 12 11 12 11C12 11 15 14.5 15 17C15 18.66 13.66 20 12 20Z" fill="url(#flame-inner)" />
+      <defs>
+        <linearGradient id="flame-grad" x1="12" y1="2" x2="12" y2="20" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#fbbf24" />
+          <stop offset="1" stopColor="#f97316" />
+        </linearGradient>
+        <linearGradient id="flame-inner" x1="12" y1="11" x2="12" y2="20" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#fde68a" />
+          <stop offset="1" stopColor="#fbbf24" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
 export function SavingsStreak({ dailyBudget, todaySpent }: SavingsStreakProps) {
   const { locale, fmt } = useLocale();
   const [history, setHistory] = useState<HistoryEntry[]>([]);
@@ -44,11 +63,11 @@ export function SavingsStreak({ dailyBudget, todaySpent }: SavingsStreakProps) {
     }).catch(() => {});
   }, [dailyBudget, todaySpent]);
 
-  // Last 12 days from history
+  // Last 7 days from history
   const days: { day: number; month: number; status: "fire" | "fail" | "today" | "nodata"; budget: number; spent: number }[] = [];
   let currentStreak = 0;
 
-  for (let d = 11; d >= 0; d--) {
+  for (let d = 6; d >= 0; d--) {
     const date = new Date(now);
     date.setDate(today - d);
     const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
@@ -57,13 +76,11 @@ export function SavingsStreak({ dailyBudget, todaySpent }: SavingsStreakProps) {
     const monthNum = date.getMonth() + 1;
 
     if (d === 0) {
-      // Today — use current props for spending
       days.push({ day: dayNum, month: monthNum, status: "today", budget: dailyBudget, spent: todaySpent });
       continue;
     }
 
     if (!entry) {
-      // No data recorded — mark as fail (unknown)
       currentStreak = 0;
       days.push({ day: dayNum, month: monthNum, status: "nodata", budget: 0, spent: 0 });
       continue;
@@ -86,29 +103,36 @@ export function SavingsStreak({ dailyBudget, todaySpent }: SavingsStreakProps) {
 
   return (
     <Card className="metric-card savings-streak-card">
-      <p className="metric-card-label">{locale === "fi" ? "Säästöputki" : "Savings streak"}</p>
-      <div className="savings-streak-dots">
-        {days.map((d, i) => (
-          <div
-            key={i}
-            className={`savings-streak-dot ${d.status === "fire" ? "is-fire" : d.status === "fail" ? "is-fail" : d.status === "today" ? (dailyBudget > 0 && d.spent <= dailyBudget ? "is-fire" : "is-today") : "is-neutral"}`}
-          >
-            {(d.status === "fire" || (d.status === "today" && dailyBudget > 0 && d.spent <= dailyBudget)) && <span className="savings-streak-fire-icon" />}
-            {d.status === "fail" && <span className="savings-streak-x-icon" />}
-            {d.status === "today" && dailyBudget > 0 && d.spent > dailyBudget && <span className="savings-streak-x-icon" />}
-            {d.status === "nodata" && <span className="savings-streak-neutral-dot" />}
-            <span className="savings-streak-tooltip">
-              <span>{d.day}.{d.month}.</span>
-              <span>{d.status === "nodata" ? (locale === "fi" ? "ei dataa" : "no data") : `${fmt(d.status === "today" ? todaySpent : d.spent)}/${fmt(d.budget)} €`}</span>
-            </span>
+      <div className="metric-card-row">
+        <div className="metric-card-icon savings-streak-flame">
+          <FlameIcon />
+        </div>
+        <div>
+          <p className="metric-card-label">{locale === "fi" ? "Säästöputki" : "Savings streak"}</p>
+          <div className="savings-streak-dots">
+            {days.map((d, i) => (
+              <div
+                key={i}
+                className={`savings-streak-dot ${d.status === "fire" ? "is-fire" : d.status === "fail" ? "is-fail" : d.status === "today" ? (dailyBudget > 0 && d.spent <= dailyBudget ? "is-fire" : "is-today") : "is-neutral"}`}
+              >
+                {(d.status === "fire" || (d.status === "today" && dailyBudget > 0 && d.spent <= dailyBudget)) && <span className="savings-streak-fire-icon" />}
+                {d.status === "fail" && <span className="savings-streak-x-icon" />}
+                {d.status === "today" && dailyBudget > 0 && d.spent > dailyBudget && <span className="savings-streak-x-icon" />}
+                {d.status === "nodata" && <span className="savings-streak-neutral-dot" />}
+                <span className="savings-streak-tooltip">
+                  <span>{d.day}.{d.month}.</span>
+                  <span>{d.status === "nodata" ? (locale === "fi" ? "ei dataa" : "no data") : `${fmt(d.status === "today" ? todaySpent : d.spent)}/${fmt(d.budget)} €`}</span>
+                </span>
+              </div>
+            ))}
           </div>
-        ))}
+          <p className="metric-card-note">
+            {currentStreak > 0
+              ? (locale === "fi" ? `${currentStreak} päivää putkeen alle budjetin` : `${currentStreak} days in a row under budget`)
+              : (locale === "fi" ? "Ei putkea vielä" : "No streak yet")}
+          </p>
+        </div>
       </div>
-      <p className="metric-card-note">
-        {currentStreak > 0
-          ? (locale === "fi" ? `Olet onnistunut selviämään alle päiväbudjetin ${currentStreak} päivää putkeen.` : `You've stayed under budget ${currentStreak} days in a row.`)
-          : (locale === "fi" ? "Ei putkea vielä. Pysy budjetissa tänään!" : "No streak yet. Stay under budget today!")}
-      </p>
     </Card>
   );
 }