Update browser token auth login page help screenshot

[JamesNK]

Replace the temporary image with an up to date image that we're all happy with. Also review copy.

Left over work from #3213

[tlmii]

@leslierichardson95 if you have any particular thoughts on the screenshot or text of the popup.

[JamesNK]

@JamesNK for the token example screenshot, did you try it at different screen resolutions and/or scaling? I'm wondering what it looks like on screens with higher DPI/scaling ratios set as this is often requires multiple image files to ensure it doesn't look super pixelated at higher DPIs.

From @DamianEdwards

[leslierichardson95]

@tlmii I think we should keep the "[ProjectName] Dashboard" header text and the placeholder text based on the most recent screenshot in the #3213 issue. Personally, I still prefer the login button inline with the input textbox but for consistency and majority rules' sake, I don't mind if the button is below it. :)

[tlmii]

@tlmii I think we should keep the "[ProjectName] Dashboard" header text and the placeholder text based on the most recent screenshot in the #3213 issue. Personally, I still prefer the login button inline with the input textbox but for consistency and majority rules' sake, I don't mind if the button is below it. :)

@leslierichardson95 this issue is just about getting a better, updated screenshot for the more information popup. See the screenshot here that includes the popup with the screenshot in question (very meta):

#3213 (comment)

I know there are some tools to make nice console window/code screenshots that people post on social media. It should also probably be more generic than using my personal prompt.

[leslierichardson95]

Oh whoops my bad! In that case, I'm still trying to remember a page or experience that has an example of a "more info / "where is my cvv"-style popup we could take inspiration from. At the very least, maybe we should make the more info popup the same width as the login popup or maybe consider expanding the login page vertically with the additional screenshot info instead?

Also, I think we should rename "more info" to "Where is my login token?" which feels a bit more specific and so that we alleviate any potential confusion about "more info" being doc-related. For the screenshot, we should highlight or put a box around the token location so that it's clear to the user.

[tlmii]

@leslierichardson95 I had pointed you to an older screenshot so there were a few things out of date. Sorry about that. You'll see the updated ones here in a minute.

[tlmii]

Here's a stab at a replacement screenshot. Bigger, too, and clickable to open in a new tab/window if they need that for some reason:

cc @leslierichardson95 @kvenkatrajan

[kvenkatrajan]

LGTM

[JamesNK]

Consider adding some text before the More info:

Copy the highlighted token from the console to the login page and login.

Alternatively, click on the console link to automatically login. The address might not be correct when the dashboard is running in a container and the external port is mapped to a different value.

[JamesNK]

Also, could More info be changed to More information? I used the full word in some other places. Should be consistent.