Merge pull request #153 from tahmid-saj/dev-calories-burned-styling

calories burned styling for signed in

src/components/signed-in/calories-burned/activity-date-filter/activity-date-filter.component.jsx

@@ -0,0 +1,80 @@
+import Button from "../../../shared/button/button.component.jsx"
+import FormInput from "../../../shared/form-input/form-input.component.jsx"
+import "./activity-date-filter.styles.jsx"
+import { ActivityDateFilterContainer, FilterButtonsContainer } from "./activity-date-filter.styles.jsx"
+
+import { useState, useContext } from "react"
+import { CaloriesBurnedContext } from "../../../../contexts/signed-in/calories-burned/calories-burned.context.js"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js"
+import { Typography } from "@mui/material"
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx"
+
+const defaultFormFields = {
+  activity: "",
+  dateTracked: "",
+  durationMinutes: ""
+}
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: COMMON_SPACING.filter.width
+}
+
+const ActivityDateFilter = () => {
+  const [formFields, setFormFields] = useState(defaultFormFields)
+  const { filterActivityDates, clearActivityDatesFilter } = useContext(CaloriesBurnedContext)
+
+  const resetFormFields = () => {
+    setFormFields(defaultFormFields)
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+
+    if (formFields.activity === "" && formFields.dateTracked === "" &&
+      !formFields.activity && !formFields.dateTracked &&
+      !formFields.durationMinutes && !formFields.durationMinutes) {
+        console.log("please fill out all info")
+        return
+    }
+
+    filterActivityDates(formFields)
+  }
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  const handleClearFilter = (event) => {
+    event.preventDefault()
+
+    resetFormFields()
+    clearActivityDatesFilter()
+  }
+
+  return (
+    <ActivityDateFilterContainer>
+      <SimplePaper styles={ paperStyles }>
+        <form onSubmit={ handleSubmit }>
+          <Typography variant="h6">Filter activities</Typography>
+          <FormInput type="date" onChange={ handleChange }
+                      name="dateTracked" value={ formFields.dateTracked }></FormInput>
+
+          <FormInput label="Activity" type="text" onChange={ handleChange }
+                              name="activity" value={ formFields.activity }></FormInput>
+
+          <FormInput label="Duration (minutes)" type="text" onChange={ handleChange }
+                      name="durationMinutes" value={ formFields.durationMinutes }></FormInput>
+
+          <FilterButtonsContainer>
+            <Button type="submit">Filter</Button>
+            <Button type="button" onClick={ handleClearFilter }>Clear</Button>
+          </FilterButtonsContainer>
+        </form>
+      </SimplePaper>
+    </ActivityDateFilterContainer>
+  )
+}
+
+export default ActivityDateFilter

src/components/signed-in/calories-burned/activity-date-filter/activity-date-filter.styles.jsx

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

src/components/signed-in/calories-burned/add-activity/activity-date-form/activity-date-form.component.jsx

@@ -1,9 +1,17 @@
 import Button from "../../../../shared/button/button.component"
