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

css/80_app.css

@@ -689,6 +689,7 @@ button.save.has-count .count::before {
 }
 
 .field-help-title button.close,
+.sidebar-component .header button.note-editor-close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
@@ -696,6 +697,7 @@ button.save.has-count .count::before {
     top: 0;
 }
 [dir='rtl'] .field-help-title button.close,
+[dir='rtl'] .sidebar-component .header button.note-editor-close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
@@ -1290,6 +1292,7 @@ a.hide-toggle {
 .inspector-hover .preset-input-wrap .label,
 .inspector-hover .form-field-multicombo,
 .inspector-hover .structure-extras-wrap,
+.inspector-hover .comments-container .comment,
 .inspector-hover input,
 .inspector-hover textarea,
 .inspector-hover label {
@@ -1329,7 +1332,7 @@ a.hide-toggle {
 /* hide but preserve in layout */
 .inspector-hover .entity-editor-pane button.minor,
 .inspector-hover .combobox-caret,
-.inspector-hover .entity-editor-pane .header button,
+.inspector-hover .header button,
 .inspector-hover .spin-control,
 .inspector-hover .form-field-multicombo .chips .remove,
 .inspector-hover .hide-toggle:before,

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();
             }
         }