Skip to content

Commit

Permalink
Merge pull request #158 from tahmid-saj/dev-general-cleanup-3
Browse files Browse the repository at this point in the history 
bootstraping buttons
  • Loading branch information
@tahmid-saj
tahmid-saj committed Jun 23, 2024
2 parents a59dfd3 + 26b1680 commit d7fb8f1
Show file tree
Hide file tree
Showing 34 changed files with 436 additions and 349 deletions.
33 changes: 17 additions & 16 deletions ...nents/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,27 +89,28 @@ const UploadImage = () => {
<UploadImageContainer>
<div className="container">
<div className="row">
<div className="col">
<SimplePaper styles={ paperStyles }>
<UploadImageForm onSubmit={ handleSubmit }>
<Typography variant="h6">Upload a food image or enter a meal description</Typography>
<Typography paragraph>Example: 1 pound of steak with mashed potatoes and a can of sprite</Typography>
<FormInput label="Meal description" type="text" onChange={ handleChange }
name="mealDescription" value={ formFields.mealDescription }></FormInput>
<SimplePaper styles={ paperStyles }>
<UploadImageForm onSubmit={ handleSubmit }>
<Typography variant="h6">Upload a food image or enter a meal description</Typography>
<Typography paragraph>Example: 1 pound of steak with mashed potatoes and a can of sprite</Typography>
<FormInput label="Meal description" type="text" onChange={ handleChange }
name="mealDescription" value={ formFields.mealDescription }></FormInput>

<FormInput label="Image URL" type="url" id="imageUrl" name="imageUrl"
onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.url) } value={ formFields.imageUrl }></FormInput>
<FormInput label="Image URL" type="url" id="imageUrl" name="imageUrl"
onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.url) } value={ formFields.imageUrl }></FormInput>

<FormInput disabled type="file" id="uploadedImagePath" name="uploadedImagePath"
onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImagePath } accept="image/*"></FormInput>
<FormInput disabled type="file" id="uploadedImagePath" name="uploadedImagePath"
onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImagePath } accept="image/*"></FormInput>

<ButtonsContainer>
<div className="col-12">
<div className="btn-group flex-wrap" role="group">
<Button buttonType="regular-button" type="submit">Predict</Button>
<Button buttonType="regular-button" type="button" onClick={ resetFormFields }>Clear</Button>
</ButtonsContainer>
</UploadImageForm>
</SimplePaper>
</div>
</div>
</div>
</UploadImageForm>
</SimplePaper>


<div className="col" visible>
<UploadedImageContainer
Expand Down
17 changes: 17 additions & 0 deletions ...components/shared/responsive-buttons-container/responsive-buttons-container.component.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import "./responsive-buttons-container.styles"

const ResponsiveButtonsContainer = () => {
return (
<div className="container">
<div className="row">
<col className="col-12">
<div className="btn-group flex-wrap pd-2" role="group">

</div>
</col>
</div>
</div>
)
}

