bootstraping nutrient predictor

tahmid-saj · Jun 21, 2024 · 3873d22 · 3873d22
1 parent 7336c84
commit 3873d22
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 81 deletions.
diff --git a/src/components/shared/nutrient-predictor/nutrients-info/nutrients-info.component.jsx b/src/components/shared/nutrient-predictor/nutrients-info/nutrients-info.component.jsx
@@ -79,50 +79,54 @@ const NutrientsInfo = () => {
   }
 
   return (
-    nutrientPredictions.map((prediction, index) => {
-      return (
-        <NutrientsInfoContainer key={ index }>
-          <OutlinedCard styles={ outlinedCardStyles }>
-            <strong><Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${prediction.name.toUpperCase()}`}</Typography></strong>
-            <br></br>
-
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${prediction.calories}`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Serving size - ${prediction.servingSizeG} g`}</Typography>
-
-            <br></br>
-            <Divider/>
-            <br></br>
-
-            <strong><h4>Macronutrients</h4></strong>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Carbohydrates - ${prediction.macronutrients.carbohydratesTotalG} g`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Protein - ${prediction.macronutrients.proteinG} g`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fat - ${prediction.macronutrients.fatTotalG} g`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Saturated fat - ${prediction.macronutrients.fatSaturatedG} g`}</Typography>
-
-            <br></br>
-            <Divider/>
-            <br></br>
-
-            <strong><h4>Micronutrients</h4></strong>
-            <Fragment key={ index }>
-              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Sodium - ${prediction.micronutrients.sodiumMG} mg`}</Typography>
-              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Potassium - ${prediction.micronutrients.potassiumMG} mg`}</Typography>
-              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Cholesterol - ${prediction.micronutrients.cholesterolMg} mg`}</Typography>
-              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fiber - ${prediction.micronutrients.fiberG} g`}</Typography>
-              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Sugar - ${prediction.micronutrients.sugarG} g`}</Typography>
-            </Fragment>
-
-            <br></br>
-            <Divider/>
-            <br></br>
-
-            <ButtonsContainer>
-              <Button buttonType="regular-button" type="button" onClick={ () => handleAddToTracker(prediction) }>Add to tracker</Button>
-            </ButtonsContainer>
-          </OutlinedCard>
-        </NutrientsInfoContainer>
-      )
-    })
+    <div className="container">
+      {
+        nutrientPredictions.map((prediction, index) => {
+          return (
+            <NutrientsInfoContainer key={ index }>
+              <OutlinedCard styles={ outlinedCardStyles }>
+                <strong><Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${prediction.name.toUpperCase()}`}</Typography></strong>
+                <br></br>
+
+                <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${prediction.calories}`}</Typography>
+                <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Serving size - ${prediction.servingSizeG} g`}</Typography>
+
+                <br></br>
+                <Divider/>
+                <br></br>
+
+                <strong><h4>Macronutrients</h4></strong>
+                <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Carbohydrates - ${prediction.macronutrients.carbohydratesTotalG} g`}</Typography>
+                <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Protein - ${prediction.macronutrients.proteinG} g`}</Typography>
+                <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fat - ${prediction.macronutrients.fatTotalG} g`}</Typography>
+                <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Saturated fat - ${prediction.macronutrients.fatSaturatedG} g`}</Typography>
+
+                <br></br>
+                <Divider/>
+                <br></br>
+
+                <strong><h4>Micronutrients</h4></strong>
+                <Fragment key={ index }>
+                  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Sodium - ${prediction.micronutrients.sodiumMG} mg`}</Typography>
+                  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Potassium - ${prediction.micronutrients.potassiumMG} mg`}</Typography>
+                  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Cholesterol - ${prediction.micronutrients.cholesterolMg} mg`}</Typography>
+                  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fiber - ${prediction.micronutrients.fiberG} g`}</Typography>
+                  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Sugar - ${prediction.micronutrients.sugarG} g`}</Typography>
+                </Fragment>
+
+                <br></br>
+                <Divider/>
+                <br></br>
+
+                <ButtonsContainer>
+                  <Button buttonType="regular-button" type="button" onClick={ () => handleAddToTracker(prediction) }>Add to tracker</Button>
+                </ButtonsContainer>
+              </OutlinedCard>
+            </NutrientsInfoContainer>
+          )
+        })
+      }
+    </div>
   )
 };
 

