added styling for filebrowser context menu item icons

packages/filebrowser-extension/src/index.ts

@@ -408,7 +408,7 @@ function activateShareFile(
     isVisible: () =>
       !!tracker.currentWidget &&
       toArray(tracker.currentWidget.selectedItems()).length === 1,
-    icon: linkIcon,
+    icon: linkIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Copy Shareable Link'
   });
 }
@@ -436,7 +436,7 @@ function addCommands(
         return widget.delete();
       }
     },
-    icon: closeIcon,
+    icon: closeIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Delete',
     mnemonic: 0
   });
@@ -449,7 +449,7 @@ function addCommands(
         return widget.copy();
       }
     },
-    icon: copyIcon,
+    icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Copy',
     mnemonic: 0
   });
@@ -462,7 +462,7 @@ function addCommands(
         return widget.cut();
       }
     },
-    icon: cutIcon,
+    icon: cutIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Cut'
   });
 
@@ -474,7 +474,7 @@ function addCommands(
         return widget.download();
       }
     },
-    icon: downloadIcon,
+    icon: downloadIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Download'
   });
 
@@ -486,7 +486,7 @@ function addCommands(
         return widget.duplicate();
       }
     },
-    icon: copyIcon,
+    icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Duplicate'
   });
 
@@ -635,7 +635,7 @@ function addCommands(
         )
       );
     },
-    icon: addIcon,
+    icon: addIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Open in New Browser Tab',
     mnemonic: 0
   });
@@ -653,7 +653,7 @@ function addCommands(
           Clipboard.copyToSystem(url);
         });
     },
-    icon: copyIcon,
+    icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Copy Download Link',
     mnemonic: 0
   });
@@ -666,7 +666,7 @@ function addCommands(
         return widget.paste();
       }
     },
-    icon: pasteIcon,
+    icon: pasteIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Paste',
     mnemonic: 0
   });
@@ -679,7 +679,7 @@ function addCommands(
         return widget.createNewDirectory();
       }
     },
-    icon: newFolderIcon,
+    icon: newFolderIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'New Folder'
   });
 
@@ -694,7 +694,7 @@ function addCommands(
         ext: 'txt'
       });
     },
-    icon: textEditorIcon,
+    icon: textEditorIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'New File'
   });
 
@@ -709,7 +709,7 @@ function addCommands(
         ext: 'md'
       });
     },
-    icon: markdownIcon,
+    icon: markdownIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'New Markdown File'
   });
 
@@ -721,7 +721,7 @@ function addCommands(
         return widget.rename();
       }
     },
-    icon: editIcon,
+    icon: editIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Rename',
     mnemonic: 0
   });
@@ -742,7 +742,7 @@ function addCommands(
     isVisible: () =>
       !!tracker.currentWidget &&
       tracker.currentWidget.selectedItems().next !== undefined,
-    icon: fileIcon,
+    icon: fileIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Copy Path'
   });
 
@@ -784,7 +784,7 @@ function addCommands(
         return widget.shutdownKernels();
       }
     },
-    icon: stopIcon,
+    icon: stopIcon.bindprops({ justify: 'center', kind: 'menuItem' }),
     label: 'Shut Down Kernel'
   });
 

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

@@ -22,6 +22,7 @@ export type IconKindType =
   | 'listing'
   | 'listingHeaderItem'
   | 'mainAreaTab'
+  | 'menuItem'
   | 'runningItem'
   | 'select'
   | 'settingsEditor'
@@ -91,6 +92,11 @@ const iconCSSMainAreaTab: NestedCSSProperties = {
   }
 };
 
+const iconCSSMenuItem: NestedCSSProperties = {
+  height: '16px',
+  width: '16px'
+};
+
 const iconCSSRunningItem: NestedCSSProperties = {
   height: '16px',
   width: '16px'
@@ -135,6 +141,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   listing: iconCSSListing,
   listingHeaderItem: iconCSSlistingHeaderItem,
   mainAreaTab: iconCSSMainAreaTab,
+  menuItem: iconCSSMenuItem,
   runningItem: iconCSSRunningItem,
   select: iconCSSSelect,
   settingsEditor: iconCSSSettingsEditor,
@@ -198,6 +205,11 @@ const containerCSSMainAreaTab: NestedCSSProperties = {
   }
 };
 
+const containerCSSMenuItem: NestedCSSProperties = {
+  display: 'inline-block',
+  verticalAlign: 'middle'
+};
+
 const containerCSSRunningItem: NestedCSSProperties = {
   margin: '0px 4px 0px 12px'
 };
@@ -269,6 +281,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   listing: containerCSSListing,
   listingHeaderItem: containerCSSListingHeaderItem,
   mainAreaTab: containerCSSMainAreaTab,
+  menuItem: containerCSSMenuItem,
   runningItem: containerCSSRunningItem,
   select: containerCSSSelect,
   settingsEditor: containerCSSSettingsEditor,