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

nutrition tracker styling

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

@@ -73,7 +73,7 @@ export default function HiddenDrawer() {
  };
 
  const DrawerList = (
- <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
+ <Box sx={{ width: 250, marginTop: "40px" }} role="presentation" onClick={toggleDrawer(false)}>
  <List>
  { navLinksHeaders.section1.map(({ header, path }, index) => (
  <Link to={ `${path}` }>
@@ -152,13 +152,13 @@ export default function HiddenDrawer() {
 
  return (
  <div className="nutrition-tracker-app-bar">
- <Button sx={{ position: "fixed", top: "0", width: "100%", justifyContent: "left", 
- backgroundColor: COLOR_CODES.general["9"] 
- }}
+ <Button sx={{ position: "fixed", width: "100%", justifyContent: "left", top: "0", zIndex: "9999", overflow: "hidden",
+ backgroundColor: COLOR_CODES.general["9"] }}
  onClick={toggleDrawer(true)}>
  <div className='nutrition-tracker-title'>
  <MenuIcon/>
- <Typography sx={{ marginLeft: "10px", color: COLOR_CODES.general["0"] }} variant="h6">
+ <Typography sx={{ marginLeft: "10px", color: COLOR_CODES.general["0"], textTransform: "capitalize" }} 
+ variant="h6">
  Nutrition Tracker
  </Typography>
  {

src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss

@@ -10,4 +10,6 @@ ion-icon {
 
 .nutrition-tracker-app-bar {
  cursor: pointer;
+ z-index: 9999;
+ overflow: "hidden";
 }

src/components/signed-in/dashboard/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-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-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx

@@ -0,0 +1,22 @@
+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%;
+ background-color: ${COLOR_CODES.general["0"]};
+`

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

@@ -1,4 +1,5 @@
-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"
@@ -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-in/dashboard/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%;
+`

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

@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, FitnessScheduleCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -7,7 +8,6 @@ import { FitnessContext } from "../../../../../../contexts/signed-in/fitness/fit
 import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
 
 function getScheduledData(date, exercises) {
- // const day = date.getDate();
  date = date.toISOString().split('T')[0]
 
  let scheduledExercisesForDate = []
@@ -35,14 +35,14 @@ const ScheduleCalendar = () => {
 
  return (
  <Fragment>
- <ul className="calendar-todo-list">
+ <CalendarTodoList>
  {displayList.map((item, index) => (
  <li key={index}>
  <Badge /> <b>{item.type}</b> - {item.name}
  </li>
  ))}
  {moreCount ? `${moreCount} more` : null}
- </ul>
+ </CalendarTodoList>
  {/* {moreCount} more */}
  </Fragment>
  );
@@ -58,11 +58,11 @@ const ScheduleCalendar = () => {
  }
 
  return (
- <div className="fitness-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+ <FitnessScheduleCalendarContainer>
  <Typography sx={{ display: "flex", marginLeft: "1%" }} 
  variant="h6">{`Exercises calendar`}</Typography>
  <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
- </div>
+ </FitnessScheduleCalendarContainer>
  )
 }
 

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

@@ -0,0 +1,22 @@
+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 FitnessScheduleCalendarContainer = styled.div`
+ display: block;
+ justify-content: center;
+ align-items: center;
+ padding: 1%;
+ background-color: ${COLOR_CODES.general["0"]};
+`

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

@@ -1,4 +1,7 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { FitnessScheduleDayInfoContainer,
+ FitnessScheduleDayInfo
+} from "./schedule-day-info.styles.jsx";
 import { useState, useContext, Fragment } from "react"
 import { Typography } from "@mui/material";
 
@@ -57,25 +60,26 @@ const ScheduleDayInfo = () => {
  }
 
  return (
- <div className="fitness-schedule-day-info-container">
+ <FitnessScheduleDayInfoContainer>
  <Typography sx={{ display: "flex", marginLeft: "2%", color: COLOR_CODES.general["0"] }} 
  variant="h6">{`Exercises planned`}</Typography>
 
  <SimplePaper styles={ paperStyles }>
- <div className="ag-theme-quartz-dark fitness-schedule-day-info" // applying the grid theme
- style={{ height: 500, width: '100%' }} // the grid will fill the size of the parent container
- >
- <AgGridReact 
- rowData={ rowData } 
- columnDefs={ columnDefs } rowSelection={ "multiple" }/>
- <ButtonsContainer>
- <div className="unselect-exercise-button">
- <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
- </div>
- </ButtonsContainer>
- </div>
+ <FitnessScheduleDayInfo>
+ <div className="ag-theme-quartz-dark" // applying the grid theme
+ style={{ height: 475, width: '100%' }} // the grid will fill the size of the parent container
+ >
+ <AgGridReact 
+ rowData={ rowData } 
+ columnDefs={ columnDefs } rowSelection={ "multiple" }/>
+ </div>
+ </FitnessScheduleDayInfo>
+
+ <ButtonsContainer>
+ <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
+ </ButtonsContainer>
  </SimplePaper>
- </div>
+ </FitnessScheduleDayInfoContainer>
  )
 }
 

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

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

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

@@ -1,4 +1,6 @@
-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 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -36,14 +38,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 +61,11 @@ const ScheduleCalendar = () => {
  }
 
  return (
- <div className="nutrition-tracker-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>
  )
 }
 

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

@@ -0,0 +1,22 @@
+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 NutritionTrackerCalendarContainer = styled.div`
+ display: block;
+ justify-content: center;
+ align-items: center;
+ padding: 1%;
+ background-color: ${COLOR_CODES.general["0"]};
+`

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

@@ -1,4 +1,5 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { NutritionTrackerScheduleDayInfo } 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"
@@ -14,7 +15,7 @@ const ScheduleDayInfo = () => {
  const { scheduledNutritionTrackedDaysView } = useContext(NutritionTrackerContext)
 
  return (
- <div className="nutrition-tracker-schedule-day-info">
+ <NutritionTrackerScheduleDayInfo>
  <SimplePaper styles={ paperStyles }>
  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${scheduledNutritionTrackedDaysView.dateTracked}`}</Typography>
  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${scheduledNutritionTrackedDaysView.calories}`}</Typography>
@@ -47,7 +48,7 @@ const ScheduleDayInfo = () => {
  </Fragment> : null
  }
  </SimplePaper>
- </div>
+ </NutritionTrackerScheduleDayInfo>
  )
 }
 

src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx

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