1-3088: add close button

Unleash · Nov 14, 2024 · 1ef2b80 · 1ef2b80
1 parent c0937ce
commit 1ef2b80
Showing 1 changed file with 37 additions and 18 deletions.
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
@@ -1,4 +1,4 @@
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import { ReactComponent as ProjectStatusSvg } from 'assets/icons/projectStatus.svg';
 import { ProjectActivity } from './ProjectActivity';
@@ -19,6 +19,12 @@ const ModalContentContainer = styled('section')(({ theme }) => ({
     paddingBlock: theme.spacing(10),
 }));
 
+const WidgetContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(9),
+}));
+
 type Props = {
     open: boolean;
     close: () => void;
@@ -92,6 +98,12 @@ const LifecycleTooltip: FC = () => {
     );
 };
 
+const CloseRow = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginBlockStart: 'auto',
+}));
+
 export const ProjectStatusModal = ({ open, close }: Props) => {
     return (
         <DynamicSidebarModal open={open} onClose={close} label='Project status'>
@@ -100,23 +112,30 @@ export const ProjectStatusModal = ({ open, close }: Props) => {
                     <StyledProjectStatusSvg aria-hidden='true' />
                     <ModalHeader>Project status</ModalHeader>
                 </HeaderRow>
-                <Row>
-                    <RowHeader>Health</RowHeader>
-                    <ProjectHealthGrid />
-                </Row>
-
-                <Row>
-                    <RowHeader>Activity in project</RowHeader>
-                    <ProjectActivity />
-                </Row>
-
-                <Row>
-                    <LifecycleHeaderRow>
-                        <RowHeader>Flag lifecycle</RowHeader>
-                        <LifecycleTooltip />
-                    </LifecycleHeaderRow>
-                    <ProjectLifecycleSummary />
-                </Row>
+                <WidgetContainer>
+                    <Row>
+                        <RowHeader>Health</RowHeader>
+                        <ProjectHealthGrid />
+                    </Row>
+
+                    <Row>
+                        <RowHeader>Activity in project</RowHeader>
+                        <ProjectActivity />
+                    </Row>
+
+                    <Row>
+                        <LifecycleHeaderRow>
+                            <RowHeader>Flag lifecycle</RowHeader>
+                            <LifecycleTooltip />
+                        </LifecycleHeaderRow>
+                        <ProjectLifecycleSummary />
+                    </Row>
+                </WidgetContainer>
+                <CloseRow>
+                    <Button variant='outlined' onClick={close}>
+                        Close
+                    </Button>
+                </CloseRow>
             </ModalContentContainer>
         </DynamicSidebarModal>
     );