nutrition tracker styling

tahmid-saj · Jun 22, 2024 · 0b6b50b · 0b6b50b
1 parent bf6bc30
commit 0b6b50b
Show file tree

Hide file tree

Showing 46 changed files with 636 additions and 176 deletions.
diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx b/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>
           {

diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss b/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";
 }
diff --git a/...d-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx b/...d-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>
   )
 }
 

diff --git a/...gned-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx b/...gned-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"]};
+`
diff --git a/...d-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx b/...d-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>
   )
 }
 

diff --git a/...gned-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx b/...gned-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%;
+`
diff --git a/...ts/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx b/...ts/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>
   )
 }
 

diff --git a/...nents/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.jsx b/...nents/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"]};
+`
diff --git a/...ts/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx b/...ts/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>
   )
 }
 

diff --git a/...nents/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.jsx b/...nents/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%;
+`
diff --git a/...in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx b/...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>
   )
 }
 

diff --git a/...ed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx b/...ed-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"]};
+`
diff --git a/...in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx b/...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>
   )
 }
 

diff --git a/...ed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx b/...ed-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%;
+`