diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 7158e29919..842f176e17 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -14,7 +14,7 @@ import { StyledTabContainer, StyledTopRow, } from './Project.styles'; -import { Box, Paper, Tabs, Typography } from '@mui/material'; +import { Box, Paper, Tabs, Typography, styled } from '@mui/material'; import { FileUpload } from '@mui/icons-material'; import useToast from 'hooks/useToast'; import useQueryParams from 'hooks/useQueryParams'; @@ -40,6 +40,15 @@ import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadg import { Badge } from 'component/common/Badge/Badge'; import { ProjectDoraMetrics } from './ProjectDoraMetrics/ProjectDoraMetrics'; +const StyledBadge = styled(Badge)(({ theme }) => ({ + position: 'absolute', + top: 5, + right: 20, + [theme.breakpoints.down('md')]: { + top: 2, + }, +})); + export const Project = () => { const projectId = useRequiredPathParam('projectId'); const params = useQueryParams(); @@ -228,17 +237,9 @@ export const Project = () => { + New - + } /> {(tab.isEnterprise && diff --git a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx index ddd11aabcf..02841a7dc4 100644 --- a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx +++ b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx @@ -14,6 +14,18 @@ const StyledOuterContainer = styled(Box)(({ theme }) => ({ const StyledBtnContainer = styled(Box)(({ theme }) => ({ marginTop: theme.spacing(3), + [theme.breakpoints.down('md')]: { + display: 'flex', + flexDirection: 'column', + }, +})); + +const StyledBtn = styled(Button)(({ theme }) => ({ + marginRight: theme.spacing(1), + [theme.breakpoints.down('md')]: { + marginRight: 0, + marginBottom: theme.spacing(1), + }, })); const StyledDivider = styled(Divider)(({ theme }) => ({ @@ -26,6 +38,10 @@ const StyledFlexBox = styled(Box)(({ theme }) => ({ alignItems: 'center', marginTop: theme.spacing(1), marginRight: theme.spacing(3), + [theme.breakpoints.down('sm')]: { + display: 'flex', + flexDirection: 'column', + }, })); const StyledIconWrapper = styled(Box)(({ theme }) => ({ @@ -73,7 +89,7 @@ export const ProjectDoraFeedback = () => { } }; - const recipientEmail = 'recipient@example.com'; + const recipientEmail = 'ux@getunleash.io'; const emailSubject = "I'd like to get involved"; const emailBody = `Hello Unleash,\n\nI just saw the new metrics page you are experimenting with in Unleash. I'd like to be involved in user tests and give my feedback on this feature.\n\nRegards,\n`; @@ -95,6 +111,22 @@ export const ProjectDoraFeedback = () => { production. +
+ + + DORA is a method for measuring the performance of your DevOps + teams. It measures four different metrics. You can read Google's + blog post about{' '} + + DORA metrics + {' '} + for more information. + + { {' '} Is this useful to you? - +