Adjust maki sizes and fill opacity

New icons are solid fill and take up a bit more of the icon space, so need to
be scaled differntly.

css/app.css

@@ -855,16 +855,28 @@ button.save.has-count .count::before {
     height: 44px;
 }
 
-.preset-icon-32 {
+.preset-icon-28 {
     position: absolute;
-    top: 14px;
-    left: 13px;   /* Maki icons off center? */
+    top: 16px;
+    left: 16px;
     margin: auto;
 }
 
-.preset-icon-32 .icon {
-    width: 32px;
-    height: 32px;
+.preset-icon-28 .icon {
+    width: 28px;
+    height: 28px;
+}
+
+.preset-icon-24 {
+    position: absolute;
+    top: 18px;
+    left: 18px;
+    margin: auto;
+}
+
+.preset-icon-24 .icon {
+    width: 24px;
+    height: 24px;
 }
 
 .preset-list-button .label {

css/map.css

@@ -1375,6 +1375,10 @@ text.point {
     font-size: 10px;
 }
 
+.icon.areaicon {
+    opacity: 0.7;
+}
+
 /* Turns */
 
 g.turn rect,

modules/svg/labels.js

@@ -193,8 +193,8 @@ export function svgLabels(projection, context) {
         icons = icons.enter()
             .append('use')
             .attr('class', 'icon areaicon')
-            .attr('width', '15px')
-            .attr('height', '15px')
+            .attr('width', '18px')
+            .attr('height', '18px')
             .merge(icons);
 
         icons

modules/svg/vertices.js

@@ -120,7 +120,7 @@ export function svgVertices(projection, context) {
         // Vertices with icons get a `use`.
         enter.filter(function(d) { return icon(d); })
             .append('use')
-            .attr('transform', 'translate(-6, -6)')
+            .attr('transform', 'translate(-5, -6)')
             .attr('xlink:href', function(d) { return '#' + icon(d) + '-11'; })
             .attr('width', '11px')
             .attr('height', '11px')

modules/ui/preset_icon.js

@@ -67,7 +67,9 @@ export function uiPresetIcon() {
             .merge(icon);
 
         icon
-            .attr('class', 'preset-icon preset-icon-' + (isMaki ? '32' : (geom === 'area' ? '44' : '60')));
+            .attr('class', 'preset-icon preset-icon-' +
+                (isMaki ? (geom === 'area' ? '24' : '28') : (geom === 'area' ? '44' : '60'))
+            );
 
         icon.selectAll('svg')
             .attr('class', function() {