ok

src/components/TablesPage.js

@@ -138,9 +138,15 @@ const SetPaymentQr = ({ shop }) => {
 
   function downloadQrCodeContainer({ selectedTable, shop }) {
     const node = document.getElementById('qr-code-container');
-  
+    
     if (!node) return;
   
+    // Save the original background color
+    const originalBackgroundColor = node.style.backgroundColor;
+    
+    // Temporarily remove the background color
+    node.style.backgroundColor = 'transparent';
+    
     const isTableSelected = selectedTable != null;
   
     toPng(node, { pixelRatio: 2 }) // Adjust pixel ratio for higher resolution
@@ -158,27 +164,35 @@ const SetPaymentQr = ({ shop }) => {
       .catch((err) => {
         console.error('Could not download the image', err);
       })
+      .finally(() => {
+        // Restore the original background color after the download
+        node.style.backgroundColor = originalBackgroundColor;
+      });
   }
   
   
+  
   return (
     <div style={styles.container}>
-      <h3 style={styles.title}>QR kedai dan meja</h3>
+      <h3 style={styles.title}>QR kedai</h3>
 
       <div
         id="qr-code-container"
         style={{
-          background: `center center / contain no-repeat url(${bgImageUrl})`,
-          backgroundSize: "contain",
-          border: "1px solid #ddd",
-
           ...styles.qrCodeContainer,
-          backgroundImage: `url(${bgImageUrl})`,
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "contain",
+          backgroundColor: '#cdcdcd'
         }}
       >
+      <img
+        src={bgImageUrl}
+        alt="QR Code"
+        style={{
+          position: "absolute",
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          transform: "translate(-50%, 0%)",
+        }} />
         <img
           src={generateQRCodeUrl(selectedTable?.tableCode || null)}
           alt="QR Code"
@@ -221,16 +235,16 @@ const SetPaymentQr = ({ shop }) => {
         <p>Klik untuk ganti background</p>
       </div>
       <div style={styles.resultMessage}>
-        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(false); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
+        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p>
         <div
           onClick={() => qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti</div>
       </div>
       <div style={styles.switchContainer}>
         {isConfig &&
           <div style={{ marginLeft: '15px' }}>
-            <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
+            {/* <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
               {isConfigQR ? '˅' : '˃'} Konfigurasi QR
-            </p>
+            </p> */}
             {isConfigQR && <>
               <div style={styles.sliderContainer}>
                 <label style={styles.label}>
@@ -290,9 +304,9 @@ const SetPaymentQr = ({ shop }) => {
               </div>
             </>}
 
-            <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
+            {/* <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
               {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
-            </p>
+            </p> */}
             {isConfigFont && (
               <>
                 <div style={styles.sliderContainer}>
@@ -371,9 +385,9 @@ const SetPaymentQr = ({ shop }) => {
 
           </div>
         }
-        <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
+        {/* <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
           {isViewTables ? '˅' : '˃'} Daftar meja
-        </p>
+        </p> */}
 
         {isViewTables &&
           <div style={{marginTop: '34px', marginLeft: '15px'}}>
@@ -421,7 +435,8 @@ const SetPaymentQr = ({ shop }) => {
       </> :
       <>
       <div style={styles.uploadMessage}>
-        <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p>
+        <p>Ini adalah QR yang dapat di scan oleh tamu untuk memesan </p>
+        {/* <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p> */}
       </div>
       <div style={styles.buttonContainer}>
         <button onClick={()=>downloadQrCodeContainer({selectedTable, shop})} style={styles.saveButton}>