From 72bf1d1453d72ad8cdf0d8978bd816c199a06da1 Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Wed, 20 Jul 2022 20:30:16 +0100
Subject: [PATCH] Tweak styling and budget filter modal

---
 public/css/style.css | 10 ++++------
 public/js/index.js   | 15 +++++----------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index d6c8e35..e2ac3a2 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -374,7 +374,7 @@ a.button.secondary:focus {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: bold;
-  color: var(--color-link-hover-dark);
+  color: var(--color-link);
   text-align: left;
 }
 
@@ -383,10 +383,6 @@ a.button.secondary:focus {
   display: inline-block;
 }
 
-#add-expense-form .input-wrapper>label {
-  color: var(--color-link);
-}
-
 .input-wrapper input[type="text"],
 .input-wrapper input[type="date"],
 .input-wrapper input[type="datetime"],
@@ -691,6 +687,8 @@ a.button.secondary:focus {
   justify-content: space-between;
   padding: 0.5rem;
   transition: all 60ms ease-in-out;
+  color: var(--color-link-hover-dark);
+  border-radius: 3px;
 }
 
 #budgets-filter-form .input-wrapper > label:hover {
@@ -771,7 +769,7 @@ a.button.secondary:focus {
 }
 
 .text {
-  color: #ccc;
+  color: var(--color-link);
   text-align: center;
   align-items: center;
   flex: 1;
diff --git a/public/js/index.js b/public/js/index.js
index ef375a9..80cb971 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -284,6 +284,7 @@
 
     async function navigateToMonth(month) {
       currentMonth = month;
+      budgetFilters.clear();
       await showData();
     }
 
@@ -610,22 +611,16 @@
         template: '#budgets-filter-modal',
         focusConfirm: false,
         allowEscapeKey: true,
+        showConfirmButton: false,
         didClose: () => {
           budgetsFilterButton.blur();
         },
         willOpen: async () => {
-          // Show all budgets in #budgets-filter-form
-          const allBudgets = await window.app.dataUtils.fetchBudgets();
-          const allUniquelyNamedBudgets = allBudgets.reduce((budgetsList, budget) => {
-            if (!budgetsList.some((_budget) => budget.name === _budget.name)) {
-              budgetsList.push(budget);
-            }
-
-            return budgetsList;
-          }, []);
+          // Show month's budgets in #budgets-filter-form
+          const monthBudgets = await window.app.dataUtils.fetchBudgets(currentMonth);
           const budgetsFilterForm = document.getElementById('budgets-filter-form');
           budgetsFilterForm.replaceChildren();
-          for (const budget of allUniquelyNamedBudgets) {
+          for (const budget of monthBudgets) {
             const element = getBudgetsFilterModalBudgetItemHtmlElement(budget);
 
             const inputElement = element.querySelector('input');