Update settings section

[philipwilk]

Trying to follow the new Figma design as much as possible.
#768

Still got some work to do but it's a start.

[philipwilk]

@dragonDScript

[ghost]

Can you post a screenshot of it here?

[philipwilk]

Can you post a screenshot of it here?

(and game settings)

[philipwilk]

Is there anything (else) we want to prioritise here in particular?
Maybe something to do with the switches?
I'm pretty sure the colours and fonts need a quick catch up to what the current intended design is,
maybe some icons, I'm not sure.

If you give me a design, I can probably implement it with css.

[philipwilk]

I've added variables for all the colours in the gen5 figma, and ones for the defined fonts because that didn't exist for some reason, which I'm trying to stick to.

I'll do the winecfg/winetricks section and checkboxes and then I'll do some work on the game specific settings, which i think will be a bit more involved because right now, it sucks. It completely covers the screen and has no back button or anything, when it's supposed to look like this:
https://www.figma.com/file/aASC1gR8HHBboSa2awKeiK/Heroic?node-id=1320%3A3055

Most recent iteration:
General settings:

Game specific settings:

[philipwilk]

Sliders moved to the left

[philipwilk]

Made bottom buttons actual buttons instead of text.

[philipwilk]

I'm pretty sure I've got the settings page almost completed, now the settings page for individual games needs to be fixed.
Will probably need to change the settings button on the game page component to open a box with that game's settings page in it instead of redirecting the whole launcher to it.

[flavioislima]

Testing here. Noticed two things:

1. Missing Header on Settings. This is needed since otherwise, the user won't know which setting is being changing if a game setting or the global settings.
2. The Color Orange was replaced by blue (I believe is blue) everywhere. Was this related to the new design in Figma?

[philipwilk]

Testing here. Noticed two things:

1. Missing Header on Settings. This is needed since otherwise, the user won't know which setting is being changing if a game setting or the global settings.
2. The Color Orange was replaced by blue (I believe is blue) everywhere. Was this related to the new design in Figma?

I removed the header since I was planning to make the game settings be in a modal (like in the new figma design, where it's missing as well), but won't do that in this PR because of how much it'll need to change. I'll add it back until the game settings page is changed.

Yeah, I grabbed the colours from the latest figma I design (afaik), but I can change them back if you want me to. I was changing the variable names to make more sense with the figma, and it was difficult to map them over from the old names to the new ones, but I can change the colours back now if necessary.
(That's your choice of preference)

[flavioislima]

@wiryfuture let's keep the old Yellow color (--secondary). for selected links and selected Checkboxes.
And get back the Header. And then I think we are good to merge this :)

[philipwilk]

@wiryfuture let's keep the old Yellow color (--secondary). for selected links and selected Checkboxes. And get back the Header. And then I think we are good to merge this :)

Like this?

[philipwilk]

I want to iconify the footer buttons and then I think this will be good

[flavioislima]

Yes, looks good now. We need to implement theming on the next version so we can make this more versatile. But for now, let's keep this as the default one.

[flavioislima]

I want to iconify the footer buttons and then I think this will be good

yes, send a screenshot with the result :)

[philipwilk]

Yes, looks good now. We need to implement theming on the next version so we can make this more versatile. But for now, let's keep this as the default one.

I think I've made some good variables, so it should be pretty easy now 🥳

[philipwilk]

I want to iconify the footer buttons and then I think this will be good

yes, send a screenshot with the result :)

Not sure if this is exactly what i was expecting but I think it works.

[philipwilk]

@flavioislima ready for another review on this

[Nocccer]

Can add the button style for copy to clipboard to the bottom buttons of the log page aswell? Also with text

Everything else looked fine for me

[philipwilk]

Can add the button style for copy to clipboard to the bottom buttons of the log page aswell? Also with text

Everything else looked fine for me

[philipwilk]

Can add the button style for copy to clipboard to the bottom buttons of the log page aswell? Also with text

Everything else looked fine for me

Is this ok?

[flavioislima]

Looks pretty good now ⚔️