diff --git a/src/components/shared/nutrient-predictor/nutrients-info/nutrients-info.styles.jsx b/src/components/shared/nutrient-predictor/nutrients-info/nutrients-info.styles.jsx
@@ -5,5 +5,4 @@ export const NutrientsInfoContainer = styled.div`
   align-items: center;
   justify-content: center;
   padding: 2%;
-  width: 90%;
 `
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
@@ -1,5 +1,5 @@
 import "./upload-image.styles.jsx";
-import { UploadImageContainer, UploadImageForm, UploadedImage } from "./upload-image.styles.jsx";
+import { UploadImageContainer, UploadImageForm, UploadedImage, UploadedImageContainer } from "./upload-image.styles.jsx";
 
 import React, { useState, useContext } from "react";
 import FormInput from "../../../form-input/form-input.component";
@@ -87,33 +87,42 @@ const UploadImage = () => {
 
   return (
     <UploadImageContainer>
-      <SimplePaper styles={ paperStyles }>
-        <UploadImageForm onSubmit={ handleSubmit }>
-          <Typography variant="h6">Upload a food image or enter a meal description</Typography>
-          <Typography paragraph>Example: 1 pound of steak with mashed potatoes and a can of sprite</Typography>
-          <FormInput label="Meal description" type="text" onChange={ handleChange }
-                              name="mealDescription" value={ formFields.mealDescription }></FormInput>
-
-          <FormInput label="Image URL" type="url" id="imageUrl" name="imageUrl" 
-                    onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.url) } value={ formFields.imageUrl }></FormInput>
-
-          <FormInput disabled type="file" id="uploadedImagePath" name="uploadedImagePath" 
-                    onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImagePath } accept="image/*"></FormInput>
-
-          <ButtonsContainer>
-            <Button buttonType="regular-button" type="submit">Predict</Button>
-            <Button buttonType="regular-button" type="button" onClick={ resetFormFields }>Clear</Button>
-          </ButtonsContainer>
-        </UploadImageForm>
-      </SimplePaper>
-
-      <UploadedImage alt="" id="imageOutput" 
-            style={{ width: "500px", height: "500px", 
-            visibility: `${(formFields.uploadedImagePath === "" && formFields.imageUrl === "") ? "hidden" : ""}` }}></UploadedImage>
-
-          {/* <UploadedImage alt="" id="imageOutput" 
-                style={{ width: "500px", height: "500px" }}></UploadedImage> */}
-
+      <div className="container">
+        <div className="row">
+          <div className="col">
+            <SimplePaper styles={ paperStyles }>
+              <UploadImageForm onSubmit={ handleSubmit }>
+                <Typography variant="h6">Upload a food image or enter a meal description</Typography>
+                <Typography paragraph>Example: 1 pound of steak with mashed potatoes and a can of sprite</Typography>
+                <FormInput label="Meal description" type="text" onChange={ handleChange }
+                                    name="mealDescription" value={ formFields.mealDescription }></FormInput>
+
+                <FormInput label="Image URL" type="url" id="imageUrl" name="imageUrl" 
+                          onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.url) } value={ formFields.imageUrl }></FormInput>
+
+                <FormInput disabled type="file" id="uploadedImagePath" name="uploadedImagePath" 
+                          onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImagePath } accept="image/*"></FormInput>
+
+                <ButtonsContainer>
+                  <Button buttonType="regular-button" type="submit">Predict</Button>
+                  <Button buttonType="regular-button" type="button" onClick={ resetFormFields }>Clear</Button>
+                </ButtonsContainer>
+              </UploadImageForm>
+            </SimplePaper>
+          </div>
+
+          <div className="col">
+            <UploadedImageContainer>
+              <UploadedImage alt="" id="imageOutput" 
+                    style={{ width: "375px", height: "375px", 
+                    visibility: `${(formFields.uploadedImagePath === "" && formFields.imageUrl === "") ? "hidden" : ""}` }}></UploadedImage>
+
+                  {/* <UploadedImage alt="" id="imageOutput" 
+                        style={{ width: "500px", height: "500px" }}></UploadedImage> */}
+            </UploadedImageContainer>
+          </div>
+        </div>
+      </div>
     </UploadImageContainer>
   )
 };

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
@@ -4,6 +4,7 @@ export const UploadImageContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 2% 0% 2% 0%;
 `
 
 export const UploadImageForm = styled.form`
