From d0d5f4a06ecf1c3b9dc25b243211d3f684585caa Mon Sep 17 00:00:00 2001 From: jeznorth Date: Wed, 7 Apr 2021 09:29:00 -0700 Subject: [PATCH 1/3] [BHBC-965] Project Page UI Clean-up / Refactor Markup --- app/src/App.tsx | 70 +- app/src/components/fields/ReadMoreField.tsx | 42 +- app/src/components/layout/Header.tsx | 4 +- .../layout/__snapshots__/Header.test.tsx.snap | 4 +- app/src/constants/i18n.ts | 4 +- .../features/projects/view/ProjectDetails.tsx | 95 +- .../features/projects/view/ProjectPage.tsx | 137 +- .../ProjectDetails.test.tsx.snap | 1976 +++++++-------- .../__snapshots__/ProjectPage.test.tsx.snap | 273 +-- .../view/components/GeneralInformation.tsx | 115 +- .../components/IUCNClassification.test.tsx | 20 +- .../view/components/IUCNClassification.tsx | 110 +- .../view/components/LocationBoundary.tsx | 87 +- .../projects/view/components/Partnerships.tsx | 127 +- .../view/components/ProjectCoordinator.tsx | 79 +- .../components/ProjectObjectives.test.tsx | 8 +- .../view/components/ProjectObjectives.tsx | 58 +- .../projects/view/components/Species.tsx | 128 +- .../GeneralInformation.test.tsx.snap | 360 +-- .../IUCNClassification.test.tsx.snap | 301 ++- .../LocationBoundary.test.tsx.snap | 2148 ++++++++--------- .../__snapshots__/Partnerships.test.tsx.snap | 472 ++-- .../ProjectCoordinator.test.tsx.snap | 141 +- .../ProjectObjectives.test.tsx.snap | 1039 ++++---- .../__snapshots__/Species.test.tsx.snap | 460 ++-- app/src/layouts/PublicLayout.tsx | 17 +- .../__snapshots__/PublicLayout.test.tsx.snap | 8 +- app/src/styles.scss | 34 + app/src/styles/Header.scss | 5 +- app/src/themes/appTheme.ts | 21 + 30 files changed, 3550 insertions(+), 4793 deletions(-) diff --git a/app/src/App.tsx b/app/src/App.tsx index ebe93e172d..af59e30846 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,4 +1,4 @@ -import { Box, CircularProgress, ThemeProvider } from '@material-ui/core'; +import { CircularProgress, ThemeProvider } from '@material-ui/core'; // Strange looking `type {}` import below, see: https://github.com/microsoft/TypeScript/issues/36812 import type {} from '@material-ui/lab/themeAugmentation'; // this allows `@material-ui/lab` components to be themed import { KeycloakProvider } from '@react-keycloak/web'; @@ -13,43 +13,41 @@ import getKeycloakEventHandler from 'utils/KeycloakEventHandler'; const App: React.FC = () => { return ( - - - - - {(config) => { - if (!config) { - return ; - } + + + + {(config) => { + if (!config) { + return ; + } - //@ts-ignore - const keycloak: KeycloakInstance = new Keycloak(config.KEYCLOAK_CONFIG); + //@ts-ignore + const keycloak: KeycloakInstance = new Keycloak(config.KEYCLOAK_CONFIG); - return ( - } - onEvent={getKeycloakEventHandler()}> - - - - {(context: IAuthState) => { - if (!context.ready) { - return ; - } - return ; - }} - - - - - ); - }} - - - - + return ( + } + onEvent={getKeycloakEventHandler()}> + + + + {(context: IAuthState) => { + if (!context.ready) { + return ; + } + return ; + }} + + + + + ); + }} + + + ); }; diff --git a/app/src/components/fields/ReadMoreField.tsx b/app/src/components/fields/ReadMoreField.tsx index 8c73dcb5a0..e60c217647 100644 --- a/app/src/components/fields/ReadMoreField.tsx +++ b/app/src/components/fields/ReadMoreField.tsx @@ -19,11 +19,7 @@ export const ReadMoreField: React.FC = (props) => { const renderParagraph = (paragraph: string) => { if (paragraph) { - return ( - - {paragraph} - - ); + return {paragraph}; } return

