Sidebar styling remake + reminder overdue styling + BalanceTimeSeries…

… bug fix
HackerSchool · Feb 5, 2024 · 1210c2e · 1210c2e
1 parent 90a6173
commit 1210c2e
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 48 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -7,7 +7,7 @@ html {
   --green-alpha-40: #0e95546c;
   --green-alpha-20: #0e955436;
   --green-hover: #0c7844;
-  --red: #f21313;
+  --red: #d52f2f;
   --cinza-1: #212121;
   --cinza-2: #252525;
   --cinza-3: #2c2c2c;
@@ -421,6 +421,10 @@ input[type="file"] {
   background-color: var(--green) !important;
 }
 
+.alert-error {
+  background-color: var(--red) !important;
+}
+
 /* Sidebar CSS */
 
 aside {
@@ -467,23 +471,44 @@ aside {
   justify-content: flex-start;
   gap: 12px;
   color: var(--green);
-  transition: none 0.4s ease-out 0s;
-  transition-property: color, background-color;
+}
+
+.sidebar-routes-container .nav-item {
+  color: var(--light-gray);
+  transition: none 0.2s ease 0s;
+  transition-property: color, margin-left;
+}
+
+.sidebar-routes-container .nav-item:hover {
+  margin-left: 5px;
+  color: var(--green);
 }
 
 .nav-item.active {
-  background: linear-gradient(
-    to left,
-    var(--cinza-1) -2%,
-    rgba(0, 0, 0, 0.3) 15%,
-    rgba(0, 0, 0, 0.12) 20%,
-    rgba(0, 0, 0, 0.03) 23%,
-    transparent 25%
-  );
+  margin-left: 5px;
+  color: var(--hs-logo);
+  position: relative;
+}
+
+.nav-item.active:hover {
+  color: var(--hs-logo);
+}
+
+.nav-item::before {
+  position: absolute;
+  left: -5px;
+  top: 0;
+  height: 100%;
+  width: 0px;
+  background-color: transparent;
+  content: "";
+  transition: none 0.2s ease;
+  transition-property: width, background-color;
+}
+
+.nav-item.active::before {
+  width: 5px;
   background-color: var(--hs-logo);
-  color: white;
-  transition: none 0.5s ease-out 0s;
-  transition-property: color, background;
 }
 
 #logo-img {

diff --git a/frontend/src/components/BalanceTimeSeries.jsx b/frontend/src/components/BalanceTimeSeries.jsx
@@ -7,16 +7,13 @@ const today = new Date().toISOString().slice(0, 10);
 const monthAgo = new Date();
 monthAgo.setMonth(monthAgo.getMonth() - 1);
 
-function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard }) {
+function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, orderAsc }) {
   const [dates, setDates] = useState([]);
   const [balanceVal, setBalanceVal] = useState([]);
 
   useEffect(() => {
     if (loading) return;
 
-    const orderAsc =
-      transactions[0]?.date > transactions[transactions.length - 1]?.date ? false : true;
-
     const tempTransactions = orderAsc ? transactions : transactions.map(t => t).reverse();
 
     const balancesForEachDay = new Map();
@@ -75,11 +72,11 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard })
         }),
   };
 