export default ResponsiveButtonsContainer
Empty file added src/components/shared/responsive-buttons-container/responsive-buttons-container.styles.jsx
View file
Empty file.
40 changes: 23 additions & 17 deletions ...ponents/signed-in/calories-burned/activity-date-filter/activity-date-filter.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const defaultFormFields = {

const paperStyles = {
backgroundColor: COLOR_CODES.general["1"],
width: COMMON_SPACING.filter.width
// width: COMMON_SPACING.filter.width
}

const ActivityDateFilter = () => {
Expand Down Expand Up @@ -55,24 +55,30 @@ const ActivityDateFilter = () => {

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>
<div className="container">
<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>
<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>
<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap">
<Button type="submit">Filter</Button>
<Button type="button" onClick={ handleClearFilter }>Clear</Button>
</div>
</div>
</div>
</form>
</SimplePaper>
</div>
</ActivityDateFilterContainer>
)
}
Expand Down
44 changes: 26 additions & 18 deletions ...igned-in/calories-burned/add-activity/activity-date-form/activity-date-form.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,35 @@ const ActivityDateForm = () => {

return (
<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>
<div className="container">
<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 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>
<FormInput label="Duration (minutes)" type="text" onChange={ handleChange }
name="durationMinutes" value={ formFields.durationMinutes }></FormInput>

<Button type="submit">Search Activity</Button>
</form>
</SimplePaper>
<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap">
<Button type="submit">Search Activity</Button>
</div>
</div>
</div>
</form>
</SimplePaper>
</div>
</ActivityDateFormContainer>
)
}
Expand Down
30 changes: 18 additions & 12 deletions ...ned-in/calories-burned/add-activity/activity-date-table/activity-date-table.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,25 @@ const ActivityDateTable = () => {
return (
// wrapping container with theme & size
<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>
<div className="container">
<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>
<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap">
<Button onClick={ (e) => onAddSelected(e) }>Add Selected</Button>
</div>
</div>
</div>
</SimplePaper>
</div>
</SearchedCaloriesBurnedActivitiesTableContainer>
)
}
Expand Down
36 changes: 18 additions & 18 deletions .../signed-in/calories-burned/view/calories-burned-table/calories-burned-table.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,26 +58,26 @@ const CaloriesBurnedTable = () => {
return (
// wrapping container with theme & size
<FilterCaloriesBurnedActivitiesTableContainer>
<Typography sx={{ color: COLOR_CODES.general["0"], marginLeft: "2%" }} variant="h6">Filter or remove activity</Typography>
<SimplePaper styles={ paperStyles }>
<FilterCaloriesBurnedActivitiesTable>
<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>
</FilterCaloriesBurnedActivitiesTable>

<div className="container">
<div className="row justify-content-evenly align-items-center">
<div className="col-sm-12 col-md-6 col-lg-6">
<Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
<div className="container">
<Typography sx={{ color: COLOR_CODES.general["0"], marginLeft: "2%" }} variant="h6">Filter or remove activity</Typography>
<SimplePaper styles={ paperStyles }>
<FilterCaloriesBurnedActivitiesTable>
<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>
<div className="col-sm-12 col-md-6 col-lg-6">
<Button type="button" onClick={ clearActivityDatesFilter }>Clear Filter</Button>
</FilterCaloriesBurnedActivitiesTable>

<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap">
<Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
<Button type="button" onClick={ clearActivityDatesFilter }>Clear Filter</Button>
</div>
</div>
</div>
</div>
</div>
</SimplePaper>
</SimplePaper>
</div>
</FilterCaloriesBurnedActivitiesTableContainer>
)
}
Expand Down
12 changes: 9 additions & 3 deletions ...ts/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,15 @@ const ScheduleDayInfo = () => {
</div>
</FitnessScheduleDayInfo>

<ButtonsContainer>
<Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
</ButtonsContainer>
<div className="container">
<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap" role="group">
<Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
</div>
</div>
</div>
</div>
</SimplePaper>
</FitnessScheduleDayInfoContainer>
)
Expand Down
12 changes: 6 additions & 6 deletions src/components/signed-in/fitness/add-exercise-form/add-exercise-form.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,12 @@ const AddExerciseForm = () => {
name="exerciseReps" value={ formFields.exerciseReps }></FormInput>

<div className="container">
<div className="row justify-content-evenly align-items-center">
<div className="col-sm-12 col-md-12 col-lg-12">
<Button type="submit">Add</Button>
</div>
<div className="col-sm-12 col-md-12 col-lg-12">
<Button type="button" onClick={ resetFormFields }>Clear</Button>
<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap">
<Button type="submit">Add</Button>
<Button type="button" onClick={ resetFormFields }>Clear</Button>
</div>
</div>
</div>
</div>
Expand Down
14 changes: 10 additions & 4 deletions src/components/signed-in/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const ScheduleDayInfo = () => {
return (
<FitnessScheduleDayInfoContainer>
<Typography sx={{ display: "flex", marginLeft: "2%", color: COLOR_CODES.general["0"] }}
variant="h6">{`Exercises planned`}</Typography>
variant="h6">{`Exercises planned`}</Typography>

<SimplePaper styles={ paperStyles }>
<FitnessScheduleDayInfo>
Expand All @@ -89,9 +89,15 @@ const ScheduleDayInfo = () => {
</div>
</FitnessScheduleDayInfo>

<ButtonsContainer>
<Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
</ButtonsContainer>
<div className="container">
<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap" role="group">
<Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
</div>
</div>
</div>
</div>
</SimplePaper>
</FitnessScheduleDayInfoContainer>
)
Expand Down
9 changes: 4 additions & 5 deletions src/components/signed-in/fitness/search-exercise-form/search-exercise-form.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,14 +111,13 @@ const SearchExerciseForm = () => {
<FormInput label="Name of exercise" type="text" onChange={ handleChange }
name="exerciseName" value={ formFields.exerciseName }></FormInput>

<div className="row justify-content-between align-items-center">
<div className="col-sm-12 col-md-12 col-lg-12">
<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap">
<Button type="submit">Search</Button>
</div>

<div className="col-sm-12 col-md-12 col-lg-12">
<Button type="button" onClick={ resetFormFields }>Clear</Button>
</div>
</div>
</div>
</FitnessSearchExerciseForm>
</SimplePaper>
Expand Down
2 changes: 1 addition & 1 deletion src/components/signed-in/nutrition-tracker/add-micronutrients/add-micronutrients.styles.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const MicronutrientContainer = styled.div`
display: block;
justify-content: center;
align-items: center;
margin-bottom: 2%;
margin-bottom: 6%;
.remove-micronutrients-button {
justify-content: center;
Expand Down
36 changes: 21 additions & 15 deletions ...gned-in/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,21 +52,27 @@ const NutritionTrackerFilter = () => {

return (
<NutritionTrackerFilterContainer>
<SimplePaper styles={ paperStyles }>
<form onSubmit={ handleSubmit }>
<Typography variant="h6">Filter by date range</Typography>
<FormInput type="date" onChange={ handleChange }
name="filterStartDate" value={ formFields.filterStartDate }></FormInput>

<FormInput type="date" onChange={ handleChange }
name="filterEndDate" value={ formFields.filterEndDate }></FormInput>

<FilterButtonsContainer>
<Button type="submit">Filter</Button>
<Button type="button" onClick={ handleClearFilter }>Clear</Button>
</FilterButtonsContainer>
</form>
</SimplePaper>
<div className="container">
<SimplePaper styles={ paperStyles }>
<form onSubmit={ handleSubmit }>
<Typography variant="h6">Filter by date range</Typography>
<FormInput type="date" onChange={ handleChange }
name="filterStartDate" value={ formFields.filterStartDate }></FormInput>

<FormInput type="date" onChange={ handleChange }
name="filterEndDate" value={ formFields.filterEndDate }></FormInput>

<div className="row">
<div className="col-12">
<div className="btn-group flex-wrap" role="group">
<Button type="submit">Filter</Button>
<Button type="button" onClick={ handleClearFilter }>Clear</Button>
</div>
</div>
</div>
</form>
</SimplePaper>
</div>
</NutritionTrackerFilterContainer>
)
}
Expand Down
Loading

0 comments on commit d7fb8f1

Please sign in to comment.