Fixing styling of NBToolbar.

src/notebook/notebook/default-toolbar.ts

@@ -73,12 +73,12 @@ const TOOLBAR_RESTART = 'jp-NBToolbar-restart';
 /**
  * The class name added to toolbar cell type dropdown wrapper.
  */
-const TOOLBAR_CELL_WRAP = 'jp-NBToolbar-cellWrapper';
+const TOOLBAR_CELLTYPE = 'jp-NBToolbar-cellType';
 
 /**
  * The class name added to toolbar cell type dropdown.
  */
-const TOOLBAR_CELL = 'jp-NBToolbar-cellType';
+const TOOLBAR_CELLTYPE_DROPDOWN = 'jp-NBToolbar-cellTypeDropdown';
 
 /**
  * The class name added to toolbar kernel name text.
@@ -257,7 +257,7 @@ class CellTypeSwitcher extends Widget {
       option.textContent = t;
       select.appendChild(option);
     }
-    select.className = TOOLBAR_CELL;
+    select.className = TOOLBAR_CELLTYPE_DROPDOWN;
     div.appendChild(select);
     return div;
   }
@@ -267,7 +267,7 @@ class CellTypeSwitcher extends Widget {
    */
   constructor(panel: NotebookPanel) {
     super();
-    this.addClass(TOOLBAR_CELL_WRAP);
+    this.addClass(TOOLBAR_CELLTYPE);
     let select = this.node.firstChild as HTMLSelectElement;
     // Set the initial value.
     let index = panel.content.activeCellIndex;

src/notebook/theme.css

@@ -158,6 +158,7 @@
     background-color: #F8F8F8;
     border-top: none;
     border-bottom: 1px solid #E0E0E0;
+    height: 24px;
 }
 
 
@@ -167,48 +168,47 @@
     padding-right: 8px;
     vertical-align: middle;
     font-size: 13px;
+    color: #616161;
+    line-height: 23px;
     font-family: "Helvetica Neue";
-    color: #767676;
 }
 
 
 .jp-NBToolbar-item.jp-NBToolbar-button,
 .jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
     font-family: FontAwesome;
-    padding-top: 5px;
-    padding-bottom: 6px;
-    color: #616161;
     text-align: center;
     display: inline-block;
 }
 
 
-.jp-NBToolbar-item.jp-NBToolbar-cellWrapper {
+.jp-NBToolbar-item.jp-NBToolbar-cellType {
     border-left: 1px solid #E0E0E0;
     border-right: 1px solid #E0E0E0;
     flex-basis: 100px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-}
-
-
-.jp-NBToolbar-cellType.jp-NBToolbar-item {
-    font-size: 13px;
-    font-family: "Helvetica Neue";
-    color: #767676;
 }
 
 
-.jp-NBToolbar-cellWrapper .jp-NBToolbar-cellType {
+.jp-NBToolbar-cellType .jp-NBToolbar-cellTypeDropdown {
     border: none;
     border-radius: 0;
     outline: none;
     width: 100%;
+    font-size: 13px;
+    line-height: 23px;
+    color: #616161;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelName {
+    text-align: right;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 
 
 .jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
-  border-right: none;
+    border-right: none;
 }
 
 
@@ -224,16 +224,6 @@
 }
 
 
-.jp-NBToolbar-item.jp-NBToolbar-kernelName {
-    text-align: right;
-    color: #767676;
-    flex-grow: 1;
-    flex-shrink: 1;
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
-
-
 .jp-NBToolbar-button.jp-NBToolbar-save::before {
    content: "\f0c7";  /* Save */
 }