-  if (!loading && transactions.length <= 1) {
+  if (!loading && dates.length === 0) {
     return (
       <div className="transaction-warn-container" style={inDashboard ? { width: 580 } : {}}>
         <span>
-          Not enough transactions to plot
+          Not enough data to plot
           {inDashboard ? (
             <>
               .<br />

diff --git a/frontend/src/components/ProjectLineChart.jsx b/frontend/src/components/ProjectLineChart.jsx
@@ -26,6 +26,7 @@ function ProjectLineChart({ title, projectList, projectsLoading }) {
       axios_instance
         .get("transactions", {
           params: {
+            orderBy: "date",
             order: "ASC",
             balanceBy: projectID,
           },
@@ -80,6 +81,7 @@ function ProjectLineChart({ title, projectList, projectsLoading }) {
           loading={transactionsLoading || projectsLoading}
           disableRange={false}
           inDashboard={false}
+          orderAsc={true}
         />
       </div>
     </div>

diff --git a/frontend/src/components/Reminder.jsx b/frontend/src/components/Reminder.jsx
@@ -4,31 +4,33 @@ 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);
   return (
-    <div className="reminder">
+    <div className={`reminder ${overdue ? "overdue" : ""}`}>
       <div className="date-title-container">
-        <div className="date-flag">{reminder.date}</div>
+        <div className="date-flag">{reminder.date + (overdue ? " (OVERDUE)" : "")}</div>
         <h2>{reminder.title}</h2>
         {!hideOptions && (
-          <MoreOptionsBtn
-            className="reminder-more-options"
-            options={[
-              {
-                icon: <EditIcon />,
-                name: "Edit",
-                callback: () => openEditModal(reminder),
-              },
-              {
-                icon: <DeleteIcon />,
-                name: "Delete",
-                callback: () => openDeleteModal(reminder),
-              },
-            ]}
-          />
+          <div className="reminder-more-options">
+            <MoreOptionsBtn
+              options={[
+                {
+                  icon: <EditIcon />,
+                  name: "Edit",
+                  callback: () => openEditModal(reminder),
+                },
+                {
+                  icon: <DeleteIcon />,
+                  name: "Delete",
+                  callback: () => openDeleteModal(reminder),
+                },
+              ]}
+            />
+          </div>
         )}
       </div>
 
-      <div className="desc">{reminder.description}</div>
+      {reminder.description && <div className="desc">{reminder.description}</div>}
     </div>
   );
 }

diff --git a/frontend/src/pages/Charts.jsx b/frontend/src/pages/Charts.jsx
@@ -51,7 +51,12 @@ function ChartsPage() {
       .finally(() => setProjectsLoading(false));
 
     axios_instance
-      .get("transactions")
+      .get("transactions", {
+        params: {
+          orderBy: "date",
+          order: "ASC",
+        },
+      })
       .then(res => {
         if (res.status === 200) return res.data;
         throw new Error();
@@ -114,6 +119,7 @@ function ChartsPage() {
                 loading={transactionsLoading}
                 disableRange={false}
                 inDashboard={false}
+                orderAsc={true}
               />
             </div>
           </div>

diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
@@ -9,7 +9,7 @@ import NewReminderBtn from "../components/NewReminderBtn";
 import ReminderEditModal from "../components/ReminderEditModal";
 import ConfirmationModal from "../components/ConfirmationModal";
 import Reminder from "../components/Reminder";
-import TaskAltIcon from "@mui/icons-material/TaskAlt";
+import HandymanIcon from "@mui/icons-material/Handyman";
 import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import CircularProgress from "@mui/material/CircularProgress";
 
@@ -243,7 +243,7 @@ function DashboardPage() {
                   headingText={activeProjectsCount ?? "?"}
                   mainText="Active"
                   subText="Projects"
-                  icon={<TaskAltIcon />}
+                  icon={<HandymanIcon />}
                 />
               </div>
               <div className="dashboard-card-row">
@@ -319,6 +319,7 @@ function DashboardPage() {
                   loading={transactionsLastMonthLoading}
                   disableRange={true}
                   inDashboard={true}
+                  orderAsc={false}
                 />
               </div>
             </div>

diff --git a/frontend/src/styles/Dashboard.css b/frontend/src/styles/Dashboard.css
@@ -176,10 +176,6 @@
 
 /* Reminder */
 
-.reminder {
-  width: 100%;
-}
-
 .reminders-container {
   width: 100%;
   height: 100%;
@@ -215,15 +211,23 @@
   width: 100%;
 }
 
+.reminder {
+  width: 100%;
+  position: relative;
+}
+
 .reminder .date-title-container {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
-  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  row-gap: 0.7rem;
+  column-gap: 0.8rem;
+  padding-right: 30px;
 }
 
 .reminder .date-flag {
   width: fit-content;
+  min-width: fit-content;
   font-size: 0.8rem;
   font-weight: 700;
   color: white;
@@ -237,8 +241,23 @@
   gap: 3px;
 }
 
+.reminder.overdue .date-flag {
+  background-color: var(--red);
+}
+
 .reminder .reminder-more-options {
-  margin-left: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 2rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.reminder .desc {
+  margin-top: 0.7rem;
 }
 
 /* New reminder modal */