Merge pull request #128 from tahmid-saj/dev-fitness-context

color codes

src/components/shared/chatbot/chatbot-response/chatbot-response.component.jsx

@@ -7,7 +7,7 @@ import { COLOR_CODES } from "../../../../utils/constants/shared.constants.js"
 import OutlinedCard from "../../mui/card/card.component.jsx"
 
 const cardStyles = {
-  backgroundColor: COLOR_CODES.card.infoCard,
+  backgroundColor: COLOR_CODES.general["0"],
   margin: "2%"
 }
 

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

@@ -41,7 +41,7 @@ import { CaloriesBurnedContext } from "../../../../contexts/signed-in/calories-b
 import { FitnessContext } from "../../../../contexts/signed-in/fitness/fitness.context";
 // import { signOutUser } from '../../../../utils/firebase/firebase.utils';
 
-import { NAV_LINKS } from '../../../../utils/constants/shared.constants';
+import { COLOR_CODES, NAV_LINKS } from '../../../../utils/constants/shared.constants';
 
 import { useDispatch, useSelector } from "react-redux"
 import { selectCurrentUser } from "../../../../store/shared/user/user.selector";
@@ -149,7 +149,7 @@ export default function MiniDrawer({ navLinksHeaders, children }) {
       <AppBar position="fixed" open={open}>
         <Toolbar
           sx={{ 
-            background: "linear-gradient(109.6deg, rgb(5, 84, 94) 16%, rgb(187, 187, 187) 91.1%)",
+            background: COLOR_CODES.general["4"],
             // background: "#23c686",
             width: "100%"
           }}>
@@ -181,7 +181,7 @@ export default function MiniDrawer({ navLinksHeaders, children }) {
         </Toolbar>
       </AppBar>
 
-      <Drawer variant="permanent" open={open}>
+      <Drawer variant="permanent" open={ open }>
         <DrawerHeader>
           <IconButton onClick={handleDrawerClose}>
             {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}

src/components/shared/mui/media-card/media-card.component.jsx

@@ -9,13 +9,13 @@ import { Link } from 'react-router-dom';
 
 export default function MediaCard({ styles, header, imageUrl, imageTitle, path, content }) {
   return (
-    <Card sx={{ margin: "1%", width: styles.width, height: styles.height }}>
+    <Card sx={{ margin: "1%", ...styles }}>
       <CardMedia
         // sx={{ height: styles.height }}
         // src={ "https://buffer.com/library/content/images/2023/10/free-images.jpg" }
         title={`${imageTitle}`}
       />
-      <img src={`${imageUrl}`} alt={ `${imageTitle}` } width={ "auto" } height={ styles.height * 0.5 } objectFit={ "contain" }/>
+      <img src={`${imageUrl}`} alt={ `${imageTitle}` } width={ styles.width } height={ styles.height * 0.6 } objectFit={ "contain" }/>
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">
           { header }

src/components/shared/nutrient-predictor/nutrients-info/nutrients-info.component.jsx

@@ -15,7 +15,7 @@ import { addDayTrackedFromPrediction, setFormInputMicronutrients } from "../../.
 import { selectNutritionTrackedDays } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector.js";
 
 const outlinedCardStyles = {
-  backgroundColor: COLOR_CODES.card.infoCard
+  backgroundColor: COLOR_CODES.general["1"]
 }
 
 const NutrientsInfo = () => {

src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx

@@ -21,7 +21,7 @@ const defaultFormFields = {
 }
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper
+  backgroundColor: COLOR_CODES.general["0"]
 }
 
 const UploadImage = () => {

src/components/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx

@@ -17,7 +17,7 @@ import { selectNutritionTrackedDays } from "../../../../../../store/signed-out/n
 import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
 
 const outlinedCardStyles = {
-  backgroundColor: COLOR_CODES.card.infoCard
+  backgroundColor: COLOR_CODES.general["5"]
 }
 
 const NutrientPrediction = () => {

src/components/shared/recipes/components/recipe/recipe.component.jsx

@@ -13,11 +13,11 @@ import OutlinedCard from "../../../mui/card/card.component.jsx";
 import { RecipesContext } from "../../../../../contexts/shared/recipes/recipes.context.js";
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper
+  backgroundColor: COLOR_CODES.general["6"]
 }
 
 const cardStyles = {
-  backgroundColor: COLOR_CODES.card.infoCard,
+  backgroundColor: COLOR_CODES.general["6"],
   margin: "1% 0% 1% 0%"
 }
 
@@ -36,7 +36,7 @@ const Recipe = () => {
 
       {
         displayedRecipe.nutrientPredictions !== undefined && displayedRecipe.nutrientPredictions.length !== 0 ? (
-        <OutlinedCard>
+        <OutlinedCard styles={ cardStyles }>
           <NutrientPrediction></NutrientPrediction>
         </OutlinedCard>) : null
       }

src/components/shared/recipes/components/search-result/search-result.styles.jsx

@@ -1,13 +1,15 @@
 import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 
 export const SearchResultContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 1%;
   margin: 0.5%;
+  background-color: ${COLOR_CODES.general["5"]};
 
   &:hover {
-    background-color: rgba(1, 146, 66, 0.15);
+    background-color: ${COLOR_CODES.general["1"]};
     border: none;
   }
 `

src/components/shared/recipes/components/search-results/search-results.component.jsx

@@ -14,10 +14,10 @@ import { Paper } from "@mui/material";
 
 const paperStyles = {
   searchResults: {
-    backgroundColor: COLOR_CODES.paper.formPaper
+    backgroundColor: COLOR_CODES.general["0"]
   },
   searchResult: {
-    backgroundColor: COLOR_CODES.paper.infoPaper
+    backgroundColor: COLOR_CODES.general["0"]
   }
 }
 

src/components/signed-in/fitness/add-exercise-form/add-exercise-form.component.jsx

@@ -16,7 +16,7 @@ const defaultFormFields = {
 }
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["0"],
 }
 
 const AddExerciseForm = () => {

src/components/signed-in/fitness/add-exercise-form/add-exercise-form.styles.scss

@@ -2,8 +2,8 @@
   display: block;
   justify-content: center;
   align-items: center;
-  padding: 0% 10% 2% 10%;
   width: 50%;
+  padding-left: 2%;
 }
 
 .fitness-add-exercise-form {

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

@@ -4,6 +4,7 @@ import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
 import { Typography } from "@mui/material";
 import { FitnessContext } from "../../../../../contexts/signed-in/fitness/fitness.context";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 
 function getScheduledData(date, exercises) {
   // const day = date.getDate();
@@ -95,10 +96,10 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="fitness-schedule-calendar-container">
+    <div className="fitness-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Exercises calendar`}</Typography>
-      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate }/>
+      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
     </div>
   )
 }

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

@@ -13,7 +13,7 @@ import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 import { FitnessContext } from "../../../../../contexts/signed-in/fitness/fitness.context";
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["8"],
   height: 600
 }
 

src/components/signed-in/fitness/search-exercise-form/search-exercise-form.component.jsx

@@ -18,7 +18,7 @@ const defaultFormFields = {
 }
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["0"],
 }
 
 const SearchExerciseForm = () => {

src/components/signed-in/fitness/search-exercise-result/search-exercise-result.component.jsx

@@ -6,7 +6,7 @@ import { useContext } from "react"
 import { FitnessContext } from "../../../../contexts/signed-in/fitness/fitness.context"
 
 const outlinedCardStyles = {
-  backgroundColor: COLOR_CODES.card.infoCard
+  backgroundColor: COLOR_CODES.general["5"]
 }
 
 const SearchExerciseResult = ({ exerciseSearchResult }) => {

src/components/signed-in/fitness/search-exercise-results/search-exercise-results.component.jsx

@@ -8,7 +8,7 @@ import { FitnessContext } from "../../../../contexts/signed-in/fitness/fitness.c
 import { useContext } from "react"
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["1"],
   overflow: "scroll",
   height: "60rem",
   scrollbarColor: `${COLOR_CODES.scrollbar.scroll} ${COLOR_CODES.scrollbar.background}`,

src/components/signed-out/fitness/add-exercise-form/add-exercise-form.component.jsx

@@ -16,7 +16,7 @@ const defaultFormFields = {
 }
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["0"],
 }
 
 const AddExerciseForm = () => {

src/components/signed-out/fitness/add-exercise-form/add-exercise-form.styles.scss

@@ -2,8 +2,8 @@
   display: block;
   justify-content: center;
   align-items: center;
-  padding: 0% 10% 2% 10%;
   width: 50%;
+  padding-left: 2%;
 }
 
 .fitness-add-exercise-form {

src/components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -4,6 +4,7 @@ import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
 import { Typography } from "@mui/material";
 import { FitnessContext } from "../../../../../contexts/signed-out/fitness/fitness.context";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 
 function getScheduledData(date, exercises) {
   // const day = date.getDate();
@@ -95,10 +96,10 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="fitness-schedule-calendar-container">
+    <div className="fitness-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Exercises calendar`}</Typography>
-      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate }/>
+      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
     </div>
   )
 }

