diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
index 699e6ef040..78034b9112 100644
--- a/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
+++ b/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
@@ -57,7 +57,7 @@ export const ProjectInsights = () => {
-
+
diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/HelpPopper.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/HelpPopper.tsx
index 19ea148a4b..ce684489a2 100644
--- a/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/HelpPopper.tsx
+++ b/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/HelpPopper.tsx
@@ -34,13 +34,7 @@ export const HelpPopper: FC = ({ children, id }) => {
const open = Boolean(anchor);
return (
- theme.spacing(0.5),
- right: (theme) => theme.spacing(0.5),
- }}
- >
+
({
display: 'grid',
@@ -16,27 +19,20 @@ const StyledBox = styled(Box)(({ theme }) => ({
},
}));
-const StyledWidget = styled(Box)(({ theme }) => ({
- position: 'relative',
- padding: theme.spacing(3),
- backgroundColor: theme.palette.background.paper,
- flex: 1,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- borderRadius: `${theme.shape.borderRadiusLarge}px`,
- [theme.breakpoints.down('lg')]: {
- padding: theme.spacing(2),
- },
-}));
-
const StyledTimeToProductionDescription = styled(Typography)(({ theme }) => ({
color: theme.palette.text.secondary,
fontSize: theme.typography.body2.fontSize,
lineHeight: theme.typography.body2.lineHeight,
}));
+const NavigationBar = styled(Link)(({ theme }) => ({
+ marginLeft: 'auto',
+ display: 'flex',
+ justifyContent: 'space-between',
+ textDecoration: 'none',
+ color: theme.palette.text.primary,
+}));
+
interface IProjectStatsProps {
stats: ProjectStatsSchema;
}
@@ -45,6 +41,7 @@ export const ProjectInsightsStats = ({ stats }: IProjectStatsProps) => {
if (Object.keys(stats).length === 0) {
return null;
}
+ const projectId = useRequiredPathParam('projectId');
const {
avgTimeToProdCurrentWindow,
@@ -58,79 +55,77 @@ export const ProjectInsightsStats = ({ stats }: IProjectStatsProps) => {
return (
-
-
-
- Sum of all configuration and state modifications in the
- project.
-
-
-
-
- theme.spacing(1),
- }}
- >
- {avgTimeToProdCurrentWindow}{' '}
- days
-
- }
- customChangeElement={
-
- In project life
-
- }
- percentage
- >
-
- How long did it take on average from a feature toggle
- was created until it was enabled in an environment of
- type production. This is calculated only from feature
- toggles with the type of "release".
-
-
-
-
-
-
+
+
+ Sum of all configuration and state modifications in the
+ project.
+
+
+ theme.spacing(1),
+ }}
+ >
+ {avgTimeToProdCurrentWindow}{' '}
+ days
+
+ }
+ customChangeElement={
+
+ In project life
+
+ }
+ percentage
+ >
+
+ How long did it take on average from a feature toggle was
+ created until it was enabled in an environment of type
+ production. This is calculated only from feature toggles
+ with the type of "release".
+
+
+
+
+
+
+
-
-
-
- Sum of all stale toggles in the project
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
);
};
diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/StatusBox.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/StatusBox.tsx
index 2c61654f80..9f11573d37 100644
--- a/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/StatusBox.tsx
+++ b/frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/StatusBox.tsx
@@ -5,10 +5,6 @@ import { Box, Typography, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { flexRow } from 'themes/themeStyles';
-const StyledTypographyHeader = styled(Typography)(({ theme }) => ({
- marginBottom: theme.spacing(2.5),
-}));
-
const StyledTypographyCount = styled(Box)(({ theme }) => ({
fontSize: theme.fontSizes.largeHeader,
}));
@@ -31,8 +27,25 @@ const StyledTypographyChange = styled(Typography)(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold,
}));
+const RowContainer = styled(Box)(({ theme }) => ({
+ ...flexRow,
+}));
+
+const StyledWidget = styled(Box)(({ theme }) => ({
+ padding: theme.spacing(3),
+ backgroundColor: theme.palette.background.paper,
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(2.5),
+ borderRadius: `${theme.shape.borderRadiusLarge}px`,
+ [theme.breakpoints.down('lg')]: {
+ padding: theme.spacing(2),
+ },
+}));
+
interface IStatusBoxProps {
- title?: string;
+ title: string;
boxText: ReactNode;
change?: number;
percentage?: boolean;
@@ -42,10 +55,24 @@ interface IStatusBoxProps {
const resolveIcon = (change: number) => {
if (change > 0) {
return (
-
+
);
}
- return ;
+ return (
+
+ );
};
const resolveColor = (change: number) => {
@@ -63,23 +90,14 @@ export const StatusBox: FC = ({
children,
customChangeElement,
}) => (
- <>
-
- {title}
-
- }
- />
- {children}
-
+
+
+
+ {title}
+
+ {children}
+
+
{boxText}
@@ -124,6 +142,6 @@ export const StatusBox: FC = ({
/>
}
/>
-
- >
+
+
);
diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx
index f69323b813..35978229c9 100644
--- a/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx
+++ b/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx
@@ -1,5 +1,5 @@
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { Box, styled, Typography } from '@mui/material';
+import { styled } from '@mui/material';
import { StatusBox } from '../ProjectInsightsStats/StatusBox';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import { Link } from 'react-router-dom';
@@ -11,18 +11,13 @@ interface IProjectMembersProps {
}
const NavigationBar = styled(Link)(({ theme }) => ({
+ marginLeft: 'auto',
display: 'flex',
justifyContent: 'space-between',
textDecoration: 'none',
color: theme.palette.text.primary,
}));
-export const StyledProjectInfoWidgetContainer = styled('div')(({ theme }) => ({
- display: 'flex',
- flexDirection: 'column',
- gap: theme.spacing(2.5),
-}));
-
export const ProjectMembers = ({
members,
projectId,
@@ -35,18 +30,14 @@ export const ProjectMembers = ({
const { currentMembers, change } = members;
return (
-
+
- Project members
-
-
-
-
+
);
};