fix: interactive demo guide adjustments (#3747)

https://linear.app/unleash/issue/2-1027/adjustments
https://linear.app/unleash/issue/2-989/add-imagegif-to-some-of-the-steps

Includes small adjustments from the tasks above:
 - Adjust zIndex values for the demo guide;
- Add a screenshot to better guide the users to their `userId` in the
demo website;

Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537

frontend/src/component/demo/Demo.tsx

@@ -75,12 +75,19 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
         });
     };
 
+    const closeGuide = () => {
+        setTopic(-1);
+        setStep(0);
+    };
+
     if (!uiConfig.flags.demo) return children;
 
     return (
         <>
             <DemoBanner
                 onPlans={() => {
+                    closeGuide();
+
                     setPlansOpen(true);
 
                     trackEvent('demo', {
@@ -154,6 +161,8 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                 }}
                 topics={TOPICS}
                 onWelcome={() => {
+                    closeGuide();
+
                     setWelcomeOpen(true);
 
                     trackEvent('demo', {

frontend/src/component/demo/DemoBanner/DemoBanner.tsx

@@ -4,7 +4,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 const StyledBanner = styled('div')(({ theme }) => ({
     position: 'sticky',
     top: 0,
-    zIndex: theme.zIndex.appBar,
+    zIndex: theme.zIndex.sticky,
     display: 'flex',
     gap: theme.spacing(1),
     justifyContent: 'center',

frontend/src/component/demo/DemoSteps/DemoSteps.tsx

@@ -255,7 +255,7 @@ export const DemoSteps = ({
             styles={{
                 options: {
                     arrowColor: theme.palette.background.paper,
-                    zIndex: theme.zIndex.snackbar,
+                    zIndex: theme.zIndex.snackbar - 1,
                 },
                 spotlight: {
                     borderRadius: theme.shape.borderRadiusMedium,

frontend/src/component/demo/DemoTopics/DemoTopics.tsx

@@ -20,7 +20,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     left: 0,
     width: '100%',
     maxWidth: theme.spacing(30),
-    zIndex: theme.zIndex.fab,
+    zIndex: theme.zIndex.sticky,
     boxShadow: theme.boxShadows.popup,
     '&&&': {
         borderRadius: 0,

frontend/src/component/demo/demo-topics.tsx

@@ -1,9 +1,10 @@
-import { Typography, TypographyProps } from '@mui/material';
+import { Typography, TypographyProps, styled } from '@mui/material';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Badge } from 'component/common/Badge/Badge';
 import { Step } from 'react-joyride';
 import { gradualRollout, variants } from './demo-setup';
 import { basePath } from 'utils/formatPath';
+import userIdImage from 'assets/img/userId-image.png';
 
 export interface ITutorialTopicStep extends Step {
     href?: string;
@@ -27,6 +28,10 @@ const Description = (props: TypographyProps) => (
     <Typography variant="body2" color="text.secondary" {...props} />
 );
 
+const StyledImg = styled('img')(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+}));
+
 const PROJECT = 'demo-app';
 const ENVIRONMENT = 'dev';
 
@@ -208,15 +213,23 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
+                        <Badge
+                            sx={{ mt: 2, mb: 1, width: '100%' }}
+                            icon={<InfoOutlinedIcon />}
+                        >
                             You can find your userId on the demo page.
                         </Badge>
+                        <StyledImg
+                            src={userIdImage}
+                            alt="You can find your userId on the demo page."
+                        />
                         <Description sx={{ mt: 1 }}>
                             When you're done, use the "Next" button in the
                             dialog.
                         </Description>
                     </>
                 ),
+                placement: 'right',
                 nextButton: true,
                 focus: 'input',
             },
@@ -547,15 +560,23 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
+                        <Badge
+                            sx={{ mt: 2, mb: 1, width: '100%' }}
+                            icon={<InfoOutlinedIcon />}
+                        >
                             You can find your userId on the demo page.
                         </Badge>
+                        <StyledImg
+                            src={userIdImage}
+                            alt="You can find your userId on the demo page."
+                        />
                         <Description sx={{ mt: 1 }}>
                             When you're done, use the "Next" button in the
                             dialog.
                         </Description>
                     </>
                 ),
+                placement: 'right',
                 nextButton: true,
                 backCloseModal: true,
                 focus: 'input',

frontend/src/themes/dark-theme.ts

@@ -72,6 +72,9 @@ const theme = {
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+    zIndex: {
+        sticky: 2000,
+    },
 
     palette: {
         common: {

frontend/src/themes/theme.ts

@@ -65,6 +65,9 @@ const theme = {
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+    zIndex: {
+        sticky: 2000,
+    },
 
     palette: {
         common: {