nutrition tracker styling

tahmid-saj · Jun 22, 2024 · cd4dd0d · cd4dd0d
1 parent 0b6b50b
commit cd4dd0d
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 60 deletions.
diff --git a/...mponents/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.component.jsx b/...mponents/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.component.jsx
@@ -1,16 +1,30 @@
-import React, { Component, useContext, useState } from "react";
+import React, { Component, Fragment, useContext, useState } from "react";
 
 import { ReactComponent as AddMicronutrientsButton } from "../../../../assets/add-micronutrients.svg";
 import { ReactComponent as RemoveMicronutrientsButton } from "../../../../assets/close-button.svg";
 
 import FormInput from "../../../shared/form-input/form-input.component";
 
-import "./add-micronutrients.styles.scss";
+import "./add-micronutrients.styles.jsx";
+import { AddMicronutrientsButtonContainer,
+  MicronutrientContainer
+} from "./add-micronutrients.styles.jsx";
 
 // import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
 import { useDispatch, useSelector } from "react-redux"
 import { selectFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
 import { addFormInputMicronutrients, updateFormInputMicronutrients, deleteFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
+import { Typography } from "@mui/material";
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx";
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants.js";
+
+const paperStyles = {
+  display: "flex",
+  justifyContent: "space-evenly",
+  alignItems: "center",
+  backgroundColor: COLOR_CODES.general["5"],
+  height: 100
+}
 
 const AddMicronutrients = () => {
   // const { formInputMicronutrients, addFormInputMicronutrients, updateFormInputMicronutrients, deleteFormInputMicronutrients } = useContext(NutritionTrackerContext);
@@ -54,41 +68,37 @@ const AddMicronutrients = () => {
   };
 
   return (
-    <div className="add-micronutrients-container">
-
-        <div className="add-micronutrients-button-container">
-          <h4>Add micronutrients</h4>
+    <Fragment>
+        <AddMicronutrientsButtonContainer>
+          <Typography variant="body1">Add micronutrients</Typography>
 
           <AddMicronutrientsButton onClick={ () => handleAdd() }
                 className="add-micronutrients-button">      
           </AddMicronutrientsButton>
-        </div>
+        </AddMicronutrientsButtonContainer>
 
         <div>
           {
             formInputMicronutrients.length !== 0 &&
             formInputMicronutrients.map((micronutrient, micronutrientIndex) => {
               return (
-                <div key={ micronutrientIndex } className="micronutrient-container">
-                  <FormInput label="Micronutrient" type="text" required onChange={ event => handleChange(event, micronutrientIndex) }
-                            name="name" value={ micronutrient.name }></FormInput>
-
-                  <FormInput label="Amount" type="text" required onChange={ event => handleChange(event, micronutrientIndex) }
-                            name="amount" value={ micronutrient.amount }></FormInput>
-
-                  <FormInput label="Unit" type="text" required onChange={ event => handleChange(event, micronutrientIndex) }
-                            name="unit" value={ micronutrient.unit }></FormInput>
-
+                <MicronutrientContainer key={ micronutrientIndex }>
                   <RemoveMicronutrientsButton onClick={ () => handleDelete(micronutrientIndex) }
                         className="remove-micronutrients-button"></RemoveMicronutrientsButton>
-                </div>
+                  <SimplePaper styles={ paperStyles }>
+                    <FormInput label="Micronutrient" type="text" required onChange={ event => handleChange(event, micronutrientIndex) }
+                              name="name" value={ micronutrient.name }></FormInput>
+                    <FormInput label="Amount" type="text" required onChange={ event => handleChange(event, micronutrientIndex) }
+                              name="amount" value={ micronutrient.amount }></FormInput>
+                    <FormInput label="Unit" type="text" required onChange={ event => handleChange(event, micronutrientIndex) }
+                              name="unit" value={ micronutrient.unit }></FormInput>
+                  </SimplePaper>
+                </MicronutrientContainer>
               );
             })
           }
       </div>
-
-
-    </div>
+    </Fragment>
   );
 };
 

diff --git a/src/components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.styles.jsx b/src/components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.styles.jsx
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const AddMicronutrientsButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .add-micronutrients-button:hover {
+    background-color: #ffea97;
+    border-radius: 2rem;
+    border: none;
+    cursor: pointer;
+  }
+`
+
+export const MicronutrientContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2%;
+
+  .remove-micronutrients-button {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .remove-micronutrients-button:hover {
+    background-color: #ff9c9c;
+    border-radius: 5rem;
+    border: none;
+    cursor: pointer;
+  }
+`
diff --git a/...components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.styles.scss b/...components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.styles.scss
@@ -18,7 +18,7 @@
 }
 
 .remove-micronutrients-button {
-  margin-top: 8%;
+  margin-top: 5%;
 }
 
 .remove-micronutrients-button:hover {

diff --git a/...s/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.styles.jsx b/...s/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.styles.jsx
@@ -4,7 +4,7 @@ export const FilterNutritionTrackerTableContainer = styled.div`
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 0% 0% 3% 0%;
+  margin: 0% 0% 4% 0%;
   padding: 2%;
 `
 

diff --git a/...igned-out/nutrition-tracker/update-consumption-form/update-consumption-form.component.jsx b/...igned-out/nutrition-tracker/update-consumption-form/update-consumption-form.component.jsx
@@ -1,6 +1,7 @@
 import { useState, useContext } from "react";
 
-import "./update-consumption-form.styles.scss";
+import "./update-consumption-form.styles.jsx";
+import { UpdateConsumptionFormContainer, ConsumptionFormButtonContainer } from "./update-consumption-form.styles.jsx";
 
 import FormInput from "../../../shared/form-input/form-input.component";
 import Button from "../../../shared/button/button.component";
@@ -10,6 +11,9 @@ import AddMicronutrients from "../add-micronutrients/add-micronutrients.componen
 import { useDispatch, useSelector } from "react-redux"
 import { selectNutritionTrackedDays, selectFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"
 import { addDayTracked, updateDayTracked, setFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
+import { Typography } from "@mui/material";
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx";
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants.js";
 
 const defaultFormFields = {
   dateTracked: "",
@@ -24,8 +28,15 @@ const UpdateConsumptionForm = () => {
   const dispatch = useDispatch()
   const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
   const formInputMicronutrients = useSelector(selectFormInputMicronutrients)
-
+  
   const [formFields, setFormFields] = useState(defaultFormFields);
+
+  const paperStyles = {
+    backgroundColor: COLOR_CODES.general["1"],
+    display: "block",
+    justifyContent: "center",
+    alignItems: "center"
+  }
 
   const resetFormFields = () => {
     setFormFields(defaultFormFields);
@@ -76,42 +87,51 @@ const UpdateConsumptionForm = () => {
   };
 
   return (
-    <div className="update-consumption-form-container">
-      <h2>Track some consumption</h2>
-
-      <form>
-        <h5>Date tracked</h5>
-        <FormInput type="date" required onChange={ handleChange }
-                    name="dateTracked" value={ formFields.dateTracked }></FormInput>
-
-        <FormInput label="Total calories" type="text" required onChange={ handleChange }
-                            name="calories" value={ formFields.calories }></FormInput>
-
-        <FormInput label="Total carbohydrates (g)" type="text" required onChange={ handleChange }
-                            name="carbohydrates" value={ formFields.carbohydrates }></FormInput>
-
-        <FormInput label="Total protein (g)" type="text" required onChange={ handleChange }
-                            name="protein" value={ formFields.protein }></FormInput>
-
-        <FormInput label="Total fat (g)" type="text" required onChange={ handleChange }
-                            name="fat" value={ formFields.fat }></FormInput>
-
-        <AddMicronutrients></AddMicronutrients>
-
-        <div className="tracked-day-buttons-container">
-          <button className="tracked-day-button" type="button"
-                  onClick={ handleAddTrackedDay }>Add Day</button>
-          {
-            nutritionTrackedDays.length !== 0 &&
-            <button className="tracked-day-button" type="submit"
-                    onClick={ handleUpdateTrackedDay }>Update</button>
-          }
-        </div>
-
-      </form>
-
+    <UpdateConsumptionFormContainer micronutrientsAdded={ formInputMicronutrients.length !== 0 }>
+      <SimplePaper styles={ paperStyles }>
+        <Typography variant="h6">Track some consumption</Typography>
+
+        <form>
+          <Typography variant="body1">Date tracked</Typography>
+          <FormInput type="date" required onChange={ handleChange }
+                      name="dateTracked" value={ formFields.dateTracked }></FormInput>
+
+          <FormInput label="Total calories" type="text" required onChange={ handleChange }
+                              name="calories" value={ formFields.calories }></FormInput>
+
+          <FormInput label="Total carbohydrates (g)" type="text" required onChange={ handleChange }
+                              name="carbohydrates" value={ formFields.carbohydrates }></FormInput>
+
+          <FormInput label="Total protein (g)" type="text" required onChange={ handleChange }
+                              name="protein" value={ formFields.protein }></FormInput>
+
+          <FormInput label="Total fat (g)" type="text" required onChange={ handleChange }
+                              name="fat" value={ formFields.fat }></FormInput>
+
+          <AddMicronutrients></AddMicronutrients>
+
+            <div className="container">
+              <div className="row justify-content-evenly align-items-center">
+                <div className="col-sm-12 col-md-12 col-lg-12">
+                  <ConsumptionFormButtonContainer>
+                    <Button type="button" onClick={ handleAddTrackedDay }>Add Day</Button>
+                  </ConsumptionFormButtonContainer>
+                </div>
+
+                <div className="col-sm-12 col-md-12 col-lg-12">
+                  {
+                    nutritionTrackedDays.length !== 0 &&
+                    <ConsumptionFormButtonContainer>
+                      <Button type="submit" onClick={ handleUpdateTrackedDay }>Update Day</Button>
+                    </ConsumptionFormButtonContainer>
+                  }
+                </div>
+              </div>
+            </div>
+        </form>
+      </SimplePaper>
 
-    </div>
+    </UpdateConsumptionFormContainer>
   );
 };
 

diff --git a/...s/signed-out/nutrition-tracker/update-consumption-form/update-consumption-form.styles.jsx b/...s/signed-out/nutrition-tracker/update-consumption-form/update-consumption-form.styles.jsx
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const UpdateConsumptionFormContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 0% 2% 0% 2%;
+  padding: 2%;
+`
+
+export const ConsumptionFormButtonContainer = styled.div`
+  padding: 2%;
+`