✨ add toast to MobileIDEView

[ghalestrilo]

Fixes #1596

I have verified that this pull request:

• has no linting errors (npm run lint)
• is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
• is descriptively named and links to an issue number, i.e. Fixes #123

[catarak]

Looking great 😄 What would you think about placing the toast under the header? I don't know how I feel about it blocking the title. Maybe the text could also be smaller on mobile?

[ghalestrilo]

Sure! I did it, and it does look better, but I wanna hear your thoughts on this:

1. It still covers the first two lines of code
2. Mobile apps usually have a pop-up banner above the header, to indicate lack of connectivity, or similar infrequent info. I was thinking of this as an alternative?

[catarak]

Sure! I did it, and it does look better.

I agree it does look better! Also agree that it is annoying that it covers the first two lines of code.

2. Mobile apps usually have a pop-up banner above the header, to indicate lack of connectivity, or similar infrequent info. I was thinking of this as an alternative?

Do you have some examples we could use as a visual reference?

[ghalestrilo]

I thought of doing something like this, except pushing everything down a bit. In hindsight, not a brilliant idea :^)
I've seen a couple of apps placing the toast to the bottom, it's an alternative. Tell me which option feels best, and we'll go from there

edit.: changed the example - it's best not to hide the bottom bar with the toast

[catarak]

I like how it looks at the bottom! It feels less intrusive, I like that it's closer to reach with your thumb so that you can get rid of it if you want to, but it also doesn't feel like it's in a location that it won't be noticed.

[ghalestrilo]

I think it looks nicer now, check it out!

[catarak]

For me, this is what the toast looks like:

[ghalestrilo]

lord, I forgot a css rule. definitely not a design choice!

[catarak]

Made one last change so that the toast doesn't sit right up against the edges, which looked strange with the border radius. Now this is ready to be merged in!