ok

src/components/Item.js

@@ -93,7 +93,7 @@ const Item = ({
     <div className={`${!last ? styles.notLast : ""}`}>
       <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
         {!forInvoice && (
-          <div className={styles.imageContainer}>
+          // <div className={styles.imageContainer}>
             <img
               src={
                 previewUrl
@@ -107,9 +107,9 @@ const Item = ({
               style={{
                 filter: !isAvailable ? "grayscale(100%)" : "none",
               }}
-              className={styles.itemImage}
+              className={styles.imageContainer}
             />
-          </div>
+          // </div>
         )}
         <div className={styles.itemDetails}>
           {forInvoice &&
@@ -141,7 +141,18 @@ const Item = ({
           onChange={handleNameChange}
           disabled={!blank && !isBeingEdit}
         /> */}
-          <h3 style={{ textTransform: 'capitalize', margin: '5px 0px 10px 10px', fontSize: '17px' }}>{itemName}</h3>
+          <h3 style={{
+  textTransform: 'capitalize',
+  margin: '5px 0px 10px 10px',
+  fontSize: '16px',
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  WebkitLineClamp: 2,
+  textOverflow: 'ellipsis'
+}}>
+  {itemName}
+</h3>
           {forInvoice && (
             <>
               <p className={styles.multiplySymbol}>x</p>
@@ -175,16 +186,17 @@ const Item = ({
                     position: 'relative',
                     marginTop: '0.125rem',
                     display: 'flex',
-                    width: 'max-content',
+                    width: '87px',
                     alignItems: 'center',
                     whiteSpace: 'nowrap',
                     borderRadius: '9999px',
                     backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
-                    padding: '0.25rem 0.75rem',
+                    padding: '0.25rem 0rem',
                     color: 'rgb(255, 255, 255)',
                     fontSize: '0.75rem',
                     fontWeight: 600,
-                    lineHeight: '1rem'
+                    lineHeight: '1rem',
+                    justifyContent: 'center'
                   }}>
                     Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
                   </div>
@@ -304,7 +316,13 @@ const Item = ({
       </div>
       {itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
         <div>
-          <p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px', margin: 0 }}>{itemDescription}</p>
+          <p style={{ 
+            maxHeight: '34px',
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  WebkitLineClamp: 2,
+  textOverflow: 'ellipsis', color: '#5f5f5f', fontSize: '14px', padding: '5px', margin: 0 }}>{itemDescription}</p>
         </div>
       }
     </div>

src/components/Item.module.css

@@ -46,16 +46,16 @@
 .itemImage {
   width: 100%;
   height: 100%;
-  border-radius: 10px;
-  margin-right: 10px;
-  object-fit: cover;
-  position: relative;
 }
 
 .imageContainer {
   position: relative;
   width: 26vw;
   height: 26vw;
+  border-radius: 10px;
+  margin-right: 10px;
+  object-fit: cover;
+  position: relative;
 }
 
 .overlay {

src/components/ItemLister.js

@@ -77,7 +77,8 @@ const ItemLister = ({
     const updatedItems = items.map((item) => {
       if (item.itemId === itemId) {
         const newQty = item.qty + 1;
-        updateItemQtyInCart(shopId, itemId, newQty);
+        const nowPrice = item.promoPrice > 0 ? item.promoPrice : item.price
+        updateItemQtyInCart(shopId, itemId, newQty, nowPrice);
 
         if (forCart) refreshTotal();
 
@@ -93,7 +94,8 @@ const ItemLister = ({
       .map((item) => {
         if (item.itemId === itemId && item.qty > 0) {
           const newQty = item.qty - 1;
-          updateItemQtyInCart(shopId, itemId, newQty);
+          const nowPrice = item.promoPrice > 0 ? item.promoPrice : item.price
+          updateItemQtyInCart(shopId, itemId, newQty, nowPrice);
 
           if (forCart) {
             refreshTotal();

src/components/MusicPlayer.css

@@ -25,7 +25,7 @@
   /* filter: blur(1.5px);
   -webkit-filter: blur(1.5px); */
   /* border-radius: 13px 13px 0 0; */
-  background-color: rgb(95 121 89);
+  background-color: #8ec781;
   /* Rounded corners at the top */
   text-align: right;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);