diff --git a/frontend/src/component/project/Project/ProjectForm/CollaborationModeTooltip.tsx b/frontend/src/component/project/Project/ProjectForm/CollaborationModeTooltip.tsx new file mode 100644 index 0000000000..867ee63ec8 --- /dev/null +++ b/frontend/src/component/project/Project/ProjectForm/CollaborationModeTooltip.tsx @@ -0,0 +1,38 @@ +import { Box, styled, Typography } from '@mui/material'; +import { HelpOutline } from '@mui/icons-material'; +import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip'; +import React, { FC } from 'react'; + +const StyledTitle = styled(Typography)(({ theme }) => ({ + fontWeight: theme.fontWeight.bold, + display: ' inline', +})); +const StyledDescription = styled(Typography)(({ theme }) => ({ + display: ' inline', + color: theme.palette.text.secondary, +})); + +export const CollaborationModeTooltip: FC = () => ( + + + open: + + everyone can submit change requests + + + + protected: + + only project members can submit change requests + + + + } + arrow + describeChild + > + + +); diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts b/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts index d114f7e7a6..b9dadc42ed 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts @@ -13,6 +13,7 @@ export const StyledContainer = styled('div')(() => ({ export const StyledDescription = styled('p')(({ theme }) => ({ marginBottom: theme.spacing(1), + marginRight: theme.spacing(1), })); export const StyledInput = styled(Input)(({ theme }) => ({ diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx index dec8ef7a2f..d8193e431b 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx @@ -14,6 +14,8 @@ import { StickinessSelect } from 'component/feature/StrategyTypes/FlexibleStrate import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import Select from 'component/common/select'; import { DefaultStickiness, ProjectMode } from '../hooks/useProjectForm'; +import { Box } from '@mui/material'; +import { CollaborationModeTooltip } from './CollaborationModeTooltip'; interface IProjectForm { projectId: string; @@ -138,14 +140,17 @@ const ProjectForm: React.FC = ({ condition={Boolean(projectModeFlag)} show={ <> - - What is your project mode? - + + + What is your project collaboration mode? + + + }