Show a button to self-host from the demo

[prakhargupta1]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

We have to add Self-host button at the top, I guess it can be best placed on the right side, just left of 'all changes saved icon'. Another point, to some users 'Demo version' may appear like a button, maybe we can alter its appearance.

Examples 🌈

No response

Motivation 🔦

No response

[gerdadesign]

Can you explain more of the motivation behind this one? Thinking through the way someone might land here:

1. Get to mui.com/toolpad landing page
2. Click on [View Demo >] button at the top section of the landing page that opens demo in new tab.
3. Why would the next logical step be to self-host directly from the demo? According to other conversations, it seemed getting back to the landing page and submitting your email would be more important? Then there is a self-host button on the landing page.

[prakhargupta1]

The standalone demo should also be able to drive users to the next step.
Some users may get a demo link directly, in that case they won't have any idea about the landing page.

[gerdadesign]

Ah ok. So in this case, someone is in one of two positions:

1. They came to the landing page, opened the demo in a new tab, perhaps is ready to convert → Self-host
2. They got the demo link directly. They might be ready to convert or they need more information → Learn more back to the landing page.

[prakhargupta1]

Yes. But I was thinking if we can keep it minimal by not showing a new header bar and just add Self-host button in the existing UI. From the help icon, the user can still go to GitHub or Docs and that should be enough.

[gerdadesign]

Thanks for discussing this one. Here's the screenshots for the version we landed on:

@prakhargupta1 Are we ok with this copy to move forward or did you still want to adjust it more?

[prakhargupta1]

This is good! I am moving it to 'Ready for development'. Any copy related fine-tuning we can do in the PR.

[apedroferreira]

@gerdadesign Can you provide a link to Figma please?

[gerdadesign]

@gerdadesign Can you provide a link to Figma please?

Yep, sorry about that! https://www.figma.com/file/14OEUnwh4ahMb2empYAEc8/Toolpad-UX?node-id=452%3A16413
In a previous comment, I was trying out linking the image directly to figma as well, but missed that in the most recent iteration.