diff --git a/client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.module.css b/client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.module.css new file mode 100644 index 000000000..de461e530 --- /dev/null +++ b/client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.module.css @@ -0,0 +1,4 @@ +.banner { + background: #fff; + border: 1px solid #b7eb8f !important; +} diff --git a/client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.tsx b/client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.tsx new file mode 100644 index 000000000..fbcf5e805 --- /dev/null +++ b/client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { Alert } from 'antd'; +import { WarningOutlined } from '@ant-design/icons'; +import styles from './ProjectCurationBanner.module.css'; + +export const CurationInfoBanner: React.FC = () => { + const [visible, setVisible] = React.useState(() => { + return localStorage.getItem('curationBannerDismissed') !== 'true'; + }); + + const handleClose = () => { + localStorage.setItem('curationBannerDismissed', 'true'); + setVisible(false); + }; + + if (!visible) return null; + + return ( +
+ } + onClose={handleClose} + className={styles.banner} + message={ + + We encourage you to attend{' '} + + virtual office hours + {' '} + to meet with a data curator before starting curation and + publication. + + } + /> +
+ ); +}; diff --git a/client/modules/datafiles/src/projects/index.ts b/client/modules/datafiles/src/projects/index.ts index 85c33c148..87128c76c 100644 --- a/client/modules/datafiles/src/projects/index.ts +++ b/client/modules/datafiles/src/projects/index.ts @@ -10,6 +10,7 @@ export { BaseGithubFileListing, } from './ProjectGithubFileListing/ProjectGithubFileListing'; export { ProjectNavbar } from './ProjectNavbar/ProjectNavbar'; +export { CurationInfoBanner } from './ProjectBanner/ProjectCurationBanner'; export { ProjectPipeline } from './ProjectPipeline/ProjectPipeline'; export { EmptyProjectFileListing } from './EmptyProjectFileListing'; export { diff --git a/client/src/datafiles/layouts/projects/ProjectCurationLayout.tsx b/client/src/datafiles/layouts/projects/ProjectCurationLayout.tsx index ec0e713e0..e4050033f 100644 --- a/client/src/datafiles/layouts/projects/ProjectCurationLayout.tsx +++ b/client/src/datafiles/layouts/projects/ProjectCurationLayout.tsx @@ -5,6 +5,7 @@ import { ProjectGithubTransfer, ProjectNavbar, RelateDataModal, + CurationInfoBanner, } from '@client/datafiles'; import { DatafilesBreadcrumb } from '@client/common-components'; import { useProjectDetail } from '@client/hooks'; @@ -178,6 +179,11 @@ export const ProjectCurationLayout: React.FC = () => { )} + {localStorage.getItem('curationBannerDismissed') !== 'true' && ( +
+ +
+ )}