" change in editpage and totalpage "

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/components/pages/Expense/Common/ExpenseEditPage.css

@@ -4,32 +4,36 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
+    overflow: hidden;
     position: relative;
     font-family: 'Montserrat', sans-serif;
 }
 
 .backIcon {
     position: absolute;
-    top: 20px;
+    top: 10px;
-    left: 20px;
+    margin: 35px;
+    left: 10px;
 }
 
 .arrow-icon {
-    font-size: 24px;
+    font-size: 18px;
     cursor: pointer;
 }
 
 .edit-content {
 
-    padding: 20px;
+   padding: 30px;
+    margin-bottom: 30px;
     border-radius: 8px;
-    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     width: 100%;
     max-width: 400px;
 }
 
 .edit-titles h1 {
     color: #fff;
+    margin-bottom: 30px;
     font-size: 30px;
     margin: 0px 0;
     text-align: center;
@@ -37,6 +41,7 @@
 
 .edit-datetime {
     color: #fff;
+    margin-bottom: 30px;
     font-size: 18px;
     text-align: center;
     margin-bottom: 10px;
@@ -44,6 +49,7 @@
 
 .edit-fields {
     color: #fff;
+    padding: 10px 10px;
     margin-bottom: 15px;
     width: 93%;
 }
@@ -51,14 +57,15 @@
 .edit-fields label {
     display: block;
     margin-bottom: 9px;
+    
 }
 
 .edit-fields input {
     width: 100%;
     padding: 10px;
-    border: 1px solid #555;
+    /* border: 1px solid #555; */
     border-radius: 4px;
-    background-color: #3A3A3A;
+    /* background-color: #3A3A3A; */
     color: #fff;
     font-size: 16px;
 }
@@ -68,14 +75,14 @@
     display: flex;
     justify-content: center;
     margin-top: 30px;
+    gap: 5px;
     width: 100%;
 }
 
 .edit-btn {
-
     position: relative;
-    width: 150px;
+    width: 130px;
-    height: 60px;
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -90,8 +97,8 @@
 
 .edit-btn-2 {
     position: relative;
-    width: 150px;
+    width: 130px;
-    height: 60px;
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -106,14 +113,26 @@
 
 @media (max-width: 768px) {
     .edit-titles h1 {
+        
         font-size: 24px;
     }
 
     .edit-datetime {
+        
         font-size: 16px;
     }
 
     .edit-buttons div {
         font-size: 14px;
     }
+
+    
 }
+@media (min-width: 1024px) {
+    .edit-btn, .edit-btn-2 {
+        width: 250px;
+        height: 50px;
+        font-size: 20px;
+    }
+}
+

src/components/pages/Expense/Common/ExpenseEditPage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import "../Common/ExpenseEditPage.css"
+import "../Common/ExpenseEditPage.css";
 
 function ExpenseEditPage() {
   const location = useLocation();
@@ -17,7 +17,20 @@ function ExpenseEditPage() {
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
     setCurrentDateTime(formattedDateTime);
-  }, []);
+
+    
+    if (!location.state?.id) {
+      const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
+      const entryToEdit = storedEntries.find(
+        (entry) => entry.id === location.state?.id
+      );
+
+      if (entryToEdit) {
+        setAmount(entryToEdit.amount);
+        setCategory(entryToEdit.category);
+      }
+    }
+  }, [location.state]);
 
   const handleBackClick = () => {
     navigate("/expense-records");
@@ -34,16 +47,14 @@ function ExpenseEditPage() {
       category: category,
     };
 
-  
     const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
     const updatedEntries = storedEntries.map((entry) =>
       entry.id === updatedEntry.id ? updatedEntry : entry
     );
     localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
-
+    // console.log("Entry updated in local storage:", updatedEntry);
-    console.log("Entry updated in local storage:", updatedEntry);
+    navigate("/expense-successfully", { state: updatedEntry });
-    navigate("/expense-successfully");
     setIsLoading(false);
   };
 

src/components/pages/Expense/Common/ExpenseLayout.css

@@ -1,7 +1,7 @@
 .layout-container {
-    display: flex;
+    /* display: flex;
     flex-direction: column;
-    min-height: 100vh; 
+    min-height: 100vh;  */
     font-family: 'Montserrat', sans-serif;
   }
   

src/components/pages/Expense/Common/TotalExpenseSuccessfully.css

@@ -5,17 +5,21 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
+    font-family: 'Montserrat', sans-serif;
+    color: white;
     position: relative;
 }
 
 .arrows {
     position: absolute;
-    top: 20px;
+    top: 10px;
-    left: 20px;
+    margin: 35px;
+    left: 10px;
 }
 
 .arrow-icon-1 {
-    font-size: 24px;
+    font-size: 18px;
+
     cursor: pointer;
 }
 
@@ -30,13 +34,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 0px;
 }
 
 .success-title h1 {
     color: #fff;
     font-size: 30px;
-    margin-top: 10px;
+    margin-top: 0px;
     text-align: center;
 }
 
@@ -52,14 +56,14 @@
 .success-button {
     display: flex;
     justify-content: center;
-    gap: 20px;
+    gap: 10px;
-    margin-top: 20px;
+    margin-top: 10px;
 }
 
 .btn-view  {
     position: relative; 
-    width: 120px;
+    width: 100px;
-    height: 40px; 
+    height: 30px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -73,8 +77,8 @@
 }
 .btn-back {
     position: relative; 
-    width: 120px;
+    width: 100px;
-    height: 40px; 
+    height: 30px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -88,24 +92,11 @@
 }
 
 
