🔧Fix overflow bug and refactor some code

DLR-SC · Aug 12, 2024 · 66f3859 · 66f3859
1 parent 751b84a
commit 66f3859
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/frontend/locales/de-onboarding.json5 b/frontend/locales/de-onboarding.json5
@@ -223,6 +223,14 @@
           spotlightClicks: true,
           showProgress: true,
         },
+        step5: {
+          target: '#tab-list',
+          title: 'Schritt 5',
+          content: 'Über diese Registerkarten können Sie zwischen verschiedenen Bereichen navigieren.',
+          disableBeacon: true,
+          spotlightClicks: true,
+          showProgress: true,
+        },
       },
     },
     parameters: {

diff --git a/frontend/locales/en-onboarding.json5 b/frontend/locales/en-onboarding.json5
@@ -223,6 +223,14 @@
           spotlightClicks: true,
           showProgress: true,
         },
+        step5: {
+          target: '#tab-list',
+          title: 'Step 5',
+          content: 'You can navigate between different areas using these tabs.',
+          disableBeacon: true,
+          spotlightClicks: true,
+          showProgress: true,
+        },
       },
     },
     parameters: {

diff --git a/frontend/src/components/OnboardingComponents/TourComponents/TourSteps.tsx b/frontend/src/components/OnboardingComponents/TourComponents/TourSteps.tsx
@@ -134,6 +134,7 @@ export default function TourSteps(): JSX.Element {
         scrollToFirstStep
         spotlightClicks
         disableOverlayClose
+        disableScrollParentFix
         locale={{
           next: tOnboarding('next'),
           skip: tOnboarding('skip'),
@@ -142,23 +143,23 @@ export default function TourSteps(): JSX.Element {
         }}
         styles={{
           options: {
-            zIndex: 10000,
-            backgroundColor: '#fff',
+            backgroundColor: theme.palette.background.paper,
             textColor: theme.palette.text.primary,
             primaryColor: theme.palette.primary.main,
             width: '350px',
-            arrowColor: '#fff',
+            arrowColor: theme.palette.background.paper,
           },
           tooltipContainer: {
             textAlign: 'left',
           },
           tooltipTitle: {
-            fontSize: '1.5rem',
-            fontWeight: 'bold',
+            fontSize: theme.typography.h1.fontSize,
+            fontWeight: theme.typography.caption.fontWeight,
             marginBottom: '8px',
           },
           tooltipContent: {
             fontSize: theme.typography.body1.fontSize,
+            fontWeight: theme.typography.body1.fontWeight,
           },
         }}
       />