🔧🪲Refactor step content of district map and fix bug of district map c…

…olor not reflecting currently selected scenario after tour is finished

frontend/locales/de-onboarding.json5

@@ -68,7 +68,7 @@
         step3: {
           target: '#side-bar-heat-legend',
           title: 'Schritt 3',
-          content: 'Die Karte verfügt außerdem über eine anpassbare Farblegende.  Sie können hier zwischen unterschiedlichen Farbschemata auswählen. Die Farblegende zeigt, in welchen Regionen Fallzahlen sehr hoch, moderat oder niedrig sind. Die Fallzahlen in der Karte beziehen sich immer auf einen bestimmten Infektionsstatus, welcher rechts neben der Karte gewählt werden, sowie ein bestimmtes Datum, welches im Liniendiagramm mit Hilfe der blau-lila Linie ausgewählt werden kann.',
+          content: 'Die Karte verfügt außerdem über eine anpassbare Farblegende.  Sie können hier zwischen unterschiedlichen Farbschemata auswählen. Die Farblegende zeigt, in welchen Regionen Fallzahlen sehr hoch, moderat oder niedrig sind. Sie können den Maximalwert der Legende auch sperren, indem Sie auf das Schlosszeichen klicken. Die Fallzahlen in der Karte beziehen sich immer auf einen bestimmten Infektionsstatus, welcher rechts neben der Karte gewählt werden, sowie ein bestimmtes Datum, welches im Liniendiagramm mit Hilfe der blau-lila Linie ausgewählt werden kann.',
           disableBeacon: true,
           showProgress: true,
           placement: 'right',

frontend/locales/en-onboarding.json5

@@ -68,7 +68,7 @@
         step3: {
           target: '#side-bar-heat-legend',
           title: 'Step 3',
-          content: 'The map also has a customisable colour legend.  You can choose between different colour schemes here. The colour legend shows in which regions case numbers are very high, moderate or low. The case numbers in the map always refer to a specific infection status, which can be selected to the right of the map, as well as a specific date, which can be selected in the line chart using the blue-purple line. ',
+          content: 'The map also has a customisable colour legend. You can choose between different colour schemes here. The colour legend shows in which regions case numbers are very high, moderate or low. You can also lock the maximum value of the legend by clicking the lock sign. The case numbers in the map always refer to a specific infection status, which can be selected to the right of the map, as well as a specific date, which can be selected in the line chart using the blue-purple line.',
           disableBeacon: true,
           showProgress: true,
           placement: 'right',

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

@@ -48,7 +48,7 @@ export default function TourSteps(): JSX.Element {
   const scenarioList = useAppSelector((state) => state.scenarioList.scenarios);
 
   const previousSimulationStart = useRef(simulationStart); // to keep track of the previous simulation start date for the scenario controlled tour
-  const savedPreferences = useRef<null | DataSelection>(null); // to keep track of the original data selection before starting the tour
+  const savedUserDataSelection = useRef<null | DataSelection>(null); // to keep track of the original data selection before starting the tour
 
   /**
    * this useMemo gets the localized tour steps and returns them as an array of step objects to use in the Joyride component
@@ -69,8 +69,8 @@ export default function TourSteps(): JSX.Element {
    */
   useEffect(() => {
     if (activeTour && !showPopover && !showWelcomeDialog && !run) {
-      if (!savedPreferences.current) {
-        savedPreferences.current = dataSelection; // save the current data selection of the user so we can override it with different values during the tour
+      if (!savedUserDataSelection.current) {
+        savedUserDataSelection.current = dataSelection; // save the current data selection of the user so we can override it with different values during the tour
 
         const maxDate = dataSelection.maxDate || '2024-07-08'; // get the maximum date from the data selection
         dispatch(selectDate(maxDate)); // set the simulation start date (purple line) to the maximum date
@@ -166,9 +166,9 @@ export default function TourSteps(): JSX.Element {
       action === ACTIONS.CLOSE ||
       action === ACTIONS.STOP
     ) {
-      dispatch(selectDate(savedPreferences.current?.date || '2024-07-08')); // restore the original date in the data selection
-      dispatch(selectScenario(savedPreferences.current?.scenario || 1)); // restore the original selected scenario in the data selection
-      savedPreferences.current = null; // reset the saved preferences after the tour is completed
+      dispatch(selectDate(savedUserDataSelection.current?.date || '2024-07-08')); // restore the original date in the data selection
+      dispatch(selectScenario(savedUserDataSelection.current?.scenario || 0)); // restore the original selected scenario in the data selection
+      savedUserDataSelection.current = null; // reset the saved preferences after the tour is completed
 
       // if the tour was finished and not skipped, mark as completed
       if (status === STATUS.FINISHED && activeTour) {