Tweaks to cloud integration page

[spacegaier]

Breaking change

Proposed change

A few tweaks:

1. Fix tags that included blanks.
2. Made the "Forgot password" look more consistent
3. Disabled the "Sync to Amazon" button if integration was disabled (a´same behavior now as the google button).
4. Various translation tweaks.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[SeanPM5]

I agree with @spacegaier that having the forgot password button be a completely different style had the unintended effect of making it stick out more. Especially on the dark theme where that link is bright white (rather than blue like everything else), it becomes one of the first things my eyes get drawn to.

I think this way looks nicer, and there's a lot of spacing between the two buttons so I don't think there will be any confusion or accidental clicks. And imo the sign in button works well on the left because it makes it more likely you'll spot any potential typos in your email address when the button is underneath it.

[bramkragten]

Just grabbed a couple of login forms, none of them have the same styling for the login button and the forgot password button.

If the forgot password is white in a dark theme, we should fix that (make it the secondary color?). If the login button is not clear enough, we should fix that (make it outlined/unelevated?).

But I don't think they should have the same emphasis.

[spacegaier]

Moving the button below the password input looks really weird in our use case:

So I would propose putting it in the suffix slot of the input field:

[bramkragten]

We could also make the sign in button unelevated?

I think this text is too large for a suffix, have you tried it on mobile?

[spacegaier]

Isn't it already "unelevated"? We could "raise" it, so it gets a colored background. But we rarely do that elsewhere in the UI?

I just tested in Chrome dev tools mobile simulator. On smaller screens the "Forgot password?" gets broken into two lines, so there is enough space for the password (around 35 characters before the field input has to scroll):

[bramkragten]

Unelevated is contained, but without the drop shadow:

[spacegaier]

ha-progress-button currently only supports raised, which I used for my screenshot above. But of course we can add unelevated as well. Currently there are 5 occurrences in the frontend where this is already used (without ha-progress-button but direct mwc-button instead).

I personally don't think we need to have the button color filled here, since it's already very easy to spot and quite clear since every login form will have a matching button at the bottom.

=> Which way do we want to go?

[spacegaier]

Adjusted to Bram's preference: Visually mark as link and move below the password field to the right. Image in first post.