diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css index 19e8b93..1c8213b 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css @@ -62,7 +62,6 @@ } - .Rupeesicon { width: 30px; height: 30px; @@ -123,7 +122,9 @@ inset 2px 2px 2px #181618; } - +.coin.selected { + background: #4caf50; /* Green color for the selected coin */ +} @media (max-width: 600px) { .amount-container { padding: 10px; @@ -184,10 +185,9 @@ font-size: 28px; } + + - .coin:hover { - background-color: #4caf50; - } .btn-group{ justify-content: space-between; @@ -219,6 +219,7 @@ font-size: 20px; } + .Rupeesicon { width: 30px; height: 30px; @@ -238,6 +239,7 @@ direction: row; gap: 25px; } + } @media (max-width: 375px) { diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js index 3830739..d4302e8 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js @@ -16,19 +16,23 @@ function ExpenseAmount() { const handleCoinClick = (coinAmount) => { if (isClickable) { - // Update totalAmount based on coin click - const newAmount = parseFloat(totalAmount) + coinAmount; - setTotalAmount(newAmount); // Update the total amount - setLastAddedAmount(coinAmount); // Update the last added amount + + const currentAmount = totalAmount ? parseFloat(totalAmount) : 0; + const newAmount = currentAmount + coinAmount; + + setTotalAmount(newAmount); + setLastAddedAmount(coinAmount); setIsClickable(false); + + setTimeout(() => { setIsClickable(true); - }, 500); + }, 300); } }; const handleSubtractClick = (amount) => { - if (totalAmount >= amount) { // Ensure you do not go negative + if (totalAmount >= amount) { setTotalAmount((prevAmount) => prevAmount - amount); } }; diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js index dd43170..4d5b94b 100644 --- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js @@ -26,7 +26,7 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm const handleAddEntry = () => { setCategoryError(''); - // Ensure amount is a number and greater than zero + if (amount <= 0) { alert('Amount is required and must be greater than zero'); return null; diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js index b415553..d788e88 100644 --- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js +++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js @@ -44,7 +44,7 @@ function ExpenseCategory() { setCustomCategoryCount(customCategoryCount + 1); localStorage.setItem('categories', JSON.stringify(updatedCategories)); alert(`Category "${newCategory}" added!`); - setNewCategory(''); // Clear input field after adding + setNewCategory(''); } else { alert('You can only add up to three custom categories!'); } diff --git a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css index a107d9b..0b76cb5 100644 --- a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css +++ b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css @@ -64,12 +64,14 @@ } -.categories ul { +.categories p { list-style-type: none; padding: 5px; - + font-size: 12px; + border-bottom: 1px solid white; } + .categories li { font-size: 16px; color: #deb1b1; diff --git a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js index 88b4845..4140fd3 100644 --- a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js +++ b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js @@ -87,11 +87,7 @@ function ExpenseRecords() {
{categories.join(', ')}
{currentDateTime}
{categories.join(', ')}