🔧Refactor some code and styling

frontend/locales/de-onboarding.json5

@@ -5,23 +5,23 @@
   welcomeModalSlides: {
     slide1: {
       title: 'Willkommen!',
-      content: '\nSchön, dass Sie ESID nutzen. <br/><br/> ESID ist eine Plattform, die Sie bei Ihren Aufgaben im Infektionsschutz unterstützen soll.<br/><br/> ✓ Erste Aufgabe erledigen<br/> ✓ Nächste Schritte verstehen\n    ',
+      content: '\nSchön, dass Sie ESID nutzen. <br/><br/>  ESID ist eine Plattform, die Sie bei Ihren Aufgaben im Infektionsschutz unterstützen soll.<br/><br/> ✓ Erste Aufgabe erledigen<br/> ✓ Nächste Schritte verstehen\n    ',
     },
     slide2: {
       title: 'ESID kann Sie unterstützen',
-      content: '✓bei der Überwachung des (lokalen) Infektionsgeschehens. <br/><br/> ✓ bei der Bewertung, wie sich eine Infektionsdynamik in der Zukunft voraussichtlich verändern wird. <br/><br/> ✓ bei der Planung von effektiven (lokalen) Interventionsstrategien zur Eindämmung einer Infektionskrankheit. ',
+      content: '✓ bei der Überwachung des (lokalen) Infektionsgeschehens. <br/> ✓ bei der Bewertung, wie sich eine Infektionsdynamik in der Zukunft voraussichtlich verändern wird. <br/> ✓ bei der Planung von effektiven (lokalen) Interventionsstrategien zur Eindämmung einer Infektionskrankheit. ',
     },
     slide3: {
       title: 'Wie unterstützt Sie ESID bei der Überwachung?',
-      content: '✓Sie können Infektionsherde auf einer Deutschlandkarte leicht identifizieren. <br/><br/>✓\tSie können die Veränderung von Fallzahlen im Laufe der Zeit in einem anschaulichen Diagramm verfolgen.',
+      content: '✓ Sie können Infektionsherde auf einer Deutschlandkarte leicht identifizieren. <br/>✓ Sie können die Veränderung von Fallzahlen im Laufe der Zeit in einem anschaulichen Diagramm verfolgen.',
     },
     slide4: {
       title: 'Wie unterstützt Sie ESID bei der Bewertung?',
-      content: '✓\tSie können sich die voraussichtliche, zukünftige Entwicklung der Fallzahlen durch verschiedene Szenarien anzeigen lassen.',
+      content: '✓ Sie können sich die voraussichtliche, zukünftige Entwicklung der Fallzahlen durch verschiedene Szenarien anzeigen lassen.',
     },
     slide5: {
       title: 'Wie unterstützt Sie ESID bei der Planung?',
-      content: '✓\tSie können die voraussichtliche, zukünftige Entwicklung der Fallzahlen in der Zukunft vergleichen, indem Sie verschiedene Szenarien betrachten, zum Beispiel mit oder ohne Maskenpflicht. <br/><br/> ✓\tAus diesem Vergleich können Sie eine effektive Eindämmungsstrategie ableiten. ',
+      content: '✓ Sie können die voraussichtliche, zukünftige Entwicklung der Fallzahlen in der Zukunft vergleichen, indem Sie verschiedene Szenarien betrachten, zum Beispiel mit oder ohne Maskenpflicht. <br/> ✓ Aus diesem Vergleich können Sie eine effektive Eindämmungsstrategie ableiten. ',
     },
     slide6: {
       title: 'Machen Sie eine Onboarding-Tour! ',
@@ -31,10 +31,10 @@
   chooseTour: 'Wählen Sie eine Tour',
   maybeLater: 'Vielleicht später',
   toolTipText: 'Dies ist die schwebende Schaltfläche für Hilfe.',
-  congrats: 'Herzlichen Glückwunsch!',
-  congratsContent: 'Sie haben die Touren erfolgreich abgeschlossen. Sie können eine Tour jederzeit wiederholen, indem Sie auf die Chips unten klicken.',
-  getStarted: 'Starten Sie mit ESID',
-  getStartedContent: 'Um Ihnen zu helfen, sich mit ESID vertraut zu machen, haben wir mehrere Onboarding-Touren vorbereitet. Wählen Sie eine Tour aus, um die wichtigsten Merkmale und Funktionen in Ihrem eigenen Tempo zu erkunden. ',
+  completedTours: 'Sie haben alle Onboarding-Touren abgeschlossen.',
+  completedToursContent: 'Sie können eine Tour jederzeit wiederholen, indem Sie auf die unten stehenden Optionen klicken.',
+  getStarted: 'Erkunden Sie ESID durch unsere Einführungsveranstaltungen',
+  getStartedContent: 'Damit Sie sich mit ESID vertraut machen können, haben wir mehrere Einführungsrundgänge vorbereitet. Klicken Sie unten auf eine Tour, um die wichtigsten Funktionen in Ihrem eigenen Tempo zu erkunden.',
   completed: 'abgeschlossen',
   next: 'Weiter',
   back: 'Zurück',
@@ -175,6 +175,7 @@
           showProgress: true,
           disableOverlayClose: true,
           hideBackButton: true,
+          placement: 'bottom',
         },
         step3: {
           target: '#group-filter-add-card',

frontend/locales/en-onboarding.json5

@@ -5,36 +5,36 @@
   welcomeModalSlides: {
     slide1: {
       title: 'Welcome!',
-      content: '\n Thank you for using EDIS. <br/><br/> EDIS is a platform designed to support you in your infection control tasks.<br/><br/>\n ✓ Complete first task<br/>\n ✓ Understand next steps\n ',
+      content: '\n Thank you for using ESID. <br/>\n ESID is a platform designed to support you in your infection control tasks.<br/><br/>\n ✓ Complete first task<br/>\n ✓ Understand next steps\n ',
     },
     slide2: {
-      title: 'ESID can support you',
-      content: '✓\tWhen monitoring the (local) infection incidence. <br/><br/> ✓In assessing how an infection dynamic is likely to change in the future. <br/><br/> ✓ in planning effective (local) intervention strategies to contain an infectious disease. ',
+      title: 'ESID can support you: ',
+      content: '✓ When monitoring the (local) infection incidence. <br/> ✓ In assessing how an infection dynamic is likely to change in the future. <br/> ✓ in planning effective (local) intervention strategies to contain an infectious disease. ',
     },
     slide3: {
       title: 'How does ESID help you with surveillance?',
-      content: '✓You can easily identify centres of infection on a map of Germany. <br/><br/>✓\tYou can track the change in case numbers over time in a clear diagram',
+      content: '✓ You can easily identify centres of infection on a map of Germany. <br/>✓ You can track the change in case numbers over time in a clear diagram',
     },
     slide4: {
       title: 'How does ESID help you with assessment?',
-      content: '✓\tYou can view the expected future development of case numbers through various scenarios',
+      content: '✓ You can view the expected future development of case numbers through various scenarios',
     },
     slide5: {
       title: 'How does ESID help you with planning?',
-      content: '✓\tYou can compare the expected future development of case numbers in the future by looking at different scenarios, for example with or without mandatory masks. <br/><br/> ✓\tYou can derive an effective containment strategy from this comparison. ',
+      content: '✓ You can compare the expected future development of case numbers in the future by looking at different scenarios, for example with or without mandatory masks. <br/> ✓ You can derive an effective containment strategy from this comparison. ',
     },
     slide6: {
       title: 'Take an onboarding tour!',
-      content: 'Click on the chips below to take a tour of the platform. <br/><br/> You can always access the tours later by clicking on the help icon.',
+      content: 'Click on the chips below to take a tour of the platform. You can always access the tours later by clicking on the help icon.',
     },
   },
   chooseTour: 'Choose a tour',
   maybeLater: 'Maybe later',
   toolTipText: 'This is the floating button for help.',
-  congrats: 'Congratulations!',
-  congratsContent: 'You have successfully completed the tours. You can retake a tour anytime by clicking on the chips below.',
-  getStarted: 'Welcome to ESID',
-  getStartedContent: "To help you get familiar with ESID, we've prepared several onboarding tours. Select a tour to explore key features and functionalities at your own pace.",
+  completedTours: 'You have completed all the onboarding tours.',
+  completedToursContent: 'You can retake a tour anytime by clicking on the options below.',
+  getStarted: 'Explore ESID through our onboarding tours',
+  getStartedContent: "To help you get familiar with ESID, we've prepared several onboarding tours. Click on a tour below to explore key features and functionalities at your own pace.",
   completed: 'completed',
   next: 'Next',
   back: 'Back',
@@ -175,6 +175,7 @@
           showProgress: true,
           disableOverlayClose: true,
           hideBackButton: true,
+          placement: 'bottom',
         },
         step3: {
           target: '#group-filter-add-card',

frontend/src/components/OnboardingComponents/TopBarPopover.tsx

@@ -23,55 +23,48 @@ interface TopBarPopoverProps {
 /**
  * This component is a popover that contains the onboarding tours which the user can take, it is rendered when the user clicks the information button in the top bar
  */
-const TopBarPopover: React.FC<TopBarPopoverProps> = ({
-  anchorEl,
-  open,
-  onClose,
-  allToursCompleted,
-  completedTours,
-  totalTours,
-}) => {
+export default function TopBarPopover(props: TopBarPopoverProps): JSX.Element {
   const {t: tOnboarding} = useTranslation('onboarding');
 
   /**
    * this use memo is to calculate the completion percentage of the tours for the progress bar
    */
   const completionPercentage = useMemo(() => {
-    return totalTours > 0 ? (completedTours / totalTours) * 100 : 0;
-  }, [completedTours, totalTours]);
+    return props.totalTours > 0 ? (props.completedTours / props.totalTours) * 100 : 0;
+  }, [props.completedTours, props.totalTours]);
 
   return (
     <Popover
       aria-label='popover'
       data-testid='popover-testid'
-      open={open}
-      anchorEl={anchorEl}
-      onClose={onClose}
+      open={props.open}
+      anchorEl={props.anchorEl}
+      onClose={props.onClose}
       anchorOrigin={{
         vertical: 'top',
         horizontal: 'right',
       }}
       sx={{
         '& .MuiPopover-paper': {
           width: 600,
-          height: 370,
+          height: 350,
         },
       }}
     >
       <Box position='relative' p={4}>
         <Box>
           <Typography variant='h2' align='left' gutterBottom>
-            {allToursCompleted ? tOnboarding('congrats') : tOnboarding('getStarted')}
+            {props.allToursCompleted ? tOnboarding('completedTours') : tOnboarding('getStarted')}
           </Typography>
         </Box>
         <Box mt={2}>
           <Typography variant='body1' align='left' gutterBottom sx={{color: 'GrayText'}}>
-            {allToursCompleted ? tOnboarding('congratsContent') : tOnboarding('getStartedContent')}
+            {props.allToursCompleted ? tOnboarding('completedToursContent') : tOnboarding('getStartedContent')}
           </Typography>
         </Box>
         <IconButton
           aria-label='close-info-button'
-          onClick={onClose}
+          onClick={props.onClose}
           sx={{
             position: 'absolute',
             right: 8,
@@ -104,6 +97,4 @@ const TopBarPopover: React.FC<TopBarPopoverProps> = ({
       </Box>
     </Popover>
   );
-};
-
-export default TopBarPopover;
+}

frontend/src/components/OnboardingComponents/TourComponents/TourChip.tsx

@@ -10,35 +10,40 @@ interface TourChipProps {
   icon: React.ReactElement;
   tourType: TourType;
   label: string;
-  color: 'default' | 'primary';
+  isCompleted: boolean;
   onClick: (tour: TourType) => void;
 }
 
 /**
  * This component is a chip that represents a tour that the user can take
  */
-const TourChip: React.FC<TourChipProps> = ({icon, tourType, label, color, onClick}) => {
+export default function TourChip(props: TourChipProps): JSX.Element {
   const theme = useTheme();
+  const chipColor = props.isCompleted ? theme.palette.text.disabled : theme.palette.primary.main;
+
   return (
     <Chip
-      icon={icon}
-      label={label}
+      icon={props.icon}
+      label={props.label}
       variant='outlined'
-      color={color}
-      onClick={() => onClick(tourType)}
+      onClick={() => props.onClick(props.tourType)}
       sx={{
         fontSize: theme.typography.listElement.fontSize,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         justifyContent: 'left',
         padding: '0 8px',
+        borderColor: chipColor,
+        color: chipColor,
         '& .MuiChip-label': {
           padding: '0 8px',
+          color: chipColor,
+        },
+        '& .MuiChip-icon': {
+          color: chipColor,
         },
       }}
     />
   );
-};
-
-export default TourChip;
+}

frontend/src/components/OnboardingComponents/TourComponents/TourChipsList.tsx

@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
 // SPDX-License-Identifier: Apache-2.0
 
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import MapIcon from '@mui/icons-material/Map';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShowChartIcon from '@mui/icons-material/ShowChart';
@@ -12,25 +12,38 @@ import {TourType} from '../../../types/tours';
 import TourSteps from './TourSteps';
 import {setShowWelcomeDialog, setShowPopover, setActiveTour} from '../../../store/UserOnboardingSlice';
 import {useTranslation} from 'react-i18next';
-import {Box} from '@mui/material';
+import Box from '@mui/material/Box';
 import TourChip from './TourChip';
 
-const tourData = [
-  {type: 'districtMap', icon: <MapIcon />, title: 'tours.districtMap.title'},
-  {type: 'scenario', icon: <DashboardIcon />, title: 'tours.scenario.title'},
-  {type: 'filter', icon: <FilterListIcon />, title: 'tours.filter.title'},
-  {type: 'lineChart', icon: <ShowChartIcon />, title: 'tours.lineChart.title'},
-  {type: 'parameters', icon: <Coronavirus />, title: 'tours.parameters.title'},
-];
+interface TourChipsProps {
+  align?: 'center' | 'left';
+}
 
 /**
  * This component is a list of chips that represent the tours that the user can take
  */
-export default function TourChips(): JSX.Element {
+export default function TourChips({align = 'left'}: TourChipsProps): JSX.Element {
   const dispatch = useAppDispatch();
   const {t: tOnboarding} = useTranslation('onboarding');
   const tours = useAppSelector((state) => state.userOnboarding.tours);
 
+  /**
+   * this is the memoized data for the tours that the user can take
+   */
+  const tourData = useMemo(
+    () => [
+      {type: 'districtMap', icon: <MapIcon />, title: 'tours.districtMap.title'},
+      {type: 'scenario', icon: <DashboardIcon />, title: 'tours.scenario.title'},
+      {type: 'filter', icon: <FilterListIcon />, title: 'tours.filter.title'},
+      {type: 'lineChart', icon: <ShowChartIcon />, title: 'tours.lineChart.title'},
+      {type: 'parameters', icon: <Coronavirus />, title: 'tours.parameters.title'},
+    ],
+    []
+  );
+
+  /**
+   * this function is called when a tour is clicked and sets the current active tour
+   */
   const onTourClick = useCallback(
     (tour: TourType) => {
       dispatch(setShowWelcomeDialog(false));
@@ -39,16 +52,15 @@ export default function TourChips(): JSX.Element {
     },
     [dispatch]
   );
-
   return (
     <>
-      <Box display='flex' flexWrap='wrap' justifyContent='left' gap={2}>
+      <Box display='flex' flexWrap='wrap' justifyContent={align === 'center' ? 'center' : 'flex-start'} gap={2}>
         {tourData.map(({type, icon, title}) => (
           <Box key={type} mb={2}>
             <TourChip
               icon={icon}
               tourType={type as TourType}
-              color={tours[type as TourType] ? 'default' : 'primary'}
+              isCompleted={!!tours[type as TourType]}
               label={tOnboarding(title)}
               onClick={onTourClick}
             />

frontend/src/components/OnboardingComponents/TourComponents/TourSteps.tsx

@@ -7,6 +7,7 @@ import {useAppDispatch, useAppSelector} from '../../../store/hooks';
 import {setShowPopover, setTourCompleted, setActiveTour} from '../../../store/UserOnboardingSlice';
 import {useTranslation} from 'react-i18next';
 import AlertDialog from '../../shared/AlertDialog';
+import {useTheme} from '@mui/material/styles';
 
 interface State {
   run: boolean;
@@ -29,6 +30,7 @@ export default function TourSteps(): JSX.Element {
   const [alertType, setAlertType] = useState<AlertType>(AlertType.None);
 
   const dispatch = useAppDispatch();
+  const theme = useTheme();
   const activeTour = useAppSelector((state) => state.userOnboarding.activeTour);
   const showPopover = useAppSelector((state) => state.userOnboarding.showPopover);
   const showWelcomeDialog = useAppSelector((state) => state.userOnboarding.showWelcomeDialog);
@@ -161,9 +163,9 @@ export default function TourSteps(): JSX.Element {
           options: {
             zIndex: 10000,
             backgroundColor: '#fff',
-            textColor: '#000',
-            primaryColor: '#1976d2',
-            width: '300px',
+            textColor: theme.palette.text.primary,
+            primaryColor: theme.palette.primary.main,
+            width: '350px',
             arrowColor: '#fff',
           },
           tooltipContainer: {
@@ -175,7 +177,7 @@ export default function TourSteps(): JSX.Element {
             marginBottom: '8px',
           },
           tooltipContent: {
-            fontSize: '0.875rem',
+            fontSize: theme.typography.body1.fontSize,
           },
         }}
       />