mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01: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: ![image](https://github.com/user-attachments/assets/2074b2a9-7f1b-45c1-b947-7855ee80e0c9)
This commit is contained in:
parent
a2a94dd011
commit
1cf8755929
@ -19,6 +19,7 @@ const Wrapper = styled('article')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.envAccordion.expanded,
|
||||
padding: theme.spacing(3),
|
||||
borderRadius: theme.shape.borderRadiusExtraLarge,
|
||||
minWidth: '300px',
|
||||
}));
|
||||
|
||||
const ProjectResourcesInner = styled('div')(({ theme }) => ({
|
||||
|
@ -6,6 +6,10 @@ import { ProjectActivity } from './ProjectActivity';
|
||||
const ModalContentContainer = styled('div')(({ theme }) => ({
|
||||
minHeight: '100vh',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: theme.spacing(4),
|
||||
display: 'flex',
|
||||
flexFlow: 'column',
|
||||
gap: theme.spacing(4),
|
||||
}));
|
||||
|
||||
type Props = {
|
||||
@ -13,11 +17,28 @@ type Props = {
|
||||
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) => {
|
||||
return (
|
||||
<SidebarModal open={open} onClose={close} label='Project status'>
|
||||
<ModalContentContainer>
|
||||
<ProjectResources />
|
||||
<HealthRow>
|
||||
<div>Health widget placeholder</div>
|
||||
<ProjectResources />
|
||||
</HealthRow>
|
||||
|
||||
<ProjectActivity />
|
||||
</ModalContentContainer>
|
||||
</SidebarModal>
|
||||
|
Loading…
Reference in New Issue
Block a user