diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx index 2a5c8d6bd4ed..96a682250165 100644 --- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx +++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx @@ -294,7 +294,7 @@ export const FeedbackComponent = ({ - Help us to improve Unleash + Help us improve Unleash ({ - backgroundColor: theme.palette.envAccordion.expanded, + backgroundColor: theme.palette.neutral.light, padding: theme.spacing(3), borderRadius: theme.shape.borderRadiusExtraLarge, })); diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx index 4b15b31485d5..c55801df40b0 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx @@ -6,6 +6,8 @@ import { ProjectLifecycleSummary } from './ProjectLifecycleSummary'; import type { FC } from 'react'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { ProjectHealthGrid } from './ProjectHealthGrid'; +import { useFeedback } from 'component/feedbackNew/useFeedback'; +import FeedbackIcon from '@mui/icons-material/ChatOutlined'; const ModalContentContainer = styled('section')(({ theme }) => ({ minHeight: '100vh', @@ -25,11 +27,6 @@ const WidgetContainer = styled('div')(({ theme }) => ({ gap: theme.spacing(9), })); -type Props = { - open: boolean; - close: () => void; -}; - const LifecycleHeaderRow = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'end', @@ -102,9 +99,43 @@ const CloseRow = styled('div')(({ theme }) => ({ display: 'flex', justifyContent: 'flex-end', marginBlockStart: 'auto', + gap: theme.spacing(4), +})); + +const FeedbackContainer = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.neutral.light, + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), + padding: theme.spacing(1, 2.5), + borderRadius: theme.shape.borderRadiusLarge, })); +const FeedbackButton = styled(Button)(({ theme }) => ({ + color: theme.palette.primary.main, + fontWeight: 'normal', + padding: 0, + textDecoration: 'underline', + verticalAlign: 'baseline', +})); + +type Props = { + open: boolean; + close: () => void; +}; + export const ProjectStatusModal = ({ open, close }: Props) => { + const { openFeedback } = useFeedback('projectStatus', 'manual'); + const createFeedbackContext = () => { + openFeedback({ + title: 'How easy was it to use the project status overview?', + positiveLabel: + 'What do you like most about the project status overview?', + areasForImprovementsLabel: + 'What should be improved on the project status overview?', + }); + }; + return ( { + + +

+ Help us improve the project status overview; give us + your{' '} + { + createFeedbackContext(); + close(); + }} + size='small' + > + feedback + +

+
+ diff --git a/frontend/src/hooks/useSubmittedFeedback.ts b/frontend/src/hooks/useSubmittedFeedback.ts index 612e238d4a7f..605051513f4d 100644 --- a/frontend/src/hooks/useSubmittedFeedback.ts +++ b/frontend/src/hooks/useSubmittedFeedback.ts @@ -5,7 +5,8 @@ export type IFeedbackCategory = | 'insights' | 'applicationOverview' | 'newProjectOverview' - | 'signals'; + | 'signals' + | 'projectStatus'; export const useUserSubmittedFeedback = (category: IFeedbackCategory) => { const key = `unleash-userSubmittedFeedback:${category}`;