From 0c620656effb1ee9a91688b05c9c356a727c5ea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 9 May 2023 08:04:39 +0100
Subject: [PATCH] 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
---
 .../component/demo/DemoSteps/DemoSteps.tsx    | 21 ++++++++++---------
 .../component/demo/DemoTopics/DemoTopics.tsx  |  1 +
 frontend/src/component/demo/demo-setup.ts     |  2 +-
 frontend/src/component/demo/demo-topics.tsx   |  4 ++++
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
index 74438863639..35a52af5bee 100644
--- a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
+++ b/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={(
diff --git a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
index 83156e0dac6..6e2bb6ecab2 100644
--- a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
+++ b/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,
diff --git a/frontend/src/component/demo/demo-setup.ts b/frontend/src/component/demo/demo-setup.ts
index 596b39af87a..6a01c152cbf 100644
--- a/frontend/src/component/demo/demo-setup.ts
+++ b/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,
                     },
                 }),
diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
index 68918670ed8..025433041f3 100644
--- a/frontend/src/component/demo/demo-topics.tsx
+++ b/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,
             },
         ],
     },