Disable topbar log in button when offline

[sejas]

Related issues

• Fixes STU-582

Proposed Changes

• Disable main login button when offline and add tooltip.

Testing Instructions

• Run npm start
• Make sure you are logged out
• Disable your internet connection
• Observe the login button has a lower opacity
• Move the mouse hover
• Observe the tooltip that says "You're currently offline."

login-disabled.mp4

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[bcotrim]

Code LGTM and works as described.
Tested on different languages, including RTL.
👍

[wojtekn]

It works as expected. It now makes sense as we added another button to access Preferences.

[katinthehatsite]

Should this button then be cleaned up under the account tab:

It does come up as disabled but it seems that the same setting is now present in two different places.

[wojtekn]

@katinthehatsite I think it should staIt does come up as disabled but it seems that the same setting is now present in two different places.

This duplication doesn't look harmful as in Settings the authenticated state changes to unauthenticated state when users logs out. In think we can leave it as is for now, and we could potentially simplify it in the future e.g. by making Log out action closing the Preferences dialog.