ok

src/components/Item.js

@@ -128,6 +128,24 @@ const Item = ({
         </div>
       )}
       <div className={styles.itemDetails}>
+        {forInvoice &&
+              <svg
+                className={styles.plusNegative2}
+                onClick={onRemoveClick}
+                clipRule="evenodd"
+                fillRule="evenodd"
+                strokeLinejoin="round"
+                strokeMiterlimit="2"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+              <path
+                d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
+                fillRule="nonzero"
+              />
+              </svg>
+              
+}
         <input
           className={`${
             forInvoice ? styles.itemInvoiceName : styles.itemName

src/components/Item.module.css

@@ -17,17 +17,21 @@
   width: 100%; /* Ensure the item does not exceed the parent's width */
   overflow: hidden; /* Prevent internal overflow */
   padding-top: 10px;
-  margin-bottom: -3px;
+  margin-bottom: 5px;
 }
+
 .item:not(.itemInvoice) {
   border-top: 2px solid #00000017;
 }
+
 .itemInvoice {
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
   font-size: 18px;
-  margin-bottom: 45px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding-top: 0px;
 }
 
 .itemInvoice:last-child {
@@ -78,6 +82,7 @@
   flex-direction: column;
   justify-content: space-between;
   margin-left: 10px;
+  margin-right: 10px;
   flex-grow: 1;
 }
 
@@ -94,7 +99,7 @@
   font-family: "Poppins", sans-serif;
   font-style: normal;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   font-weight: 500;
   margin-top: 0;
   margin: 0 5px;
@@ -106,7 +111,7 @@
 .itemInvoiceName {
   width: calc(260% - 15px);
   background-color: transparent;
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   font-weight: 500;
 }
 
@@ -200,6 +205,11 @@
   margin: 2.5px 0 -0.5px 0px;
 }
 
+.plusNegative2 {
+  width: 100px;
+  height: 35px;
+  transform: rotate(45deg);
+}
 .remove {
   width: 25px;
   height: 25px;

src/components/ItemLister.module.css

@@ -38,7 +38,7 @@
     font-family: "Poppins", sans-serif;
     font-weight: 500;
     font-style: normal;
-    font-size: 22px;
+    font-size: 20px;
     color: rgba(88, 55, 50, 1);
     text-align: left;
     width: calc(70% - 10px);
@@ -71,7 +71,6 @@
 .item-list {
   display: flex;
   flex-direction: column; /* Display items in a column */
-  gap: 10px; /* Space between each item */
 }
 
 .border {

src/components/Modal.module.css

@@ -12,9 +12,11 @@
 }
 
 .modalContent {
-  width: 80%;
+  width: 80vw;
   position: relative;
   overflow: visible; /* Add this line to enable scrolling */
+  display: flex;
+  align-items: center;
 }
 
 .closeButton {