ok

src/components/Header.js

@@ -219,7 +219,7 @@ const Child = styled.div`
 
 const Header = ({
   HeaderText,
-  HeaderSize = '6vw',
+  HeaderSize = '5vw',
   shopId,
   shopName,
   shopImage,

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>
           )}

src/components/Item.module.css

@@ -55,11 +55,11 @@
 
 .overlay {
   position: absolute;
-  top: 30px;
+  top: 0;
-  left: 10px;
+  left: 0;
-  right: 10px;
+  right: 0;
-  bottom: 30px;
+  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.5);
   color: white;
   display: flex;
   justify-content: center;

src/components/ItemLister.js

@@ -885,6 +885,7 @@ const ItemLister = ({
                         <div className={styles["itemWrapper"]}>
                           {isEditMode && isEditItem != item.itemId && (
                             <div className={styles["editModeLayout"]}>
+                              <div style={{display: 'flex', alignItems: 'center'}}>
                                 {isEditMode && (
                                   <Switch
                                     onChange={() => handleChange(item.itemId)}
@@ -892,8 +893,11 @@ const ItemLister = ({
                                   />
                                 )}
                                 <h3>
-                                &nbsp;{item.availability ? "tersedia" : "tidak tersedia"}&nbsp;
+                                  &nbsp;{item.availability ? "tersedia" : "tidak tersedia"}
                                 </h3>
+                              </div>
+
+                              <div style={{display: 'flex', alignItems: 'center'}}>
                                 <div
                                   style={{
                                     width: '32px',
@@ -923,6 +927,8 @@ const ItemLister = ({
                                     </g>
                                   </svg>
                                 </div>
+                                <h3>Edit item</h3>
+                              </div>
                             </div>
                           )}
 

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 {

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.