Merge pull request #794 from fcollonval/fix-issue-793

Style issues with SVG icons

Author: fcollonval

src/components/FileItem.tsx

@@ -160,7 +160,7 @@ export class FileItem extends React.PureComponent<IFileItemProps> {
     const status = this._getFileChangedLabel(status_code as any);
 
     return (
-      <li
+      <div
         className={this._getFileClass()}
         onClick={
           this.props.selectFile &&
@@ -191,7 +191,7 @@ export class FileItem extends React.PureComponent<IFileItemProps> {
         <span className={this._getFileChangedLabelClass(this.props.file.y)}>
           {this.props.file.y === '?' ? 'U' : status_code}
         </span>
-      </li>
+      </div>
     );
   }
 }

src/components/FilePath.tsx

@@ -1,7 +1,11 @@
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { fileIcon } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { fileLabelStyle, folderLabelStyle } from '../style/FilePathStyle';
+import {
+  fileIconStyle,
+  fileLabelStyle,
+  folderLabelStyle
+} from '../style/FilePathStyle';
 import { extractFilename } from '../utils';
 
 /**
@@ -30,7 +34,11 @@ export const FilePath: React.FunctionComponent<IFilePathProps> = (
 
   return (
     <React.Fragment>
-      <icon.react elementPosition="center" tag="span" />
+      <icon.react
+        className={fileIconStyle}
+        elementPosition="center"
+        tag="span"
+      />
       <span className={fileLabelStyle}>
         {filename}
         <span className={folderLabelStyle}>{folder}</span>

src/components/GitStage.tsx

@@ -85,7 +85,6 @@ export const GitStage: React.FunctionComponent<IGitStageProps> = (
             Math.min(props.height - HEADER_HEIGHT, nFiles * ITEM_HEIGHT),
             ITEM_HEIGHT
           )}
-          innerElementType="ul"
           itemCount={nFiles}
           itemData={props.files}
           itemKey={(index, data) => data[index].to}

src/style/SinglePastCommitInfo.ts

@@ -38,6 +38,7 @@ export const commitDetailHeaderClass = style({
 export const commitDetailFileClass = style({
   display: 'flex',
   flexDirection: 'row',
+  alignItems: 'center',
   color: 'var(--jp-ui-font-color1)',
   height: 'var(--jp-private-running-item-height)',
   lineHeight: 'var(--jp-private-running-item-height)',