Skip to content

Commit

Permalink
nutrition tracker styling
Browse files Browse the repository at this point in the history
  • Loading branch information
tahmid-saj committed Jun 22, 2024
1 parent bf6bc30 commit 0b6b50b
Show file tree
Hide file tree
Showing 46 changed files with 636 additions and 176 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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}` }>
Expand Down Expand Up @@ -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>
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,6 @@ ion-icon {

.nutrition-tracker-app-bar {
cursor: pointer;
z-index: 9999;
overflow: "hidden";
}
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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"]};
`
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -16,7 +17,7 @@ const ScheduleDayInfo = () => {
if (!scheduledTrackedCaloriesBurnedView.length) return <Fragment/>

return (
<div className="calories-burned-schedule-day-info">
<CaloriesBurnedScheduleDayInfo>
{
scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => {
return (
Expand All @@ -35,7 +36,7 @@ const ScheduleDayInfo = () => {
)
})
}
</div>
</CaloriesBurnedScheduleDayInfo>
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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%;
`
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = []
Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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"]};
`
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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>
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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%;
`
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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"]};
`
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -47,7 +48,7 @@ const ScheduleDayInfo = () => {
</Fragment> : null
}
</SimplePaper>
</div>
</NutritionTrackerScheduleDayInfo>
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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%;
`
Loading

0 comments on commit 0b6b50b

Please sign in to comment.