[openstreetmap/openstreetmap-website] Re-arrange login and signup screens as discussed in #4128 (PR #4455)

[Milan Cvetkovic]

@tomhughes

> as you can see in that image the text alongside the preferred provider is not well aligned vertically relative to the icon which in turn means the icon is visibly closer to the bottom border than the top one.

This should be fixed now, thanks.

> I don't think it's good to put it above the header like that - nothing else on the site does that or causes the header to move down like that.

The [design document](https://github.com/openstreetmap/openstreetmap-website/issues/4128#issuecomment-1675045559)  actually has a light grey divider line above the div with the text "Sign up with OpenStreetMap to access..." text. I missed that, so it all became white.

Here is the reasoning why the design is with the text on top:
- the instructions to sign up or log in are presented before the choice of actions (Sign Up and Log In tabs)
- the user comes to this page while trying to do an action on a 3rd party app - it might be surprising "why am I here?" The first thing they should see is the explanation- which "Sign up with OSM to continue with your app...." or "Login to OSM to continue with your app..." is trying to do
- The text stripe is above the globe image because the tabs are embedded into the Globe image.

> I would suggest moving it and having it replace the generic "Sign up to get started contributing." text with the client specific call to action. That is obviously a less prominent position (though putting it above the header actually also makes it hard to notice or did for me) so maybe it should be bolded or emphasised in some other way.

I also have the feeling that the text is almost unnoticable, but I am not sure where to move it. If we keep it where on top of the globe image, we could potentially make it more noticable, perhaps by different background colour. I doubt that an additional grey line as originally suggested would do the trick.

Here are the original design and proposed design with more prominent background, similar to how `flash` notice looks (both designs have incomplete top navigation bar): 

![image](https://github.com/openstreetmap/openstreetmap-website/assets/99971018/f6c015a7-bc11-4a0a-a588-9ff20351adf5)

Proposed design: 
![image](https://github.com/openstreetmap/openstreetmap-website/assets/99971018/94cbc856-9229-488d-9a92-1d8cb8129db3)



-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4455#issuecomment-2083306605
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4455/c2083306605 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240429/6f599593/attachment.htm>