src/components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss

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

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

@@ -13,7 +13,7 @@ import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 import { FitnessContext } from "../../../../../contexts/signed-out/fitness/fitness.context";
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["8"],
   height: 600
 }
 

src/components/signed-out/fitness/search-exercise-form/search-exercise-form.component.jsx

@@ -18,7 +18,7 @@ const defaultFormFields = {
 }
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["0"],
 }
 
 const SearchExerciseForm = () => {

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.component.jsx

@@ -6,7 +6,7 @@ import { useContext } from "react"
 import { FitnessContext } from "../../../../contexts/signed-out/fitness/fitness.context"
 
 const outlinedCardStyles = {
-  backgroundColor: COLOR_CODES.card.infoCard
+  backgroundColor: COLOR_CODES.general["5"]
 }
 
 const SearchExerciseResult = ({ exerciseSearchResult }) => {

src/components/signed-out/fitness/search-exercise-results/search-exercise-results.component.jsx

@@ -8,7 +8,7 @@ import { FitnessContext } from "../../../../contexts/signed-out/fitness/fitness.
 import { useContext } from "react"
 
 const paperStyles = {
-  backgroundColor: COLOR_CODES.paper.formPaper,
+  backgroundColor: COLOR_CODES.general["1"],
   overflow: "scroll",
   height: "60rem",
   scrollbarColor: `${COLOR_CODES.scrollbar.scroll} ${COLOR_CODES.scrollbar.background}`,

src/components/signed-out/nutrition-tracker/top-search/top-search.component.jsx

@@ -30,9 +30,9 @@ const TopSearch = () => {
         <NutritionTrackerTable></NutritionTrackerTable>
       </div>
 
-      <div className="search-days-nutrition-tracker-container">
+      {/* <div className="search-days-nutrition-tracker-container">
         <SearchDays></SearchDays>
-      </div>
+      </div> */}
     </div>
   );
 };

src/index.scss

@@ -4,7 +4,8 @@ body {
   font-family: Verdana, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #d8f0f0 !important;
+  // background-color: #d8f0f0 !important;
+  background-color: 	#353a41 !important;
 
   // background-image: url("https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm283-nunny-047_1.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=7aa02bf31936d3ca207c60b71c3a5ff3");
   // background-image: url("https://wallpapers.com/images/hd/light-green-background-ficwi166srvzdxdw.jpg");

src/pages/shared/home/home.component.jsx

@@ -8,11 +8,12 @@ import { useContext } from "react";
 import { useSelector } from "react-redux";
 import { selectCurrentUser } from "../../../store/shared/user/user.selector.js";
 
-import { NAV_LINKS } from "../../../utils/constants/shared.constants.js";
+import { COLOR_CODES, NAV_LINKS } from "../../../utils/constants/shared.constants.js";
 
 const styles = {
   width: 475,
   height: 400,
+  backgroundColor: COLOR_CODES.general["0"]
 }
 
 const Home = () => {

src/pages/signed-in/fitness/fitness.styles.scss

@@ -2,7 +2,7 @@
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 2% 10% 2% 10%;
+  margin: 2% 5% 2% 5%;
 }
 
 .fitness-schedule-container {

src/pages/signed-out/fitness/fitness.styles.scss

@@ -2,7 +2,7 @@
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 2% 10% 2% 10%;
+  margin: 2% 5% 2% 5%;
 }
 
 .fitness-schedule-container {

src/pages/signed-out/nutrition-tracker/nutrition-tracker.component.jsx

@@ -16,6 +16,8 @@ import { setNutritionTrackedDaysSummary, setNutritionTrackedDaysView,
   filterDayTrackedHelper 
 } from "../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
 import { calculateSummary } from "../../../utils/calculations/nutrition-tracker.calculations";
+import ScheduleCalendar from "../../../components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.component";
+import { Divider } from "rsuite";
 
 const NutritionTracker = () => {
   // const { nutritionTrackedDays } = useContext(NutritionTrackerContext);
@@ -53,6 +55,14 @@ const NutritionTracker = () => {
 
   return (
     <div className="nutrition-tracker-container">
+      <ScheduleCalendar></ScheduleCalendar>
+
+      <br/>
+      <Divider/>
+      <br/>
+
+
+
       {
         nutritionTrackedDays && nutritionTrackedDays.length !== 0 &&
         <Fragment>

src/utils/constants/shared.constants.js

@@ -180,5 +180,18 @@ export const COLOR_CODES = {
   scrollbar: {
     scroll: "#666666",
     background: "white"
-  }
+  },
+  general: {
+    "0": "#74c6be",
+    "1": "#38a59d",
+    "2": "#2c837d",
+    "3": "#05837c",
+    "4": "#166c6b",
+    "5": "#c6efeb",
+    "6": "#3ca99f",
+    "7": "#237e76",
+    "8": "#115852",
+    "9": "#0a3632",
+  },
+  background: "#a8afb8"
 }