Add header close 'X' button, add grey hover styling

modules/ui/note_editor.js

@@ -4,9 +4,10 @@ import { select as d3_select } from 'd3-selection';
 import { t } from '../util/locale';
 import { services } from '../services';
 
+import { modeBrowse } from '../modes';
+import { svgIcon } from '../svg';
 import { uiNoteComments } from './note_comments';
 import { uiNoteHeader } from './note_header';
-
 import {
     utilNoAuto,
     utilRebind
@@ -24,9 +25,17 @@ export function uiNoteEditor(context) {
         var header = selection.selectAll('.header')
             .data([0]);
 
-        header.enter()
+        var enter = header.enter()
             .append('div')
-            .attr('class', 'header fillL')
+            .attr('class', 'header fillL');
+
+        enter
+            .append('button')
+            .attr('class', 'fr note-editor-close')
+            .on('click', function() { context.enter(modeBrowse(context)); })
+            .call(svgIcon('#iD-icon-close'));
+
+        enter
             .append('h3')
             .text(t('note.title'));
 

modules/ui/sidebar.js

@@ -34,7 +34,11 @@ export function uiSidebar(context) {
                 var notes = d3_selectAll('.note');
                 notes
                     .classed('hovered', function(d) { return d === what; });
-                context.ui().sidebar.show(noteEditor.note(what));
+
+                sidebar.show(noteEditor.note(what));
+
+                selection.selectAll('.sidebar-component')
+                    .classed('inspector-hover', true);
 
             } else if (!_current && context.hasEntity(what)) {
                 featureListWrap
@@ -65,7 +69,7 @@ export function uiSidebar(context) {
                 _wasNote = false;
                 d3_selectAll('.note')
                     .classed('hovered', false);
-                context.ui().sidebar.hide();
+                sidebar.hide();
             }
         }