fixed styling of tab manager tab icons

packages/docregistry/src/registry.ts

@@ -1206,7 +1206,7 @@ export namespace DocumentRegistry {
     extensions: [],
     mimeTypes: [],
     iconClass: '',
-    iconPass: fileIcon.phosphor({ kind: 'dockPanelBar', center: true }),
+    iconPass: fileIcon.phosphor({ kind: 'mainAreaTab', center: true }),
     iconLabel: '',
     contentType: 'file',
     fileFormat: 'text'
@@ -1257,7 +1257,7 @@ export namespace DocumentRegistry {
     extensions: ['.ipynb'],
     contentType: 'notebook',
     fileFormat: 'json',
-    iconPass: notebookIcon.phosphor({ kind: 'dockPanelBar', center: true })
+    iconPass: notebookIcon.phosphor({ kind: 'mainAreaTab', center: true })
   };
 
   /**
@@ -1269,7 +1269,7 @@ export namespace DocumentRegistry {
     extensions: [],
     mimeTypes: ['text/directory'],
     contentType: 'directory',
-    iconPass: folderIcon.phosphor({ kind: 'dockPanelBar', center: true })
+    iconPass: folderIcon.phosphor({ kind: 'mainAreaTab', center: true })
   };
 
   /**
@@ -1284,56 +1284,56 @@ export namespace DocumentRegistry {
       displayName: 'Markdown File',
       extensions: ['.md'],
       mimeTypes: ['text/markdown'],
-      iconPass: markdownIcon.phosphor({ kind: 'dockPanelBar', center: true })
+      iconPass: markdownIcon.phosphor({ kind: 'mainAreaTab', center: true })
     },
     {
       name: 'python',
       displayName: 'Python File',
       extensions: ['.py'],
       mimeTypes: ['text/x-python'],
-      iconPass: pythonIcon.phosphor({ kind: 'dockPanelBar', center: true })
+      iconPass: pythonIcon.phosphor({ kind: 'mainAreaTab', center: true })
     },
     {
       name: 'json',
       displayName: 'JSON File',
       extensions: ['.json'],
       mimeTypes: ['application/json'],
-      iconPass: jsonIcon.phosphor({ kind: 'dockPanelBar', center: true })
+      iconPass: jsonIcon.phosphor({ kind: 'mainAreaTab', center: true })
     },
     {
       name: 'csv',
       displayName: 'CSV File',
       extensions: ['.csv'],
       mimeTypes: ['text/csv'],
-      iconPass: spreadsheetIcon.phosphor({ kind: 'dockPanelBar', center: true })
+      iconPass: spreadsheetIcon.phosphor({ kind: 'mainAreaTab', center: true })
     },
     {
       name: 'tsv',
       displayName: 'TSV File',
       extensions: ['.tsv'],
       mimeTypes: ['text/csv'],
-      iconPass: spreadsheetIcon.phosphor({ kind: 'dockPanelBar', center: true })
+      iconPass: spreadsheetIcon.phosphor({ kind: 'mainAreaTab', center: true })
     },
     {
       name: 'r',
       displayName: 'R File',
       mimeTypes: ['text/x-rsrc'],
       extensions: ['.r'],
-      iconPass: rKernelIcon.phosphor({ kind: 'dockPanelBar', center: true })
+      iconPass: rKernelIcon.phosphor({ kind: 'mainAreaTab', center: true })
     },
     {
       name: 'yaml',
       displayName: 'YAML File',
       mimeTypes: ['text/x-yaml', 'text/yaml'],
       extensions: ['.yaml', '.yml'],
-      iconPass: yamlIcon.phosphor({ kind: 'dockPanelBar', center: true })
+      iconPass: yamlIcon.phosphor({ kind: 'mainAreaTab', center: true })
     },
     {
       name: 'svg',
       displayName: 'Image',
       mimeTypes: ['image/svg+xml'],
       extensions: ['.svg'],
-      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
+      iconPass: imageIcon.phosphor({ kind: 'mainAreaTab', center: true }),
       fileFormat: 'base64'
     },
     {
@@ -1342,7 +1342,7 @@ export namespace DocumentRegistry {
       mimeTypes: ['image/tiff'],
       extensions: ['.tif', '.tiff'],
       iconClass: 'jp-MaterialIcon jp-ImageIcon',
-      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
+      iconPass: imageIcon.phosphor({ kind: 'mainAreaTab', center: true }),
       fileFormat: 'base64'
     },
     {
@@ -1350,7 +1350,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/jpeg'],
       extensions: ['.jpg', '.jpeg'],
-      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
+      iconPass: imageIcon.phosphor({ kind: 'mainAreaTab', center: true }),
       fileFormat: 'base64'
     },
     {
@@ -1358,7 +1358,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/gif'],
       extensions: ['.gif'],
-      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
+      iconPass: imageIcon.phosphor({ kind: 'mainAreaTab', center: true }),
       fileFormat: 'base64'
     },
     {
@@ -1366,7 +1366,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/png'],
       extensions: ['.png'],
-      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
+      iconPass: imageIcon.phosphor({ kind: 'mainAreaTab', center: true }),
       fileFormat: 'base64'
     },
     {
@@ -1374,7 +1374,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/bmp'],
       extensions: ['.bmp'],
-      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
+      iconPass: imageIcon.phosphor({ kind: 'mainAreaTab', center: true }),
       fileFormat: 'base64'
     }
   ];

packages/fileeditor/src/widget.ts

@@ -327,7 +327,7 @@ export class FileEditorFactory extends ABCWidgetFactory<
     });
 
     content.title.iconPass = textEditorIcon.phosphor({
-      kind: 'dockPanelBar',
+      kind: 'mainAreaTab',
       center: true
     });
 

packages/ui-components/src/style/icon.ts

@@ -17,15 +17,14 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
  */
 export type IconKindTypeStr =
   | 'breadCrumb'
-  | 'dockPanelBar'
   | 'launcherCard'
   | 'launcherSection'
   | 'listing'
+  | 'mainAreaTab'
   | 'settingsEditor'
   | 'sideBar'
   | 'splash'
   | 'statusBar'
-  | 'tabManager'
   | 'toolbarButton';
 
 export type IconKindType = IconKindTypeStr | undefined;
@@ -82,11 +81,6 @@ const iconCSSBreadCrumb: NestedCSSProperties = {
   }
 };
 
