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() {
- -
); } - export default AmountPage;