ok

src/components/Item.js

@@ -168,7 +168,8 @@ const Item = ({
               lineHeight: '1rem',
               marginLeft: 10
             }}>
-              {promoPrice && promoPrice != 0 && promoPrice != '' &&
+              {promoPrice && promoPrice != 0 && promoPrice != '' ?
+                <>
                   <div style={{
                     position: 'relative',
                     marginTop: '0.125rem',
@@ -184,9 +185,9 @@ const Item = ({
                     fontWeight: 600,
                     lineHeight: '1rem'
                   }}>
-                Promo
+                    Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
                   </div>
-}
+
                   <div style={{ display: 'flex' }}>
                     <span style={{
                       marginLeft: '1rem',
@@ -199,6 +200,18 @@ const Item = ({
                       textDecoration: 'line-through'
                     }}>{initialPrice}</span>
                   </div>
+                </>
+                :
+                <>
+
+                  <div style={{ display: 'flex' }}>
+                    <span style={{
+                      marginRight: '0.5rem',
+                      marginTop: '0.125rem'
+                    }}>{initialPrice}</span>
+                  </div>
+                </>
+                }
             </div>
           )}
 
@@ -250,7 +263,7 @@ const Item = ({
               <div className={styles.itemQty}>
                 <button
                   className={styles.addButton}
-                  style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#73a585' : 'gray'}` }}
+                  style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#a8c7a9' : 'gray'}` }}
                   onClick={handlePlusClick}
                   disabled={!isAvailable} // Optionally disable the button if not available
                 >
@@ -264,7 +277,7 @@ const Item = ({
                   style={{
                     backgroundColor: "white",
                     width: "150px",
-                    color: '#73a585'
+                    color: '#a8c7a9'
                   }}
                   onClick={isBeingEdit ? handleUpdate : handleCreate}
                 >

src/components/Item.module.css

@@ -153,8 +153,8 @@
   align-items: center;
   font-size: 0.9rem;
   margin-left: 5px;
-  color: rgb(115, 165, 133);
+  color: #a8c7a9;
-  fill: rgb(115, 165, 133);
+  fill: #a8c7a9;
   height: 40px;
 }
 
@@ -182,7 +182,7 @@
 
 .addButton {
   background-color: #ffffff;
-    border: 2px solid #73a585;
+    border: 2px solid #a8c7a9;
     /* border: none; */
     display: inline-block;
     font-size: 14px;