From f2550a78618ea66fb6058e7fbe84f6f2f848de33 Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sat, 3 Oct 2020 15:16:42 +0200
Subject: [PATCH] Fix #3893

---
 public/v1/js/ff/budgets/index.js      | 6 +++---
 resources/views/v1/budgets/index.twig | 9 +++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/public/v1/js/ff/budgets/index.js b/public/v1/js/ff/budgets/index.js
index b19c9158fc..0d7a74bf13 100644
--- a/public/v1/js/ff/budgets/index.js
+++ b/public/v1/js/ff/budgets/index.js
@@ -241,13 +241,13 @@ function drawBudgetedBars() {
         if (budgetedTooMuch) {
             // budgeted too much.
             pct = (available / budgeted) * 100;
-            bar.find('.progress-bar-warning').css('width', pct + '%');
-            bar.find('.progress-bar-danger').css('width', (100 - pct) + '%');
+            bar.find('.progress-bar-danger').css('width', pct + '%');
+            bar.find('.progress-bar-warning').css('width', (100 - pct) + '%');
             bar.find('.progress-bar-info').css('width', 0);
         } else {
             pct = (budgeted / available) * 100;
-            bar.find('.progress-bar-warning').css('width', 0);
             bar.find('.progress-bar-danger').css('width', 0);
+            bar.find('.progress-bar-warning').css('width', 0);
             bar.find('.progress-bar-info').css('width', pct + '%');
         }
         //$('#budgetedAmount').html(currencySymbol + ' ' + budgeted.toFixed(2));
diff --git a/resources/views/v1/budgets/index.twig b/resources/views/v1/budgets/index.twig
index 27a14a1a99..26f73d56bd 100644
--- a/resources/views/v1/budgets/index.twig
+++ b/resources/views/v1/budgets/index.twig
@@ -147,12 +147,17 @@
                                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                     <div class="progress budgeted_bar" data-id="{{ budget.id }}" data-budgeted="{{ budget.budgeted }}"
                                          data-available="{{ budget.amount }}" data-currency="{{ budget.transaction_currency.id }}">
-                                        <div class="progress-bar progress-bar-danger" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="0"
+                                        {# red: the exact amount of the available budget, if more has budgeted. #}
+                                        <div class="progress-bar progress-bar-danger" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="10"
                                              aria-valuemin="0"
                                              aria-valuemax="100" style="width: 0;"></div>
-                                        <div class="progress-bar progress-bar-warning" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="10"
+
+                                        {# orange: overbudgeted amount #}
+                                        <div class="progress-bar progress-bar-warning" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="0"
                                              aria-valuemin="0"
                                              aria-valuemax="100" style="width: 0;"></div>
+
+                                        {# budgeted amount if enough or les #}
                                         <div class="progress-bar progress-bar-info" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="0"
                                              aria-valuemin="0"
                                              aria-valuemax="100" style="width: 0;"></div>