Context menu icons are inconsistent with icons used elsewhere

[gravitystorm]

Our updated context menu ships with icons for the various menu items. However, these are inconsistent with the icons used elsewhere in the UI. We should consider whether they can be unified - either by changing the menu, or changing the icons used elsewhere, or perhaps both. Here's the list of inconsistencies:

Directions

The directions icons used in the sidebar and on the map show pins with play and stop icons. The context menu has a pin with a circle for the start, and a flag for the finish.

Add a Note

The Add a Note menu item has a pencil, the map button has a speech bubble with a plus sign, and the map icon is a blue pin with a plus sign

Query features

The Query features menu item is a question mark in a circle, the map button is an arrow with a small question mark. Note that the cursor also changes (using CSS cursor: help) but this is platform specific - some platforms show the arrow and small question mark, others show different icons.

[Hiteshpy07]

hey @gravitystorm , i noticed all the inconsitancys you have listed , but now it is resolved i guess, i cannot spot them any more , if there is any more , i can fix it

[pablobm]

@Hiteshpy07 - What did you check? There has been no change and the inconsistencies are still present as listed in the issue description. Therefore you can look into them 🙂

[aNsHuL5217]

Hi @gravitystorm and @pablobm ,

I have checked the website and confirmed that the icon inconsistencies are still present as described in the issue.

Since there hasn't been any update from the previous commenter for a month, I would like to pick this up. I plan to update the context menu icons to match the standard icons used in the Sidebar and Map buttons for consistency. Could you please assign this to me?

[HolgerJeromin]

Could you please assign this to me?

We do not work with assignments. Just go ahead

[pablobm]

Specific questions raised at https://github.com/openstreetmap/openstreetmap-website/pull/6571:

• What icons would be appropriate for "from" and "to", that can be used in both contexts?
  • "Play" and "stop" icons are available in Bootstrap and can be used in the context menu.
  • However they might be a confusing choice for users as action icons (or are they?).
• Currently the context menu uses Bootstrap icons, but the map controls use inlined SVGs.
  • What would work, technically and visually, for both the "add note" and "query features" actions?