ok

src/components/Item.js

@@ -90,7 +90,7 @@ const Item = ({
   };
 
   return (
-    <div className={`${!last ? styles.notLast : ""}`}>
+    <div className={`${!last && !forInvoice ? styles.notLast : ""}`}>
       <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
         {!forInvoice && (
           // <div className={styles.imageContainer}>
@@ -143,13 +143,14 @@ const Item = ({
         /> */}
           <h3 style={{
             textTransform: 'capitalize',
-            margin: '5px 0px 10px 10px',
+            margin: `${forInvoice ? '13px 0px 10px 10px' : '5px 0px 10px 10px'}`,
             fontSize: '16px',
             display: '-webkit-box',
             WebkitBoxOrient: 'vertical',
             overflow: 'hidden',
             WebkitLineClamp: 2,
-            textOverflow: 'ellipsis'
+            textOverflow: 'ellipsis',
+            width: `${forInvoice? '160px' : 'unset'}`
           }}>
             {itemName}
           </h3>

src/components/Item.module.css

@@ -52,6 +52,7 @@
   position: relative;
   width: 26vw;
   height: 26vw;
+  border-radius: 12px;
 }
 
 .overlay {
@@ -208,9 +209,12 @@
 }
 
 .plusNegative2 {
-  width: 100px;
-  height: 35px;
+  width: 84px;
+  height: 21px;
+  position: absolute;
   transform: rotate(45deg);
+  left: -33px;
+  top: 21px;
 }
 .remove {
   width: 25px;

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: #6ec35a;
+  background-color: rgb(95 121 89);
   /* Rounded corners at the top */
   text-align: right;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

src/components/TablesPage.js

@@ -609,64 +609,59 @@ const SetPaymentQr = ({ shop }) => {
 
 
 
-      {!isconfigcafeidentityname ? <div
-        onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus() }} // Open the config modal
-        style={{
-          backgroundColor: '#303034',
-          right: 0,
-          color: 'white',
-          borderRadius: '0 0 6px 6px',
-          fontFamily: 'Roboto',
-          fontSize: '13px',
-          padding: 3,
-          cursor: 'pointer',
-          marginBottom: '10px'
-        }}
-      >
-        Ganti alamat kedai
-      </div> : (
-        <div style={{
-          display: 'flex', justifyContent: 'space-between', width: '100%',
-          marginBottom: '10px'
-        }}>
-          <div
-            onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
-            style={{
-              backgroundColor: '#303034',
-              width: '47%',
-              color: 'white',
-              borderRadius: '0 0 0px 6px',
-              fontFamily: 'Roboto',
-              fontSize: '13px',
-              padding: 3,
-              cursor: 'pointer',
-            }}
-          >
-            Batalkan
+      {!isconfigcafeidentityname ?
+        <>
+          <div style={styles.uploadMessage}>
+            <p>Klik untuk ganti alamat</p>
           </div>
-
-          <div
-            onClick={() => {
-              setCafeIdentifyNameDefault(cafeIdentifyNameUpdate)
-              // Handle save functionality here
-              setIsConfigCafeIdentityName(false); // Close after saving
-
-            }}
-            style={{
-              backgroundColor: '#303034',
-              width: '47%',
-              color: 'white',
-              borderRadius: '0 0 6px 0px',
-              fontFamily: 'Roboto',
-              fontSize: '13px',
-              padding: 3,
-              cursor: 'pointer',
-            }}
-          >
-            Simpan
+          <div style={styles.resultMessage}>
+            <p onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus() }}>-----------------</p>
+            <div
+              onClick={() => {setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus()}} style={styles.changeButton}>Ganti</div>
           </div>
-        </div>
-      )}
+        </> : (
+          <div style={{
+            display: 'flex', justifyContent: 'space-between', width: '100%',
+            marginBottom: '10px'
+          }}>
+            <div
+              onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
+              style={{
+                backgroundColor: '#303034',
+                width: '47%',
+                color: 'white',
+                borderRadius: '0 0 0px 6px',
+                fontFamily: 'Roboto',
+                fontSize: '13px',
+                padding: 3,
+                cursor: 'pointer',
+              }}
+            >
+              Batalkan
+            </div>
+
+            <div
+              onClick={() => {
+                setCafeIdentifyNameDefault(cafeIdentifyNameUpdate)
+                // Handle save functionality here
+                setIsConfigCafeIdentityName(false); // Close after saving
+
+              }}
+              style={{
+                backgroundColor: '#303034',
+                width: '47%',
+                color: 'white',
+                borderRadius: '0 0 6px 0px',
+                fontFamily: 'Roboto',
+                fontSize: '13px',
+                padding: 3,
+                cursor: 'pointer',
+              }}
+            >
+              Simpan
+            </div>
+          </div>
+        )}
       <div
         id="qr-code-container"
         style={{
@@ -979,12 +974,12 @@ const styles = {
   },
   changeButton: {
     paddingRight: '10px',
-    backgroundColor: 'green',
+    backgroundColor: 'rgb(40, 167, 69)',
     borderRadius: '30px',
     color: 'white',
     fontWeight: 700,
-    height: '36px',
-    lineHeight: '36px',
+    height: '31px',
+    lineHeight: '32px',
     paddingLeft: '10px',
     paddingHeight: '10px',
   },
@@ -1022,14 +1017,14 @@ const styles = {
     justifyContent: 'space-evenly'
   },
   saveButton: {
-    padding: "10px 15px",
-    fontSize: "16px",
-    backgroundColor: "#28a745",
-    color: "#fff",
-    border: "none",
-    borderRadius: "30px",
-    cursor: "pointer",
-    transition: "background-color 0.3s",
+    padding: '6px 15px',
+    fontSize: '13px',
+    backgroundColor: 'rgb(40, 167, 69)',
+    color: 'rgb(255, 255, 255)',
+    border: ' none',
+    borderRadius: '30px',
+    cursor: 'pointer',
+    transition: 'background-color 0.3s',
   },
   switchContainer: {
     textAlign: "left",