; }; @@ -50,30 +46,30 @@ export const ReadMoreField: React.FC = (props) => { {isTruncatedText && ( <> - - {text - .slice(0, determineTruncatingLength()) - .split('\n') - .map((paragraph: string) => { - return renderParagraph(paragraph); - })} + {text + .slice(0, determineTruncatingLength()) + .split('\n') + .map((paragraph: string) => { + return renderParagraph(paragraph); + })} + + - )} {!isTruncatedText && ( <> - - {text?.split('\n').map((paragraph: string) => { - return renderParagraph(paragraph); - })} - + {text?.split('\n').map((paragraph: string) => { + return renderParagraph(paragraph); + })} {text?.length > maxCharLength && ( - + + + )} )} diff --git a/app/src/components/layout/Header.tsx b/app/src/components/layout/Header.tsx index 3709236c87..b629de23c2 100644 --- a/app/src/components/layout/Header.tsx +++ b/app/src/components/layout/Header.tsx @@ -8,8 +8,8 @@ import headerImageSmall from 'assets/images/gov-bc-logo-vert.png'; const Header: React.FC = () => { return ( - - + + diff --git a/app/src/components/layout/__snapshots__/Header.test.tsx.snap b/app/src/components/layout/__snapshots__/Header.test.tsx.snap index 4a2fed2224..390112054a 100644 --- a/app/src/components/layout/__snapshots__/Header.test.tsx.snap +++ b/app/src/components/layout/__snapshots__/Header.test.tsx.snap @@ -3,11 +3,11 @@ exports[`NotFoundPage renders correctly 1`] = `
= (props) => { return ( <> - + Project Details - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/app/src/features/projects/view/ProjectPage.tsx b/app/src/features/projects/view/ProjectPage.tsx index f2afe0a7d8..5d9918fa78 100644 --- a/app/src/features/projects/view/ProjectPage.tsx +++ b/app/src/features/projects/view/ProjectPage.tsx @@ -3,7 +3,6 @@ import { Breadcrumbs, CircularProgress, Container, - Divider, List, ListItem, ListItemIcon, @@ -12,7 +11,7 @@ import { Paper, Typography } from '@material-ui/core'; -import { AssignmentOutlined, DescriptionOutlined, InfoOutlined } from '@material-ui/icons'; + import { DATE_FORMAT } from 'constants/dateFormats'; import ProjectAttachments from 'features/projects/view/ProjectAttachments'; import ProjectDetails from 'features/projects/view/ProjectDetails'; @@ -24,15 +23,18 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useLocation, useParams } from 'react-router'; import { Link } from 'react-router-dom'; import { getFormattedDateRangeString } from 'utils/Utils'; +import Icon from '@mdi/react'; +import { mdiPaperclip, mdiClipboardCheckMultipleOutline, mdiInformationOutline } from '@mdi/js'; const useStyles = makeStyles((theme) => ({ - breadCrumbLink: { - display: 'flex', - alignItems: 'center', - cursor: 'pointer' - }, - breadCrumbLinkIcon: { - marginRight: '0.25rem' + projectNav: { + minWidth: '15rem', + '& a': { + color: theme.palette.primary.main + }, + '& svg': { + color: theme.palette.primary.main + } } })); @@ -102,84 +104,71 @@ const ProjectPage: React.FC = () => { return ( <> - - + + - - Projects + + Projects - - {projectWithDetails.project.project_name} + + {projectWithDetails.project.project_name} {projectWithDetails.project.project_name} - - - {getFormattedDateRangeString( - DATE_FORMAT.MediumDateFormat, - projectWithDetails.project.start_date, - projectWithDetails.project.end_date - )} + + + + {getFormattedDateRangeString( + DATE_FORMAT.MediumDateFormat, + projectWithDetails.project.start_date, + projectWithDetails.project.end_date + )} + - - TODO Set Project Regions - - - - - - - - - - - - - - - - Project Details - - - - - - - - - - Surveys - - - - - - - - - - Attachments - - - - - - - {location.pathname.includes('/details') && ( - - )} - {location.pathname.includes('/surveys') && } - {location.pathname.includes('/attachments') && ( - - )} - + + + + + + + + + + + Project Details + + + + + + Surveys + + + + + + Attachments + + + + + {location.pathname.includes('/details') && ( + + )} + {location.pathname.includes('/surveys') && } + {location.pathname.includes('/attachments') && ( + + )} + + + ); }; diff --git a/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap b/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap index 9666e62dc2..de8ccfd4e4 100644 --- a/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap +++ b/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap @@ -12,1404 +12,1088 @@ exports[`ProjectDetails renders correctly 1`] = `
-
-
-
-

- Project Objectives -

-
-
- -
-
-
+
-
+ + + EDIT + + + +
+
+

-

-

- Project Caveats -

-
-
-
+
+
+
+
+
+

-
-
-
-

- sjwer bds -

-
-
-
-

+ Caveats + +
+
+

+ sjwer bds +

-
-
-
-
+
+
-
-
-

- General Information -

-
-
+ -
-
+ + + + EDIT + + + +
+
-
- - Project Name - -
-
+
-
- Test Project Name -
-
+ Test Project Name +
-
- - Type - -
-
+
-
- 1 -
-
+ 1 +
-
- - Timeline - -
-
+
-
- Oct 10, 1998 - Feb 26, 2021 -
-
+ Oct 10, 1998 - Feb 26, 2021 +
-
- - Activities - -
-
+
-
- Activity code -
-
+ Activity code +
-
- - Climate Change Initiatives - -
-
+
-
- Climate code -
-
+ Climate code +
-
+
-
- -
-
+
+
-
-
-

- Project Coordinator -

-
-
+ -
-
+ + + + EDIT + + + +
+
-
- - Name - -
-
+
-
- Amanda Christensen -
-
+ Amanda Christensen +
-
- - Email Address - -
-
+
-
- amanda@christensen.com -
-
+ amanda@christensen.com +
-
- - Agency - -
-
+
-
- Amanda and associates -
-
+ Amanda and associates +
-
+
-
- -
-
+
+
+

+ Location / Project Boundary +

+ +
+
-

+ Region(s) + +
- Location / Project Boundary -

+ Region 1, Region 2 +
- + Location Description + +
+ Location description +
+
+
- - Region(s) - +
+ +
+
-
- Region 1, Region 2 -
+ +
+
+
+
+
+
- - Location Description - + + + + + + − + +
-
- Location description -
+
-
-
+
-
+
-
-
- +
+ + + Esri Imagery +
-
-
-
- -
-
-
- + +
-
-
-
-
+
+
-
-
-

- Species -

-
-
+ -
-
+ + + + EDIT + + + +
+
-
- - - - - - - - - - - - - - -
- Focal Species -
- species 1 -
- species 2 -
-
+ Focal Species + +
+ species 1 +
+
+ species 2 +
-
- - - - - - - - - - - - - - -
- Ancillary Species -
- species 3 -
- species 4 -
-
+ Anciliary Species + +
+ species 3 +
+
+ species 4 +
-
+
-
-
-
-
+
+
-
-
+ +
+
+ + + - + + + + + + + + + + + + + + + +
+ Sub-classification + + Sub-classification +
+ classification + + sub classification 1 + + sub classification 2 +
+ classification again + + sub classification 1 again + + sub classification 2 again +
+
+
+
+
+
+
+

+ Partnerships +

+ -
+ + + + EDIT + + + +
+
+
+
+
+
+ Indigenous Partnerships +
+
+ partner 1 +
+
+ partner 2 +
-
- - - - - - - - - - - - - - - - - - - - -
- Classification - - Sub-classification - - Sub-classification -
- classification - - sub classification 1 - - sub classification 2 -
- classification again - - sub classification 1 again - - sub classification 2 again -
-
+ Stakeholder Partnerships + +
+ partner 3 +
+
+ partner 4 +
-
-
-
-
-
+
+
+
-
-

- Funding Sources -

-
-
- -
+ Funding Sources +
-
+
+
+
+
+
+
-
-

- agency name -

-
+ agency name +

-
+
+ -
+ + +
+
+
-
- - Agency Project ID - -
-
-
- 123 -
-
+ Agency Project ID +
-
- - Funding Amount - -
-
-
- $ 333 -
-
+ 123 +
+
+
-
- - Funding Dates - -
-
-
- 04/14/2000 - 04/13/2021 -
-
+ Funding Amount +
-
- - Investment Category - -
-
-
- investment action -
-
+ $ 333 +
-
-
-
-
-
-
-
-
-

- Partnerships -

+ Funding Dates +
- + 04/14/2000 - 04/13/2021 +
-
- - - - - - - - - - - - - - -
- Indigenous Partnerships -
- partner 1 -
- partner 2 -
-
+ Investment Category +
-
- - - - - - - - - - - - - - -
- Stakeholder Partnerships -
- partner 3 -
- partner 4 -
-
+ investment action +
-
+
`; diff --git a/app/src/features/projects/view/__snapshots__/ProjectPage.test.tsx.snap b/app/src/features/projects/view/__snapshots__/ProjectPage.test.tsx.snap index 8195bd156a..249810c40a 100644 --- a/app/src/features/projects/view/__snapshots__/ProjectPage.test.tsx.snap +++ b/app/src/features/projects/view/__snapshots__/ProjectPage.test.tsx.snap @@ -30,13 +30,13 @@ exports[`ProjectPage renders project page when project is loaded 1`] = ` class="MuiPaper-root MuiPaper-elevation2" >

- October 10, 1998 - February 26, 2021 -
-
-
- TODO Set Project Regions + + October 10, 1998 - February 26, 2021 +
-
-
-
+ + + +
- -
+ +
+
+ - - -

- Surveys -

- - -
- -
  • +
    • + + + +
    - -
    + +
    +
    + - - -

    - Attachments -

    -     - -
    - - -
    -
    -
    + Attachments +     +
    + + + + +
    diff --git a/app/src/features/projects/view/components/GeneralInformation.tsx b/app/src/features/projects/view/components/GeneralInformation.tsx index ceaa433775..5a85a5c1f8 100644 --- a/app/src/features/projects/view/components/GeneralInformation.tsx +++ b/app/src/features/projects/view/components/GeneralInformation.tsx @@ -1,5 +1,4 @@ -import { Box, Grid, IconButton, Typography } from '@material-ui/core'; -import { Edit } from '@material-ui/icons'; +import { Box, Button, Grid, Typography } from '@material-ui/core'; import EditDialog from 'components/dialog/EditDialog'; import { ErrorDialog, IErrorDialogProps } from 'components/dialog/ErrorDialog'; import { DATE_FORMAT } from 'constants/dateFormats'; @@ -20,6 +19,8 @@ import { import React, { useState } from 'react'; import ProjectStepComponents from 'utils/ProjectStepComponents'; import { getFormattedDate, getFormattedDateRangeString } from 'utils/Utils'; +import Icon from '@mdi/react'; +import { mdiPencilOutline } from '@mdi/js'; export interface IProjectDetailsProps { projectForViewData: IGetProjectForViewResponse; @@ -136,67 +137,63 @@ const GeneralInformation: React.FC = (props) => { onSave={handleDialogEditSave} /> - - - - General Information - - - handleDialogEditOpen()} - title="Edit General Information" - aria-label="Edit General Information"> - - EDIT + + + General Information + + +
    + + + + Project Name - - - - - - - Project Name - - - {project.project_name} - - - - - Type - - - {project.project_type} - - - - - Timeline - - - + + {project.project_name} + + + + + Type + + + {project.project_type} + + + + + Timeline + + {getFormattedDateRangeString(DATE_FORMAT.ShortMediumDateFormat, project.start_date, project.end_date)} - - - - - Activities - - - {projectActivities} - - - - - Climate Change Initiatives - - - {projectClimateChangeInitiatives} - + + + + Activities + + + {projectActivities} + + + + + Climate Change Initiatives + + + {projectClimateChangeInitiatives} + + - - +
    +     ); }; diff --git a/app/src/features/projects/view/components/IUCNClassification.test.tsx b/app/src/features/projects/view/components/IUCNClassification.test.tsx index ad16ee13f9..39be59330e 100644 --- a/app/src/features/projects/view/components/IUCNClassification.test.tsx +++ b/app/src/features/projects/view/components/IUCNClassification.test.tsx @@ -76,7 +76,7 @@ describe('IUCNClassification', () => { const { getByText, queryByText } = renderContainer(); await waitFor(() => { - expect(getByText('IUCN Classification')).toBeVisible(); + expect(getByText('IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); @@ -88,19 +88,19 @@ describe('IUCNClassification', () => { }); await waitFor(() => { - expect(getByText('Edit IUCN Classification')).toBeVisible(); + expect(getByText('Edit IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('Cancel')); await waitFor(() => { - expect(queryByText('Edit IUCN Classification')).not.toBeInTheDocument(); + expect(queryByText('Edit IUCN Classifications')).not.toBeInTheDocument(); }); fireEvent.click(getByText('EDIT')); await waitFor(() => { - expect(getByText('Edit IUCN Classification')).toBeVisible(); + expect(getByText('Edit IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('Save Changes')); @@ -131,19 +131,19 @@ describe('IUCNClassification', () => { const { getByText, queryByText } = renderContainer(); await waitFor(() => { - expect(getByText('IUCN Classification')).toBeVisible(); + expect(getByText('IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); await waitFor(() => { - expect(getByText('Error Editing IUCN Classification')).toBeVisible(); + expect(getByText('Error Editing IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('Ok')); await waitFor(() => { - expect(queryByText('Error Editing IUCN Classification')).not.toBeInTheDocument(); + expect(queryByText('Error Editing IUCN Classifications')).not.toBeInTheDocument(); }); }); @@ -153,7 +153,7 @@ describe('IUCNClassification', () => { const { getByText, queryByText } = renderContainer(); await waitFor(() => { - expect(getByText('IUCN Classification')).toBeVisible(); + expect(getByText('IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); @@ -186,7 +186,7 @@ describe('IUCNClassification', () => { const { getByText, queryByText, getAllByRole } = renderContainer(); await waitFor(() => { - expect(getByText('IUCN Classification')).toBeVisible(); + expect(getByText('IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); @@ -198,7 +198,7 @@ describe('IUCNClassification', () => { }); await waitFor(() => { - expect(getByText('Edit IUCN Classification')).toBeVisible(); + expect(getByText('Edit IUCN Classifications')).toBeVisible(); }); fireEvent.click(getByText('Save Changes')); diff --git a/app/src/features/projects/view/components/IUCNClassification.tsx b/app/src/features/projects/view/components/IUCNClassification.tsx index 44a0b124c5..2c8735ec42 100644 --- a/app/src/features/projects/view/components/IUCNClassification.tsx +++ b/app/src/features/projects/view/components/IUCNClassification.tsx @@ -1,15 +1,14 @@ import { + Box, + Button, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, - Grid, - Typography, - IconButton + Typography } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; import React, { useState } from 'react'; import { IGetProjectForViewResponse, UPDATE_GET_ENTITIES } from 'interfaces/useProjectApi.interface'; import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface'; @@ -24,26 +23,9 @@ import { EditIUCNI18N } from 'constants/i18n'; import ProjectStepComponents from 'utils/ProjectStepComponents'; import { ErrorDialog, IErrorDialogProps } from 'components/dialog/ErrorDialog'; import { useBiohubApi } from 'hooks/useBioHubApi'; -import { Edit } from '@material-ui/icons'; import { APIError } from 'hooks/api/useAxios'; - -const useStyles = makeStyles({ - table: { - minWidth: 650 - }, - tableCellBorderTop: { - borderTop: '1px solid rgba(224, 224, 224, 1)' - }, - tableCellBorderBottom: { - borderBottom: 'none' - }, - heading: { - fontWeight: 'bold' - }, - addButton: { - border: '2px solid' - } -}); +import Icon from '@mdi/react'; +import { mdiPencilOutline } from '@mdi/js'; export interface IIUCNClassificationProps { projectForViewData: IGetProjectForViewResponse; @@ -62,7 +44,6 @@ const IUCNClassification: React.FC = (props) => { codes } = props; - const classes = useStyles(); const biohubApi = useBiohubApi(); const [errorDialogProps, setErrorDialogProps] = useState({ @@ -142,52 +123,43 @@ const IUCNClassification: React.FC = (props) => { onSave={handleDialogEditSave} /> - - - - IUCN Classification - - - handleDialogEditOpen()} - title="Edit IUCN Classification" - aria-label="Edit IUCN Classification"> - - EDIT - - - - - {iucn.classificationDetails.length > 0 && ( - - - - - - Classification - Sub-classification - Sub-classification + + + IUCN Classifications + + + + {iucn.classificationDetails.length > 0 && ( + +
    + + + Classification + Sub-classification + Sub-classification + + + + {iucn.classificationDetails.map((classificationDetail: any, index: number) => { + return ( + + {classificationDetail.classification} + {classificationDetail.subClassification1} + {classificationDetail.subClassification2} - - - {iucn.classificationDetails.map((classificationDetail: any, index: number) => { - const tableCellStyle = - index === iucn.classificationDetails.length - 1 ? classes.tableCellBorderBottom : undefined; - - return ( - - {classificationDetail.classification} - {classificationDetail.subClassification1} - {classificationDetail.subClassification2} - - ); - })} - -
    -     -     - )} -     + ); + })} + + + + )} ); }; diff --git a/app/src/features/projects/view/components/LocationBoundary.tsx b/app/src/features/projects/view/components/LocationBoundary.tsx index 00b0a06531..3f0c8e0c6d 100644 --- a/app/src/features/projects/view/components/LocationBoundary.tsx +++ b/app/src/features/projects/view/components/LocationBoundary.tsx @@ -1,5 +1,4 @@ -import { Box, Grid, IconButton, Typography } from '@material-ui/core'; -import { Edit } from '@material-ui/icons'; +import { Box, Button, Grid, Typography } from '@material-ui/core'; import { IGetProjectForUpdateResponseLocation, IGetProjectForViewResponse, @@ -22,6 +21,8 @@ import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface'; import { ErrorDialog, IErrorDialogProps } from 'components/dialog/ErrorDialog'; import { APIError } from 'hooks/api/useAxios'; import { useBiohubApi } from 'hooks/useBioHubApi'; +import Icon from '@mdi/react'; +import { mdiPencilOutline } from '@mdi/js'; export interface ILocationBoundaryProps { projectForViewData: IGetProjectForViewResponse; @@ -184,51 +185,47 @@ const LocationBoundary: React.FC = (props) => { onSave={handleDialogEditSave} /> - - - - Location / Project Boundary - - - handleDialogEditOpen()} - title="Edit Location / Project Boundary" - aria-label="Edit Location / Project Boundary"> - - EDIT + + + Location / Project Boundary + + +
    + + + + Region(s) - - - - - - - Region(s) - - - {location.regions.join(', ')} - - - - - Location Description - - - {location.location_description} - - - - - - + + {location.regions.join(', ')} + + + + + Location Description + + + {location.location_description} + + - - +
    + + + +     ); }; diff --git a/app/src/features/projects/view/components/Partnerships.tsx b/app/src/features/projects/view/components/Partnerships.tsx index a6900d30ed..e8f91f3f33 100644 --- a/app/src/features/projects/view/components/Partnerships.tsx +++ b/app/src/features/projects/view/components/Partnerships.tsx @@ -1,17 +1,4 @@ -import { - Grid, - IconButton, - makeStyles, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Typography -} from '@material-ui/core'; -import { Edit } from '@material-ui/icons'; -import clsx from 'clsx'; +import { Box, Button, Grid, Typography } from '@material-ui/core'; import { IGetProjectForViewResponse, UPDATE_GET_ENTITIES } from 'interfaces/useProjectApi.interface'; import React, { useState } from 'react'; import ProjectStepComponents from 'utils/ProjectStepComponents'; @@ -26,16 +13,8 @@ import { EditPartnershipsI18N } from 'constants/i18n'; import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface'; import { useBiohubApi } from 'hooks/useBioHubApi'; import { APIError } from 'hooks/api/useAxios'; - -const useStyles = makeStyles({ - tableCellBorderBottom: { - borderBottom: 'none' - }, - tableHeading: { - fontWeight: 'bold', - borderBottom: 'none' - } -}); +import Icon from '@mdi/react'; +import { mdiPencilOutline } from '@mdi/js'; export interface IPartnershipsProps { projectForViewData: IGetProjectForViewResponse; @@ -57,7 +36,6 @@ const Partnerships: React.FC = (props) => { codes } = props; - const classes = useStyles(); const biohubApi = useBiohubApi(); const [openEditDialog, setOpenEditDialog] = useState(false); @@ -132,72 +110,49 @@ const Partnerships: React.FC = (props) => { onSave={handleDialogEditSave} /> - - + + + + Partnerships + + + + +
    + - Partnerships + + Indigenous Partnerships + + {indigenous_partnerships?.map((indigenousPartnership: string, index: number) => { + return ( + + {indigenousPartnership} + + ); + })} - handleDialogEditOpen()} title="Edit Partnerships" aria-label="Edit Partnerships"> - - EDIT - - - - - - - - - - - Indigenous Partnerships - - - - {indigenous_partnerships?.map((indigenousPartnership: string, index: number) => { - return ( - - - {indigenousPartnership} - - - ); - })} - -
    -     -     - - - - - - Stakeholder Partnerships - - - - {stakeholder_partnerships?.map((stakeholderPartnership: string, index: number) => { - return ( - - - {stakeholderPartnership} - - - ); - })} - -
    -     + + Stakeholder Partnerships + + {stakeholder_partnerships?.map((stakeholderPartnership: string, index: number) => { + return ( + + {stakeholderPartnership} + + ); + })}     - +
    ); }; diff --git a/app/src/features/projects/view/components/ProjectCoordinator.tsx b/app/src/features/projects/view/components/ProjectCoordinator.tsx index 6a4b7949e7..40ea866ee2 100644 --- a/app/src/features/projects/view/components/ProjectCoordinator.tsx +++ b/app/src/features/projects/view/components/ProjectCoordinator.tsx @@ -1,5 +1,4 @@ -import { Box, Grid, IconButton, Typography } from '@material-ui/core'; -import { Edit } from '@material-ui/icons'; +import { Box, Button, Grid, Typography } from '@material-ui/core'; import EditDialog from 'components/dialog/EditDialog'; import { ErrorDialog, IErrorDialogProps } from 'components/dialog/ErrorDialog'; import { EditCoordinatorI18N } from 'constants/i18n'; @@ -18,6 +17,8 @@ import { } from 'interfaces/useProjectApi.interface'; import React, { useState } from 'react'; import ProjectStepComponents from 'utils/ProjectStepComponents'; +import Icon from '@mdi/react'; +import { mdiPencilOutline } from '@mdi/js'; export interface IProjectCoordinatorProps { projectForViewData: IGetProjectForViewResponse; @@ -125,55 +126,47 @@ const ProjectCoordinator: React.FC = (props) => { onSave={handleDialogEditSave} /> - - - - Project Coordinator - - - handleDialogEditOpen()} - title="Edit Project Coordinator Information" - aria-label="Edit Project Coordinator Information"> - - EDIT + + + Project Coordinator + + +
    + + + + Name - - - - - - - Name - - - + {coordinator.first_name} {coordinator.last_name} - - - - - Email Address - - - + + + + Email Address + + {coordinator.email_address} - - - - - Agency - - - + + + + Agency + + {coordinator.coordinator_agency} - + - - +
    +     ); }; diff --git a/app/src/features/projects/view/components/ProjectObjectives.test.tsx b/app/src/features/projects/view/components/ProjectObjectives.test.tsx index a6aae10300..6d73527164 100644 --- a/app/src/features/projects/view/components/ProjectObjectives.test.tsx +++ b/app/src/features/projects/view/components/ProjectObjectives.test.tsx @@ -165,7 +165,7 @@ describe('ProjectObjectives', () => { const { getByText, queryByText } = renderContainer(); await waitFor(() => { - expect(getByText('Project Objectives')).toBeVisible(); + expect(getByText('Objectives')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); @@ -215,7 +215,7 @@ describe('ProjectObjectives', () => { const { getByText, queryByText } = renderContainer(); await waitFor(() => { - expect(getByText('Project Objectives')).toBeVisible(); + expect(getByText('Objectives')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); @@ -237,7 +237,7 @@ describe('ProjectObjectives', () => { const { getByText, queryByText } = renderContainer(); await waitFor(() => { - expect(getByText('Project Objectives')).toBeVisible(); + expect(getByText('Objectives')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); @@ -266,7 +266,7 @@ describe('ProjectObjectives', () => { const { getByText, queryByText, getAllByRole } = renderContainer(); await waitFor(() => { - expect(getByText('Project Objectives')).toBeVisible(); + expect(getByText('Objectives')).toBeVisible(); }); fireEvent.click(getByText('EDIT')); diff --git a/app/src/features/projects/view/components/ProjectObjectives.tsx b/app/src/features/projects/view/components/ProjectObjectives.tsx index 4cf9782f7e..2a23ca4d7a 100644 --- a/app/src/features/projects/view/components/ProjectObjectives.tsx +++ b/app/src/features/projects/view/components/ProjectObjectives.tsx @@ -1,5 +1,4 @@ -import { Box, Grid, IconButton, Typography } from '@material-ui/core'; -import { Edit } from '@material-ui/icons'; +import { Box, Button, Divider, Typography } from '@material-ui/core'; import EditDialog from 'components/dialog/EditDialog'; import { ErrorDialog, IErrorDialogProps } from 'components/dialog/ErrorDialog'; import ReadMoreField from 'components/fields/ReadMoreField'; @@ -19,6 +18,8 @@ import { } from 'interfaces/useProjectApi.interface'; import React, { useState } from 'react'; import ProjectStepComponents from 'utils/ProjectStepComponents'; +import Icon from '@mdi/react'; +import { mdiPencilOutline } from '@mdi/js'; export interface IProjectObjectivesProps { projectForViewData: IGetProjectForViewResponse; @@ -124,39 +125,26 @@ const ProjectObjectives: React.FC = (props) => { onSave={handleDialogEditSave} /> - - - - - Project Objectives - - - handleDialogEditOpen()} - title="Edit Objectives Information" - aria-label="Edit Objectives Information"> - - EDIT - - - - - - - - - - - - Project Caveats - - - - - - - - + + + Objectives + + + + + + + + Caveats + + ); diff --git a/app/src/features/projects/view/components/Species.tsx b/app/src/features/projects/view/components/Species.tsx index fce383f74e..db7992de48 100644 --- a/app/src/features/projects/view/components/Species.tsx +++ b/app/src/features/projects/view/components/Species.tsx @@ -1,17 +1,4 @@ -import { - Grid, - IconButton, - makeStyles, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Typography -} from '@material-ui/core'; -import { Edit } from '@material-ui/icons'; -import clsx from 'clsx'; +import { Box, Button, Grid, Typography } from '@material-ui/core'; import { IGetProjectForViewResponse, UPDATE_GET_ENTITIES } from 'interfaces/useProjectApi.interface'; import React, { useState } from 'react'; import ProjectStepComponents from 'utils/ProjectStepComponents'; @@ -26,16 +13,9 @@ import { EditSpeciesI18N } from 'constants/i18n'; import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface'; import { useBiohubApi } from 'hooks/useBioHubApi'; import { APIError } from 'hooks/api/useAxios'; +import Icon from '@mdi/react'; +import { mdiPencilOutline } from '@mdi/js'; -const useStyles = makeStyles({ - tableCellBorderBottom: { - borderBottom: 'none' - }, - tableHeading: { - fontWeight: 'bold', - borderBottom: 'none' - } -}); export interface ISpeciesProps { projectForViewData: IGetProjectForViewResponse; codes: IGetAllCodeSetsResponse; @@ -57,7 +37,6 @@ const Species: React.FC = (props) => { } = props; const biohubApi = useBiohubApi(); - const classes = useStyles(); const [openEditDialog, setOpenEditDialog] = useState(false); const [speciesForUpdate, setSpeciesForUpdate] = useState(ProjectSpeciesFormInitialValues); @@ -131,68 +110,49 @@ const Species: React.FC = (props) => { onSave={handleDialogEditSave} /> - - - - Species - - - handleDialogEditOpen()} title="Edit Species" aria-label="Edit Species"> - - EDIT + + + + Species + + + +
    + + + + Focal Species - - - - - - - - - - Focal Species - - - - {focal_species?.map((focalSpecies: string, index: number) => { - return ( - - - {focalSpecies} - - - ); - })} - -
    -     -     - - - - - - Ancillary Species - - - - {ancillary_species?.map((ancillarySpecies: string, index: number) => { - return ( - - - {ancillarySpecies} - - - ); - })} - -
    -     + {focal_species?.map((focalSpecies: string, index: number) => { + return ( + + {focalSpecies} + + ); + })} +     + + + Anciliary Species + + {ancillary_species?.map((ancillarySpecies: string, index: number) => { + return ( + + {ancillarySpecies} + + ); + })} +     - - +
    +     ); }; diff --git a/app/src/features/projects/view/components/__snapshots__/GeneralInformation.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/GeneralInformation.test.tsx.snap index c9f9b0b875..cffb292699 100644 --- a/app/src/features/projects/view/components/__snapshots__/GeneralInformation.test.tsx.snap +++ b/app/src/features/projects/view/components/__snapshots__/GeneralInformation.test.tsx.snap @@ -3,169 +3,123 @@ exports[`ProjectDetails renders correctly with activity and climate initiative data 1`] = `
    -
    -

    - General Information -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Project Name - -
    -
    -
    +
    Test Project Name -
    +
    -
    -
    - Type - -
    -
    -
    +
    1 -
    +
    -
    -
    - Timeline - -
    -
    -
    +
    Oct 10, 1998 - Feb 26, 2021 -
    +
    -
    -
    - Activities - -
    -
    -
    +
    Activity code -
    +
    -
    -
    - Climate Change Initiatives - -
    -
    -
    +
    Climate code -
    +
    -
    +
    `; @@ -173,165 +127,119 @@ exports[`ProjectDetails renders correctly with activity and climate initiative d exports[`ProjectDetails renders correctly with no activity and climate initiative data 1`] = `
    -
    -

    - General Information -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Project Name - -
    -
    -
    +
    Test Project Name -
    +
    -
    -
    - Type - -
    -
    -
    +
    1 -
    +
    -
    -
    - Timeline - -
    -
    -
    +
    Oct 10, 1998 - Feb 26, 2021 -
    +
    -
    -
    - Activities - -
    -
    -
    +
    -
    -
    - Climate Change Initiatives - -
    -
    -
    +
    -
    +
    `; diff --git a/app/src/features/projects/view/components/__snapshots__/IUCNClassification.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/IUCNClassification.test.tsx.snap index e555ad4014..5c74da22c3 100644 --- a/app/src/features/projects/view/components/__snapshots__/IUCNClassification.test.tsx.snap +++ b/app/src/features/projects/view/components/__snapshots__/IUCNClassification.test.tsx.snap @@ -3,136 +3,123 @@ exports[`IUCNClassification renders correctly with classification details 1`] = `
    -
    -
    +
    - +
    + + - - - -
    -
    +
    + + + + -
    + Sub-classification + + Sub-classification +
    - - - - - - - - + - - - - - - - - - - -
    - Classification - - Sub-classification - - Sub-classification -
    -
    - classification - - sub classification 1 - - sub classification 2 -
    - classification again - - sub classification 1 again - - sub classification 2 again -
    -
    -
    + sub classification 1 + + + sub classification 2 + + + + + classification again + + + sub classification 1 again + + + sub classification 2 again + + + +
    `; @@ -140,55 +127,43 @@ exports[`IUCNClassification renders correctly with classification details 1`] = exports[`IUCNClassification renders correctly with no classification details 1`] = `
    -
    -
    -

    - IUCN Classification -

    -
    -
    + -
    -
    + + + + EDIT + + +
    `; diff --git a/app/src/features/projects/view/components/__snapshots__/LocationBoundary.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/LocationBoundary.test.tsx.snap index e93e533cfc..d69b103b1f 100644 --- a/app/src/features/projects/view/components/__snapshots__/LocationBoundary.test.tsx.snap +++ b/app/src/features/projects/view/components/__snapshots__/LocationBoundary.test.tsx.snap @@ -3,287 +3,261 @@ exports[`LocationBoundary matches the snapshot when the geometry is a geometry collection 1`] = `
    -
    -

    - Location / Project Boundary -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Region(s) - -
    -
    -
    +
    Region 1, Region 2 -
    +
    -
    -
    - Location Description - -
    -
    -
    +
    Location description -
    +
    +
    +
    -
    -
    - -
    -
    -
    -
    -
    - - - - - +
    -
    -
    -
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    -
    -
    - - + - - - − - -
    -
    -
    + -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    + -
    - -
    -
    - - +
    + +
    - - Leaflet - - | © - - ESRI Basemap - -
    -
    + class="leaflet-control-layers-separator" + style="display: none;" + /> +
    + +
    +
    + + Leaflet + + | © + + ESRI Basemap +
    @@ -296,299 +270,273 @@ exports[`LocationBoundary matches the snapshot when the geometry is a geometry c exports[`LocationBoundary matches the snapshot when the geometry is a multipolygon 1`] = `
    -
    -

    - Location / Project Boundary -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Region(s) - -
    -
    -
    +
    Region 1, Region 2 -
    +
    -
    -
    - Location Description - -
    -
    -
    +
    Location description -
    +
    +
    +
    -
    -
    - -
    -
    -
    -
    -
    - - - - - - +
    -
    -
    -
    +
    +
    +
    + + + + + + +
    +
    +
    +
    +
    +
    +
    -
    -
    - - + - - - − - -
    -
    -
    + -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    + -
    - -
    -
    - - +
    + +
    - - Leaflet - - | © - - ESRI Basemap - -
    -
    + class="leaflet-control-layers-separator" + style="display: none;" + /> +
    + +
    +
    + + Leaflet + + | © + + ESRI Basemap +
    @@ -601,287 +549,261 @@ exports[`LocationBoundary matches the snapshot when the geometry is a multipolyg exports[`LocationBoundary matches the snapshot when the geometry is a single polygon in invalid GeoJSON format 1`] = `
    -
    -

    - Location / Project Boundary -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Region(s) - -
    -
    -
    +
    Region 1, Region 2 -
    +
    -
    -
    - Location Description - -
    -
    -
    +
    Location description -
    +
    +
    +
    -
    -
    - -
    -
    -
    -
    -
    - - - - - +
    -
    -
    -
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    -
    -
    - - + - - - − - -
    -
    -
    + -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    + -
    - -
    -
    - - + +
    +
    - - Leaflet - - | © - - ESRI Basemap - -
    -
    + class="leaflet-control-layers-separator" + style="display: none;" + /> +
    + +
    +
    + + Leaflet + + | © + + ESRI Basemap +
    @@ -894,287 +816,261 @@ exports[`LocationBoundary matches the snapshot when the geometry is a single pol exports[`LocationBoundary matches the snapshot when the geometry is a single polygon in valid GeoJSON format 1`] = `
    -
    -

    - Location / Project Boundary -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Region(s) - -
    -
    -
    +
    Region 1, Region 2 -
    +
    -
    -
    - Location Description - -
    -
    -
    +
    Location description -
    +
    +
    +
    -
    -
    - -
    -
    -
    -
    -
    - - - - - +
    -
    -
    -
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    -
    -
    - - + - - - − - -
    -
    -
    + -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    + -
    - -
    -
    - - + +
    +
    - - Leaflet - - | © - - ESRI Basemap - -
    -
    + class="leaflet-control-layers-separator" + style="display: none;" + /> +
    + +
    +
    + + Leaflet + + | © + + ESRI Basemap +
    @@ -1187,264 +1083,238 @@ exports[`LocationBoundary matches the snapshot when the geometry is a single pol exports[`LocationBoundary matches the snapshot when there is no geometry 1`] = `
    -
    -

    - Location / Project Boundary -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Region(s) - -
    -
    -
    +
    Region 1, Region 2 -
    +
    -
    -
    - Location Description - -
    -
    -
    +
    Location description -
    +
    +
    +
    -
    -
    - -
    -
    +
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    - - + - - - − - -
    -
    -
    + -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    + -
    - -
    -
    - - + +
    +
    - - Leaflet - - | © - - ESRI Basemap - -
    -
    + class="leaflet-control-layers-separator" + style="display: none;" + /> +
    + +
    +
    + + Leaflet + + | © + + ESRI Basemap +
    diff --git a/app/src/features/projects/view/components/__snapshots__/Partnerships.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/Partnerships.test.tsx.snap index 61e7408f04..f3b31128a6 100644 --- a/app/src/features/projects/view/components/__snapshots__/Partnerships.test.tsx.snap +++ b/app/src/features/projects/view/components/__snapshots__/Partnerships.test.tsx.snap @@ -3,397 +3,241 @@ exports[`Partnerships renders correctly with default empty values 1`] = `
    -
    -

    - Partnerships -

    -
    -
    + -
    + EDIT + + +
    +
    +
    -
    - - - - - - - -
    - Indigenous Partnerships -
    -
    + Indigenous Partnerships +
    -
    - - - - - - - -
    - Stakeholder Partnerships -
    -
    + Stakeholder Partnerships +
    -
    + `; exports[`Partnerships renders correctly with existing partnership values 1`] = `
    -
    -

    - Partnerships -

    -
    -
    + -
    + EDIT + + +
    +
    +
    -
    - - - - - - - - - - - - - - -
    - Indigenous Partnerships -
    - partner 1 -
    - partner 2 -
    -
    + Indigenous Partnerships + +
    + partner 1 +
    +
    + partner 2 +
    -
    - - - - - - - - - - - - - - -
    - Stakeholder Partnerships -
    - partner 3 -
    - partner 4 -
    -
    + Stakeholder Partnerships + +
    + partner 3 +
    +
    + partner 4 +
    -
    + `; exports[`Partnerships renders correctly with invalid null values 1`] = `
    -
    -

    - Partnerships -

    -
    -
    + -
    + EDIT + + +
    +
    +
    -
    - - - - - - - -
    - Indigenous Partnerships -
    -
    + Indigenous Partnerships +
    -
    - - - - - - - -
    - Stakeholder Partnerships -
    -
    + Stakeholder Partnerships +
    -
    + `; diff --git a/app/src/features/projects/view/components/__snapshots__/ProjectCoordinator.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/ProjectCoordinator.test.tsx.snap index 533f2b25ef..bafd682397 100644 --- a/app/src/features/projects/view/components/__snapshots__/ProjectCoordinator.test.tsx.snap +++ b/app/src/features/projects/view/components/__snapshots__/ProjectCoordinator.test.tsx.snap @@ -3,128 +3,95 @@ exports[`ProjectCoordinator renders correctly 1`] = `
    -
    -

    - Project Coordinator -

    -
    -
    + -
    + EDIT + + +
    -
    +
    - Name - -
    -
    -
    +
    Amanda Christensen -
    +
    -
    -
    - Email Address - -
    -
    -
    +
    amanda@christensen.com -
    +
    -
    -
    - Agency - -
    -
    -
    +
    Amanda and associates -
    +
    -
    +
    `; diff --git a/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap index 00a9044502..f8c37eca5f 100644 --- a/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap +++ b/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap @@ -3,244 +3,201 @@ exports[`ProjectObjectives renders correctly when both objectives and caveats have length is > 850 characters and are in multiple paragraphs 1`] = `
    -
    -
    -

    - Project Objectives -

    -
    -
    - -
    -
    -
    + -
    -
    -
    + + + EDIT + + + +
    +
    +

    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

    +

    + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. +

    +

    + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. +

    +

    +

    + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. +

    +

    + Cras dapibus. Vivamus elementum +

    +

    + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. +

    +

    +

    + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius +

    +

    +

    + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies +

    +

    + nisi. +

    -
    -

    - Project Caveats -

    -
    + Read More + + +
    +
    +
    +
    +
    +
    +

    + Caveats +

    +
    +
    +

    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

    +

    + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. +

    +

    + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. +

    +

    +

    + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. +

    +

    + Cras dapibus. Vivamus elementum +

    +

    + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. +

    +

    +

    + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius +

    +

    +

    + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies +

    +

    + nisi. +

    -
    -
    -
    -

    - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. -

    -

    - Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. -

    -

    - Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. -

    -

    -

    - Nullam dictum felis eu pede mollis pretium. Integer tincidunt. -

    -

    - Cras dapibus. Vivamus elementum -

    -

    - semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. -

    -

    -

    - Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius -

    -

    -

    - laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies -

    -

    - nisi. -

    -
    - -
    -
    + Read More + + +
    @@ -250,141 +207,102 @@ exports[`ProjectObjectives renders correctly when both objectives and caveats ha exports[`ProjectObjectives renders correctly when objectives and caveats are < 850 characters and in multiple paragraphs 1`] = `
    -
    -
    -

    - Project Objectives -

    -
    -
    - -
    -
    -
    +
    -
    + + + EDIT + + + +
    +
    +

    -

    -

    - Project Caveats -

    -
    -
    -
    +

    -

    -
    -
    -

    - Paragraph1 -

    -

    - Paragraph2 -

    -

    -

    - Paragraph3 -

    -
    -
    -
    -
    + Paragraph2 +

    +

    +

    + Paragraph3 +

    +
    +
    +
    +
    +
    +

    + Caveats +

    +
    +
    +

    + Paragraph1 +

    +

    + Paragraph2 +

    +

    +

    + Paragraph3 +

    @@ -396,112 +314,77 @@ exports[`ProjectObjectives renders correctly when objectives length is <= 850 ch class="MuiBox-root MuiBox-root-1" >
    -
    -
    -

    - Project Objectives -

    -
    -
    - -
    -
    -
    +
    -
    + + + EDIT + + + +
    +
    +

    -

    -

    - Project Caveats -

    -
    -
    -
    +
    +
    +
    +
    +
    +

    -
    -
    -
    -

    - sjwer bds -

    -
    -
    -
    -

    + Caveats + +
    +
    +

    + sjwer bds +

    @@ -510,176 +393,138 @@ exports[`ProjectObjectives renders correctly when objectives length is <= 850 ch exports[`ProjectObjectives renders correctly when objectives length is > 850 characters and caveats is empty 1`] = `
    -
    -
    -

    - Project Objectives -

    -
    -
    - -
    -
    -
    + -
    -
    -
    -
    + + EDIT + + + +
    +
    +

    -

    -

    - Project Caveats -

    -
    -
    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

    +

    + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. +

    +

    + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. +

    +

    +

    + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. +

    +

    + Cras dapibus. Vivamus elementum +

    +

    + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. +

    +

    +

    + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius +

    +

    +

    + laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies +

    +

    + nisi. +

    -
    -
    -
    -

    -

    -
    -
    + Read More + + +
    +
    +
    +
    +

    + Caveats +

    +
    +
    +

    +

    +
    `; diff --git a/app/src/features/projects/view/components/__snapshots__/Species.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/Species.test.tsx.snap index 09280750a9..f9a6f130c9 100644 --- a/app/src/features/projects/view/components/__snapshots__/Species.test.tsx.snap +++ b/app/src/features/projects/view/components/__snapshots__/Species.test.tsx.snap @@ -3,119 +3,73 @@ exports[`Species renders correctly with default empty values 1`] = `
    -
    -

    - Species -

    -
    -
    + -
    + EDIT + + +
    -
    - - - - - - - -
    - Focal Species -
    + Focal Species +
    -
    -
    - - - - - - - -
    - Ancillary Species -
    + Anciliary Species +
    -
    +
    `; @@ -123,157 +77,93 @@ exports[`Species renders correctly with default empty values 1`] = ` exports[`Species renders correctly with existing species values 1`] = `
    -
    -

    - Species -

    -
    -
    + -
    + EDIT + + +
    -
    - - - - - - - - - - - - - - -
    - Focal Species -
    - species 1 -
    - species 2 -
    + Focal Species + +
    + species 1 +
    +
    + species 2 +
    -
    -
    - - - - - - - - - - - - - - -
    - Ancillary Species -
    - species 3 -
    - species 4 -
    + Anciliary Species + +
    + species 3 +
    +
    + species 4 +
    -
    +
    `; @@ -281,119 +171,73 @@ exports[`Species renders correctly with existing species values 1`] = ` exports[`Species renders correctly with invalid null values 1`] = `
    -
    -

    - Species -

    -
    -
    + -
    + EDIT + + +
    -
    - - - - - - - -
    - Focal Species -
    + Focal Species +
    -
    -
    - - - - - - - -
    - Ancillary Species -
    + Anciliary Species +
    -
    +
    `; diff --git a/app/src/layouts/PublicLayout.tsx b/app/src/layouts/PublicLayout.tsx index 36c8659dea..1abf6d71cf 100644 --- a/app/src/layouts/PublicLayout.tsx +++ b/app/src/layouts/PublicLayout.tsx @@ -4,32 +4,23 @@ import Header from 'components/layout/Header'; import React from 'react'; const useStyles = makeStyles((theme: Theme) => ({ - mainContent: { - flex: 1, - width: 'inherit', - height: 'inherit', - overflow: 'auto' - }, - container: { - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(4) - } + mainContent: {} })); const PublicLayout: React.FC = (props) => { const classes = useStyles(); return ( - +
    -
    + {React.Children.map(props.children, (child: any) => { return React.cloneElement(child, { classes: classes }); })} -
    +