-import "./activity-date-form.styles.scss"
+import "./activity-date-form.styles.jsx"
+import { ActivityDateFormContainer } from "./activity-date-form.styles.jsx"
 import { useState, useContext } from "react"
 import FormInput from "../../../../shared/form-input/form-input.component"
 
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context"
+import { Typography } from "@mui/material"
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx"
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants.js"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"]
+}
 
 const defaultFormFields = {
   activity: "",
@@ -33,25 +41,29 @@ const ActivityDateForm = () => {
   }
 
   return (
-    <div className="activity-date-form-container">
-      <form onSubmit={ handleSubmit }>
-        <h4>Track the calories of an activity</h4>
-        <FormInput type="date" required onChange={ handleChange }
-                    name="dateTracked" value={ formFields.dateTracked }></FormInput>
-
-        <FormInput label="Activity" type="text" required onChange={ handleChange }
-                            name="activity" value={ formFields.activity }></FormInput>
-
-        <p>Optional:</p>
-        <FormInput label="Weight (pounds)" type="text" onChange={ handleChange }
-                            name="weightPounds" value={ formFields.weightPounds }></FormInput>
-
-        <FormInput label="Duration (minutes)" type="text" onChange={ handleChange }
-                    name="durationMinutes" value={ formFields.durationMinutes }></FormInput>
-
-        <Button type="submit">Search Activity</Button>
-      </form>
-    </div>
+    <ActivityDateFormContainer>
+      <SimplePaper styles={ paperStyles }>
+        <form onSubmit={ handleSubmit }>
+          <Typography variant="h6">Track the calories of an activity</Typography>
+          <Typography variant="body1">Start by searching and adding an activity you did like running, along with a date</Typography>
+
+          <FormInput type="date" required onChange={ handleChange }
+                      name="dateTracked" value={ formFields.dateTracked }></FormInput>
+
+          <FormInput label="Activity" type="text" required onChange={ handleChange }
+                              name="activity" value={ formFields.activity }></FormInput>
+
+          <Typography paragraph>Optional:</Typography>
+          <FormInput label="Weight (pounds)" type="text" onChange={ handleChange }
+                              name="weightPounds" value={ formFields.weightPounds }></FormInput>
+
+          <FormInput label="Duration (minutes)" type="text" onChange={ handleChange }
+                      name="durationMinutes" value={ formFields.durationMinutes }></FormInput>
+
+          <Button type="submit">Search Activity</Button>
+        </form>
+      </SimplePaper>
+    </ActivityDateFormContainer>
   )
 }
 

src/components/signed-in/calories-burned/add-activity/activity-date-form/activity-date-form.styles.jsx

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

src/components/signed-in/calories-burned/add-activity/activity-date-table/activity-date-table.component.jsx

@@ -1,4 +1,7 @@
-import "./activity-date-table.styles.scss"
+import "./activity-date-table.styles.jsx"
+import { SearchedCaloriesBurnedActivitiesTableContainer,
+  SearchedCaloriesBurnedActivitiesTable
+} from "./activity-date-table.styles.jsx";
 import { useState, useContext, useRef } from "react"
 
 import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
@@ -7,6 +10,15 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied
 
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context";
 import Button from "../../../../shared/button/button.component";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants.js";
+import { Typography } from "@mui/material";
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx";
+import { ButtonsContainer } from "../../../../shared/button/button.styles.jsx";
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["8"],
+  padding: "2%",
+}
 
 const ActivityDateTable = () => {
   const gridRef = useRef()
@@ -53,15 +65,21 @@ const ActivityDateTable = () => {
 
   return (
     // wrapping container with theme & size
-    <div className="ag-theme-quartz-dark searched-calories-burned-activities-table-container" // applying the grid theme
-      style={{ height: 700, width: '65%' }} // the grid will fill the size of the parent container
-      >
-      <h3>Select the searched activities to track</h3>
-      <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
-      <div className="add-activity-selected-button buttons-container">
-        <Button onClick={ (e) => onAddSelected(e) }>Add Selected</Button>
-      </div>
-    </div>
+    <SearchedCaloriesBurnedActivitiesTableContainer>
+      <Typography sx={{ color: COLOR_CODES.general["0"], marginLeft: "2%" }} variant="h6">Select the searched activities to track</Typography>
+      <SimplePaper styles={ paperStyles }>
+        <SearchedCaloriesBurnedActivitiesTable>
+          <div className="ag-theme-quartz-dark"
+            style={{ height: COMMON_SPACING.table.height, width: COMMON_SPACING.table.width }}>
+            <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
+          </div>
+        </SearchedCaloriesBurnedActivitiesTable>
+
+        <ButtonsContainer>
+          <Button onClick={ (e) => onAddSelected(e) }>Add Selected</Button>
+        </ButtonsContainer>
+      </SimplePaper>
+    </SearchedCaloriesBurnedActivitiesTableContainer>
   )
 }
 

src/components/signed-in/calories-burned/add-activity/activity-date-table/activity-date-table.styles.jsx

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

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

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

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

@@ -1,13 +1,14 @@
-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"
-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 = () => {
@@ -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/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%;
+`