Styling changes

This came out of a design review session with @tgeorgeux, after he and @ellisonbg had discussed design.

packages/apputils/style/collapse.css

@@ -7,37 +7,30 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  border-top: 1px solid var(--jp-border-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
 }
 
 .jp-Collapse-header {
-  padding: 4px;
-  cursor: pointer;
-  color: var(--jp-ui-font-color0);
+  padding: 4px 12px 4px 12px;
+  color: var(--jp-ui-font-color1);
   background-color: var(--jp-layout-color1);
   font-size: var(--jp-ui-font-size2);
+  background-image: var(--jp-icon-caretdown);
+  background-repeat: no-repeat;
+  background-position-x: right 12px; /* TODO: does not work in Chrome */
 }
 
-.jp-Collapse-open > .jp-Collapse-header {
-  cursor: default;
+.jp-Collapse-header:hover {
+  background-color: var(--jp-layout-color2);
 }
 
-.jp-Collapse .jp-Collapse-header::before {
-  content: '\f0da\00A0'; /* caret-right, non-breaking space */
-  width: 12px;
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.jp-Collapse-open > .jp-Collapse-header::before {
-  content: '\f0d7\00A0'; /* caret-down, non-breaking space */
+.jp-Collapse-open > .jp-Collapse-header {
+  background-image: var(--jp-icon-caretup);
 }
 
 .jp-Collapse-contents {
-  padding: 4px 4px 4px 12px;
+  padding: 4px 12px 4px 12px;
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
   overflow: auto;

packages/codeeditor/style/index.css

@@ -16,8 +16,6 @@
   border-radius: 0px;
   background: var(--jp-layout-color0);
   min-height: 50px;
-  margin-left: 12px;
-  margin-right: 12px;
   padding: 1px;
 }
 

packages/notebook/src/celltools.ts

@@ -489,14 +489,18 @@ export namespace NotebookTools {
      */
     constructor(options: MetadataEditorTool.IOptions) {
       super();
-      const { editorFactory, collapsed } = options;
+      const { editorFactory } = options;
       this.addClass('jp-MetadataEditorTool');
       let layout = (this.layout = new PanelLayout());
       this.editor = new JSONEditor({
         editorFactory
       });
       this.editor.title.label = options.label || 'Edit Metadata';
-      layout.addWidget(new Collapse({ widget: this.editor, collapsed }));
+      const titleNode = new Widget();
+      titleNode.node.textContent = options.label || 'Edit Metadata';
+      layout.addWidget(titleNode);
+      layout.addWidget(this.editor);
+      // layout.addWidget(new Collapse({ widget: this.editor, collapsed }));
     }
 
     /**

packages/notebook/style/index.css

@@ -226,16 +226,12 @@
   background: transparent;
 }
 
-.jp-NotebookTools-tool:not(:nth-child(2)) {
-  border-top: var(--jp-border-width) solid var(--jp-border-color2);
-}
-
 .jp-MetadataEditorTool {
   flex-direction: column;
 }
 
 .jp-KeySelector {
-  padding: 12px;
+  padding: 0px 12px 0 12px;
 }
 
 .jp-KeySelector select.jp-mod-styled {