Add reminder email template expired case + overdue reminder display b…

…ug fix + fix charts bg when downloaded
HackerSchool · Feb 15, 2024 · e0f073d · e0f073d
1 parent 99da5d8
commit e0f073d
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/backend/src/modules/email/templates.js b/backend/src/modules/email/templates.js
@@ -3,15 +3,22 @@ const moment = require("moment-timezone");
 function generateReminderHtml(reminder) {
   let dueDateText = "";
   if (reminder.today) {
-    dueDateText = "today";
+    dueDateText = "is due today";
   } else {
     const currentMoment = moment().startOf("day");
     const dueMoment = moment(reminder.date);
 
     // Calculate the difference in days
     const dayDifference = dueMoment.diff(currentMoment, "days");
 
-    dueDateText = dayDifference === 1 ? "tomorrow" : `in ${dayDifference} days`;
+    if (dayDifference < 0) {
+      dueDateText = "expired ";
+      dueDateText += dayDifference === -1 ? "yesterday" : `${Math.abs(dayDifference)} days ago`;
+    } else {
+      // > 0 (== 0 was checked above with reminder.today)
+      dueDateText = "is due ";
+      dueDateText += dayDifference === 1 ? "tomorrow" : `in ${dayDifference} days`;
+    }
   }
 
   return `
@@ -36,7 +43,7 @@ function generateReminderHtml(reminder) {
                         <p style="${
                           ReminderStyles.global + ReminderStyles.p
                         }">You are receiving this e-mail because the following
-                        reminder is due <b>${dueDateText}</b>:</p>
+                        reminder <b>${dueDateText}</b>:</p>
                     </td>
                 </tr>
                 <tr style="${ReminderStyles.global}">

diff --git a/frontend/src/components/BalanceTimeSeries.jsx b/frontend/src/components/BalanceTimeSeries.jsx
@@ -153,7 +153,7 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, o
           },
           autosize: false,
           plot_bgcolor: "rgba(0,0,0,0)",
-          paper_bgcolor: "rgba(0,0,0,0)",
+          paper_bgcolor: inDashboard ? "#252525" : "#333333", // var(--cinza-2) : var(--cinza-4)
           font: {
             color: "#ffffff",
           },

diff --git a/frontend/src/components/MonthHistogram.jsx b/frontend/src/components/MonthHistogram.jsx
@@ -245,7 +245,7 @@ function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
               margin: { t: 60, b: 30, l: 45, r: 45 },
               autosize: false,
               plot_bgcolor: "rgba(0,0,0,0)", // transparent
-              paper_bgcolor: "rgba(0,0,0,0)",
+              paper_bgcolor: "#333333", // var(--cinza-4)
               font: {
                 color: "#ffffff",
               },

diff --git a/frontend/src/components/Reminder.jsx b/frontend/src/components/Reminder.jsx
@@ -4,7 +4,10 @@ import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 
 function Reminder({ reminder, openEditModal, openDeleteModal, hideOptions = false }) {
-  const overdue = new Date() > new Date(reminder.date);
+  const oneDayInMs = 24 * 60 * 60 * 1000; // hours * minutes * seconds * milliseconds
+  // reminder is overdue if the day difference between today and the reminder date is greater than 0
+  const overdue = Math.floor((new Date() - new Date(reminder.date)) / oneDayInMs) > 0;
+
   return (
     <div className={`reminder ${overdue ? "overdue" : ""}`}>
       <div className="date-title-container">

diff --git a/frontend/src/components/StackedBarChart.jsx b/frontend/src/components/StackedBarChart.jsx
@@ -258,7 +258,7 @@ function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loa
               margin: { t: 60, b: 30, l: 45, r: 45 },
               autosize: false,
               plot_bgcolor: "rgba(0,0,0,0)",
-              paper_bgcolor: "rgba(0,0,0,0)",
+              paper_bgcolor: "#333333", // var(--cinza-4)
               font: {
                 color: "#ffffff",
               },