" my chnage ui and functionlity"

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) {

src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js

@@ -14,10 +14,12 @@ function ExpenseAmount() {
   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);
@@ -75,10 +77,18 @@ function ExpenseAmount() {
       </section>
 
       <div className="btn-group">
-        <button onClick={() => handleSubtractClick(lastAddedAmount)} disabled={lastAddedAmount === 0}>
+        <button
+          className="minus"
+          onClick={() => handleSubtractClick(lastAddedAmount)}
+          disabled={lastAddedAmount === 0}
+        >
           -
         </button>
-        <button onClick={() => handleCoinClick(lastAddedAmount)}>
+        <button
+          className="plus"
+          onClick={() => handleCoinClick(lastAddedAmount)}
+          disabled={lastAddedAmount === 0}
+        >
           +
         </button>
       </div>

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) {

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;
  }

src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css

@@ -14,6 +14,8 @@
 .arrow {
     font-size: 18px;
     cursor: pointer;
+    margin: 15px;
+    margin-top: 35px ;
 }
 
 .arr {

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 {

src/components/pages/Income/Amount/AmountPage.js

@@ -14,10 +14,12 @@ function AmountPage() {
   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);
@@ -75,15 +77,22 @@ function AmountPage() {
       </section>
 
       <div className="btn-group">
-        <button onClick={() => handleSubtractClick(lastAddedAmount)} disabled={lastAddedAmount === 0}>
+        <button
+          className="minus"
+          onClick={() => handleSubtractClick(lastAddedAmount)}
+          disabled={lastAddedAmount === 0}
+        >
           -
         </button>
-        <button onClick={() => handleCoinClick(lastAddedAmount)}>
+        <button
+          className="plus"
+          onClick={() => handleCoinClick(lastAddedAmount)}
+          disabled={lastAddedAmount === 0}
+        >
           +
         </button>
       </div>
     </div>
   );
 }
-
 export default AmountPage;