Merge pull request #147 from tahmid-saj/dev-nutrition-tracker-styling

nutrition tracker styling for signed in

src/components/signed-in/nutrition-tracker/add-micronutrients/add-micronutrients.component.jsx

@@ -1,13 +1,27 @@
-import React, { Component, useContext, useState } from "react";
+import React, { 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-in/nutrition-tracker/nutrition-tracker.context";
+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,
@@ -50,41 +64,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>
   );
 };
 

src/components/signed-in/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;
+  }
+`

src/components/signed-in/nutrition-tracker/calories-graph/calories-graph.component.jsx

@@ -1,9 +1,16 @@
-import "./calories-graph.styles.scss"
+import "./calories-graph.styles.jsx"
+import { NutritionTrackerCaloriesGraphContainer } from "./calories-graph.styles.jsx"
 import ReactApexChart from "react-apexcharts"
 import { useContext } from "react"
 import { NutritionTrackerContext } from "../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context"
 
 import { GRAPH_FIELDS } from "../../../../utils/constants/nutrition-tracker.constants"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js"
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"]
+}
 
 const CaloriesGraph = () => {
   const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext)
@@ -25,7 +32,7 @@ const CaloriesGraph = () => {
   const options = {
     chart: {
       type: 'area',
-      height: 500,
+      height: COMMON_SPACING.lineChart.height,
       zoom: {
         enabled: true
       }
@@ -57,9 +64,12 @@ const CaloriesGraph = () => {
   };
 
   return (
-    <div className="nutrition-tracker-calories-graph-container">
-      <ReactApexChart options={ options } series={ series } type="area" height={ 500 } width={ "90%" }/>
-    </div>
+    <NutritionTrackerCaloriesGraphContainer>
+      <SimplePaper styles={ paperStyles }>
+        <ReactApexChart options={ options } series={ series } type="area" 
+          height={ COMMON_SPACING.lineChart.height } width={ COMMON_SPACING.lineChart.width }/>
+      </SimplePaper>
+    </NutritionTrackerCaloriesGraphContainer>
   )
 }
 

src/components/signed-in/nutrition-tracker/calories-graph/calories-graph.styles.jsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const NutritionTrackerCaloriesGraphContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 1%;
+  padding: 1%;
+`

src/components/signed-in/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx

@@ -1,15 +1,24 @@
 import Button from "../../../shared/button/button.component";
 import FormInput from "../../../shared/form-input/form-input.component";
-import "./nutrition-tracker-filter.styles.scss"
+import "./nutrition-tracker-filter.styles.jsx"
+import { NutritionTrackerFilterContainer, FilterButtonsContainer } from "./nutrition-tracker-filter.styles.jsx"
 
 import { useState, useContext } from "react"
 import { NutritionTrackerContext } from "../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
+import { Typography } from "@mui/material";
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js";
 
 const defaultFormFields = {
   filterStartDate: "",
   filterEndDate: ""
 }
 
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: COMMON_SPACING.filter.width
+}
+
 const NutritionTrackerFilter = () => {
   const [formFields, setFormFields] = useState(defaultFormFields)
   const { filterDayTracked, clearDayTrackedFilter } = useContext(NutritionTrackerContext)
@@ -42,21 +51,23 @@ const NutritionTrackerFilter = () => {
   }
 
   return (
-    <div className="nutrition-tracker-filter-container">
-      <form onSubmit={ handleSubmit }>
-        <h4>Filter by date range</h4>
-        <FormInput type="date" onChange={ handleChange }
-                    name="filterStartDate" value={ formFields.filterStartDate }></FormInput>
-
-        <FormInput type="date" onChange={ handleChange }
-                    name="filterEndDate" value={ formFields.filterEndDate }></FormInput>
-
-        <div className="buttons-container">
-          <Button type="submit">Filter</Button>
-          <Button type="button" onClick={ handleClearFilter }>Clear</Button>
-        </div>
-      </form>
-    </div>
+    <NutritionTrackerFilterContainer>
+      <SimplePaper styles={ paperStyles }>
+        <form onSubmit={ handleSubmit }>
+          <Typography variant="h6">Filter by date range</Typography>
+          <FormInput type="date" onChange={ handleChange }
+                      name="filterStartDate" value={ formFields.filterStartDate }></FormInput>
+
+          <FormInput type="date" onChange={ handleChange }
+                      name="filterEndDate" value={ formFields.filterEndDate }></FormInput>
+
+          <FilterButtonsContainer>
+            <Button type="submit">Filter</Button>
+            <Button type="button" onClick={ handleClearFilter }>Clear</Button>
+          </FilterButtonsContainer>
+        </form>
+      </SimplePaper>
+    </NutritionTrackerFilterContainer>
   )
 }
 

