Improve tab icons in left panel

[gnestor]

Fixes #5269

To do:

• Agree on better icons for left panel tabs
• Improve icon handling in lab so that icon color doesn't need to be hard-coded in SVGs (I'm going to create a new issue for this)

Here are some ideas:

• Commands
  • A menu icon
  • A command line prompt icon
• Running:
  • A play icon icon or play circle icon
  • A stop icon
  • A fast-forward icon
  • A power (on/off icon)
  • A playlist icon
  • A servers icon
  • An eject icon
• Cell inspector:
  • A dials icon
  • A settings icon

One variation:

Another variation:

[ian-r-rose]

My two cents:

• I like the play icon for the "Running" tab. Since the panel also serves to shut down sessions, perhaps a play/pause icon?
• The cog and slider images for the cell tools are a bit confusing, they seem to me like they might open the settings editor. I thought the wrench was okay.
• The command icons are tough. The '>' icon looks a lot like the play icon, which is confusing. The = icon looks kind of like the icon that is used for @jupyterlab/toc, and doesn't really connote commands to me. I don't know that I have a good suggestion here, though.

[gnestor]

I like the play icon for the "Running" tab. Since the panel also serves to shut down sessions, perhaps a play/pause icon?

Play/pause is a good idea 👍

The cog and slider images for the cell tools are a bit confusing, they seem to me like they might open the settings editor. I thought the wrench was okay.

Looks like there is consensus here...

The command icons are tough. The '>' icon looks a lot like the play icon, which is confusing. The = icon looks kind of like the icon that is used for @jupyterlab/toc, and doesn't really connote commands to me. I don't know that I have a good suggestion here, though.

This is tough...

[t-makaro]

I like the idea of play/pause much better than just a play button, but since one can only see and shutdown stuff from the running panel, and not pause/resume it doesn't make total sense. I still like the idea of a power icon, but what about a stop icon?

[gnestor]

I like stop but the material icon for stop is just a square: https://material.io/tools/icons/?search=stop&icon=stop&style=baseline

[mangecoeur]

Nice! Some suggestions:

To avoid confusion with the play/pause button and the console why not use one in a circle:

And/or use a double-chevron for the command palette

[jasongrout]

A double Chevron also reminds me of a command prompt, which is close to commands in my mind.

[t-makaro]

For the running (shutdown/stop menu), we could use a stop icon in a circle:
from here

Just spit balling:

For the command palette:

how about this superpowers icon? The command palette is a place of super powers...

On that same theme: a wand

I was also think about a "remote" icon, but I can't find a nice one that doesn't look like it is sending a signal.

Maybe the adjust icon

[gnestor]

@t-makaro We're currently using Material Icons so let's look for icon candidates in that set vs. Font Awesome 👍

I like the remote control icon for command palette but Material Icons' version is not the best...

I updated the description with suggetions from here and #5269.

[ellisonbg]

I will have a look at this and give some background on how the existing icons were chosen.

[ellisonbg]

Catching up...

• Last summer, we really struggled with the command palette icon. We probably spent 20-30 hours on it. The challenge is that our notion of a "command" is very abstract, and all our attempts to find an icon to represent a command, were too concrete and misleading (too focused on a particular type of action, like code). The idea of the palette was that "here is a set of things you can use in your work." But I agree the palette icon doesn't have a connotation of being somehow related to visual effect or color. I will look through the MD icons again, but this one is really tough.
• For the running panel. I like the ideas being explored here, with some combination of a play or stop button, but a circle around it. The idea I probably like the best is a stop button with a circle around it - as it best matches the action you can take in the panel. I didn't see it in the MD icon set, but we can create it manually with little effort in Figma is there is support for the idea.
• I think we should leave the others as is (cell tools, etc.)

[gnestor]

I've updated this branch so that it only changes the running icon. We can iterate on other sidebar icons.

We have 2 options, the current branch is using "stop circle" icon.

Stop circle icon:

Remove circle icon:

[jasongrout]

Is there still more to do on this PR? I notice the WIP in the title was removed.

[gnestor]

This current branch replaces the running icon with the stop circle icon (which seems like an improvement to me). It's ready to merge 👍

[jasongrout]

Thanks. It seems that there is confusion in the final changes between remove-circle and stop-circle. Can we take out the remove-circle icon if we aren't using it, and change all the wording to stop-circle?

[ian-r-rose]

Can we also remove the CSS classes and SVGs for the "running person" icon?

[ian-r-rose]

Otherwise, I think we should move forwards with this.

[gnestor]

Done!

[jasongrout]

Thanks!