bootstraping nutrient predictor

tahmid-saj · Jun 21, 2024 · 2635482 · 2635482
1 parent 74148dd
commit 2635482
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/...nents/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx b/...nents/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/...mponents/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.styles.jsx b/...mponents/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`