Improve edit control icons to make them clearer and more intuitive #179

The button designs, while elegant, don't fit with users expectations.
First, there's a sense that because the fields are perfectly square,
that is a square line drawing tool. So there's hesitancy in using it,
and rather people use the line tool instead. The problem is that the
line tool does not create an area WKT object, and that produces non-obvious
cascading user experience failures down the line (you save something that's
should be an area as a line and in FarmOS it doesn't show the acreage...
when you export to another service, it fails to render it as an area so
 the service doesn't work right, etc. etc.).

I should also say this doesn't just happen sometimes... it happens a lot.

So the design changes offer a few simple things to address these issues:

- The main area icons (circle, poly) look filled, and poly icon is not square.
  All this helps inform the user that this is for creating general purpose areas,
  helping them not use inappropriate (ie line) solutions.
- The 'modify' tool is just more obvious, showing a pointer dragging a corner.
  It's less elegant than the previous solution, but in our experience users need
  clarity over elegance in this situation. It's also very similar to the design of
  this type of function in other solutions, building on what users may have already
  seen.

See previous/related issues;

- #146
- #152

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Improve edit control icons to make them clearer and more intuitive #179 (ref: #146 #152)
+
 ## [v2.0.5] - 2022-08-29
 
 ### Changed

src/control/Edit/Edit.js

@@ -65,7 +65,7 @@ class Edit extends Control {
     const buttons = [
       {
         name: 'polygon',
-        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><g><path d="m3.5 18.47 2.65-6.74 3.65.03 2.46-6.23h8.25l-5.1 12.93z" fill="#dcdcdc" /><path d="M12.25 4c-.4 0-.77.16-1.05.45a1.55 1.55 0 0 0-.08 2.07l-1.47 3.72c-.5.05-.94.36-1.17.8h-1a1.47 1.47 0 0 0-2.38-.38 1.54 1.54 0 0 0-.08 2.06l-1.67 4.23c-.35.04-.67.2-.91.44a1.54 1.54 0 0 0 0 2.16 1.48 1.48 0 0 0 2.38-.38l9.26-.01a1.47 1.47 0 0 0 2.38.38 1.55 1.55 0 0 0 .08-2.07l4.12-10.42c.34-.04.66-.2.9-.44a1.55 1.55 0 0 0 0-2.16 1.48 1.48 0 0 0-2.38.37h-5.6A1.49 1.49 0 0 0 12.25 4zm1.33 2.23h5.6c.06.1.12.2.2.3l-4.12 10.4a1.48 1.48 0 0 0-1.18.82l-9.27.01c-.05-.1-.11-.2-.18-.28l1.67-4.23a1.5 1.5 0 0 0 1.17-.8h1c.25.5.75.84 1.33.84a1.52 1.52 0 0 0 1.13-2.53l1.47-3.71a1.5 1.5 0 0 0 1.18-.82z" fill="currentColor"/></g></svg>',
         tooltip: 'Draw a Polygon',
         draw: 'Polygon',
         element: drawButtonsDiv,
@@ -86,14 +86,14 @@ class Edit extends Control {
       },
       {
         name: 'circle',
-        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><circle cx="12" cy="12" r="10" stroke-width="2.5" stroke-opacity="1" fill="#dcdcdc" stroke="currentColor" /></svg>',
         tooltip: 'Draw a Circle',
         draw: 'Circle',
         element: drawButtonsDiv,
       },
       {
         name: 'modify',
-        label: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><path d="M 23,7 V 1 H 17 V 3 H 7 V 1 H 1 V 7 H 3 V 17 H 1 v 6 h 6 v -2 h 10 v 2 h 6 V 17 H 21 V 7 Z M 3,3 H 5 V 5 H 3 Z M 5,21 H 3 V 19 H 5 Z M 17,19 H 7 V 17 H 5 V 7 H 7 V 5 h 10 v 2 h 2 v 10 h -2 z m 4,2 h -2 v -2 h 2 z M 19,5 V 3 h 2 v 2 z"/></svg>',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="m4.37 19.35 2.4-13.11 13.01-2.15v15.26Z" fill="#dcdcdc" style="stroke-width:1.5"/><g fill="currentColor"><path d="M116.96 93.6a1.09 1.09 0 0 0-.93.74l-1.4.23.16.99 1.4-.23a1.09 1.09 0 0 0 .27.27v8.07c-.2.1-.35.27-.46.46h-8.23a1.09 1.09 0 0 0-.21-.28l.2-1.09-.98-.18-.19 1.02a1.08 1.08 0 0 0 .32 2.12 1.09 1.09 0 0 0 .87-.59h8.27a1.08 1.08 0 1 0 1.41-1.4v-8.08a1.08 1.08 0 0 0-.5-2.04zm-3.32 1.13-1.97.33.16.98 1.97-.32zm-5.16.26V95c-.6 0-1.1.5-1.1 1.1 0 .34.17.65.43.86l-.31 1.68.99.18.3-1.68c.35-.1.62-.37.73-.7l1.32-.23-.16-.98-1.32.2a1.1 1.1 0 0 0-.88-.44zm-1.16 4.63-.36 1.97.98.18.37-1.96z" transform="translate(-159.58 -141.1) scale(1.5335)"/><path d="m11.6 17.79-1.19-2.14c-.05-.06-.05-.06-1.12 1l-1.07 1.03c-.03 0-.97-10.55-.97-10.63 0-.01 8.56 6.35 8.59 6.4l-1.46.38-1.48.38 1.2 2.12.05.12-1.25.68-1.26.69c-.02 0-.03 0-.05-.03zm.82-1.5.4-.22-.68-1.23-.69-1.26 1.08-.27 1.07-.3a231.68 231.68 0 0 0-5.18-3.89L9 15.6l.81-.76.8-.77.67 1.16c.76 1.37.73 1.3.74 1.3l.42-.2z"/></g><path d="M11.99 16.47a89.39 89.39 0 0 1-1.38-2.43l-.72.65a880.95 880.95 0 0 1-.87.81c-.04-.02-.07-.38-.37-3.83a101.06 101.06 0 0 1-.2-2.38v-.12l1.65 1.22c1.77 1.32 3.13 2.33 3.35 2.52l.14.1-1.08.28-1.07.3.86 1.56c.26.46.46.89.46.9 0 .03-.66.42-.72.43z" fill="#FFF"/></svg>',
         tooltip: 'Modify features',
         element: actionButtonsDiv,
       },