From 26354828c988df02f0f8604936965003aef78c11 Mon Sep 17 00:00:00 2001
From: tahmid-saj <tahmid.saj@gmail.com>
Date: Fri, 21 Jun 2024 17:03:42 -0400
Subject: [PATCH] bootstraping nutrient predictor

---
 .../upload-image/upload-image.component.jsx               | 8 +++++---
 .../upload-image/upload-image.styles.jsx                  | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx b/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx
index e90e6d5..a8f2791 100644
--- a/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx
+++ b/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx
@@ -111,11 +111,13 @@ const UploadImage = () => {
             </SimplePaper>
           </div>
 
-          <div className="col">
-            <UploadedImageContainer>
+          <div className="col" visible>
+            <UploadedImageContainer
+              visible={ `${(formFields.uploadedImagePath === "" && formFields.imageUrl === "") ? "hidden" : ""}` }>
               <UploadedImage alt="" id="imageOutput" 
                     style={{ width: "375px", height: "375px", 
-                    visibility: `${(formFields.uploadedImagePath === "" && formFields.imageUrl === "") ? "hidden" : ""}` }}></UploadedImage>
+                    // visibility: `${(formFields.uploadedImagePath === "" && formFields.imageUrl === "") ? "hidden" : ""}` 
+                    }}></UploadedImage>
 
                   {/* <UploadedImage alt="" id="imageOutput" 
                         style={{ width: "500px", height: "500px" }}></UploadedImage> */}
diff --git a/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.styles.jsx b/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.styles.jsx
index 5b3590d..3ee49bf 100644
--- a/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.styles.jsx
+++ b/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.styles.jsx
@@ -16,10 +16,11 @@ export const UploadImageForm = styled.form`
 `
 
 export const UploadedImageContainer = styled.div`
-  display: flex;
+  display: ${(props) => props.visible === "hidden" ? "none" : "flex"};
   justify-content: center;
   align-items: center;
   margin: 2% 2% 2% 2%;
+  visibility: ${(props) => props.visible};
 `
 
 export const UploadedImage = styled.img`