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

updating dashboard signed in styling

src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx

@@ -160,8 +160,8 @@ export default function HiddenDrawer() {
           </Typography>
           {
             currentUser ?
-            <Typography sx={{ color: COLOR_CODES.general["5"] }} variant="body2">
-              { `Hello ${currentUser.displayName}` }
+            <Typography sx={{ marginLeft: "15px", color: COLOR_CODES.general["5"] }} variant="caption">
+              { `Hello ${currentUser.displayName.split(" ")[0]}` }
             </Typography> : null
           }
         </div>

src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.component.jsx

@@ -1,7 +1,16 @@
-import "./calories-burned-graph-pie.styles.scss"
+import "./calories-burned-graph-pie.styles.jsx"
+import { CaloriesBurnedDashboardGraphPieContainer } from "./calories-burned-graph-pie.styles.jsx"
 import ReactApexChart from 'react-apexcharts'
 import { useContext, Fragment } from "react"
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context"
+import { Typography } from "@mui/material"
+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["0"],
+  margin: "2%",
+}
 
 const CaloriesBurnedGraphPie = () => {
   const { trackedCaloriesBurned } = useContext(CaloriesBurnedContext)
@@ -20,15 +29,11 @@ const CaloriesBurnedGraphPie = () => {
   const options = {
     chart: {
       type: 'donut',
-      height: 600,
     },
     labels: [ ...trackedCalories.keys() ],
     responsive: [{
       breakpoint: 50,
       options: {
-        chart: {
-          height: 600
-        },
         legend: {
           position: 'bottom'
         }
@@ -38,10 +43,13 @@ const CaloriesBurnedGraphPie = () => {
 
   return (
     <Fragment>
-      <h4>Tracked activities</h4>
-      <div className="calories-burned-dashboard-graph-pie-container">
-        <ReactApexChart options={ options } series={ series } type="donut" height={ 600 } width={ 700 }/>
-      </div>
+      <SimplePaper styles={ paperStyles }>
+        <Typography sx={{ display: "flex", justifyContent: "center", alignItems: "center" }} variant="h6">Tracked activities</Typography>
+        <CaloriesBurnedDashboardGraphPieContainer>
+          <ReactApexChart options={ options } series={ series } type="donut" 
+            height={ COMMON_SPACING.pieChart.height } width={ COMMON_SPACING.pieChart.width }/>
+        </CaloriesBurnedDashboardGraphPieContainer>
+      </SimplePaper>
     </Fragment>
   )
 }

src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.styles.jsx

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

src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.component.jsx

@@ -1,9 +1,17 @@
-import "./calories-burned-graph.styles.scss"
+import "./calories-burned-graph.styles.jsx"
+import { CaloriesBurnedDashboardGraphLineContainer } from "./calories-burned-graph.styles.jsx"
 import ReactApexChart from "react-apexcharts"
 import { useContext } from "react"
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context"
-
 import { GRAPH_FIELDS } from "../../../../../utils/constants/calories-burned.constants"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants"
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["0"],
+  marginLeft: "2%",
+  marginRight: "2%"
+}
 
 const CaloriesBurnedGraph = () => {
   const { trackedCaloriesBurned } = useContext(CaloriesBurnedContext)
@@ -25,7 +33,7 @@ const CaloriesBurnedGraph = () => {
   const options = {
     chart: {
       type: 'area',
-      height: 500,
+      height: COMMON_SPACING.lineChart.height,
       zoom: {
         enabled: true
       }
@@ -57,9 +65,12 @@ const CaloriesBurnedGraph = () => {
   };
 
   return (
-    <div className="calories-burned-dashboard-graph-line-container">
-      <ReactApexChart options={ options } series={ series } type="area" height={ 500 } width={ 1000 }/>
-    </div>
+    <SimplePaper styles={ paperStyles }>
+      <CaloriesBurnedDashboardGraphLineContainer>
+        <ReactApexChart options={ options } series={ series } type="area" 
+          height={ COMMON_SPACING.lineChart.height } width={ COMMON_SPACING.lineChart.width }/>
+      </CaloriesBurnedDashboardGraphLineContainer>
+    </SimplePaper>
   )
 }
 

src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.styles.jsx

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

src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.component.jsx

@@ -1,19 +1,38 @@
-import "./calories-burned-summary.styles.scss"
+import "./calories-burned-summary.styles.jsx"
+import { CaloriesBurnedDashboardSummaryContainer } from "./calories-burned-summary.styles.jsx"
 import { useContext } from "react"
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context"
+import { Divider, 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: "center",
+  alignItems: "center",
+  backgroundColor: COLOR_CODES.general["1"],
+  marginLeft: "2%",
+  marginRight: "2%"
+}
 
 const CaloriesBurnedSummary = () => {
   const { trackedCaloriesBurnedSummary } = useContext(CaloriesBurnedContext)
 
   return (
-    <div className="calories-burned-dashboard-summary-container">
-      <h3>{ `Daily average burned : ${trackedCaloriesBurnedSummary.dailyAverageCaloriesBurned}` }</h3>
-      <br></br>
-      <h3>Most calories burned</h3>
-      <h4>{ `Date : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.date}` }</h4>
-      <h4>{ `Calories burned : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.caloriesBurned}` }</h4>
-      <h4>{ `Activity : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.activity}` }</h4>
-    </div>
+    <SimplePaper styles={ paperStyles }>
+      <CaloriesBurnedDashboardSummaryContainer>
+        <Typography variant="h6">{ `Daily average burned : ${trackedCaloriesBurnedSummary.dailyAverageCaloriesBurned}` }</Typography>
+
+        <br/>
+        <Divider/>
+        <br/>
+
+        <Typography variant="h6">Most calories burned</Typography>
+        <Typography variant="body1">{ `Date : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.date}` }</Typography>
+        <Typography variant="body1">{ `Calories burned : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.caloriesBurned}` }</Typography>
+        <Typography variant="body1">{ `Activity : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.activity}` }</Typography>
+      </CaloriesBurnedDashboardSummaryContainer>
+    </SimplePaper>
   )
 }
 

src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.styles.jsx

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

src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -21,6 +21,5 @@
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 2%;
   padding: 1%;
 }

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

@@ -2,12 +2,12 @@ import "./schedule-day-info.styles.scss"
 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-in/calories-burned/calories-burned.context"
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.general["1"],
-  width: 400
+  width: COMMON_SPACING.calendarDayInfo.width
 }
 
 const ScheduleDayInfo = () => {

src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -10,25 +10,6 @@ function getScheduledData(date, exercises) {
   // const day = date.getDate();
   date = date.toISOString().split('T')[0]
 
-  // switch (day) {
-  //   case 10:
-  //     return [
-  //       { time: '10:30 am', title: 'Meeting' },
-  //       { time: '12:00 pm', title: 'Lunch' }
-  //     ];
-  //   case 15:
-  //     return [
-  //       { time: '09:30 pm', title: 'Products Introduction Meeting' },
-  //       { time: '12:30 pm', title: 'Client entertaining' },
-  //       { time: '02:00 pm', title: 'Product design discussion' },
-  //       { time: '05:00 pm', title: 'Product test and acceptance' },
-  //       { time: '06:30 pm', title: 'Reporting' },
-  //       { time: '10:00 pm', title: 'Going home to walk the dog' }
-  //     ];
-  //   default:
-  //     return [];
-  // }
-
   let scheduledExercisesForDate = []
   exercises.map((exercise) => {
     if (exercise.exerciseDate === date) {
@@ -51,25 +32,6 @@ const ScheduleCalendar = () => {
 
     if (list.length) {
       const moreCount = list.length - displayList.length;
-      // const moreItem = (
-      //   <li>
-      //     <Whisper
-      //       placement="top"
-      //       trigger="click"
-      //       speaker={
-      //         <Popover>
-      //           {list.map((item, index) => (
-      //             <p key={index}>
-      //               <b>{item.time}</b> - {item.title}
-      //             </p>
-      //           ))}
-      //         </Popover>
-      //       }
-      //     >
-      //       <h10>{moreCount} more</h10>
-      //     </Whisper>
-      //   </li>
-      // );
 
       return (
         <Fragment>

src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -21,7 +21,5 @@
   display: block;
   justify-content: center;
   align-items: center;
-  background-color: lightblue;
-  margin: 2%;
   padding: 1%;
 }

src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -7,14 +7,14 @@ import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 
 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 { FitnessContext } from "../../../../../../contexts/signed-in/fitness/fitness.context";
 import Button from "../../../../../shared/button/button.component";
 import { ButtonsContainer } from "../../../../../shared/button/button.styles";
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.general["8"],
-  height: 600
+  height: COMMON_SPACING.calendarDayInfo.height
 }
 
 const ScheduleDayInfo = () => {
@@ -58,7 +58,7 @@ const ScheduleDayInfo = () => {
 
   return (
     <div className="fitness-schedule-day-info-container">
-      <Typography sx={{ display: "flex", marginLeft: "2%" }} 
+      <Typography sx={{ display: "flex", marginLeft: "2%", color: COLOR_CODES.general["0"] }} 
         variant="h6">{`Exercises planned`}</Typography>
 
       <SimplePaper styles={ paperStyles }>

src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss

@@ -1,4 +1,5 @@
 .fitness-schedule-day-info-container {
+  margin: 0% 2% 0% 2%;
   margin-bottom: 2%;
 }
 
@@ -9,7 +10,6 @@
   padding: 1% 1% 0% 1%;
 }
 
-.remove-exercise-selected-button,
 .unselect-exercise-button {
   margin: 1%;
 }

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

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

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

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