Style fixes: Onboarding

[negue]

Fixes:

• Move Justin above the dialog for the last 2 pages
• fix avatar position
• item white background + border radius
• Menu Indicator
• New Option Style

Extract Parts of Onboarding:

• Sub-Menu
• Customize-Option List (Generic for all Items)
• Body-Settings
• Skin-Settings
• Hair-Settings
• Extras-Settings

Misc.:

• Moved Tasks to content
  • Replace Strings for Translation

[negue]

@SabreCat @Alys could you take a look too?

[Alys]

@negue I can put this on my local install to do some testing. Could you fix the conflict first though?

[negue]

As of right now only the menu changed for the body settings (need to replace the submenu on the other pages too), some other styles changed too, but still not finished

As for the merge conflict ... took some time to merge this huge file ^^ one reason more to extract multiple parts of it 😄

@Alys ready for the first look

[Alys]

I'm not super-familiar with the requirements for this but it looks okay.
The top of Justin's head is cropped (or maybe hidden under the header) in some screens like the one below. Not sure if that's intentional or not.

[negue]

Yeah it shouldn't be under the toolbar, its weird how some browsers work as expected and some not...

What browser / os ?
Was it with client:dev or with the prod-build version ? (there was already an issue I fixed in this PR, which had this kind of dev/prod weirdness)

[Alys]

npm run client:dev
Firefox Quantum 66 on Ubuntu

[paglias]

@negue what's the status on this? also looks like there are some lint issues

[negue]

@Alys I can't reproduce this issue on mac, on any browser, could you check if a simple z-index change would help there?

[Alys]

@negue The head is still being cut off on Firefox on Ubuntu when viewing the delta site. It does look like a z-index problem but I haven't had time to investigate the code to be sure. It's only a display issue though, and it's only for the image. The actual text is still visible and the controls still work.

[paglias]

What's the status on this?

[negue]

I'll fix the conflicts

@Tressley anything left todo on this? (In case I missed something)

[Tressley]

@negue -- I'm seeing a bunch of onboarding-related issues on Delta at the moment. Might need to double back to see what is causing the new issues.

[paglias]

Also there are some conflicts due to a different PR that got merged (#11351)

[paglias]

(I'm marking this as needing work for better organization)

[Tressley]

@negue -- Can we add a hover state for .option? Something like background-color: rgba(213, 200, 255, .32);? It would look like this:

The rest looks good to me!

[negue]

Added hover

[Tressley]

@negue -- Hover doesn't need to be on the item that is selected already.

[Tressley]

This LGTM. 👍