-const iconCSSDockPanelBar: NestedCSSProperties = {
-  height: '14px',
-  width: '14px'
-};
-
 const iconCSSLauncherCard: NestedCSSProperties = {
   height: 'var(--jp-private-launcher-large-icon-size)',
   width: 'var(--jp-private-launcher-large-icon-size)'
@@ -103,6 +97,19 @@ const iconCSSListing: NestedCSSProperties = {
   width: '16px'
 };
 
+const iconCSSMainAreaTab: NestedCSSProperties = {
+  $nest: {
+    '.p-DockPanel-tabBar &': {
+      height: '14px',
+      width: '14px'
+    },
+    '#tab-manager &': {
+      height: '16px',
+      width: '16px'
+    }
+  }
+};
+
 const iconCSSSettingsEditor: NestedCSSProperties = {
   height: '16px',
   width: '16px'
@@ -124,11 +131,6 @@ const iconCSSStatusBar: NestedCSSProperties = {
   position: 'relative'
 };
 
-const iconCSSTabManager: NestedCSSProperties = {
-  height: '16px',
-  width: '16px'
-};
-
 const iconCSSToolbarButton: NestedCSSProperties = {
   height: '16px',
   width: '16px'
@@ -136,25 +138,17 @@ const iconCSSToolbarButton: NestedCSSProperties = {
 
 const iconCSSKind: { [k in IconKindTypeStr]: NestedCSSProperties } = {
   breadCrumb: iconCSSBreadCrumb,
-  dockPanelBar: iconCSSDockPanelBar,
   launcherCard: iconCSSLauncherCard,
   launcherSection: iconCSSLauncherSection,
   listing: iconCSSListing,
+  mainAreaTab: iconCSSMainAreaTab,
   settingsEditor: iconCSSSettingsEditor,
   sideBar: iconCSSSideBar,
   splash: iconCSSSplash,
   statusBar: iconCSSStatusBar,
-  tabManager: iconCSSTabManager,
   toolbarButton: iconCSSToolbarButton
 };
 
-/**
- * container kind specific styles
- */
-const containerCSSDockPanelBar: NestedCSSProperties = {
-  marginRight: '4px'
-};
-
 const containerCSSLauncherCard: NestedCSSProperties = {
   height: 'var(--jp-private-launcher-card-icon-height)'
 };
@@ -165,6 +159,21 @@ const containerCSSListing: NestedCSSProperties = {
   position: 'relative'
 };
 
+/**
+ * container kind specific styles
+ */
+const containerCSSMainAreaTab: NestedCSSProperties = {
+  $nest: {
+    '.p-DockPanel-tabBar &': {
+      marginRight: '4px'
+    },
+    '#tab-manager &': {
+      marginRight: '2px',
+      position: 'relative'
+    }
+  }
+};
+
 const containerCSSSettingsEditor: NestedCSSProperties = {
   display: 'inline-block',
   flex: '0 0 20px',
@@ -215,11 +224,6 @@ const containerCSSSplash: NestedCSSProperties = {
   zIndex: 1
 };
 
-const containerCSSTabManager: NestedCSSProperties = {
-  marginRight: '2px',
-  position: 'relative'
-};
-
 const containerCSSToolbarButton: NestedCSSProperties = {
   display: 'inline-block',
   margin: 'auto',
@@ -228,15 +232,14 @@ const containerCSSToolbarButton: NestedCSSProperties = {
 
 const containerCSSKind: { [k in IconKindTypeStr]: NestedCSSProperties } = {
   breadCrumb: {},
-  dockPanelBar: containerCSSDockPanelBar,
   launcherCard: containerCSSLauncherCard,
   launcherSection: {},
   listing: containerCSSListing,
+  mainAreaTab: containerCSSMainAreaTab,
   settingsEditor: containerCSSSettingsEditor,
   sideBar: containerCSSSideBar,
   splash: containerCSSSplash,
   statusBar: {},
-  tabManager: containerCSSTabManager,
   toolbarButton: containerCSSToolbarButton
 };