Make runnable example and quiz buttons more visible and contrasted

[NathanLovato]

Based on feedback in #332

Comments by @pycbouh:

Quizzes are probably fine, but maybe could steal the white outline on the "Submit" button from the "Continue" button in the "Well Done" popup. And quiz "Skip" button lacks contrast, so probably can be made the same as "Stay" button here?

Code examples are problematic. The action button definitely needs some more accent on it, and "Reset" needs to be less visible. Specifically, the fact that we write the name of the function, which starts with a lower case letter, makes the "Reset" button look more significant.

Also on the welcome screen the button blends with the background.

Originally posted by @pycbouh in https://github.com/GDQuest/learn-gdscript/issues/332#issuecomment-1044371390

[NathanLovato]

And we should probably change the Practice button with the thin outline at the bottom of lessons too? It looks different from all other buttons in the app.

Also note for self: clean up unused styles after making these changes.

[razcore-rad]

I was thinking of using here the same style as the ones used for quizzes, but for some reason, the pressed stylebox state is overridden by the focus stylebox (white border). @NathanLovato, do you know why that might happen?

So it looks like this when pressed:

Instead of this:

[NathanLovato]

I'm not sure why that's happening, could you push to a branch or open a pr? I'd need to check it in Godot. That is, if you want me to look into it

[razcore-rad]

@NathanLovato yea sure, I was hoping maybe you know what influences the buttons for a quick fix. I made a branch update-runnable-buttons.

[NathanLovato]

Ah got it after a second read: it's because when you press the button, it gets in focus, so it gets the focus style on the background (white outline), and that takes precedence over the pressed style, at least for the background. I don't think it should but well, in Godot, it does.

One option is to remove the focus style on those buttons, but that's not great for keyboard nav. Another is to make the focus style the same as pressed.

[razcore-rad]

Yes so, I think (with fresh eyes) you're right and focus takes priority over the pressed state. I'll go with making the focus style the same as pressed.

I didn't catch this when updating the pop-ups, but now that I look at it, they have a different pressed stylebox which is basically never used. This is definitely a Godot bug cause it basically makes the pressed style override inconsistent when using focus override.

[razcore-rad]

Wellllll... bug may be a strong word :))

[razcore-rad]

Alright, I have a solution for this, but I have to go over the theme and remake the whole button-stylebox overrides thing from scratch. With this I'll clean up all the unnecessary resources as well.

edit: Just let me know if you want me to go into this.

[NathanLovato]

Yes please go ahead. Basically I think it's like on the web, the intention is to have a focus style that uses a content margin or whatnot to surround focused elements and combine with pressed and hover states.

[razcore-rad]

Yes and that's exactly what I'll do, the focus will be a super thin border over everything else. It'll turn out fine