Rework on "REGISTER AT OPENSTREETMAP"

[pratyaksh1610]

Background of "REGISTER AT OPENSTREETMAP" needs to be updated. I think it must be similar to "LOGIN TO OPENSTREETMAP"

Actual

Expected

[RedAuburn]

tbh that whole page needs a re-design

[Jean-BaptisteC]

https://github.com/organicmaps/organicmaps/pull/2909

[lunarna-gh]

I'm not sure if having two buttons of the same color is good design - it's much easier for people to read a page if there are buttons with more and less emphasis, you instantly know which one you're supposed to click on. Apple's Human Interface Guidelines (https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons) explain it nicely, and Google's Material Design website states so too (https://material.io/components/buttons#usage) The button could just be made a lighter blue or outlined so it stands out more, though I don't mind how it is now

[biodranik]

Colors are ok. The title should be fixed although: Log In should be changed to Log In or Register

[dheerajdlalwani]

Hey, I just saw this and came up with this.

What do you peeps think of it?

[biodranik]

How it will look on some old Android 5 device with a small screen?

[dheerajdlalwani]

You raise a good question! I did not think of that. Let me see.

[dheerajdlalwani]

I am guessing it should look similar. Maybe it looks a bit crammed? I think we'll get more idea when actually implemented.

[Jean-BaptisteC]

I think, it's not a good idea to increase size of element and add padding because, on small screen users need to scroll to use register button. All buttons on this IHM must be accessible without scroll on screen.

[dheerajdlalwani]

Alright, let me try to shrink the size a little bit.

[dheerajdlalwani]

This is how it looks when shrunk down a little bit.

Also, if you talk about landscape mode, this is how it would look:

Let me know, peeps!

[biodranik]

Can you mock a web page simulating your layout, so it would be easy to test it on a smaller screen? I still don't think it will fit into older devices. The register button is critically important to be visible on the screen. With the current layout Register button is already not visible on my device, only the "Don't have an OpenStreetMap account?" text is visible.

[dheerajdlalwani]

Sure! Let me try :)

[dheerajdlalwani]

Would it be okay, if I share Figma wire-frames with the required dimensions?

[biodranik]

It's always better to test on a real device, e.g. in a browser. I'm not sure that this issue has a high priority now because nobody complained yet about the current design. Can you draw svg icons?

[dheerajdlalwani]

It's always better to test on a real device, e.g. in a browser.

Alright. No issues. I shall make a web page.

I'm not sure that this issue has a high priority now because nobody complained yet about the current design.

I understand. I shall keep working on it but at a slower pace.

Can you draw svg icons?

I can try! I've never done that before.

[biodranik]

For example, we need these icons for Android (they also can be updated for iOS) for light and dark modes:

https://github.com/organicmaps/organicmaps/blob/master/iphone/Maps/Images.xcassets/Layers/Subway/btn_subway_on_light.imageset/btn_subway_on_light.pdf https://github.com/organicmaps/organicmaps/blob/master/iphone/Maps/Images.xcassets/Layers/IsoLines/btn_isoMap_on_light.imageset/btn_isoMap_on_light.pdf https://github.com/organicmaps/organicmaps/blob/master/iphone/Maps/Images.xcassets/Layers/IsoLines/btn_isoMap_on_highlighted_dark.imageset/btn_isoMap_on_highlighted_dark.pdf

They are used to indicate that the "Subway" or "Isolines" layer is now selected/active, and pressing this button will deactivate this layer.