Final style tuning

Author: fcollonval

src/components/ActionButton.tsx

@@ -1,6 +1,6 @@
+import { LabIcon } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { classes } from 'typestyle';
-import { LabIcon } from '@jupyterlab/ui-components';
 import { actionButtonStyle } from '../style/ActionButtonStyle';
 
 /**
@@ -45,7 +45,7 @@ export const ActionButton: React.FunctionComponent<IActionButtonProps> = (
       title={title}
       onClick={onClick}
     >
-      {LabIcon.resolveReact({ icon })}
+      <LabIcon.resolveReact icon={icon} elementPosition="center" tag="span" />
     </button>
   );
 };

src/components/FilePath.tsx

@@ -39,7 +39,7 @@ export const FilePath: React.FunctionComponent<IFilePathProps> = (
     <React.Fragment>
       <LabIcon.resolveReact
         icon={props.filetype.icon}
-        iconClass={classes(props.filetype.iconClass, fileIconStyle)}
+        className={classes(props.filetype.iconClass, fileIconStyle)}
         elementPosition="center"
         tag="span"
       />

src/style/FileItemStyle.ts

@@ -70,6 +70,5 @@ export const fileButtonStyle = style({
 });
 
 export const gitMarkBoxStyle = style({
-  flex: '0 0 auto',
-  margin: 'auto 8px auto 4px'
+  flex: '0 0 auto'
 });

src/style/FilePathStyle.ts

@@ -3,8 +3,7 @@ import { style } from 'typestyle';
 export const fileIconStyle = style({
   flex: '0 0 auto',
   marginRight: '4px',
-  minHeight: '16px',
-  padding: '0px 8px'
+  minHeight: '16px'
 });
 
 export const fileLabelStyle = style({

src/style/GitStageStyle.ts

@@ -55,5 +55,6 @@ export const changeStageButtonStyle = style({
   height: '13px',
   width: '12px',
   border: 'none',
-  outline: 'none'
+  outline: 'none',
+  paddingLeft: '0px'
 });

src/style/Toolbar.ts

@@ -106,6 +106,12 @@ export const toolbarButtonClass = style({
     },
     '&:active': {
       backgroundColor: 'var(--jp-layout-color3)'
+    },
+
+    '& span': {
+      // Set icon width and centers it
+      margin: 'auto',
+      width: '16px'
     }
   }
 });