Merge pull request #6672 from ellisonbg/more-icon-work

More icon fixes

packages/application/style/icons.css

@@ -107,6 +107,10 @@
   background-image: var(--jp-icon-circle);
 }
 
+.jp-FilterListIcon {
+  background-image: var(--jp-icon-filter-list);
+}
+
 .jp-FolderIcon {
   background-image: var(--jp-icon-folder);
 }

packages/apputils/style/commandpalette.css

@@ -105,10 +105,18 @@
   background: var(--jp-layout-color2);
 }
 
-.p-CommandPalette-header:hover::before {
-  content: '\2026'; /* ellipsis */
+.p-CommandPalette-header:hover::after {
+  content: '';
+  min-width: 12px;
+  min-height: 12px;
+  background-size: 14px;
+  margin-right: 16px;
   float: right;
-  margin-right: 4px;
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: var(--jp-icon-filter-list);
 }
 
 .p-CommandPalette-header > mark {

packages/notebook/src/default-toolbar.tsx

@@ -286,6 +286,9 @@ export class CellTypeSwitcher extends ReactWidget {
         onChange={this.handleChange}
         onKeyDown={this.handleKeyDown}
         value={value}
+        iconProps={{
+          icon: <span className="jp-MaterialIcon jp-DownCaretIcon bp3-icon" />
+        }}
         aria-label="Cell type"
         minimal
       >

packages/theme-dark-extension/style/icons/md/ic_filter_list_24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#e0e0e0" width="24" height="24" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>

packages/theme-dark-extension/style/urls.css

@@ -56,6 +56,7 @@
   --jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg');
   --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
   --jp-icon-file: url('icons/jupyter/file.svg');
+  --jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');
   --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
   --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
   --jp-icon-home: url('icons/md/ic_home_24px.svg');

packages/theme-light-extension/style/icons/md/ic_filter_list_24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#616161" width="24" height="24" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>

packages/theme-light-extension/style/urls.css

@@ -55,6 +55,7 @@
   --jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg');
   --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
   --jp-icon-file: url('icons/jupyter/file.svg');
+  --jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');
   --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
   --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
   --jp-icon-home: url('icons/md/ic_home_24px.svg');

packages/ui-components/style/base.css

@@ -48,12 +48,14 @@ a:hover {
   outline-offset: unset;
   -moz-outline-radius: unset;
 }
+
 /* Styles for ui-components */
 .jp-Button {
   border-radius: var(--jp-border-radius);
   padding: 0px 12px;
   font-size: var(--jp-ui-font-size1);
 }
+
 /* Use our own theme for hover styles */
 button.jp-Button.bp3-button.bp3-minimal:hover {
   background-color: var(--jp-layout-color2);
@@ -65,6 +67,7 @@ button.jp-Button.bp3-button.bp3-minimal:hover {
 .jp-Button.jp-ToolbarButtonComponent {
   text-transform: none;
 }
+
 .jp-InputGroup input {
   box-sizing: border-box;
   border-radius: 0;
@@ -78,16 +81,20 @@ button.jp-Button.bp3-button.bp3-minimal:hover {
       var(--jp-input-active-box-shadow-color),
     inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
 }
+
 .jp-InputGroup input::placeholder,
 input::placeholder {
   color: var(--jp-ui-font-color3);
 }
+
 .jp-Icon {
   color: var(--jp-layout-color4);
 }
+
 .jp-InputGroupAction {
   padding: 6px;
 }
+
 .jp-HTMLSelect.bp3-html-select.bp3-minimal select {
   height: 24;
   font-size: var(--jp-ui-font-size1);
@@ -96,6 +103,7 @@ input::placeholder {
   display: block;
   color: var(--jp-ui-font-color0);
 }
+
 /* Use our own theme for hover styles */
 .jp-HTMLSelect.bp3-html-select.bp3-minimal select:hover {
   color: var(--jp-ui-font-color0);