add dynamic route to section page

src/App.js

@@ -8,6 +8,7 @@ import Onboarding from './screens/Onboarding';
 import OnboardingWelcome from "./screens/OnboardingWelcome";
 import OnboardingSectionsScreen from "./screens/onboarding-sections/OnboardingSectionsScreen";
 import OnboardingUsername from "./screens/OnboardingUsername";
+import ProfileSectionScreen from "./screens/profile-section/ProfileSectionScreen";
 import AppStartup from "./AppStartup";
 
 const theme = createTheme({
@@ -29,6 +30,7 @@ const App = () => {
                         <Route path="/onboarding-welcome" element={<OnboardingWelcome/>}/>
                         <Route path="/onboarding-username" element={<OnboardingUsername/>}/>
                         <Route path="/onboarding-sections" element={<OnboardingSectionsScreen/>}/>
+                        <Route path="/profile-section/:id" element={<ProfileSectionScreen/>}/>
                     </Routes>
                 </div>
             </Router>

src/screens/onboarding-sections/components/OnboardingSectionsItem.js

@@ -10,23 +10,23 @@ import {yellow} from '@mui/material/colors';
 
 
 const onboardingSectionsItem = ({section, active, first}) => {
-    const backgroundColor = active ? yellow[500] : 'rgba(0, 0, 0, 0.1)'
+    const backgroundColor = active ? yellow[600] : 'rgba(0, 0, 0, 0.1)'
 
     return (
         <VStack>
             <HStack justifyContent={'space-between'} alignItems={'center'}>
                 <HStack justifyContent={'flex-start'} alignItems={'center'}>
                     <Card sx={{...styles.iconCard, backgroundColor}}>
                         <CardContent sx={styles.iconCardContent} data-testid="card-content">
-                            <SentimentSatisfiedOutlinedIcon/>
+                            <SentimentSatisfiedOutlinedIcon sx={styles.icon}/>
                         </CardContent>
                     </Card>
                     <Typography sx={styles.sectionTitle}>{section.title}</Typography>
                 </HStack>
                 {
                     active ? (
-                        <ButtonBase component={Link} to="/onboarding">
-                            <HStack alignItems={'center'}>
+                        <ButtonBase component={Link} to={`/profile-section/${section.id}`}>
+                            <HStack alignItems={'center'} gap={1}>
                                 {first ? <Typography>Start</Typography> : null}
                                 <ArrowForwardIosOutlinedIcon/>
                             </HStack>
@@ -57,6 +57,10 @@ const styles = {
             paddingBottom: '0px',
         }
     },
+    icon: {
+        width: '30px',
+        height: '30px',
+    },
     sectionTitle: {
         fontSize: '20px',
         fontWeight: '500',

src/screens/profile-section/ProfileSectionScreen.js

@@ -0,0 +1,37 @@
+import React, {useState} from 'react';
+import { Typography } from '@mui/material';
+import VStack from "../../components/VStack";
+import Layout from "../../components/Layout";
+import {useParams} from "react-router-dom";
+
+const ProfileSectionScreen = () => {
+    const { id } = useParams();
+    //const [data, setData] = useState(null);
+
+    return (
+        <Layout>
+            <VStack>
+                <VStack gap={1}>
+                    <Typography variant="h4" gutterBottom sx={styles.titleText}>
+                        {id}
+                    </Typography>
+                    <Typography variant="body1" gutterBottom sx={styles.subTitleText}>
+                        Bevor wir losgehen können, benötigen wir noch einen Benutzernamen von dir.
+                    </Typography>
+                </VStack>
+            </VStack>
+        </Layout>
+    );
+};
+
+const styles = {
+    titleText: {
+        fontWeight: 'bold',
+    },
+    subTitleText: {
+        fontSize: '16px',
+        fontWeight: '400'
+    }
+};
+
+export default ProfileSectionScreen;