fix: add events list header

Unleash · Oct 8, 2024 · 96013a6 · 96013a6
1 parent b53bb47
commit 96013a6
Showing 1 changed file with 43 additions and 17 deletions.
diff --git a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { Markdown } from '../common/Markdown/Markdown';
 import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
 import { UserAvatar } from '../common/UserAvatar/UserAvatar';
-import { styled } from '@mui/material';
+import { Typography, styled } from '@mui/material';
 
 const Events = styled('ul')(({ theme }) => ({
     padding: 0,
@@ -18,25 +18,51 @@ const Event = styled('li')(({ theme }) => ({
     marginBottom: theme.spacing(4),
 }));
 
+const TitleContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+}));
+
+const ActionBox = styled('article')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    display: 'flex',
+    gap: theme.spacing(3),
+    flexDirection: 'column',
+}));
+
 export const LatestProjectEvents: FC<{
     latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
 }> = ({ latestEvents }) => {
     return (
-        <Events>
-            {latestEvents.map((event) => {
-                return (
-                    <Event key={event.id}>
-                        <UserAvatar
-                            src={event.createdByImageUrl}
-                            sx={{ mt: 1 }}
-                        />
-                        <Markdown>
-                            {event.summary ||
-                                'No preview available for this event'}
-                        </Markdown>
-                    </Event>
-                );
-            })}
-        </Events>
+        <ActionBox>
+            <TitleContainer>
+                <Typography
+                    sx={{
+                        fontWeight: 'bold',
+                    }}
+                    component='h4'
+                >
+                    Latest Events
+                </Typography>
+            </TitleContainer>
+            <Events>
+                {latestEvents.map((event) => {
+                    return (
+                        <Event key={event.id}>
+                            <UserAvatar
+                                src={event.createdByImageUrl}
+                                sx={{ mt: 1 }}
+                            />
+                            <Markdown>
+                                {event.summary ||
+                                    'No preview available for this event'}
+                            </Markdown>
+                        </Event>
+                    );
+                })}
+            </Events>
+        </ActionBox>
     );
 };