Adds proper styles, Solves Issue #12

[Fanksies]

I noticed too late that someone else had already attempted to fix this issue before, however I noticed that the issue was still open and decided to give it a shot.

Here's a preview of how it looks in GIF form
https://i.imgur.com/PE9Eqjs.gif

Let me know what you think.

[rugk]

Hi @Fanksies,
thanks for your first contribution to this project! 🎉 👍 🏅
I hope you'll like this project and enjoy hacking on it… 😃

Your code and the solution looks very nice, thanks. I'll take a deeper look soon.
This supersedes #226 if merged.

BTW you can (automatically) let issues close when a PR is merged by adding some "magic" text to your PR body. (Manually linked it now.)

And another BTW: You can also upload GIFs/images on GitHub via drag & drop. 🙂

[rugk]

Your solution looks nice, but I see one problem:
AFAIK this always displays the button on the next line… I'd better only want the button displayed on the next line, if it is needed/i.e. if the message text is long and spans two lines.

[rugk]

Hmm #messageContrast is only one case where this might happen.
It would be best if the solution were message-agnostic, i.e. somehow integrate it into .message-box.

[Fanksies]

Thanks for the tips and the feedback, I sincerely appreciate them as they help me learn a lot in the process of contributing to open source projects.
You're correct about the button displaying on the next line only for the contrast warning message.
I understand that a message agnostic solution would be ideal as it would be cleaner and easier to reuse down the road.
I'll look into it!

[rugk]

@Fanksies By the way… did you by chance found a solution or even just an idea here on how to solve this?