src/components/signed-in/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.styles.jsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const NutritionTrackerFilterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2%;
+`
+
+export const FilterButtonsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`

src/components/signed-in/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx

@@ -1,4 +1,5 @@
-import "./nutrition-tracker-table.styles.scss"
+import "./nutrition-tracker-table.styles.jsx"
+import { FilterNutritionTrackerTableContainer, FilterButtonsContainer } from "./nutrition-tracker-table.styles.jsx";
 import { useContext, useState, useRef } from "react"
 
 import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
@@ -7,6 +8,15 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied
 
 import { NutritionTrackerContext } from "../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
 import Button from "../../../shared/button/button.component";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js";
+import { Typography } from "@mui/material";
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx";
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["8"],
+  margin: "0% 2% 0% 2%",
+  height: COMMON_SPACING.filterTable.height
+}
 
 const NutritionTrackerTable = () => {
   const gridRef = useRef()
@@ -48,19 +58,36 @@ const NutritionTrackerTable = () => {
     await removeDayTracked(selectedData[0].DateTracked)
   }
 
+  const onClearFilter = (event) => {
+    event.preventDefault()
+    clearDayTrackedFilter()
+  }
+
   return (
     // wrapping container with theme & size
-    <div className="ag-theme-quartz-dark filter-nutrition-tracker-table-container" // applying the grid theme
-      style={{ height: 700, width: '85%' }} // the grid will fill the size of the parent container
-      >
-      <h3>Filter or remove tracked date</h3>
+    <SimplePaper styles={ paperStyles }>
+      <Typography sx={{ color: COLOR_CODES.general["5"] }} variant="h6">Filter or remove tracked date</Typography>
+      <FilterNutritionTrackerTableContainer>
+        <div className="ag-theme-quartz-dark" // applying the grid theme
+          style={{ height: 475, width: COMMON_SPACING.table.width }} // the grid will fill the size of the parent container
+          >
 
-      <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
-      <div className="remove-tracked-date-selected-button">
-        <Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
-        <Button type="button" onClick={ clearDayTrackedFilter }>Clear Filter</Button>
-      </div>
-    </div>
+          <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
+          <FilterButtonsContainer>
+            <div className="container">
+              <div className="row justify-content-left align-items-center">
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  <Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
+                </div>
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  <Button type="button" onClick={ onClearFilter }>Clear Filter</Button>
+                </div>
+              </div>
+            </div>
+          </FilterButtonsContainer>
+        </div>
+      </FilterNutritionTrackerTableContainer>
+    </SimplePaper>
   )
 }
 

src/components/signed-in/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.styles.jsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const FilterNutritionTrackerTableContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 0% 0% 4% 0%;
+  padding: 2%;
+`
+
+export const FilterButtonsContainer = styled.div`
+  margin: 1%;
+`

src/components/signed-in/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, NutritionTrackerCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -36,14 +37,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{`Calories: ${item.calories}`}</b>
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -59,11 +60,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="nutrition-tracker-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <NutritionTrackerCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Nutrition tracker calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </NutritionTrackerCalendarContainer>
   )
 }