From 7fb9a10a7142720f3674321c6829af1d7021e112 Mon Sep 17 00:00:00 2001
From: Anthea Yur <acyur6@gmail.com>
Date: Fri, 23 Feb 2024 23:41:46 -0600
Subject: [PATCH] Formatting for if remaining budget is in the negative

---
 src/components/Budget/Budget.css | 20 ++++++++++++++++++++
 src/components/Budget/Budget.js  | 12 +++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/Budget/Budget.css b/src/components/Budget/Budget.css
index 669a21b8..bfbbc07d 100644
--- a/src/components/Budget/Budget.css
+++ b/src/components/Budget/Budget.css
@@ -123,6 +123,17 @@
   background: rgba(2, 177, 90, 0.15);
 }
 
+.budget-details-flex-neg {
+  display: flex;
+  width: 80px;
+  padding: 2px 0px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 20px;
+  background: rgba(177, 2, 2, 0.15);
+}
+
 .budget-details-amount {
   margin: 0px;
   color: #02B15A;
@@ -132,6 +143,15 @@
   line-height: normal;
 }
 
+.budget-details-amount-neg {
+  margin: 0px;
+  color: #b10202;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
 .budget-categories-container {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Budget/Budget.js b/src/components/Budget/Budget.js
index 7a2794f9..e54d7e09 100644
--- a/src/components/Budget/Budget.js
+++ b/src/components/Budget/Budget.js
@@ -149,9 +149,15 @@ const Budget = () => {
       </div>
       <div className='budget-details'>
         <h3 className='budget-details-h3'>Remaining Budget</h3>
-        <div className='budget-details-flex'>
-          <p className='budget-details-amount'>${(amountRemaining / 100).toFixed(2)}</p>
-        </div>
+        {(amountRemaining / 100).toFixed(2) < 0 ? (
+          <div className='budget-details-flex-neg'>
+            <p className='budget-details-amount-neg'>${(amountRemaining / 100).toFixed(2)}</p>
+          </div>
+          ) : (
+            <div className='budget-details-flex'>
+            <p className='budget-details-amount'>${(amountRemaining / 100).toFixed(2)}</p>
+          </div>
+        )}
       </div>
     </section>
     <section className='budget-categories-container'>