-
 .success-date-time{
     color: #fff;
 }
 
 
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-    .btn-view, .btn-back {
-        padding: 12px 20px;
-        font-size: 16px;
-    }
-}
-
-
-
-
-/* Mobile responsiveness */
 @media (max-width: 768px) {
     .success-message h2 {
         font-size: 20px;
@@ -114,4 +105,21 @@
     .success-title h1 {
         font-size: 24px;
     }
+  
+    
+}
+@media (min-width: 1024px) {
+    .btn-view, .btn-back {
+        width: 200px;
+        height: 50px;
+        font-size: 20px;
+    }
+
+    .success-title h1 {
+        font-size: 32px;
+    }
+
+    .success-message h2 {
+        font-size: 26px;
+    }
 }

src/components/pages/Expense/Common/TotalExpenseSuccessfully.js

@@ -22,7 +22,7 @@ function TotalExpenseSuccessfully() {
     const dataToStore = {
       incomeRecord: {
         dateTime: formattedDateTime,
-        entryId: entryId || "Not provided",  // Fallback in case entryId is undefined
+        entryId: entryId || "Not provided",  
       },
     };
     console.log(JSON.stringify(dataToStore));
@@ -33,7 +33,7 @@ function TotalExpenseSuccessfully() {
   };
 
   const handleViewRecordsClick = () => {
-    // Pass entryId to the /records route when navigating
+    
     navigate("/expense-records", { state: { entryId } });
     console.log(entryId);
   };

src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css

@@ -1,4 +1,3 @@
-
 .amount-container {
   display: flex;
   flex-direction: column;
@@ -6,36 +5,36 @@
   justify-content: center;
   padding: 10px;
   margin: 0 auto;
-    max-width: 500px;
+  max-width: 90vw; 
   background-color: #1e1e1e;
   border-radius: 10px;
   text-align: center;
 }
 
-
 .backarrow {
-    position: relative;
+  /* position: absolute; */
   width: 100%;
-    text-align: center; 
+
-    margin-bottom: 50px;
+
 }
 
 
+
   .arrowbtn {
     position: absolute;
     left: 0;
     top: 50%;
-    margin: 30px 10px;
+    margin: 20px 10px;
-    /* transform: translateY(-50%); */
+    font-size: 4vw; /* Responsive font-size */
-    font-size: 24px;
     color: #333;
     cursor: pointer;
   }
 
 
+
 .amount-titles {
   font-size: 24px;
-    width: 100px;
+  width: 100%;
   color: #fff;
   margin: 0 auto;
   text-align: center;
@@ -45,6 +44,8 @@
 
 .amount-display {
   display: flex;
+    width: 150px; 
+    height: 30px;
   align-items: center;
   justify-content: center;
   background: #1E1E1E;
@@ -81,7 +82,6 @@
 .coin {
   width: 50px;
   height: 50px;
-    
   background: #E335DC;
   box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
   border-radius: 50%;
@@ -95,9 +95,6 @@
 
 }
 
-  
-  
-
 .coin-value {
   font-size: 24px;
   font-weight: bold;
@@ -105,7 +102,6 @@
 }
 
 
-
 @media (max-width: 600px) {
   .amount-container {
     padding: 10px;
@@ -118,11 +114,11 @@
 
   .arrowbtn {
     position: absolute;
-      left: 0;
+    /* left: 3%; */
     top: 50%;
-      margin: 30px 10px;
+    margin: 17px 30px;
     /* transform: translateX(-20%); */
-      font-size: 24px;
+    font-size: 18px;
     color: #333;
     cursor: pointer;
   }
@@ -132,7 +128,7 @@
   }
 
   .rupess_section {
-      gap: 10px;
+    gap: 20px;
   }
 
   .coin {
@@ -147,8 +143,8 @@
   }
 
   .Rupeesicon {
-      width: 20px;
+    width: 33px;
-      height: 20px;
+    height: 33px;
   }
 
   .total-amount {
@@ -162,7 +158,6 @@
 
 }
 
-
 @media (min-width: 1024px) {
   .amount-container {
     max-width: 800px;
@@ -174,6 +169,11 @@
     height: 100px;
   }
 
+  .arrowbtn {
+    font-size: 18px;
+    margin: 27px 21px;
+  }
+
   .coin-value {
     font-size: 20px;
   }
@@ -189,3 +189,45 @@
   }
 }
 
+@media (max-width: 375px) {
+  .amount-container {
+    padding: 0px;
+    max-width: 90%;
+  } 
+
+  .backarrow {
+    justify-content: space-between;
+  }
+
+  .arrowbtn {
+    font-size: 18px;
+    margin: 27px 21px;
+  }
+
+  .amount-titles {
+    font-size: 18px;
+  }
+
+  .rupess_section {
+    gap: 20px;
+    margin-top: 10px;
+  }
+
+  .coin {
+    width: 40px;
+    height: 35px;
+  }
+
+  .coin-value {
+    font-size: 20px;
+  }
+
+  .Rupeesicon {
+    width: 25px;
+    height: 25px;
+  }
+
+  .total-amount {
+    font-size: 26px;
+  }
+}

src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css

@@ -1,9 +1,16 @@
+body {
+  margin: 0;
+  overflow: hidden; 
+}
+
+
 .total-amount-container {
+  display: flex;
   flex-direction: column;
-    position: absolute;
+  position: fixed; 
   width: 80%;
   max-width: 500px;
-    height: auto;
+  height: 340px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -13,7 +20,7 @@
   box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
     inset -2px -2px 2px rgba(255, 255, 255, 0.64),
     inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    padding: 20px; 
+  padding: 8px;
   box-sizing: border-box;
 }
   
@@ -82,7 +89,7 @@
   @media (max-width: 768px) {
     .total-amount-container {
       width: 90%; 
-      top: 60%; 
+      top: 65%; 
     }
   
     .input-group {
@@ -110,7 +117,7 @@
   @media (max-width: 480px) {
     .total-amount-container {
       /* padding: 15px;  */
-      margin: 40px 0px ;
+      margin: 20px 0px 0px 0px ;
     }
   
     .add-entry-1,

src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css

@@ -32,15 +32,21 @@
   text-align: center;
 } */
 
+.category-titles {
+  font-size: 20px;
+  margin-right: 4px;
+  color: #fff;
+  margin-bottom: 20px; /* Add 10px space below category titles */
+}
+
 .category-display {
-   margin: 30px;
+  margin: 35px 0 10px 0; /* 10px space below the display box */
   width: 150px;
   height: 30px;
-    /* left: calc(50% - 207px / 2 - 0.5px); */
-    top: 90px;
   background: #1E1E1E;
   box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
   border-radius: 24px;
+ 
   display: flex;
   align-items: center;
   justify-content: center;
@@ -48,17 +54,13 @@
   border-radius: 8px;
 }
 
-  .category-titles {
-    font-size: 24px;
-    margin-right: 4px;
-  }
 
-  .category-icon {
+.category01 {
   width: 30px;
   /* top: 10px; */
   justify-content: center;
   align-items: center;
-    /* margin: 2px; */
+  margin: 2px;
   height: 30px;
 }
 
@@ -68,13 +70,13 @@
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-    margin-top: 20px;
+  margin-top: 0px;
 }
 
 .cat-item {
   background-color: #2a2a2a;
   border-radius: 10px;
-    padding: 15px;
+  padding: 10px;
   margin: 10px;
   min-width: 120px;
   text-align: center;
@@ -105,7 +107,31 @@
 transition: border-color 0.3s ease, background-color 0.3s ease;
 }
 
+.add-category {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
 
+.texts {
+  flex: 1;
+  padding: 5px;
+  margin-right: 10px;
+}
+
+.add-button {
+  padding: 10px 14px;
+  margin: 15px;
+  background-color: #2a2a2a;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.add-button:hover {
+  background-color: #2a2a2a;
+}
 
 
 @media (max-width: 768px) {
@@ -115,10 +141,10 @@
 
  
 
-    .category-icon {
+  .category01 {
     width: 35px;
     margin: 10px;
-      height: 35px;
+    height: 3px;
   }
 
   .cat-item {
@@ -135,10 +161,11 @@
 
   .category-titles {
     font-size: 18px;
+    color: #fff;
 
   }
 
-    .category-icon {
+  .category01 {
     width: 30px;
     margin: 7px;
     height: 30px;
@@ -156,3 +183,51 @@
   }
 }
 
+@media (max-width: 375px) {
+  .category-container {
+    padding: 0; 
+  }
+
+  .arrow-icon {
+    font-size: 18px;
+    margin: 27px 21px;
+  }
+
+  .arrow {
+    top: 30px; 
+    left: 30px;
+    
+  }
+
+  .category-display {
+    width: 120px;
+    height: 25px;
+    margin: 35px auto; 
+    font-size: 14px;
+  }
+
+  .category-titles {
+    font-size: 14px;
+    margin-right: 2px; 
+  }
+
+  .category01 {
+    width: 25px; 
+    height: 25px;
+    margin: 5px;
+  }
+
+  .cat-item {
+    min-width: 50px;
+    font-size: 10px; 
+    padding: 8px; 
+    margin: 6px;
+  }
+
+  .texts {
+    width: 50%; 
+    font-size: 10px; 
+    padding: 8px;
+    margin: 15px 0; 
+  }
+}

src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js

@@ -8,21 +8,18 @@ import '../ExpenseCategory/ExpenseCategory.css';
 
 
 function ExpenseCategory() {
-  
-
     const navigate = useNavigate();
     const [totalAmount, setTotalAmount, category, setCategory] = useOutletContext(); 
     const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
     const [selectedCategories, setSelectedCategories] = useState([]);
     const [customCategoryCount, setCustomCategoryCount] = useState(0);
+    const [newCategory, setNewCategory] = useState('');
     const location = useLocation(); 
 
-
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        
+        navigate("/income", { state: { entryType } }); 
-        navigate("/expense", { state: { entryType } }); 
         console.log(entryType);  
     }
 
@@ -38,7 +35,8 @@ function ExpenseCategory() {
         }
     };
 
-    const handleAddCategory = (newCategory) => {
+    const handleAddCategory = () => {
+        if (newCategory.trim() === '') return;
         if (!categories.includes(newCategory)) {
             if (customCategoryCount < 3) {
                 const updatedCategories = [...categories, newCategory];
@@ -46,6 +44,7 @@ function ExpenseCategory() {
                 setCustomCategoryCount(customCategoryCount + 1);
                 localStorage.setItem('categories', JSON.stringify(updatedCategories));
                 alert(`Category "${newCategory}" added!`);
+                setNewCategory(''); // Clear input field after adding
             } else {
                 alert('You can only add up to three custom categories!');
             }
@@ -75,7 +74,7 @@ function ExpenseCategory() {
 
             <div className='category-display'>
                 <h3 className="category-titles">Categories</h3>
-                <img src={categoryImage} alt="categoryIcon" className="category-icon" />
+                <img src={categoryImage} alt="categoryIcon" className="category01" />
             </div>
 
             <section className='category-list'>
@@ -90,20 +89,25 @@ function ExpenseCategory() {
                 ))}
             </section>
 
+            {/* Input and button for adding new category */}
             {customCategoryCount < 3 && (
-                <input className='texts'
+                <div className="add-category">
+                    <input 
+                        className='texts'
                         type="text" 
                         placeholder="Add New Category" 
-                    onKeyDown={(e) => {
+                        value={newCategory}
-                        if (e.key === 'Enter') {
+                        onChange={(e) => setNewCategory(e.target.value)}
-                            handleAddCategory(e.target.value);
-                            e.target.value = '';
-                        }
-                    }} 
                     />
+                    <button 
+                        className="add-button" 
+                        onClick={handleAddCategory}
+                    >
+                        Add
+                    </button>
+                </div>
             )}
         </div>
     );
 }
-
 export default ExpenseCategory;

src/components/pages/Expense/ExpensePage/ExpensePage.css

@@ -1,6 +1,6 @@
 
 .expense-container {
-    max-width: 800px;
+    max-width: 100%;
     margin: 0 auto;
     padding: 20px;
    justify-content: center;
@@ -140,7 +140,7 @@
       padding: 10px;
     }
   
-    .amount-icon, .category-icon {
+    .amount-icon, .category{
       width: 40px;
       height: 40px;
       margin: 2px;
@@ -158,3 +158,35 @@
     }
   }
   
+  
+/* Styles for screens with a width of 375px */
+@media (max-width: 375px) {
+  .arrow-icon {
+    font-size: 12px;
+  }
+
+  .expense-title {
+    font-size: 18px;
+  }
+
+  .expense-date {
+    font-size: 12px;
+  }
+
+  .button-container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .amount-btn, .category-btn {
+    width: 90%;
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  .category{
+    width: 25px;
+    height: 25px;
+    margin-bottom: 5px;
+  }
+}

src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css

@@ -1,23 +1,23 @@
 
-
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
-    color: white;
     position: relative;
 }
 
 .back_arrows {
     position: absolute;
-    top: 20px;
+    top: 10px;
-    left: 20px;
+    margin: 35px;
+    left: 10px;;
 }
 
 .arrow-icon {
-    font-size: 24px;
+    font-size: 18px;
+    margin: 9px 0px 0px 0px;
     cursor: pointer;
 }
 
@@ -29,9 +29,9 @@
 }
 
 .success-titles h1 {
-    color: #fff;
+    color: #4CAF50;
     font-size: 30px;
-    margin: 10px 0; 
+    margin: 0 0; 
     text-align: center;
 }
 
@@ -45,21 +45,23 @@
     text-align: center;
     font-size: 24px; 
     color: #4CAF50; 
-    margin: 10px 0;
+    margin: 0px 0;
+    padding: 30px;
 }
 
+
 .categories {
-    margin-top: 10px; 
+    margin-top: 0px; 
     display: flex;
     justify-content: space-between;
     align-items: center; 
+   
 }
 
 .categories h3 {
     font-size: 15px; 
     color: #9e9696;
-   /* margin: 0px 0px 0px 0px; */
+   
-   /* padding: 5px; */
 }
 
 .categories ul {
@@ -84,12 +86,11 @@
     .success-datetime {
         font-size: 16px;
     }
-}
 
     .total-amount {
-    color: #fff;
+        color: #4CAF50;
         font-size: 12px;
-    margin: 20px 0; 
+        margin: 0px 0; 
     }
 
     .categories {
@@ -97,34 +98,20 @@
         font-size: 10px;
         margin: 10px 0; 
     }
+}
 
 .success-buttons {
     display: flex;
     justify-content: center;
-    gap: 20px;
+    gap: 10px;
-    margin-top: 20px;
+    margin-top: 0px;
 }
 
-.btn-home {
+.btn-home,
-    position: relative; 
-    width: 150px;
-    height: 60px; 
-    color: #fff;
-    justify-content: center;
-    align-items: center;
-    background: #1E1E1E;
-    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    border-radius: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-
-}
 .btn-edit {
     position: relative; 
-    width: 150px;
+    width: 140px;
-    height: 60px; 
+    height: 50px;  
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -135,7 +122,82 @@
     justify-content: center;
     align-items: center;
     margin-right: 10px;
+}
+
+@media (min-width: 1024px) {
+    .btn-edit, .btn-home {
+        width: 200px;
+        height: 50px;
+        font-size: 20px;
+    }
+
+    .total-amount {
+        color: #4CAF50;
+        font-size: 12px;
+        margin: 0px 0; 
+    }
+}
+
+/* Screen size 375px */
+@media screen and (max-width: 375px) {
+    .success-titles h1 {
+        font-size: 20px;
+    }
+
+    .success-datetime {
+        font-size: 14px;
+    }
+
+    .total-amount {
+        font-size: 18px;
+        /* padding: 20px; */
+    }
+
+    .categories li {
+        font-size: 14px;
+    }
+
     
 }
 
 
+
+/* Screen size 687px */
+@media screen and (max-width: 687px) {
+    .success-titles h1 {
+        font-size: 22px;
+    }
+
+    .success-datetime {
+        font-size: 16px;
+    }
+
+    .total-amount {
+        font-size: 20px;
+        padding: 25px;
+    }
+
+    .categories li {
+        font-size: 15px;
+    }
+}
+
+/* Screen size 745px */
+@media screen and (max-width: 745px) {
+    .success-titles h1 {
+        font-size: 24px;
+    }
+
+    .success-datetime {
+        font-size: 16px;
+    }
+
+    .total-amount {
+        font-size: 12px;
+        
+    }
+
+    .categories li {
+        font-size: 16px;
+    }
+}

src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js

@@ -45,9 +45,11 @@ function ExpenseRecords() {
   }, [entry, lastEntry]);
 
   const handleBackClick = () => {
-    navigate("/"); 
+    navigate("/expense-totalsuccessfully"); 
   };
-
+  const handleBackHomeClick = () => {
+    navigate("/")
+  }
   const handleEditClick = () => {
     const idToEdit = entryId || (lastEntry ? lastEntry.id : null);
 
@@ -94,7 +96,7 @@ function ExpenseRecords() {
       </div>
       
       <div className="success-buttons">
-        <div className="btn-home" onClick={handleBackClick}>Home</div>
+        <div className="btn-home" onClick={handleBackHomeClick}>Home</div>
         <div className="btn-edit" onClick={handleEditClick}>Edit</div>
       </div>
     </div>

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

@@ -1,10 +1,3 @@
-body {
-    background-color: #1E1E1E;
-    margin: 20px;
-    padding: 0;
-    font-family: Arial, sans-serif;
-}
-
 
 .Payment-container {
     display: flex;
@@ -16,40 +9,35 @@ body {
 }
 
 .arrow {
-    font-size: 24px;
+    font-size: 18px;
     cursor: pointer;
 }
 
-
 .arr {
     position: absolute;
-    top: 20px;
+    top: 10px;
-    left: 20px;
+    left: 0px;
 }
 
-
+.expense-date {
-.income-date {
     color: #fff;
     font-size: 18px; 
     text-align: center; 
-    margin-bottom: 10px; 
+    margin-bottom: 0px; 
 }
 
-
 .payment-title {
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 30px;
 }
 
-
 .payment-title h1 {
     color: #fff;
     font-size: 30px; 
-    margin: 10px 0; 
+    margin: 0px 0; 
     text-align: center;
 }
 
-
 .payment-content {
     display: flex;
     flex-direction: column;
@@ -57,7 +45,6 @@ body {
     justify-content: center;
 }
 
-
 .payment-animation {
     display: flex;
     justify-content: center;
@@ -65,7 +52,6 @@ body {
     margin-bottom: 10px;
 }
 
-
 .payment-message h2 {
     color: #fff;
     font-size: 24px; 
@@ -73,7 +59,6 @@ body {
     margin-bottom: 20px;
 }
 
-
 .payment-buttons {
     display: flex;
     justify-content: center;
@@ -81,11 +66,10 @@ body {
     margin-top: 20px;
 }
 
-
+.btn1, .bt_11 {
-.btn1 {
     position: relative; 
-    width: 150px;
+    width: 130px;   
-    height: 60px; 
+    height: 40px;  
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -98,82 +82,64 @@ body {
     margin-right: 10px;
 }
 
-
+/* Small screens (up to 600px) */
-.bt_11 {
-    position: relative; 
-    width: 150px;
-    height: 60px; 
-    color: #fff;
-    justify-content: center;
-    align-items: center;
-    background: #1E1E1E;
-    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    border-radius: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-}
-
-
-
-
 @media (max-width: 600px) {
     .payment-title h1 {
-        font-size: 24px;
-    }
-
-    .income-date {
         font-size: 16px; 
     }
 
+    .expense-date {
+        font-size: 12px; 
+    }
+
     .payment-message h2 {
-        font-size: 20px;
+        font-size: 14px; 
     }
 
     .btn1, .bt_11 {
         width: 120px;
-        height: 50px;
+        height: 40px;
-        font-size: 16px;
+        font-size: 14px;
     }
 
     .arr {
-        top: 10px;
+        top: 0px;
-        left: 10px;
+        left: 0px;
     }
 }
 
 
 @media (max-width: 1024px) {
     .payment-title h1 {
-        font-size: 28px;
+        font-size: 22px;
     }
 
-    .income-date {
+    .expense-date {
-        font-size: 16px;
+        font-size: 14px;
     }
 
     .payment-message h2 {
-        font-size: 22px;
+        font-size: 18px;
     }
 
     .btn1, .bt_11 {
         width: 140px;
-        height: 55px;
+        height: 50px;
-        font-size: 18px;
+        font-size: 16px;
     }
 
     .arr {
-        top: 15px;
+        top: 0;
-        left: 15px;
+        left: 0px;
+        margin: 5px;
     }
 }
 
-
+/* Large screens (1025px and up) */
 @media (min-width: 1025px) {
     .btn1, .bt_11 {
-        width: 160px;
+        width: 190px;
-        height: 60px;
+        height: 50px;
         font-size: 18px;
     }
 

src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Player } from "@lottiefiles/react-lottie-player";
 import successAnimation from "../Common/Animation - 1727464749500.json";
-import "../ExpenseSuccessfully/ExpenseSuccessfully.css"
+import "../ExpenseSuccessfully/ExpenseSuccessfully.css";
 
 function ExpenseSuccessfully() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const navigate = useNavigate();
+  const location = useLocation(); 
+  const entryType = location.state?.entryType;
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -19,28 +21,32 @@ function ExpenseSuccessfully() {
   }, []);
 
   const handleBackClick = () => {
-    navigate("/expense-edit");
+    const updatedEntry = {
+      id: location.state?.id,
+      amount: location.state?.amount,
+      category: location.state?.category,
+      dateTime: location.state?.dateTime,
+    };
+    
+    navigate("/expense-editPage", { state: updatedEntry });
   };
 
   const handleBackToHome = () => {
-    navigate("/");
+    navigate("/", { state: { entryType } });
   };
 
   const handleBackToRecord = () => {
-    navigate("/expense-records")
+    navigate("/expense-records", { state: { entryType } });
-  }
+  };
 
   const options = { hour: "2-digit", minute: "2-digit", hour12: true };
-  const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
+  const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString([], options)}`;
-    [],
-    options
-  )}`;
 
   return (
     <div className="Payment-container">
       <div className="payment-title">
         <h1>Expense</h1>
-        <p className="income-date">{formattedDate}</p>
+        <p className="expense-date">{formattedDate}</p>
         <div className="arr">
           <FontAwesomeIcon
             icon={faArrowLeft}

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

@@ -18,7 +18,7 @@
   position: relative;
   width: 100%;
   text-align: center; 
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 }
 
 
@@ -27,7 +27,7 @@
   left: 0; 
   top: 50%;
   margin: 30px 10px;
-  /* transform: translateY(-50%); */
+  transform: translateY(90%);
   font-size: 24px;
   color: #333;
   cursor: pointer;

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

@@ -51,7 +51,7 @@ function EntriesList() {
         id: new Date().getTime(),
         amount: repeatEntry.amount,
         category: repeatEntry.category,
-        type: repeatEntry.type, // Ensure type is included
+        type: repeatEntry.type, 
       };
 
       const updatedEntries = [...entries, newEntry];

src/components/pages/Income/Amount/TotalAmount.css

@@ -1,6 +1,12 @@
+body {
+  margin: 0;
+  overflow: hidden; 
+}
+
 .total-amount-container {
+  display: flex;
   flex-direction: column;
-  position: absolute;
+  position: relative; 
   width: 80%;
   max-width: 500px;
   height: auto;
@@ -82,7 +88,7 @@ input:focus {
 @media (max-width: 768px) {
   .total-amount-container {
     width: 90%; 
-    top: 60%; 
+    top: auto; 
   }
 
   .input-group {
@@ -119,3 +125,24 @@ input:focus {
     height: 40px;
   }
 }
+
+
+@media (max-width: 375px) {
+  .total-amount-container {
+    padding: 15px; 
+    margin: 20px; 
+    width: 95%; 
+  }
+
+  .amount-input,
+  .category-input {
+    min-width: 150px; 
+  }
+
+  .add-entry-1,
+  .add-entry-2 {
+    font-size: 12px;
+    height: 35px; 
+  }
+}
+ 

src/components/pages/Income/Category/Category.css

@@ -7,7 +7,7 @@
   background-color: #1e1e1e;
   color: white;
   width: 100%;
-      font-family: 'Montserrat', sans-serif;
+  
   padding: 10px;
 }
 
@@ -21,8 +21,6 @@
 
 .arrow-icon {
   font-size: 24px;
-    right: 85px;
-    bottom: 40px;
 
 }
 /*   
@@ -35,12 +33,17 @@
   text-align: center;
 } */
 
+.category-titles {
+  font-size: 20px;
+  margin-right: 4px;
+  color: #fff;
+  margin-bottom: 20px; /* Add 10px space below category titles */
+}
+
 .category-display {
-   margin: 40px;
+  margin: 35px 0 10px 0; /* 10px space below the display box */
-    width: 10px;
+  width: 150px;
   height: 30px;
-    /* left: calc(50% - 207px / 2 - 0.5px); */
-    top: 90px;
   background: #1E1E1E;
   box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
   border-radius: 24px;
@@ -52,18 +55,13 @@
   border-radius: 8px;
 }
 
-  .category-titles {
-    font-size: 24px;
-    color: #fff;
-    margin-right: 4px;
-  }
 
 .category-icon {
   width: 30px;
   /* top: 10px; */
   justify-content: center;
   align-items: center;
-    /* margin: 2px; */
+  margin: 2px;
   height: 30px;
 }
 
@@ -73,13 +71,13 @@
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-    margin-top: 20px;
+  margin-top: 0px;
 }
 
 .cat-item {
   background-color: #2a2a2a;
   border-radius: 10px;
-    padding: 15px;
+  padding: 10px;
   margin: 10px;
   min-width: 120px;
   text-align: center;
@@ -110,23 +108,48 @@
 transition: border-color 0.3s ease, background-color 0.3s ease;
 }
 
+.add-category {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.texts {
+  flex: 1;
+  padding: 5px;
+  margin-right: 10px;
+}
+
+.add-button {
+  padding: 10px 14px;
+  margin: 15px;
+  background-color: #2a2a2a;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.add-button:hover {
+  background-color: #2a2a2a;
+}
 
 
-  
-  /* Mobile responsiveness */
 @media (max-width: 768px) {
   .category-titles {
     font-size: 20px; 
   }
 
-    .category-container {
+  .category01 {
-      margin: 10px;
+    width: 28px; 
+    height: 28px;
+    margin: 5px;
   }
 
   .category-icon {
     width: 35px;
     margin: 10px;
-      height: 35px;
+    height: 3px;
   }
 
   .cat-item {
@@ -137,12 +160,13 @@
 
 @media (max-width: 480px) {
   .arrow {
-      top: 30px;
+    top: 40px;
-      left: 10px;
+    left: 40px;
   }
 
   .category-titles {
     font-size: 18px;
+    color: #fff;
 
   }
 
@@ -164,3 +188,46 @@
   }
 }
 
+@media (max-width: 375px) {
+  .category-container {
+    
+    padding: 0
+  }
+
+  .arrow {
+    top: 30px; 
+    left: 20px;
+  }
+
+  .category-display {
+    width: 120px; 
+    height: 25px;
+    margin: 15px auto; 
+    font-size: 14px; 
+  }
+
+  .category-titles {
+    font-size: 16px; 
+    margin-right: 2px; 
+  }
+
+  .category-icon {
+    width: 25px; 
+    height: 25px;
+    margin: 5px;
+  }
+
+  .cat-item {
+    min-width: 70px;
+    font-size: 12px; 
+    padding: 8px; 
+    margin: 6px;
+  }
+
+  .texts {
+    width: 80%; 
+    font-size: 14px; 
+    padding: 8px;
+    margin: 15px 0; 
+  }
+}

src/components/pages/Income/Category/Category.js

@@ -11,13 +11,12 @@ function Category() {
     const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
     const [selectedCategories, setSelectedCategories] = useState([]);
     const [customCategoryCount, setCustomCategoryCount] = useState(0);
+    const [newCategory, setNewCategory] = useState('');
     const location = useLocation(); 
 
-
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        
         navigate("/income", { state: { entryType } }); 
         console.log(entryType);  
     }
@@ -34,7 +33,8 @@ function Category() {
         }
     };
 
-    const handleAddCategory = (newCategory) => {
+    const handleAddCategory = () => {
+        if (newCategory.trim() === '') return;
         if (!categories.includes(newCategory)) {
             if (customCategoryCount < 3) {
                 const updatedCategories = [...categories, newCategory];
@@ -42,6 +42,7 @@ function Category() {
                 setCustomCategoryCount(customCategoryCount + 1);
                 localStorage.setItem('categories', JSON.stringify(updatedCategories));
                 alert(`Category "${newCategory}" added!`);
+                setNewCategory(''); // Clear input field after adding
             } else {
                 alert('You can only add up to three custom categories!');
             }
@@ -71,7 +72,7 @@ function Category() {
 
             <div className='category-display'>
                 <h3 className="category-titles">Categories</h3>
-                <img src={categoryImage} alt="categoryIcon" className="category-icon" />
+                <img src={categoryImage} alt="categoryIcon" className="category01" />
             </div>
 
             <section className='category-list'>
@@ -86,17 +87,23 @@ function Category() {
                 ))}
             </section>
 
+            {/* Input and button for adding new category */}
             {customCategoryCount < 3 && (
-                <input className='texts'
+                <div className="add-category">
+                    <input 
+                        className='texts'
                         type="text" 
                         placeholder="Add New Category" 
-                    onKeyDown={(e) => {
+                        value={newCategory}
-                        if (e.key === 'Enter') {
+                        onChange={(e) => setNewCategory(e.target.value)}
-                            handleAddCategory(e.target.value);
-                            e.target.value = '';
-                        }
-                    }} 
                     />
+                    <button 
+                        className="add-button" 
+                        onClick={handleAddCategory}
+                    >
+                        Add
+                    </button>
+                </div>
             )}
         </div>
     );

src/components/pages/Income/Common/IncomeEdit.css

@@ -1,5 +1,3 @@
-
-
 .incomeedit-containers {
     display: flex;
     flex-direction: column;
@@ -12,8 +10,8 @@
 
 .backIcon {
     position: absolute;
-    top: 20px;
+    top: 0px;
-    left: 20px;
+    left: 0px;
 }
 
 .arrow-icon {
@@ -23,7 +21,8 @@
 
 .edit-content {
 
-    padding: 20px;
+    padding: 10px;
+    margin-bottom: 30px;
     border-radius: 8px;
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
     width: 100%;
@@ -32,6 +31,7 @@
 
 .edit-titles h1 {
     color: #fff;
+    margin-bottom: 30px;
     font-size: 30px;
     margin: 0px 0;
     text-align: center;
@@ -39,6 +39,7 @@
 
 .edit-datetime {
     color: #fff;
+    margin-bottom: 30px;
     font-size: 18px;
     text-align: center;
     margin-bottom: 10px;
@@ -53,31 +54,33 @@
 .edit-fields label {
     display: block;
     margin-bottom: 9px;
+    
 }
 
 .edit-fields input {
     width: 100%;
     padding: 10px;
-    border: 1px solid #555; 
+    /* border: 1px solid #555; */
     border-radius: 4px;
-    background-color: #3A3A3A;
+    /* background-color: #3A3A3A; */
     color: #fff;
     font-size: 16px;
 }
 
-/* Button styling */
+
 .edit-buttons {
     display: flex;
     justify-content: center;
     margin-top: 30px;
+    gap: 5px;
     width: 100%;
 }
 
 .edit-btn {
-    /* item */
+
     position: relative;
-    width: 150px;
+    width: 130px;
-    height: 60px; 
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -92,8 +95,8 @@
 
 .edit-btn-2 {
     position: relative;
-    width: 150px;
+    width: 130px;
-    height: 60px; 
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -108,17 +111,26 @@
 
 @media (max-width: 768px) {
     .edit-titles h1 {
+        
         font-size: 24px;
     }
 
     .edit-datetime {
+        
         font-size: 16px;
     }
 
     .edit-buttons div {
         font-size: 14px;
     }
+
+    
+}
+@media (min-width: 1024px) {
+    .edit-btn, .edit-btn-2 {
+        width: 250px;
+        height: 50px;
+        font-size: 20px;
+    }
 }
 
-
-

src/components/pages/Income/Common/IncomeEdit.js

@@ -7,20 +7,27 @@ import "../Common/IncomeEdit.css";
 function IncomeEdit() {
   const location = useLocation();
   const navigate = useNavigate();
-  const [currentDateTime, setCurrentDateTime] = useState("");
+
-  const [amount, setAmount] = useState(location.state?.amount || "");
+  // Destructure state values passed from previous page
-  const [category, setCategory] = useState(location.state?.category || "");
+  const { id, amount: initialAmount, category: initialCategory, dateTime: initialDateTime } = location.state || {};
+
+  const [amount, setAmount] = useState(initialAmount || "");
+  const [category, setCategory] = useState(initialCategory || "");
+  const [currentDateTime, setCurrentDateTime] = useState(initialDateTime || "");
+
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
+    if (!initialDateTime) {
       const now = new Date();
       const formattedDateTime = now.toLocaleString();
       setCurrentDateTime(formattedDateTime);
-  }, []);
+    }
+  }, [initialDateTime]);
 
   const handleBackClick = () => {
-    navigate("/records");
+    navigate("/records"); // Navigate back to records
   };
 
   const handleSave = () => {
@@ -28,23 +35,22 @@ function IncomeEdit() {
     setError(null);
 
     const updatedEntry = {
-      id: location.state?.id,
+      id: id,
       amount: amount,
       dateTime: currentDateTime,
       category: category,
     };
 
-    
+    // Save updated entry to localStorage (or backend API if needed)
     const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
     const updatedEntries = storedEntries.map((entry) =>
       entry.id === updatedEntry.id ? updatedEntry : entry
     );
     localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
-    // Optionally, you can navigate to a success page or display a message here
+    // Navigate to success page
-    console.log("Entry updated in local storage:", updatedEntry);
+    navigate("/successPage", { state: updatedEntry });
-    navigate("/successPage");
+    setIsLoading(false);
-    setIsLoading(false); // End loading
   };
 
   return (

src/components/pages/Income/Home.css

@@ -123,7 +123,7 @@
   }
 
   .buttons {
-    max-width: 100%;
+    max-width: 80%;
   }
 
   .expense-btn, .income-btn {

src/components/pages/Income/Income/IncomePage.css

@@ -1,9 +1,8 @@
-/* IncomePage.css */
 
-/* Main container */
 .income-container {
   max-width: 800px;
   margin: 0 auto;
+  font-family: 'Montserrat', sans-serif;
   padding: 20px;
  justify-content: center;
   border-radius: 10px;
@@ -14,14 +13,15 @@
 .arrow-container {
   position: relative;
   width: 100%;
-  text-align: center; /* Center the title and date */
+  margin: 10px;
+  text-align: center;
   margin-bottom: 20px;
 }
 
-/* Arrow icon */
+
 .arrow-icon {
   position: absolute;
-  left: 0; /* Place the arrow on the left */
+  left: 0; 
   top: 50%;
   margin: 40px 5px;
   transform: translateY(-50%);
@@ -30,7 +30,7 @@
   cursor: pointer;
 }
 
-/* Title */
+
 .income-title {
   font-size: 24px;
   color: #fff;
@@ -40,16 +40,16 @@
   margin-top: 10px; 
 }
 
-/* Date and time */
+
 .income-date {
   font-size: 14px;
   color: #fff;
   font-family: 'Montserrat', sans-serif;
-  text-align: center; /* Center the date */
+  text-align: center; 
   margin: 10px;
 }
 
-/* Button container */
+
 .button-container {
   display: flex;
   font-family: 'Montserrat', sans-serif;
@@ -111,21 +111,21 @@
 
 
 
-/* Icons in buttons */
+
  .category-icon {
   width: 30px;
   height: 30px;
   margin-bottom: 10px;
 }
 
-/* Responsive styling */
-
-/* Mobile-specific styles */
 @media (max-width: 600px) {
 
-
+  .arrow-container{
+    margin: 20px;
+  }
   .arrow-icon {
     font-size: 15px;
+ 
   }
 
   .expense-title {
@@ -166,3 +166,37 @@
   font-size: 18px;
   }
 }
+
+/* Styles for screens with a width of 375px */
+@media (max-width: 375px) {
+  .arrow-container {
+    font-size: 12px;
+  }
+
+
+
+  .income-title {
+    font-size: 18px;
+  }
+
+  .income-date {
+    font-size: 12px;
+  }
+
+  .button-container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .amount-btn, .category-btn {
+    width: 90%;
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  .category-icon {
+    width: 25px;
+    height: 25px;
+    margin-bottom: 5px;
+  }
+}

src/components/pages/Income/Income/IncomeSuccessfully.css

@@ -1,11 +1,10 @@
 body {
     background-color: #1E1E1E;
     margin: 20px;
+    font-family: 'Montserrat', sans-serif;
     padding: 0;
-    font-family: Arial, sans-serif;
 }
 
-
 .Payment-container {
     display: flex;
     flex-direction: column;
@@ -20,36 +19,31 @@ body {
     cursor: pointer;
 }
 
-
 .arr {
     position: absolute;
-    top: 20px;
+    top: 10px;
-    left: 20px;
+    left: 10px;
 }
 
-
+.expense-date {
-.income-date {
     color: #fff;
     font-size: 18px; 
     text-align: center; 
-    margin-bottom: 10px; 
+    margin-bottom: 0px; 
 }
 
-
 .payment-title {
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 30px;
 }
 
-
 .payment-title h1 {
     color: #fff;
-    font-size: 30px;
+    font-size: 30px; /* Default font size */
-    margin: 10px 0; 
+    margin: 0px 0; 
     text-align: center;
 }
 
-
 .payment-content {
     display: flex;
     flex-direction: column;
@@ -57,7 +51,6 @@ body {
     justify-content: center;
 }
 
-
 .payment-animation {
     display: flex;
     justify-content: center;
@@ -65,15 +58,13 @@ body {
     margin-bottom: 10px;
 }
 
-
 .payment-message h2 {
     color: #fff;
-    font-size: 24px;
+    font-size: 24px; /* Default font size */
     text-align: center;
     margin-bottom: 20px;
 }
 
-
 .payment-buttons {
     display: flex;
     justify-content: center;
@@ -81,11 +72,10 @@ body {
     margin-top: 20px;
 }
 
-
+.btn1, .bt_11 {
-.btn1 {
     position: relative; 
-    width: 150px;
+    width: 130px;   /* Default width */
-    height: 60px; 
+    height: 40px;   /* Default height */
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -98,69 +88,50 @@ body {
     margin-right: 10px;
 }
 
-
+/* Small screens (up to 600px) */
-.bt_11 {
-    position: relative; 
-    width: 150px;
-    height: 60px; 
-    color: #fff;
-    justify-content: center;
-    align-items: center;
-    background: #1E1E1E;
-    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    border-radius: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-}
-
-
-
-
 @media (max-width: 600px) {
     .payment-title h1 {
-        font-size: 24px;
+        font-size: 16px; /* Smaller font size */
     }
 
-    .income-date {
+    .expense-date {
-        font-size: 16px;
+        font-size: 12px; /* Smaller font size */
     }
 
     .payment-message h2 {
-        font-size: 20px;
+        font-size: 14px; /* Smaller font size */
     }
 
     .btn1, .bt_11 {
         width: 120px;
-        height: 50px;
+        height: 40px;
-        font-size: 16px;
+        font-size: 14px;
     }
 
     .arr {
-        top: 10px;
+        top: 0px;
-        left: 10px;
+        left: 0px;
     }
 }
 
-
+/* Medium screens (601px to 1024px) */
 @media (max-width: 1024px) {
     .payment-title h1 {
-        font-size: 28px;
+        font-size: 22px;
     }
 
-    .income-date {
+    .expense-date {
-        font-size: 16px;
+        font-size: 14px;
     }
 
     .payment-message h2 {
-        font-size: 22px;
+        font-size: 18px;
     }
 
     .btn1, .bt_11 {
         width: 140px;
-        height: 55px;
+        height: 50px;
-        font-size: 18px;
+        font-size: 16px;
     }
 
     .arr {
@@ -169,11 +140,11 @@ body {
     }
 }
 
-
+/* Large screens (1025px and up) */
 @media (min-width: 1025px) {
     .btn1, .bt_11 {
-        width: 160px;
+        width: 190px;
-        height: 60px;
+        height: 50px;
         font-size: 18px;
     }
 

src/components/pages/Income/Income/IncomeSuccessfully.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Player } from "@lottiefiles/react-lottie-player";
 import successAnimation from "../Common/Animation - 1727464749500.json";
 import "../Income/IncomeSuccessfully.css";
@@ -9,6 +9,8 @@ import "../Income/IncomeSuccessfully.css";
 function IncomeSuccessfully() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const navigate = useNavigate();
+  const location = useLocation(); 
+  const entryType = location.state?.entryType; 
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -19,21 +21,26 @@ function IncomeSuccessfully() {
   }, []);
 
   const handleBackClick = () => {
-    navigate("/editPage");
+    const updatedEntry = {
+      id: location.state?.id,
+      amount: location.state?.amount,
+      category: location.state?.category,
+      dateTime: location.state?.dateTime,
+    };
+    navigate("/editPage", { state: { ...updatedEntry } });  
   };
 
   const handleBackToHome = () => {
-    navigate("/");
+    navigate("/", { state: { entryType } });
   };
 
   const handleBackToRecord = () => {
-    navigate("/records")
+    navigate("/records", { state: { entryType } });
-  }
+  };
 
   const options = { hour: "2-digit", minute: "2-digit", hour12: true };
   const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
-    [],
+    [], options
-    options
   )}`;
 
   return (

src/components/pages/Income/Records/Records.css

@@ -1,11 +1,9 @@
 
-
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-      font-family: 'Montserrat', sans-serif;
     height: 100vh;
     color: white;
     position: relative;
@@ -13,12 +11,13 @@
 
 .back_arrows {
     position: absolute;
-    top: 20px;
+    top: 0px;
-    left: 20px;
+    left: 0px;
 }
 
 .arrow-icon {
     font-size: 24px;
+    margin: 22px 10px 0px 10px;
     cursor: pointer;
 }
 
@@ -42,7 +41,8 @@
     text-align: center; 
 }
 
-.total-amount h2 {
+.total-amount {
+    text-align: center;
     font-size: 24px; 
     color: #4CAF50; 
     margin: 10px 0;
@@ -75,7 +75,7 @@
     padding: 8px 0; 
   }
 
-
+/* Mobile responsiveness */
 @media (max-width: 768px) {
     .success-titles h1 {
         font-size: 24px; 
@@ -87,13 +87,11 @@
 }
 
 .total-amount {
-    text-align: center;
+    color: #fff;
-    font-size: 24px; 
+    font-size: 12px;
-    color: #4CAF50; 
+    margin: 20px 0; 
-    margin: 10px 0;
 }
 
-
 .categories {
     color: #fff;
     font-size: 10px;
@@ -103,14 +101,14 @@
 .success-buttons {
     display: flex;
     justify-content: center;
-    gap: 20px;
+    gap: 10px;
-    margin-top: 20px;
+    margin-top: 0px;
 }
 
 .btn-home {
     position: relative; 
-    width: 150px;
+    width: 140px;
-    height: 60px; 
+    height: 50px;  
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -125,8 +123,8 @@
 }
 .btn-edit {
     position: relative; 
-    width: 150px;
+    width: 140px;
-    height: 60px; 
+    height: 50px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -140,4 +138,18 @@
 
 }
 
+@media (min-width: 1024px) {
+    .btn-edit, .btn-home {
+        width: 200px;
+        height: 50px;
+        font-size: 20px;
+    }
 
+    .success-title h1 {
+        font-size: 32px;
+    }
+
+    .success-message h2 {
+        font-size: 26px;
+    }
+}

src/components/pages/Income/Records/Records.js

@@ -48,6 +48,10 @@ function Records() {
     navigate("/totalsuccessfully"); 
   };
 
+  const handleBackHomeClick = () => {
+    navigate("/")
+  }
+
   const handleEditClick = () => {
     const idToEdit = entryId || (lastEntry ? lastEntry.id : null);
 
@@ -65,6 +69,7 @@ function Records() {
   };
 
   return (
+
     <div className="container">
       <div className="back_arrows">
         <FontAwesomeIcon
@@ -95,7 +100,7 @@ function Records() {
       </div>
       
       <div className="success-buttons">
-        <div className="btn-home" onClick={handleBackClick}>Home</div>
+        <div className="btn-home" onClick={handleBackHomeClick}>Home</div>
         <div className="btn-edit" onClick={handleEditClick}>Edit</div>
       </div>
     </div>

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}