' MAKE CHANGE IN UI '

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

@@ -142,7 +142,7 @@
 
 
 
-.selected {
+.select {
  
   background-color: rgba(255, 255, 255, 0.425);
 }
@@ -161,7 +161,7 @@
         font-size: 18px;
         cursor: pointer;
     }
-    .selected {
+    .select {
         width: 100px;
       background-color: rgba(255, 255, 255, 0.425);
     }
@@ -184,7 +184,7 @@
         font-size: 14px;
     }
 
-    .selected {
+    .select {
         width: 100px;
       background-color: rgba(255, 255, 255, 0.425);
     }
@@ -195,7 +195,7 @@
         height: 50px;
         font-size: 20px;
     }
-    .selected {
+    .select {
         width: 100px;
       background-color: rgba(255, 255, 255, 0.425);
     }

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

@@ -137,7 +137,7 @@ function ExpenseEditPage() {
                 {categories.map((category) => (
                   <div
                     key={category}
-                    className={`dropdown-item ${selectedCategories.includes(category) ? "selected" : ""}`}
+                    className={`dropdown-item ${selectedCategories.includes(category) ? "select" : ""}`}
                     onClick={() => handleCategorySelect(category)}
                   >
                     {category}

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

@@ -15,7 +15,6 @@
   /* position: absolute; */
   width: 100%;
 
-
 }
 
   .arrowbtn {
@@ -100,12 +99,14 @@
 }
 .btn-group{
   display: flex;
+  /* margin-top: 5px; */
   position: relative;
 }
 .minus{
   width: 60px;
   background-color: #1E1E1E;
   color: #fff;
+  margin-top: 5px;
   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),
@@ -114,6 +115,7 @@
 }
 .plus{
   width: 60px;
+  margin-top: 5px;
   background-color: #1E1E1E;
   color: #fff;
   box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
@@ -123,7 +125,7 @@
 }
 
 .coin.selected {
-  background: #4caf50; /* Green color for the selected coin */
+  background: #4caf50; 
 }
 @media (max-width: 600px) {
   .amount-container {
@@ -161,7 +163,7 @@
     flex-wrap: wrap;
     gap: 25px;
     margin: 10px;
-    margin-top: 100%;
+    margin-top: 90%;
   }
   
 
@@ -185,9 +187,6 @@
     font-size: 28px;
   }
 
- 
-  
-
   .btn-group{
  
     justify-content: space-between;
@@ -195,7 +194,7 @@
      position: relative;
      display: flex;
       direction: row;
-    gap: 25px;
+      gap: 25px;
    }
 }
 
@@ -263,7 +262,7 @@
 
   .rupess_section {
     gap: 20px;
-    margin-top: 90%;
+    margin-top: 80%;
   }
 
   .coin {
@@ -287,7 +286,7 @@
 .btn-group{
  
  justify-content: space-between;
-  margin-top: 20px;
+  margin-top: 5px;
   position: relative;
   display: flex;
    direction: row;

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

@@ -103,9 +103,7 @@ body {
       margin: 10px 0; 
     }
   
-    .button-group {
     
-    }
   
     .add-entry-1,
     .add-entry-2 {
@@ -117,7 +115,7 @@ body {
       display: flex;
       justify-content: space-between;
       width: 80%;
-      margin: 20px auto;
+      margin: 10px auto;
       flex-direction: row; 
       align-items: center;
       gap: 15px;
@@ -125,11 +123,19 @@ body {
 
 
   }
+  @media (max-width: 375px) {
+    .total-amount-container {
+      /* padding: 15px;  */
+      top: auto;
+      margin: 0px 0px 0px 0px ;
+      height: auto;
+    }
+  }
 
   @media (max-width: 480px) {
     .total-amount-container {
       /* padding: 15px;  */
-      top: 35%;
+      top: 30%;
       margin: 0px 0px 0px 0px ;
       height: auto;
     }

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

@@ -84,11 +84,7 @@
   transition: background-color 0.3s ease;
   cursor: pointer;
 }
-.cat-item.selected {
+
-  background-color: #007BFF; 
-  color: white; 
-  border-radius: 5px; 
-}
 
 .cat-item.selected {
 background-color: #007bff; 
@@ -251,6 +247,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
     margin: 6px;
   }
 
+    
   .texts {
     width: 50%; 
     font-size: 10px; 

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

@@ -154,4 +154,16 @@
   color: #ff4d4d;
 }
 
+@media (max-width: 480px) {
+  .dropdown-item.selected {
+    background-color: #bbb3b33d; 
+    color: #ffffff; 
+  }
+}
 
+@media (max-width: 768px) {
+  .dropdown-item.selected {
+    background-color: #bbb3b33d; 
+    color: #ffffff; 
+  }
+}

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

@@ -1,148 +1,299 @@
-body {
+.amount-container {
-  margin: 0;
-  overflow: hidden; 
-}
-
-.total-amount-container {
   display: flex;
   flex-direction: column;
-  position: relative; 
-  width: 80%;
-  max-width: 500px;
-  height: auto;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  font-family: 'Montserrat', sans-serif;
-  background: #1e1e1e;
-  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;
-  box-sizing: border-box;
-}
-
-.input-group {
-  display: flex; 
-  flex-wrap: wrap; 
-  justify-content: center;
   align-items: center;
-  margin-top: 20px;
+  justify-content: center;
-  width: 100%;
-}
-
-.amount-input,
-.category-input {
-  flex: 1 1 30%; 
-  margin: 10px; 
-  color: white;
-  min-width: 200px; 
-}
-
-label {
-  margin-bottom: 5px;
-}
-
-input {
   padding: 10px;
+  margin: 0 auto;
+  max-width: 90vw; 
   background-color: #1e1e1e;
-  border: none;
+  border-radius: 10px;
-  border-bottom: 1px solid #fafafa;
+  text-align: center;
-  outline: none;
-  color: #ffffff;
-  width: 90%; 
 }
 
-input:focus {
+.backarrow {
-  border-bottom: 1px solid #0056b3;
+  /* position: absolute; */
+  width: 100%;
+
 }
 
-.button-group {
+  .arrowbtn {
-  display: flex;
+    position: absolute;
-  justify-content: space-between;
+    left: 0;
-  width: 80%;
+    top: 50%;
-  margin: 20px auto;
+    margin: 20px 10px;
-}
+    font-size: 4vw;
+    color: #333;
+    cursor: pointer;
+  }
 
-.add-entry-1,
+
-.add-entry-2 {
+
-  width: 150px;
+.amount-titles {
-  height: 50px;
+  font-size: 24px;
+  width: 100%;
   color: #fff;
-  background: #1e1e1e;
+  margin: 0 auto;
-  box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66),
+  text-align: center;
-    8px 8px 16px #040404,
+  flex-grow: 1;
-    inset -2px -2px 2px rgba(4, 4, 4, 0.64),
+}
-    inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+
+
+.amount-display {
+  display: flex;
+    width: 150px; 
+    height: 30px;
+  align-items: center;
+  justify-content: center;
+  background: #1E1E1E;
+  box-shadow: 0px 0px 22.3px #E335DC, 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;
+  padding: 10px;
+  border-radius: 8px;
+  /* margin: 10px; */
+  margin-bottom: 20px;
+}
+
+.total-amount {
+  font-size: 36px;
+  color: #fff;
+  margin-right: 10px;
+
+}
+
+.Rupeesicon {
+  width: 30px;
+  height: 30px;
+}
+
+.rupess_section {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin: 10px;
+  margin-top: 50%;
+}
+
+
+.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%;
+  display: flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
-}
+  transition: background-color 0.3s ease;
-.error-message {
+  /* border: 2px solid #fff; */
-  color: red;
+
+
 }
 
-@media (max-width: 768px) {
+.coin-value {
-  .total-amount-container {
+  font-size: 24px;
-    width: 90%; 
+  font-weight: bold;
-    top: auto; 
+  color: #fff;
-  }
+}
+.btn-group{
+  display: flex;
+  /* margin-top: 5px; */
+  position: relative;
+}
+.minus{
+  width: 60px;
+  background-color: #1E1E1E;
+  color: #fff;
+  margin-top: 5px;
+  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;
 
-  .input-group {
+}
-    flex-direction: column; 
+.plus{
-  }
+  width: 60px;
-
+  margin-top: 5px;
-  .amount-input,
+  background-color: #1E1E1E;
-  .category-input {
+  color: #fff;
-    width: 100%; 
+  box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
-    margin: 10px 0; 
+  8px 8px 16px rgba(4, 4, 4, 0.8),
-  }
+  inset -2px -2px 2px rgba(41, 37, 41, 0.64),
-
+  inset 2px 2px 2px #181618;
-  .button-group {
-    flex-direction: column; 
-    align-items: center;
-  }
-
-  .add-entry-1,
-  .add-entry-2 {
-    width: 100%; 
-    margin: 10px 0; 
-  }
 }
 
-@media (max-width: 480px) {
+.coin.selected {
-  .total-amount-container {
+  background: #4caf50; 
-    /* padding: 15px;  */
+}
-    margin: 40px 0px ;
+@media (max-width: 600px) {
+  .amount-container {
+    padding: 10px;
+    max-width: 90%;
   }
 
-  .add-entry-1,
+  .amount-display{
-  .add-entry-2 {
+    width: 130px; 
-    font-size: 14px; 
+    height: 20px;
-    height: 40px;
   }
+
+  .backarrow {
+    justify-content: space-between;
+  }
+
+  .arrowbtn {
+    position: absolute;
+    /* left: 3%; */
+    top: 50%;
+    margin: 25px 30px;
+    /* transform: translateX(-20%); */
+    font-size: 18px;
+    color: #333;
+    cursor: pointer;
+  }
+
+  .amount-titles {
+    font-size: 20px;
+  }
+
+  .rupess_section {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 25px;
+    margin: 10px;
+    margin-top: 90%;
+  }
+  
+
+  .coin {
+    width: 50px;
+    height: 50px;
+    padding: 15px;
+
+  }
+ 
+  .coin-value {
+    font-size: 24px;
+  }
+
+  .Rupeesicon {
+    width: 25px;
+    height: 25px;
+  }
+
+  .total-amount {
+    font-size: 28px;
+  }
+
+ 
+  
+
+  .btn-group{
+ 
+    justify-content: space-between;
+     margin-top: 20px;
+     position: relative;
+     display: flex;
+      direction: row;
+    gap: 25px;
+   }
 }
 
+@media (min-width: 1024px) {
+  .amount-container {
+    max-width: 800px;
+    padding: 20px;
+  }
+
+  .coin {
+    width: 100px;
+    height: 100px;
+  }
+
+  .arrowbtn {
+    font-size: 18px;
+    margin: 27px 21px;
+  }
+
+  .coin-value {
+    font-size: 20px;
+  }
+ 
+
+  .Rupeesicon {
+    width: 30px;
+    height: 30px;
+    padding: 7px;
+  }
+
+  .total-amount {
+    font-size: 40px;
+  }
+
+  .btn-group{
+ 
+    justify-content: space-between;
+     margin-top: 20px;
+     position: relative;
+     display: flex;
+      direction: row;
+    gap: 25px;
+   }
+   
+}
 
 @media (max-width: 375px) {
-  .total-amount-container {
+  .amount-container {
-    padding: 15px; 
+    padding: 0px;
-    margin: 20px; 
+    max-width: 90%;
-    width: 95%; 
   } 
 
-  .amount-input,
+  .backarrow {
-  .category-input {
+    justify-content: space-between;
-    min-width: 150px; 
   }
 
-  .add-entry-1,
+  .arrowbtn {
-  .add-entry-2 {
+    font-size: 18px;
-    font-size: 12px;
+    margin: 27px 21px;
+  }
+
+  .amount-titles {
+    font-size: 18px;
+  }
+
+  .rupess_section {
+    gap: 20px;
+    margin-top: 80%;
+  }
+
+  .coin {
+    width: 40px;
     height: 35px;
   }
+
+  .coin-value {
+    font-size: 20px;
+  }
+
+  .Rupeesicon {
+    width: 25px;
+    height: 25px;
+  }
+
+  .total-amount {
+    font-size: 26px;
+  }
+
+.btn-group{
+ 
+ justify-content: space-between;
+  margin-top: 5px;
+  position: relative;
+  display: flex;
+   direction: row;
+ gap: 25px;
 }
   
+}

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

@@ -137,7 +137,7 @@ function IncomeEdit() {
                 {categories.map((category) => (
                   <div
                     key={category}
-                    className={`dropdown-item ${selectedCategories.includes(category) ? "selected" : ""}`}
+                    className={`dropdown-item ${selectedCategories.includes(category) ? "select" : ""}`}
                     onClick={() => handleCategorySelect(category)}
                   >
                     {category}