Formatting for if remaining budget is in the negative

DoughFin · Feb 24, 2024 · 7fb9a10 · 7fb9a10
1 parent eb1fa5d
commit 7fb9a10
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git 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
@@ -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'>