Cleaner note icon rendering

Before: We drew 2 fontawesome comment icons, on on top of the other
After: Moved icon into iD spritesheet and gave it an actual `stroke` property that can be styled

build_data.js

@@ -61,9 +61,7 @@ module.exports = function buildData() {
         };
 
         // Font Awesome icons used
-        var faIcons = {
-            'fas-comment-alt': {}
-        };
+        var faIcons = {};
 
         // Start clean
         shell.rm('-f', [

css/65_data.css

@@ -3,7 +3,7 @@
 .layer-notes {
     pointer-events: none;
 }
-.layer-notes .note .note-shadow {
+.layer-notes .note * {
     pointer-events: none;
 }
 .layer-notes .note .note-fill {
@@ -19,29 +19,26 @@
 .note-header-icon .note-fill,
 .layer-notes .note .note-fill {
     color: #ff3300;
+    stroke: #333;
 }
 .note-header-icon.closed .note-fill,
 .layer-notes .note.closed .note-fill {
     color: #55dd00;
+    stroke: #333;
 }
 .layer-notes .note.hovered .note-fill {
     color: #eebb00;
+    stroke: #333;
 }
 .layer-notes .note.selected .note-fill {
     color: #ffee00;
+    stroke: #333;
 }
 
 /* slight adjustments to preset icon for note icons */
 .note-header-icon .preset-icon-28 {
     top: 18px;
 }
-.note-header-icon .preset-icon-24 {
-    top: 20px;
-}
-.note-header-icon .preset-icon-24 .icon.note-fill {
-    width: 25px;
-    height: 23px;
-}
 
 /* OSM Note UI */
 .note-header {
@@ -149,4 +146,4 @@
 
 .note-report {
     float: right;
-}
+}

dist/locales/en.json

@@ -6687,7 +6687,7 @@
                 "attribution": {
                     "text": "Terms & Feedback"
                 },
-                "description": "Premium DigitalGlobe satellite imagery.",
+                "description": "DigitalGlobe-Premium is a mosaic composed of DigitalGlobe basemap with select regions filled with +Vivid or custom area of interest imagery, 50cm resolution or better, and refreshed more frequently with ongoing updates.",
                 "name": "DigitalGlobe Premium Imagery"
             },
             "DigitalGlobe-Premium-vintage": {
@@ -6701,7 +6701,7 @@
                 "attribution": {
                     "text": "Terms & Feedback"
                 },
-                "description": "Standard DigitalGlobe satellite imagery.",
+                "description": "DigitalGlobe-Standard is a curated set of imagery covering 86% of the earth’s landmass, with 30-60cm resolution where available, backfilled by Landsat. Average age is 2.31 years, with some areas updated 2x per year.",
                 "name": "DigitalGlobe Standard Imagery"
             },
             "DigitalGlobe-Standard-vintage": {

modules/svg/notes.js

@@ -82,14 +82,14 @@ export function svgNotes(projection, context, dispatch) {
             .append('g')
             .attr('class', function(d) { return 'note note-' + d.id + ' ' + d.status; });
 
-        notesEnter
-            .append('use')
-            .attr('class', 'note-shadow')
-            .attr('width', '24px')
-            .attr('height', '24px')
-            .attr('x', '-12px')
-            .attr('y', '-24px')
-            .attr('xlink:href', '#fas-comment-alt');
+        // notesEnter
+        //     .append('use')
+        //     .attr('class', 'note-shadow')
+        //     .attr('width', '24px')
+        //     .attr('height', '24px')
+        //     .attr('x', '-12px')
+        //     .attr('y', '-24px')
+        //     .attr('xlink:href', '#iD-icon-note');
 
         notesEnter
             .append('use')
@@ -98,18 +98,18 @@ export function svgNotes(projection, context, dispatch) {
             .attr('height', '20px')
             .attr('x', '-10px')
             .attr('y', '-22px')
-            .attr('xlink:href', '#fas-comment-alt');
+            .attr('xlink:href', '#iD-icon-note');
 
         // add dots if there's a comment thread
         notesEnter.selectAll('.thread')
             .data(function(d) { return d.comments.length > 1 ? [0] : []; })
             .enter()
             .append('use')
-            .attr('class', 'note-shadow thread')
-            .attr('width', '18px')
-            .attr('height', '18px')
-            .attr('x', '-9px')
-            .attr('y', '-22px')
+            .attr('class', 'note-annotation thread')
+            .attr('width', '14px')
+            .attr('height', '14px')
+            .attr('x', '-7px')
+            .attr('y', '-20px')
             .attr('xlink:href', '#iD-icon-more');
 
         // update

modules/ui/note_header.js

@@ -24,12 +24,7 @@ export function uiNoteHeader() {
         iconEnter
             .append('div')
             .attr('class', 'preset-icon-28')
-            .call(svgIcon('#fas-comment-alt', 'note-shadow'));
-
-        iconEnter
-            .append('div')
-            .attr('class', 'preset-icon-24')
-            .call(svgIcon('#fas-comment-alt', 'note-fill'));
+            .call(svgIcon('#iD-icon-note', 'note-fill'));
 
         headerEnter
             .append('div')

svg/fontawesome/fas-comment-alt.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="comment-alt" class="svg-inline--fa fa-comment-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"></path></svg>

svg/iD-sprite/icons/icon-note.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 552 552">
+    <path stroke="inherit" stroke-width="40px" fill="currentColor" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"/>
+</svg>