Add fast edit option from preview

[bytasv]

• Closes Faster way to edit a deployed/preview app #1536

[apedroferreira]

I left a comment but nothing major and might be a bit opinionated.

Also more opinionated design feedback:

• I feel like the shadow in the button and the blue color it's using don't match the Alert color too well? Could it be flatter and more consistent in color maybe?
• Also the font in the button seems a bit small.
• Another thing I might try, but not sure if it would look better, would be to place the button on the right side or center of the Alert bar. But it's just an idea!

[prakhargupta1]

It came up in my discussion with @gerdadesign what if we continue to show the top header bar in the preview mode? We can just replace Preview with Edit and there won't be any need to show 'This is a preview version of the application'.

Would there be any concerns with this approach?

[Janpot]

Would there be any concerns with this approach?

The preview header only shows up on preview version of the application. For the edit button this could be fine. But we were talking about adding a header bar that could house the hamburger button that opens the navigation menu when it's hidden on smaller screens.

So the header we talked about during meeting would also need to show up on deployed applications.

[prakhargupta1]

So the header we talked about during meeting would also need to show up on deployed applications.

Yeah, so basically, there are 2 headers just like in this app. But as we discussed, let's skip the inner/app header for now. We'll only deploy an app with a sidebar. #813

We can separately deal with how to handle Toolpad apps on smaller screens.

[Janpot]

Ok, I misunderstood. So you want to show this header in the deployed/preview apps as wel:

Works for me. It will need to be hidden as well when hideShell is used, so the app can still be embedded

[prakhargupta1]

So you want to show this header in the deployed/preview apps as welL

Only for preview, not in the deployed app.

[Janpot]

Only for preview, not in the deployed app.

oh ok, then we can't use it to house the hamburger menu for the navigation drawer

[bytasv]

@prakhargupta1 @apedroferreira @Janpot I've replaced alert with app header:

[prakhargupta1]

LGTM!

[apedroferreira]

I really like this solution!
Just noticed one more thing, in the preview the logo is vertically stretched for some reason (actually it's the blue font near the logo I think?):

Editor:

Preview:

Doesn't make it look much worse or anything but it's just weird that it's different.

[bytasv]

@apedroferreira fixed the difference in font

[apedroferreira]

Looks great now. Thanks for the changes!