Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: improve demo welcome screen options (#4132)

Browse Source 
https://linear.app/unleash/issue/2-1166/demo-welcome-screen-improvement

Improves UI/UX of the demo welcome screen dialog by adding the "Explore
on my own" button and renaming the "Try Unleash demo" button to "Go for
a guided tour".

This also adds UTM links to both the demo website URL and QR code.


![image](https://github.com/Unleash/unleash/assets/14320932/982063e8-b818-44a2-a867-046c6ce96a42)
This commit is contained in:
Nuno Góis 2023-07-04 08:10:34 +01:00 committed by GitHub
parent ce900830cb
commit 6a3965f57a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/img/demo-qr.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 29 KiB

37
frontend/src/component/demo/DemoDialog/DemoDialogWelcome/DemoDialogWelcome.tsx
View File

@ -42,7 +42,15 @@ const StyledLink = styled('a')(({ theme }) => ({
},
}));
const StyledStartButton = styled(Button)(({ theme }) => ({
const StyledButtons = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
gap: theme.spacing(4),
}));
const StyledButton = styled(Button)(({ theme }) => ({
flex: 1,
height: theme.spacing(7),
}));
@ -79,7 +87,7 @@ export const DemoDialogWelcome = ({
<Typography>
Open demo website in another tab:{' '}
<StyledLink
href="https://hello.unleash.run/"
href="https://hello.unleash.run/?utm_source=Demo_instance&utm_medium=OpenLink&utm_campaign=Unleash"
target="_blank"
rel="noreferrer"
onClick={() => {
@ -93,14 +101,23 @@ export const DemoDialogWelcome = ({
(we recommend you keep the pages open side by side)
</Typography>
</StyledDemoPane>
<StyledStartButton
variant="contained"
color="primary"
onClick={onStart}
data-testid="DEMO_START_BUTTON"
>
Try Unleash demo
</StyledStartButton>
<StyledButtons>
<StyledButton
variant="outlined"
color="primary"
onClick={onClose}
>
Explore on your own
</StyledButton>
<StyledButton
variant="contained"
color="primary"
onClick={onStart}
data-testid="DEMO_START_BUTTON"
>
Go for a guided tour
</StyledButton>
</StyledButtons>
</DemoDialog>
);
};