@@ -14,9 +15,15 @@ export const UploadImageForm = styled.form`
   /* width: 60%; */
 `
 
+export const UploadedImageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2% 2% 2% 2%;
+`
+
 export const UploadedImage = styled.img`
   box-shadow: 5px 5px 5px 5px rgb(150, 150, 150);
   border-radius: 1.5rem;
-  margin: 2% 2% 4% 2%;
   padding: 2%;
 `
diff --git a/src/components/signed-out/sign-in-form/sign-in-form.component.jsx b/src/components/signed-out/sign-in-form/sign-in-form.component.jsx
@@ -64,7 +64,7 @@ const SignInForm = () => {
 
   return (
     <SignInContainer>
-      <Typography sx={{ color: COLOR_CODES.general["0"] }} variant="h6">Log back in</Typography>
+      <Typography sx={{ color: COLOR_CODES.general["6"] }} variant="h6">Log back in</Typography>
 
       <form onSubmit={ handleSubmit }>
         <FormInput label="Email" type="email" required onChange={ handleChange }

diff --git a/src/components/signed-out/sign-up-form/sign-up-form.component.jsx b/src/components/signed-out/sign-up-form/sign-up-form.component.jsx
@@ -68,7 +68,7 @@ const SignUpForm = () => {
 
   return (
     <SignUpContainer>
-      <Typography sx={{ color: COLOR_CODES.general["0"] }} variant="h6">Sign Up</Typography>
+      <Typography sx={{ color: COLOR_CODES.general["6"] }} variant="h6">Sign up</Typography>
 
       <form onSubmit={ handleSubmit }>
         <FormInput label="Display name" type="text" required onChange={ handleChange }

diff --git a/src/pages/shared/nutrient-predictor/nutrient-predictor.component.jsx b/src/pages/shared/nutrient-predictor/nutrient-predictor.component.jsx
@@ -7,13 +7,15 @@ import NutrientsInfo from "../../../components/shared/nutrient-predictor/nutrien
 
 import { NutrientPredictorContext } from "../../../contexts/shared/nutrient-predictor/nutrient-predictor.context.js";
 import { Divider, Typography } from "@mui/material";
+import { COLOR_CODES } from "../../../utils/constants/shared.constants.js";
 
 const NutrientPredictor = () => {
   const { nutrientPredictions } = useContext(NutrientPredictorContext);
 
   return (
     <NutrientPredictorContainer>
-      <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">Predict some nutrients</Typography>
+      <Typography sx={{ display: "flex", justifyContent: "center", color: COLOR_CODES.general["6"] }} 
+        variant="h6">Predict some nutrients</Typography>
       <UploadFoodImage 
         // displayNutrients={ this.displayNutrients }
       ></UploadFoodImage>

diff --git a/src/pages/shared/nutrient-predictor/nutrient-predictor.styles.jsx b/src/pages/shared/nutrient-predictor/nutrient-predictor.styles.jsx
@@ -4,14 +4,13 @@ export const NutrientPredictorContainer = styled.div`
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 2% 20% 2% 18%;
-  width: 75%;
+  /* margin: 2% 7.5% 2% 7.5%; */
+  /* width: 75%; */
 `
 
 export const NutrientPredictionInfo = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 2% 0% 2% 0%;
-  width: 100%;
+  margin-bottom: 2%;
 `