mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-12 01:17:04 +02:00
chore: add initial styling bits to status modal (#8658)
This change adds a few small bits of styling to the status modal to get us going. It: - adds padding to the whole modal - adds a row for the health and resources widgets - add project health placeholder It leaves the project activity widget alone for now. it makes the modal look like this: 
This commit is contained in:
parent
a2a94dd011
commit
1cf8755929
@ -19,6 +19,7 @@ const Wrapper = styled('article')(({ theme }) => ({
|
|||||||
backgroundColor: theme.palette.envAccordion.expanded,
|
backgroundColor: theme.palette.envAccordion.expanded,
|
||||||
padding: theme.spacing(3),
|
padding: theme.spacing(3),
|
||||||
borderRadius: theme.shape.borderRadiusExtraLarge,
|
borderRadius: theme.shape.borderRadiusExtraLarge,
|
||||||
|
minWidth: '300px',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const ProjectResourcesInner = styled('div')(({ theme }) => ({
|
const ProjectResourcesInner = styled('div')(({ theme }) => ({
|
||||||
|
@ -6,6 +6,10 @@ import { ProjectActivity } from './ProjectActivity';
|
|||||||
const ModalContentContainer = styled('div')(({ theme }) => ({
|
const ModalContentContainer = styled('div')(({ theme }) => ({
|
||||||
minHeight: '100vh',
|
minHeight: '100vh',
|
||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
|
padding: theme.spacing(4),
|
||||||
|
display: 'flex',
|
||||||
|
flexFlow: 'column',
|
||||||
|
gap: theme.spacing(4),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -13,11 +17,28 @@ type Props = {
|
|||||||
close: () => void;
|
close: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const HealthRow = styled('div')(({ theme }) => ({
|
||||||
|
display: 'flex',
|
||||||
|
flexFlow: 'row wrap',
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
gap: theme.spacing(2),
|
||||||
|
'&>*': {
|
||||||
|
// todo: reconsider this value when the health widget is
|
||||||
|
// implemented. It may not be right, but it works for the
|
||||||
|
// placeholder
|
||||||
|
flex: '30%',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export const ProjectStatusModal = ({ open, close }: Props) => {
|
export const ProjectStatusModal = ({ open, close }: Props) => {
|
||||||
return (
|
return (
|
||||||
<SidebarModal open={open} onClose={close} label='Project status'>
|
<SidebarModal open={open} onClose={close} label='Project status'>
|
||||||
<ModalContentContainer>
|
<ModalContentContainer>
|
||||||
|
<HealthRow>
|
||||||
|
<div>Health widget placeholder</div>
|
||||||
<ProjectResources />
|
<ProjectResources />
|
||||||
|
</HealthRow>
|
||||||
|
|
||||||
<ProjectActivity />
|
<ProjectActivity />
|
||||||
</ModalContentContainer>
|
</ModalContentContainer>
|
||||||
</SidebarModal>
|
</SidebarModal>
|
||||||
|
Loading…
Reference in New Issue
Block a user