fix: small fixes for the interactive demo guide (#3713)

https://linear.app/unleash/issue/2-1005/small-ui-improvements

https://linear.app/unleash/issue/2-1020/fix-issues-with-interactive-demo-guide

Tackles the 2 tasks above, which include items such as:
 - Change drop-shadow of step tooltips;
 - Change transparency of overlay;
 - Change box-shadow of topics "widget";
 - Gradual rollout should use `default` stickiness;
 - Improve last step behavior when redirecting (add optional delay);

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

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

@@ -212,14 +212,15 @@ export const DemoSteps = ({
         const currentStep = currentTopic.steps[step];
         if (!currentStep) return;
 
-        if (
-            currentStep.href &&
-            !location.pathname.endsWith(currentStep.href.split('?')[0])
-        ) {
-            navigate(currentStep.href);
-        }
-
-        waitForLoad(currentStep);
+        setTimeout(() => {
+            if (
+                currentStep.href &&
+                !location.pathname.endsWith(currentStep.href.split('?')[0])
+            ) {
+                navigate(currentStep.href);
+            }
+            waitForLoad(currentStep);
+        }, currentStep.delay ?? 0);
     }, [topic, step]);
 
     useEffect(() => {
@@ -247,7 +248,7 @@ export const DemoSteps = ({
                 disableAnimation: true,
                 styles: {
                     floater: {
-                        filter: `drop-shadow(${theme.palette.primary.main} 0px 0px 3px)`,
+                        filter: `drop-shadow(rgba(32, 32, 33, .2) 0px 4px 12px)`,
                     },
                 },
             }}
@@ -263,7 +264,7 @@ export const DemoSteps = ({
                     animation: 'pulse 2s infinite',
                 },
                 overlay: {
-                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
                 },
             }}
             tooltipComponent={(

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

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

frontend/src/component/demo/demo-setup.ts

@@ -31,7 +31,7 @@ export const gradualRollout = async () => {
                     constraints: [],
                     parameters: {
                         rollout: '50',
-                        stickiness: 'userId',
+                        stickiness: 'default',
                         groupId: featureId,
                     },
                 }),

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

@@ -14,6 +14,7 @@ export interface ITutorialTopicStep extends Step {
     anyClick?: boolean;
     optional?: boolean;
     focus?: boolean | string;
+    delay?: number;
 }
 
 export interface ITutorialTopic {
@@ -252,6 +253,7 @@ export const TOPICS: ITutorialTopic[] = [
                     </>
                 ),
                 nextButton: true,
+                delay: 500,
             },
         ],
     },
@@ -355,6 +357,7 @@ export const TOPICS: ITutorialTopic[] = [
                     </>
                 ),
                 nextButton: true,
+                delay: 500,
             },
         ],
     },
@@ -521,6 +524,7 @@ export const TOPICS: ITutorialTopic[] = [
                     </>
                 ),
                 nextButton: true,
+                delay: 500,
             },
         ],
     },