fix: removes welcome message and updates view details button (#8385)

The welcome message doesn't provide much help, and the question mark was
confusing. This PR removes the message and changes the button to look
like a link.


![image](https://github.com/user-attachments/assets/f2039b7a-05c8-4353-8440-22786072d0db)

frontend/src/component/personalDashboard/PersonalDashboard.test.tsx

@@ -136,9 +136,6 @@ test('Render personal dashboard for a long running project', async () => {
     await screen.findByText('100'); // features
     await screen.findByText('80%'); // health
 
-    await screen.findByText(
-        'We have gathered projects and flags you have favorited or owned',
-    );
     await screen.findByText('Project health');
     await screen.findByText('70%'); // avg health past window
     await screen.findByText('someone created a flag');

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -1,5 +1,6 @@
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import {
+    Button,
     IconButton,
     Link,
     List,
@@ -20,7 +21,6 @@ import type {
 } from '../../openapi';
 import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
 import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
-import HelpOutline from '@mui/icons-material/HelpOutline';
 import useLoading from '../../hooks/useLoading';
 import { MyProjects } from './MyProjects';
 import {
@@ -166,6 +166,22 @@ const useDashboardState = (
         setActiveProject,
     };
 };
+
+const WelcomeSection = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1),
+    flexFlow: 'row wrap',
+    alignItems: 'baseline',
+    marginBottom: theme.spacing(2),
+}));
+
+const ViewKeyConceptsButton = styled(Button)(({ theme }) => ({
+    fontWeight: 'normal',
+    padding: 0,
+    margin: 0,
+}));
+
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
 
@@ -206,30 +222,22 @@ export const PersonalDashboard = () => {
 
     return (
         <div>
-            <Typography component='h2' variant='h2'>
+            <WelcomeSection>
-                Welcome {name}
+                <Typography component='h2' variant='h2'>
-            </Typography>
+                    Welcome {name}
-            <ScreenExplanation>
+                </Typography>
-                <p data-loading>
+
-                    {activeProjectStage === 'onboarded'
+                <ViewKeyConceptsButton
-                        ? 'We have gathered projects and flags you have favorited or owned'
+                    sx={{
-                        : null}
+                        fontWeight: 'normal',
-                    {setupIncomplete
+                    }}
-                        ? 'Here are some tasks we think would be useful in order to get the most out of Unleash'
-                        : null}
-                    {activeProjectStage === 'loading'
-                        ? 'We have gathered projects and flags you have favorited or owned'
-                        : null}
-                </p>
-                <IconButton
-                    data-loading
                     size={'small'}
-                    title='Key concepts'
+                    variant='text'
                     onClick={() => setWelcomeDialog('open')}
                 >
-                    <HelpOutline />
+                    View key concepts
-                </IconButton>
+                </ViewKeyConceptsButton>
-            </ScreenExplanation>
+            </WelcomeSection>
 
             {noProjects && personalDashboard ? (
                 <ContentGridNoProjects