File Browser UX Defect

[tgeorgeux]

Describe the Defect
Icons in the file browser are oddly squared off, leaving the visual design to appear disjointed.

To Reproduce
Steps to reproduce the behavior:

1. Open JupyterLab
2. Navigate the file browser.

Expected behavior
Folders in the file browser should be rectangular and filled, they are square and outline. This is a misuse of the folder_open icon. That icon is used to indicate which of a group of folders are open, not the action of opening a folder. The icons should match the one we used to indicate the root folder in the toolbar above. Another icon here that should be replaced is the raw text icon, it's cut off 2/3 height to be square as well, this should be the shape of page, it currently looks mirrored and rotated 90 degrees. A third icon we could improve (minor gripe) is the python icon could be two-tone. I don't see a heavy benefit of leaving it all blue instead of blue/yellow like the standard python logo/icon (not as big a deal IMO).

Screenshots

Desktop (please complete the following information):

• OS: [OS]
• Browser [Chrome]
• JupyterLab [Developer build]

[ellisonbg]

Also, while I am at it, the folder icon to the left of the breadcrumbs is slightly low:

[jasongrout]

Here is the folder icon in our sources:

https://github.com/jupyterlab/jupyterlab/blob/master/packages/theme-light-extension/style/icons/jupyter/directory.svg

Is that squished to you? If it is, sounds like we need to redesign icons (big project?). If it isn't, then perhaps it is getting squished when put on the page (small project?).

[jasongrout]

And here's the file icon:

https://github.com/jupyterlab/jupyterlab/blob/master/packages/theme-light-extension/style/icons/jupyter/file.svg

[tgeorgeux]

@ellisonbg the folder icon is rendering in the correct alignment on my JupyterLab. But I haven't updated anything since yesterday; maybe it's a regression?

I'm on Chrome {Version 74.0.3729.169 (Official Build) (64-bit)} and the latest OS.

[ellisonbg]

Waiting until #6664 is merged to tackle this. It may have fixed it.

[ellisonbg]

Looks like this got fixed in #6664:

[tgeorgeux]

In the screenshot you show here, the breadcrumbs folder icon is still too low set.

…

On Thu, Jun 20, 2019 at 4:35 PM Brian E. Granger ***@***.***> wrote: Closed #6615 <#6615>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6615?email_source=notifications&email_token=AFIVZQC2UY2D4JCA56YW5R3P3QH23A5CNFSM4HZDJZV2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOSDC6YSQ#event-2428890186>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFIVZQAWCBLCDRWL735H5QDP3QH23ANCNFSM4HZDJZVQ> .

[vidartf]

@tgeorgeux If this was not fixed somewhere else, could you reopen the issue?

[tgeorgeux]

It's not showing up on my computer. I've only ever seen it in screenshots. @ellisonbg can you replicate it with the most updated version?

[vidartf]

So, this is fully fixed?

[ellisonbg]

The icon at the top hasn't been moved up, but all the other icons are fixed.

[vidartf]

Reopened to track the low icon then. Feel free to move to 1.1 if that feels more appropriate.

[tgeorgeux]

Just checked to follow up on this. The folder is still rendering lower than it should:

[tgeorgeux]

Closing for #7575