diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
index 372e988..19e8b93 100644
--- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
+++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
@@ -99,9 +99,29 @@
font-weight: bold;
color: #fff;
}
+.btn-group{
+ display: flex;
+ position: relative;
+}
+.minus{
+ width: 60px;
+ background-color: #1E1E1E;
+ color: #fff;
+ box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
+ 8px 8px 16px rgba(4, 4, 4, 0.8),
+ inset -2px -2px 2px rgba(41, 37, 41, 0.64),
+ inset 2px 2px 2px #181618;
-
-
+}
+.plus{
+ width: 60px;
+ background-color: #1E1E1E;
+ color: #fff;
+ box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
+ 8px 8px 16px rgba(4, 4, 4, 0.8),
+ inset -2px -2px 2px rgba(41, 37, 41, 0.64),
+ inset 2px 2px 2px #181618;
+}
@media (max-width: 600px) {
diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js
index 27a391e..3830739 100644
--- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js
+++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js
@@ -10,19 +10,21 @@ function ExpenseAmount() {
const location = useLocation();
const { entryType } = location.state || {};
const [totalAmount, setTotalAmount] = useOutletContext();
-
+
const [isClickable, setIsClickable] = useState(true);
const [lastAddedAmount, setLastAddedAmount] = useState(0);
- const handleCoinClick = (amount) => {
+ const handleCoinClick = (coinAmount) => {
if (isClickable) {
- setTotalAmount((prevAmount) => prevAmount + amount);
- setLastAddedAmount(amount);
+ // Update totalAmount based on coin click
+ const newAmount = parseFloat(totalAmount) + coinAmount;
+ setTotalAmount(newAmount); // Update the total amount
+ setLastAddedAmount(coinAmount); // Update the last added amount
setIsClickable(false);
setTimeout(() => {
setIsClickable(true);
}, 500);
- }
+ }
};
const handleSubtractClick = (amount) => {
@@ -75,10 +77,18 @@ function ExpenseAmount() {
-
diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
index e9c07b4..3d05f5e 100644
--- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
+++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
@@ -9,10 +9,9 @@ body {
flex-direction: column;
position: fixed;
width: 80%;
- max-width: 500px;
+ max-width: 900px;
height: 340px;
top: 32%;
-
left: 50%;
transform: translate(-50%, -50%);
color: white;
@@ -63,7 +62,7 @@ body {
.button-group {
display: flex;
justify-content: space-between;
- width: 80%;
+ width: 40%;
margin: 20px auto;
}
@@ -105,9 +104,7 @@ body {
}
.button-group {
- flex-direction: row;
- align-items: center;
- gap: 15px;
+
}
.add-entry-1,
@@ -115,6 +112,18 @@ body {
width: 50%;
margin: 5px 0;
}
+
+ .button-group {
+ display: flex;
+ justify-content: space-between;
+ width: 80%;
+ margin: 20px auto;
+ flex-direction: row;
+ align-items: center;
+ gap: 15px;
+ }
+
+
}
@media (max-width: 480px) {
diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
index 2726ef1..8182ffe 100644
--- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
+++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
@@ -19,7 +19,7 @@
}
.arrow-icon {
- font-size: 24px;
+ font-size: 18px;
}
/*
@@ -134,11 +134,15 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
}
+
+
@media (max-width: 768px) {
.category-titles {
font-size: 20px;
}
+
+
.arrow{
margin: 13px 10px;
}
diff --git a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
index 173253b..3b537f2 100644
--- a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
+++ b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
@@ -14,6 +14,8 @@
.arrow {
font-size: 18px;
cursor: pointer;
+ margin: 15px;
+ margin-top: 35px ;
}
.arr {
diff --git a/src/components/pages/Income/Amount/AmountPage.css b/src/components/pages/Income/Amount/AmountPage.css
index c3a553a..c066919 100644
--- a/src/components/pages/Income/Amount/AmountPage.css
+++ b/src/components/pages/Income/Amount/AmountPage.css
@@ -97,6 +97,29 @@
}
+.btn-group{
+ display: flex;
+ position: relative;
+}
+.minus{
+ width: 60px;
+ background-color: #1E1E1E;
+ color: #fff;
+ box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
+ 8px 8px 16px rgba(4, 4, 4, 0.8),
+ inset -2px -2px 2px rgba(41, 37, 41, 0.64),
+ inset 2px 2px 2px #181618;
+
+}
+.plus{
+ width: 60px;
+ background-color: #1E1E1E;
+ color: #fff;
+ box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
+ 8px 8px 16px rgba(4, 4, 4, 0.8),
+ inset -2px -2px 2px rgba(41, 37, 41, 0.64),
+ inset 2px 2px 2px #181618;
+}
.coin-value {
diff --git a/src/components/pages/Income/Amount/AmountPage.js b/src/components/pages/Income/Amount/AmountPage.js
index e0b43f0..a504302 100644
--- a/src/components/pages/Income/Amount/AmountPage.js
+++ b/src/components/pages/Income/Amount/AmountPage.js
@@ -10,19 +10,21 @@ function AmountPage() {
const location = useLocation();
const { entryType } = location.state || {};
const [totalAmount, setTotalAmount] = useOutletContext();
-
+
const [isClickable, setIsClickable] = useState(true);
const [lastAddedAmount, setLastAddedAmount] = useState(0);
- const handleCoinClick = (amount) => {
+ const handleCoinClick = (coinAmount) => {
if (isClickable) {
- setTotalAmount((prevAmount) => prevAmount + amount);
- setLastAddedAmount(amount);
+ // Update totalAmount based on coin click
+ const newAmount = parseFloat(totalAmount) + coinAmount;
+ setTotalAmount(newAmount); // Update the total amount
+ setLastAddedAmount(coinAmount); // Update the last added amount
setIsClickable(false);
setTimeout(() => {
setIsClickable(true);
}, 500);
- }
+ }
};
const handleSubtractClick = (amount) => {
@@ -75,15 +77,22 @@ function AmountPage() {
- handleSubtractClick(lastAddedAmount)} disabled={lastAddedAmount === 0}>
+ handleSubtractClick(lastAddedAmount)}
+ disabled={lastAddedAmount === 0}
+ >
-
- handleCoinClick(lastAddedAmount)}>
+ handleCoinClick(lastAddedAmount)}
+ disabled={lastAddedAmount === 0}
+ >
+
);
}
-
export default AmountPage;