Incorrect background color in auth check modal

[melchoyce]

The background around the "X" is using #eee, but the modal itself uses #f1f1f1.

[valendesigns]

The background of #wp-auth-check is #eee and the body of the login screen is #f1f1f1 which is served to the popup. However, there is a 30px padding on #wp-auth-check which means the background behind the close button is actually #eee and therefore this patch is unnecessary and makes this ticket invalid.

[melchoyce]

The patch may be wrong, but the ticket isn't. There is definitely a color difference. See attached images.

[valendesigns]

I apologize! I read your comment incorrectly before I tested your patch. You are 100% right, it is not invalid. I tested your patch and it does solve the issue. However, I think it would make more sense to just remove the background color completely so when/if the login screen background color changes this doesn't happen again.

[valendesigns]

Core developers, would one of you please take a look at this ticket and get it committed into 4.2?

Cheers!

[azaozz]

Replying to valendesigns:

I think it would make more sense to just remove the background color completely so when/if the login screen background color changes this doesn't happen again.

That's not going to work. This is the same "problem" all iframe based dialogs have: the header containing the Close button is outside of the iframe. We could make is a "proper" header (similar to thickbox, etc.) but then it will look differently than most others dialogs, see the media modal for example.

Other options include matching the iframe background color, positioning the X on top of the iframe or outside the dialog box (seen this in some places, not sure it looks that good). Changing the background to f1f1f1 fixes this for now. If you want to experiment with the other options please open another ticket with screenshots, etc.

[azaozz]

In 31022:

Fix the background color in the auth. check modal. Props melchoyce, fixes #30278.