From 54e02ec28de0a619cc8117d8a68c7309a98a8c45 Mon Sep 17 00:00:00 2001
From: SilentSpike <SilentSpike100+Github@gmail.com>
Date: Wed, 23 Jan 2019 21:22:04 +0000
Subject: [PATCH] Introduce new container icon for errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As per my last commit, this icon differentiates errors from points and
still allows us to specifiy icons for errors to differentiate them amongst
eachother.

I learned quite a bit about SVGs and using them in HTML while
implementing this 😝Had some issues getting the icon to center in the
header so resorted to using a flexbox instead of absolute positioning
being used elsewhere.
---
 css/65_data.css                 | 12 ++++++++++++
 modules/svg/improveOSM.js       | 18 +++++++++---------
 modules/ui/improveOSM_header.js | 32 ++++++++++++++++++++++++++++----
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/css/65_data.css b/css/65_data.css
index 61073966f..2686d940d 100644
--- a/css/65_data.css
+++ b/css/65_data.css
@@ -42,6 +42,18 @@
     height: 15px;
 }
 
+/* adjustment for error icon */
+
+.kr_error-header-icon .preset-icon-28 {
+    top: auto;
+    left: auto;
+}
+
+.kr_error-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
 /* Keep Right Errors
 ------------------------------------------------------- */
diff --git a/modules/svg/improveOSM.js b/modules/svg/improveOSM.js
index 7f603462b..b9881ff29 100644
--- a/modules/svg/improveOSM.js
+++ b/modules/svg/improveOSM.js
@@ -19,8 +19,8 @@ export function svgImproveOSM(projection, context, dispatch) {
     function markerPath(selection, klass) {
         selection
             .attr('class', klass)
-            .attr('transform', 'translate(-8, -23)')
-            .attr('d', 'M 17,8 C 17,13 11,21 8.5,23.5 C 6,21 0,13 0,8 C 0,4 4,-0.5 8.5,-0.5 C 13,-0.5 17,4 17,8 z');
+            .attr('transform', 'translate(-10, -28)')
+            .attr('points', '16,3 4,3 1,6 1,17 4,20 7,20 10,27 13,20 16,20 19,17.033 19,6');
     }
 
 
@@ -124,25 +124,25 @@ export function svgImproveOSM(projection, context, dispatch) {
             });
 
         markersEnter
-            .append('path')
+            .append('polygon')
             .call(markerPath, 'shadow');
 
         markersEnter
             .append('ellipse')
-            .attr('cx', 0.5)
-            .attr('cy', 1)
-            .attr('rx', 6.5)
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('rx', 4.5)
             .attr('ry', 2)
             .attr('class', 'stroke');
 
         markersEnter
-            .append('path')
+            .append('polygon')
             .attr('fill', 'currentColor')
             .call(markerPath, 'qa_error-fill');
 
         markersEnter
             .append('use')
-            .attr('transform', 'translate(-5, -19)')
+            .attr('transform', 'translate(-5.5, -21)')
             .attr('class', 'icon')
             .attr('width', '11px')
             .attr('height', '11px')
@@ -182,7 +182,7 @@ export function svgImproveOSM(projection, context, dispatch) {
             .attr('width', '20px')
             .attr('height', '30px')
             .attr('x', '-10px')
-            .attr('y', '-26px')
+            .attr('y', '-28px')
             .merge(targets)
             .sort(sortY)
             .attr('class', function(d) {
diff --git a/modules/ui/improveOSM_header.js b/modules/ui/improveOSM_header.js
index 6cff86a93..d33835e23 100644
--- a/modules/ui/improveOSM_header.js
+++ b/modules/ui/improveOSM_header.js
@@ -41,12 +41,36 @@ export function uiImproveOsmHeader() {
             .attr('class', 'kr_error-header-icon')
             .classed('new', function(d) { return d.id < 0; });
 
-        iconEnter
-            .append('div')
+        var svgEnter = iconEnter
+            .append('svg')
+            .attr('width', '20px')
+            .attr('height', '30px')
+            .attr('viewbox', '0 0 20 30')
             .attr('class', function(d) {
                 return 'preset-icon-28 qa_error ' + d.source + ' error_id-' + d.id + ' error_type-' + d.error_type + '-' + d.error_subtype;
-            })
-            .call(svgIcon('#iD-icon-bolt', 'qa_error-fill'));
+            });
+
+        svgEnter
+            .append('polygon')
+            .attr('fill', 'currentColor')
+            .attr('class', 'qa_error-fill')
+            .attr('points', '16,3 4,3 1,6 1,17 4,20 7,20 10,27 13,20 16,20 19,17.033 19,6');
+
+        svgEnter
+            .append('use')
+            .attr('width', '11px')
+            .attr('height', '11px')
+            .attr('transform', 'translate(4.5, 7)')
+            .attr('xlink:href', function(d) {
+                var picon = d.icon;
+
+                if (!picon) {
+                    return '';
+                } else {
+                    var isMaki = /^maki-/.test(picon);
+                    return '#' + picon + (isMaki ? '-11' : '');
+                }
+            });
 
         headerEnter
             .append('div')