onboarding: Fix formatting of registration page buttons.

[atharvabhatt200]

Fixes: #20563

Testing plan:
The change in the button styling was tested for all the languages and various window sizes.

GIFs or screenshots:

[alya]

Looks good to me. @timabbott FYI

[timabbott]

While this works, this doesn't seem like the sort of clean fix that would avoid future regressions.

Or maybe it is -- how did you pick 60px? Is there math on the size of elements we should be using instead?

[atharvabhatt200]

@timabbott Yes, I did calculate for 'Sign up with Google' button, the background-position is 13px (from the left edge of the button), and the logo's height is 60% of the button, i.e. 45px * 0.6 = 27px. Thus, the width of the logo is (27/76)*74 = 26px approximately (The original size of the logo is 74 × 76 px). Now, the '.new-style button' had a 22px padding on the right of the text. So, to center the text between the right edge of the logo and the right edge of the button and to have an equal space to the left of the text (i.e. 22px) , the padding should be = 13px + 26px + 22px = 61px. I visually adjusted it to 60px as other logos had slightly different aspect ratios.

@alya

[atharvabhatt200]

Hey @timabbott @alya I would love to address any other concerns you have. Please review so that I can work on new issues.. Thanks!

[knight1001d]

@timabbott @alya I think that it's fine to set padding-left to 60px according to the reasoning provided by @atharvabhatt200.

[zulipbot]

Heads up @atharvabhatt200, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.

[zulipbot]

Hello @zulip/design members, this pull request was labeled with the "design" label, so you may want to check it out!