Center icons in status bar.

packages/notebook/src/truststatus.tsx

@@ -51,7 +51,7 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   const source = cellTrust(props)[1];
-  return <IconItem source={source} offset={{ x: 0, y: 2 }} />;
+  return <IconItem source={source} />;
 }
 
 /**

packages/statusbar/src/components/icon.tsx

@@ -26,16 +26,10 @@ export namespace IconItem {
  * A functional tsx component for an icon.
  */
 export function IconItem(
-  props: IconItem.IProps &
-    React.HTMLAttributes<HTMLDivElement> & {
-      offset: { x: number; y: number };
-    }
+  props: IconItem.IProps & React.HTMLAttributes<HTMLDivElement>
 ): React.ReactElement<IconItem.IProps> {
-  const { source, className, offset, ...rest } = props;
+  const { source, className, ...rest } = props;
   return (
-    <div
-      className={classes(className, source, style(icon(offset)))}
-      {...rest}
-    />
+    <div className={classes(className, source, style(icon()))} {...rest} />
   );
 }

packages/statusbar/src/defaults/runningSessions.tsx

@@ -34,11 +34,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconItem source={'jp-StatusItem-terminal'} offset={{ x: 1, y: 3 }} />
+        <IconItem source={'jp-StatusItem-terminal'} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconItem source={'jp-StatusItem-kernel'} offset={{ x: 0, y: 2 }} />
+        <IconItem source={'jp-StatusItem-kernel'} />
       </GroupItem>
     </GroupItem>
   );

packages/statusbar/src/style/icon.ts

@@ -4,12 +4,11 @@
 import vars from './variables';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
-export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
+export default (): NestedCSSProperties => {
   return {
     backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
     backgroundSize: vars.iconImageSize,
-    backgroundPositionY: y !== 0 ? `${y}px` : undefined,
-    backgroundPositionX: x !== 0 ? `${x}px` : undefined,
     minHeight: vars.height,
     width: vars.iconWidth
   };

packages/statusbar/src/style/text.ts

@@ -11,6 +11,6 @@ export const baseText: NestedCSSProperties = {
 };
 
 export const textItem = style(baseText, {
-  lineHeight: '26px',
+  lineHeight: '24px',
   color: vars.textColor
 });