From 49f6b3790572b3e0a3ab201d88378c8acf195181 Mon Sep 17 00:00:00 2001
From: zadit <75159257+insvrgent@users.noreply.github.com>
Date: Mon, 10 Feb 2025 08:22:02 +0700
Subject: [PATCH] ok

---
 src/components/Header.js             |  2 +-
 src/components/Item.js               |  9 +--
 src/components/Item.module.css       | 10 ++--
 src/components/ItemLister.js         | 82 +++++++++++++++-------------
 src/components/ItemLister.module.css |  4 +-
 src/pages/NotificationRequest.js     |  6 +-
 6 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 2ba31c0..f24a37b 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -219,7 +219,7 @@ const Child = styled.div`
 
 const Header = ({
   HeaderText,
-  HeaderSize = '6vw',
+  HeaderSize = '5vw',
   shopId,
   shopName,
   shopImage,
diff --git a/src/components/Item.js b/src/components/Item.js
index 41a004e..88d832e 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -25,13 +25,6 @@ const Item = ({
   const [itemPrice, setItemPrice] = useState(initialPrice);
   const fileInputRef = useRef(null);
 
-  useEffect(() => {
-    if(!isBeingEdit) {
-      setPreviewUrl(imageUrl)
-      fileInputRef.current.value = null; // Clear the input value
-    }
-  }, [isBeingEdit]);
-
   useEffect(() => {
     console.log(imageUrl);
     console.log(selectedImage);
@@ -120,7 +113,7 @@ const Item = ({
           {(isBeingEdit || blank) && (
             <div className={styles.overlay} onClick={handleImageClick}>
               <span>
-                {previewUrl ? "Ganti" : "Ganti"}
+                {previewUrl ? "Click To Change Image" : "Click To Add Image"}
               </span>
             </div>
           )}
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index a127ed7..f3b86c1 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -55,11 +55,11 @@
 
 .overlay {
   position: absolute;
-  top: 30px;
-  left: 10px;
-  right: 10px;
-  bottom: 30px;
-  background-color: rgba(0, 0, 0, 0.2);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
   color: white;
   display: flex;
   justify-content: center;
diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index eb7abec..7c0e4fc 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -756,8 +756,8 @@ const ItemLister = ({
             )}
             {(isEdit && !isFirstStep || !isEdit) &&
               <>
-                {isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{marginTop: '49px', marginRight: '10px', marginLeft: '10px'}} onClick={()=>setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z"/></svg></div>
-                  <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' :'Daftar item'}</h2></div>}
+                {isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{ marginTop: '49px', marginRight: '10px', marginLeft: '10px' }} onClick={() => setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z" /></svg></div>
+                  <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' : 'Daftar item'}</h2></div>}
                 <div className={styles["item-list"]}>
                   {user && (
                     user.userId == shopOwnerId || user.cafeId == shopId) &&
@@ -885,43 +885,49 @@ const ItemLister = ({
                         <div className={styles["itemWrapper"]}>
                           {isEditMode && isEditItem != item.itemId && (
                             <div className={styles["editModeLayout"]}>
-                              {isEditMode && (
-                                <Switch
-                                  onChange={() => handleChange(item.itemId)}
-                                  checked={item.availability}
-                                />
-                              )}
-                              <h3>
-                                &nbsp;{item.availability ? "tersedia" : "tidak tersedia"}&nbsp;
-                              </h3>
-                              <div
-                                style={{
-                                  width: '32px',
-                                  height: '32px', // Add a height to the div
-                                  display: 'flex', // Use flexbox
-                                  justifyContent: 'center', // Center horizontally
-                                  alignItems: 'center', // Center vertically
-                                  cursor: 'pointer'
-                                }}
-                                onClick={() => editItem(item.itemId)}
-                              >
-                                <svg
-                                  fill="white"
-                                  viewBox="0 0 32 32"
-                                  style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
-                                  version="1.1"
-                                  xmlSpace="preserve"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  xmlnsSerif="http://www.serif.com/"
-                                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                              <div style={{display: 'flex', alignItems: 'center'}}>
+                                {isEditMode && (
+                                  <Switch
+                                    onChange={() => handleChange(item.itemId)}
+                                    checked={item.availability}
+                                  />
+                                )}
+                                <h3>
+                                  &nbsp;{item.availability ? "tersedia" : "tidak tersedia"}
+                                </h3>
+                              </div>
+
+                              <div style={{display: 'flex', alignItems: 'center'}}>
+                                <div
+                                  style={{
+                                    width: '32px',
+                                    height: '32px', // Add a height to the div
+                                    display: 'flex', // Use flexbox
+                                    justifyContent: 'center', // Center horizontally
+                                    alignItems: 'center', // Center vertically
+                                    cursor: 'pointer'
+                                  }}
+                                  onClick={() => editItem(item.itemId)}
                                 >
-                                  <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-                                  <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
-                                  <g id="SVGRepo_iconCarrier">
-                                    <path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
-                                    <path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
-                                  </g>
-                                </svg>
+                                  <svg
+                                    fill="white"
+                                    viewBox="0 0 32 32"
+                                    style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
+                                    version="1.1"
+                                    xmlSpace="preserve"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    xmlnsSerif="http://www.serif.com/"
+                                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                                  >
+                                    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                                    <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                                    <g id="SVGRepo_iconCarrier">
+                                      <path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
+                                      <path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
+                                    </g>
+                                  </svg>
+                                </div>
+                                <h3>Edit item</h3>
                               </div>
                             </div>
                           )}
diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css
index 020330b..a08f50c 100644
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -143,9 +143,11 @@
   width: 100%;
   top: 7px;
   bottom: -4px;
-  display: flex;
+  display: flex
+;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 }
 
 .PaymentOption {
diff --git a/src/pages/NotificationRequest.js b/src/pages/NotificationRequest.js
index 81257c9..2f617a0 100644
--- a/src/pages/NotificationRequest.js
+++ b/src/pages/NotificationRequest.js
@@ -26,13 +26,13 @@ export default function Transaction_pending({ setModal }) {
 
   return (
     <div className={styles.Transaction}>
-        <div style={{ marginTop: "30px", textAlign: "center", padding: '10px' }}>
+        <div style={{ textAlign: "center", padding: '10px' }}>
           
-        <img
+        {/* <img
             className={styles.expression}
             src="https://i.imgur.com/sgvMI02.png"
             alt="Success"
-          />
+          /> */}
           <h2>Notifikasi tidak aktif</h2>
           <p style={{ marginTop: "20px", color: "black" }}>
           Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain.