From 6b56f8ff896897aadabda16350dea8a4d0fadb6d Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 15 Oct 2024 15:14:18 +0200
Subject: [PATCH] chore: add descriptions to accordion headers (#8452)

This commits adds descriptions to the accordion headers in the
personal dashboard.


![image](https://github.com/user-attachments/assets/d7b7aeff-3a69-45f7-ab42-23228a49132b)
---
 .../personalDashboard/PersonalDashboard.tsx   | 42 ++++++++++++++++---
 .../project/ProjectList/ProjectList.tsx       |  2 +-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 6ea91e74cf..21a1c998f3 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -79,6 +79,25 @@ const MainContent = styled('div')(({ theme }) => ({
     gap: theme.spacing(2),
 }));
 
+const AccordionSummaryText = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
+}));
+
+const AccordionSummaryHeader = styled('h3')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: theme.typography.body2.fontWeight,
+    margin: 0,
+}));
+
+const AccordionSummarySubtitle = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.body2.fontWeight,
+}));
+
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
     const { trackEvent } = usePlausibleTracker();
@@ -157,9 +176,15 @@ export const PersonalDashboard = () => {
                     id='projects-panel-header'
                     aria-controls='projects-panel-content'
                 >
-                    <Typography variant='body1' component='h3'>
-                        My projects
-                    </Typography>
+                    <AccordionSummaryText>
+                        <AccordionSummaryHeader>
+                            My projects
+                        </AccordionSummaryHeader>
+                        <AccordionSummarySubtitle>
+                            Favorite projects, projects you own, and projects
+                            you are a member of
+                        </AccordionSummarySubtitle>
+                    </AccordionSummaryText>
                 </StyledAccordionSummary>
                 <StyledAccordionDetails>
                     <MyProjects
@@ -187,9 +212,14 @@ export const PersonalDashboard = () => {
                     id='flags-panel-header'
                     aria-controls='flags-panel-content'
                 >
-                    <Typography variant='body1' component='h3'>
-                        My feature flags
-                    </Typography>
+                    <AccordionSummaryText>
+                        <AccordionSummaryHeader>
+                            My feature flags
+                        </AccordionSummaryHeader>
+                        <AccordionSummarySubtitle>
+                            Feature flags you have created or favorited
+                        </AccordionSummarySubtitle>
+                    </AccordionSummaryText>
                 </StyledAccordionSummary>
                 <StyledAccordionDetails>
                     <MyFlags
diff --git a/frontend/src/component/project/ProjectList/ProjectList.tsx b/frontend/src/component/project/ProjectList/ProjectList.tsx
index cd6ecadd93..b1bd18d4d8 100644
--- a/frontend/src/component/project/ProjectList/ProjectList.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectList.tsx
@@ -112,7 +112,7 @@ export const ProjectList = () => {
                 <SearchHighlightProvider value={state.query || ''}>
                     <ProjectGroup
                         sectionTitle='My projects'
-                        sectionSubtitle='Favorite projects, projects you own or projects you are a member of.'
+                        sectionSubtitle='Favorite projects, projects you own, and projects you are a member of'
                         HeaderActions={
                             <ProjectsListSort
                                 sortBy={state.sortBy}