Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BHBC-899] Align Create Project Form to the Design Spec #167

Merged
merged 6 commits into from
Mar 25, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/features/projects/CreateProjectPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ const CreateProjectPage: React.FC = () => {
<Typography variant="h2" className={classes.stepTitle}>
{stepForms[index].stepTitle}
</Typography>
<Typography variant="subtitle2">{stepForms[index].stepSubTitle}</Typography>
<Typography variant="subtitle1">{stepForms[index].stepSubTitle}</Typography>
</Box>
</StepLabel>
<StepContent>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ exports[`CreateProjectPage removes the extra project steps if all permits are ma
Project Coordinator
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Enter contact details for the project coordinator
</h6>
Expand Down Expand Up @@ -172,7 +172,7 @@ exports[`CreateProjectPage removes the extra project steps if all permits are ma
Permits
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Enter permits associated with this project
</h6>
Expand Down Expand Up @@ -572,7 +572,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
Project Coordinator
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Enter contact details for the project coordinator
</h6>
Expand Down Expand Up @@ -1076,7 +1076,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
Permits
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Enter permits associated with this project
</h6>
Expand Down Expand Up @@ -1142,7 +1142,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
General Information
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
General information and details about this project
</h6>
Expand Down Expand Up @@ -1208,7 +1208,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
Objectives
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Enter the objectives and potential caveats for this project
</h6>
Expand Down Expand Up @@ -1274,7 +1274,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
Location
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Specify project regions and boundary information
</h6>
Expand Down Expand Up @@ -1340,7 +1340,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
Species
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Information about species this project is inventorying or monitoring
</h6>
Expand Down Expand Up @@ -1406,7 +1406,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
IUCN Classification
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Lorem ipsum dolor sit amet, consectur whatever whatever
</h6>
Expand Down Expand Up @@ -1472,7 +1472,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
Funding
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Specify funding sources for the project
</h6>
Expand Down Expand Up @@ -1538,7 +1538,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
Partnerships
</h2>
<h6
class="MuiTypography-root MuiTypography-subtitle2"
class="MuiTypography-root MuiTypography-subtitle1"
>
Specify partnerships for the project
</h6>
Expand Down
47 changes: 27 additions & 20 deletions app/src/features/projects/components/ProjectFundingItemForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
FormControl,
FormHelperText,
FormLabel,
Grid,
InputAdornment,
InputLabel,
MenuItem,
Select,
TextField,
Typography
TextField
} from '@material-ui/core';
import { IMultiAutocompleteFieldOption } from 'components/fields/MultiAutocompleteFieldVariableSize';
import StartEndDateFields from 'components/fields/StartEndDateFields';
Expand Down Expand Up @@ -105,14 +105,13 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
aria-describedby="alert-dialog-description">
<DialogTitle id="alert-dialog-title">Add Funding Source</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">Enter Funding Source Details</DialogContentText>
<Box py={2}>
<Box component="fieldset">
<FormLabel id="agency_details" component="legend">
Agency Details
</FormLabel>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h3">Agency Details</Typography>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth variant="outlined" required={true} style={{ width: '100%' }}>
<FormControl variant="outlined" required={true} style={{ width: '100%' }}>
<InputLabel id="agency_id-label">Agency Name</InputLabel>
<Select
id="agency_id"
Expand Down Expand Up @@ -193,9 +192,11 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
helperText={errors.agency_project_id}
/>
</Grid>
<Grid item xs={12}>
<Typography variant="h3">Funding Details</Typography>
</Grid>
</Grid>
</Box>
<Box component="fieldset" mt={5}>
<FormLabel component="legend">Funding Details</FormLabel>
<Grid container spacing={3}>
<Grid item xs={12}>
<TextField
fullWidth
Expand All @@ -218,24 +219,30 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
<StartEndDateFields formikProps={formikProps} startRequired={true} endRequired={true} />
</Grid>
</Box>
<Box mt={4}>
<Divider />
</Box>
</DialogContent>
<DialogActions>
<Button
variant="contained"
color="primary"
onClick={async () => {
handleSubmit();
}}
autoFocus
aria-label="Add Funding Source">
Add
</Button>
<Button
variant="outlined"
onClick={() => {
props.onCancel();
resetForm();
}}
color="primary">
Cancel
</Button>
<Button
onClick={async () => {
handleSubmit();
}}
color="primary"
autoFocus>
Add
</Button>
</DialogActions>
</Dialog>
</>
Expand Down
Loading