Merge pull request #152 from tahmid-saj/dev-calories-burned-styling

calories burned styling for signed out

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

@@ -4,7 +4,7 @@ import "./summary.styles.jsx";
 import { NutritionTrackerSummary } from "./summary.styles.jsx";
 
 import { NutritionTrackerContext } from "../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
-import { Typography } from "@mui/material";
+import { Typography, Divider } from "@mui/material";
 
 import SimplePaper from "../../../shared/mui/paper/paper.component.jsx";
 import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js";
@@ -28,6 +28,10 @@ const Summary = () => {
  <SimplePaper styles={ paperStyles }>
  <Typography variant="h6">{`As of ${currentDate}`}</Typography>
 
+ <br/>
+ <Divider/>
+ <br/>
+
  <Typography variant="body1">{`Average daily calories : ${nutritionTrackedDaysSummary.averageDailyCaloriesConsumption.toFixed(2)}`}</Typography>
  <Typography variant="body1">{`Average daily carbohydrates : ${nutritionTrackedDaysSummary.averageDailyCarbohydratesConsumption.toFixed(2)} g`}</Typography>
  <Typography variant="body1">{`Average daily protein : ${nutritionTrackedDaysSummary.averageDailyProteinConsumption.toFixed(2)} g`}</Typography>

src/components/signed-in/nutrition-tracker/update-consumption-form/update-consumption-form.component.jsx

@@ -82,7 +82,8 @@ const UpdateConsumptionForm = () => {
  <UpdateConsumptionFormContainer micronutrientsAdded={ formInputMicronutrients.length !== 0 }>
  <SimplePaper styles={ paperStyles }>
  <Typography variant="h6">Track some consumption</Typography>
-
+ <Typography sx={{ marginBottom: "6%" }} 
+ variant="body1">Start by adding the consumption of calories, carbohydrates, protein and fat for a specific day</Typography>
  <form>
  <Typography variant="body1">Date tracked</Typography>
  <FormInput type="date" required onChange={ handleChange }

src/components/signed-out/calories-burned/activity-date-filter/activity-date-filter.component.jsx

@@ -0,0 +1,80 @@
+import Button from "../../../shared/button/button.component"
+import FormInput from "../../../shared/form-input/form-input.component"
+import "./activity-date-filter.styles.jsx"
+import { ActivityDateFilterContainer, FilterButtonsContainer } from "./activity-date-filter.styles.jsx"
+
+import { useState, useContext } from "react"
+import { CaloriesBurnedContext } from "../../../../contexts/signed-out/calories-burned/calories-burned.context"
+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 defaultFormFields = {
+ activity: "",
+ dateTracked: "",
+ durationMinutes: ""
+}
+
+const paperStyles = {
+ backgroundColor: COLOR_CODES.general["1"],
+ width: COMMON_SPACING.filter.width
+}
+
+const ActivityDateFilter = () => {
+ const [formFields, setFormFields] = useState(defaultFormFields)
+ const { filterActivityDates, clearActivityDatesFilter } = useContext(CaloriesBurnedContext)
+
+ const resetFormFields = () => {
+ setFormFields(defaultFormFields)
+ }
+
+ const handleSubmit = (event) => {
+ event.preventDefault()
+
+ if (formFields.activity === "" && formFields.dateTracked === "" &&
+ !formFields.activity && !formFields.dateTracked &&
+ !formFields.durationMinutes && !formFields.durationMinutes) {
+ console.log("please fill out all info")
+ return
+ }
+
+ filterActivityDates(formFields)
+ }
+
+ const handleChange = (event) => {
+ const { name, value } = event.target
+ setFormFields({ ...formFields, [name]: value })
+ }
+
+ const handleClearFilter = (event) => {
+ event.preventDefault()
+
+ resetFormFields()
+ clearActivityDatesFilter()
+ }
+
+ return (
+ <ActivityDateFilterContainer>
+ <SimplePaper styles={ paperStyles }>
+ <form onSubmit={ handleSubmit }>
+ <Typography variant="h6">Filter activities</Typography>
+ <FormInput type="date" onChange={ handleChange }
+ name="dateTracked" value={ formFields.dateTracked }></FormInput>
+
+ <FormInput label="Activity" type="text" onChange={ handleChange }
+ name="activity" value={ formFields.activity }></FormInput>
+
+ <FormInput label="Duration (minutes)" type="text" onChange={ handleChange }
+ name="durationMinutes" value={ formFields.durationMinutes }></FormInput>
+
+ <FilterButtonsContainer>
+ <Button type="submit">Filter</Button>
+ <Button type="button" onClick={ handleClearFilter }>Clear</Button>
+ </FilterButtonsContainer>
+ </form>
+ </SimplePaper>
+ </ActivityDateFilterContainer>
+ )
+}
+
+export default ActivityDateFilter

src/components/signed-out/calories-burned/activity-date-filter/activity-date-filter.styles.jsx

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

src/components/signed-out/calories-burned/add-activity/activity-date-form/activity-date-form.component.jsx

@@ -1,9 +1,17 @@
 import Button from "../../../../shared/button/button.component"
-import "./activity-date-form.styles.scss"
+import "./activity-date-form.styles.jsx"
+import { ActivityDateFormContainer } from "./activity-date-form.styles.jsx"
 import { useState, useContext } from "react"
 import FormInput from "../../../../shared/form-input/form-input.component"
 
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-out/calories-burned/calories-burned.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 = {
+ backgroundColor: COLOR_CODES.general["1"]
+}
 
 const defaultFormFields = {
  activity: "",
@@ -33,25 +41,29 @@ const ActivityDateForm = () => {
  }
 
  return (
- <div className="activity-date-form-container">
- <form onSubmit={ handleSubmit }>
- <h4>Track the calories of an activity</h4>
- <FormInput type="date" required onChange={ handleChange }
- name="dateTracked" value={ formFields.dateTracked }></FormInput>
-
- <FormInput label="Activity" type="text" required onChange={ handleChange }
- name="activity" value={ formFields.activity }></FormInput>
-
- <p>Optional:</p>
- <FormInput label="Weight (pounds)" type="text" onChange={ handleChange }
- name="weightPounds" value={ formFields.weightPounds }></FormInput>
-
- <FormInput label="Duration (minutes)" type="text" onChange={ handleChange }
- name="durationMinutes" value={ formFields.durationMinutes }></FormInput>
-
- <Button type="submit">Search Activity</Button>
- </form>
- </div>
+ <ActivityDateFormContainer>
+ <SimplePaper styles={ paperStyles }>
+ <form onSubmit={ handleSubmit }>
+ <Typography variant="h6">Track the calories of an activity</Typography>
+ <Typography variant="body1">Start by searching and adding an activity you did like running, along with a date</Typography>
+
+ <FormInput type="date" required onChange={ handleChange }
+ name="dateTracked" value={ formFields.dateTracked }></FormInput>
+
+ <FormInput label="Activity" type="text" required onChange={ handleChange }
+ name="activity" value={ formFields.activity }></FormInput>
+
+ <Typography paragraph>Optional:</Typography>
+ <FormInput label="Weight (pounds)" type="text" onChange={ handleChange }
+ name="weightPounds" value={ formFields.weightPounds }></FormInput>
+
+ <FormInput label="Duration (minutes)" type="text" onChange={ handleChange }
+ name="durationMinutes" value={ formFields.durationMinutes }></FormInput>
+
+ <Button type="submit">Search Activity</Button>
+ </form>
+ </SimplePaper>
+ </ActivityDateFormContainer>
  )
 }
 

src/components/signed-out/calories-burned/add-activity/activity-date-form/activity-date-form.styles.jsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const ActivityDateFormContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0% 2% 0% 2%;
+ padding: 2%;
+ width: auto;
+`

src/components/signed-out/calories-burned/add-activity/activity-date-table/activity-date-table.component.jsx

@@ -1,4 +1,7 @@
-import "./activity-date-table.styles.scss"
+import "./activity-date-table.styles.jsx"
+import { SearchedCaloriesBurnedActivitiesTableContainer,
+ SearchedCaloriesBurnedActivitiesTable
+} from "./activity-date-table.styles.jsx";
 import { useState, useContext, useRef } from "react"
 
 import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
@@ -7,6 +10,15 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied
 
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-out/calories-burned/calories-burned.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";
+import { ButtonsContainer } from "../../../../shared/button/button.styles.jsx";
+
+const paperStyles = {
+ backgroundColor: COLOR_CODES.general["8"],
+ padding: "2%",
+}
 
 const ActivityDateTable = () => {
  const gridRef = useRef()
@@ -53,15 +65,21 @@ const ActivityDateTable = () => {
 
  return (
  // wrapping container with theme & size
- <div className="ag-theme-quartz-dark searched-calories-burned-activities-table-container" // applying the grid theme
- style={{ height: 700, width: '65%' }} // the grid will fill the size of the parent container
- >
- <h3>Select the searched activities to track</h3>
- <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
- <div className="add-activity-selected-button buttons-container">
- <Button onClick={ (e) => onAddSelected(e) }>Add Selected</Button>
- </div>
- </div>
+ <SearchedCaloriesBurnedActivitiesTableContainer>
+ <Typography sx={{ color: COLOR_CODES.general["0"], marginLeft: "2%" }} variant="h6">Select the searched activities to track</Typography>
+ <SimplePaper styles={ paperStyles }>
+ <SearchedCaloriesBurnedActivitiesTable>
+ <div className="ag-theme-quartz-dark"
+ style={{ height: COMMON_SPACING.table.height, width: COMMON_SPACING.table.width }}>
+ <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
+ </div>
+ </SearchedCaloriesBurnedActivitiesTable>
+
+ <ButtonsContainer>
+ <Button onClick={ (e) => onAddSelected(e) }>Add Selected</Button>
+ </ButtonsContainer>
+ </SimplePaper>
+ </SearchedCaloriesBurnedActivitiesTableContainer>
  )
 }
 

src/components/signed-out/calories-burned/add-activity/activity-date-table/activity-date-table.styles.jsx

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

src/components/signed-out/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx

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

src/components/signed-out/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+ text-align: left;
+ padding: 0;
+ list-style: none;
+
+ li {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+`
+
+export const CaloriesBurnedCalendarContainer = styled.div`
+ display: block;
+ justify-content: center;
+ align-items: center;
+ padding: 1%;
+ margin: 1% 1% 0% 1%;
+ background-color: ${COLOR_CODES.general["0"]};
+`

src/components/signed-out/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -1,13 +1,14 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { CaloriesBurnedScheduleDayInfo } from "./schedule-day-info.styles.jsx"
 import { Typography, Divider } from "@mui/material"
 import { Fragment, useContext } from "react"
 import SimplePaper from "../../../../shared/mui/paper/paper.component"
-import { COLOR_CODES } from "../../../../../utils/constants/shared.constants"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants"
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-out/calories-burned/calories-burned.context"
 
 const paperStyles = {
  backgroundColor: COLOR_CODES.general["1"],
- width: 400,
+ width: COMMON_SPACING.calendarDayInfo.width
 }
 
 const ScheduleDayInfo = () => {
@@ -16,7 +17,7 @@ const ScheduleDayInfo = () => {
  if (!scheduledTrackedCaloriesBurnedView.length) return <Fragment/>
 
  return (
- <div className="calories-burned-schedule-day-info">
+ <CaloriesBurnedScheduleDayInfo>
  {
  scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => {
  return (
@@ -35,7 +36,7 @@ const ScheduleDayInfo = () => {
  )
  })
  }
- </div>
+ </CaloriesBurnedScheduleDayInfo>
  )
 }
 

src/components/signed-out/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx

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