Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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
  • Loading branch information
nunogois committed May 9, 2023
1 parent f153f63 commit 0c62065
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 11 deletions.
21 changes: 11 additions & 10 deletions frontend/src/component/demo/DemoSteps/DemoSteps.tsx
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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)`,
},
},
}}
Expand All @@ -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={(
Expand Down
1 change: 1 addition & 0 deletions frontend/src/component/demo/DemoTopics/DemoTopics.tsx
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/component/demo/demo-setup.ts
Expand Up @@ -31,7 +31,7 @@ export const gradualRollout = async () => {
constraints: [],
parameters: {
rollout: '50',
stickiness: 'userId',
stickiness: 'default',
groupId: featureId,
},
}),
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/component/demo/demo-topics.tsx
Expand Up @@ -14,6 +14,7 @@ export interface ITutorialTopicStep extends Step {
anyClick?: boolean;
optional?: boolean;
focus?: boolean | string;
delay?: number;
}

export interface ITutorialTopic {
Expand Down Expand Up @@ -252,6 +253,7 @@ export const TOPICS: ITutorialTopic[] = [
</>
),
nextButton: true,
delay: 500,
},
],
},
Expand Down Expand Up @@ -355,6 +357,7 @@ export const TOPICS: ITutorialTopic[] = [
</>
),
nextButton: true,
delay: 500,
},
],
},
Expand Down Expand Up @@ -521,6 +524,7 @@ export const TOPICS: ITutorialTopic[] = [
</>
),
nextButton: true,
delay: 500,
},
],
},
Expand Down

0 comments on commit 0c62065

Please sign in to comment.