New icons of panes for webpage

[juanis2112]

We will use icons for empty panes and for the components sections of the webpage https://www.spyder-ide.org.

• Plots
• Variable Explorer (Modify it)
• Profiler (Modify)
• Code analysis
• Projects
• Find
• Editor
• Console
• Debugger
• Help

[isabela-pf]

My initial work on this topic is in #11, but I am reiterating info here since some of the work in empty panes is able to apply for the main Spyder website. Since these were made first for empty panes, they will need some editing to make their details match the icons currently on the website if we do not want to replace the full set.

I've been experimenting with two illustration styles for empty panes. First is an approximation of what each given pane will look like when in use.

Plots

Variable Explorer

Code Analysis

Proflier

Second is a less literal approach that is more playful and focused on what users might use the pane for rather than how it looks.

Plots

Variable Explorer

This one still needs a lot of work if we like this direction.

Code Analysis

Proflier

[juanis2112]

We like the second set of icons

[isabela-pf]

This is close! Though the Spyder page is no longer using red icons, so icons will be adapted to look more like this:

The above list checked off based on #51's progress

• [x] Plots
• [x] Variable Explorer (Modify it)
• [x] Profiler (Modify)
• [x] Code analysis
• [x] Projects
• [x] Find
• [ ] Editor
• [ ] Console
• [ ] Debugger
• [ ] Help

Breakpoints is almost decided. You can track the work from this comment on #11 and below.

[isabela-pf]

I'm back again with some rough ideas for the editor, console, and help illustrations! Feedback is welcome.

Editor

I haven't found a solution I like more than the pencil and file combination. So these options are a lot like the current illustrations, just updated to match this new styling.

I've included both one and two file options because I felt like the one file was a little unbalanced.

Console

I've been having a hard time coming up with good options for the console. I don't really like either of these, but here are two options so I can hear what you all think would be appropriate.

Help

In the past (in meetings) we discussed help using a question mark, so I've pulled that back in.

The sparkles should probably be outside the speech bubble, but I thought I'd provide the other option in case others thought it made more sense to keep the question mark and sparkles close together.

Debugger

This can likely use the breakpoints option we've been working on at #11. Please let me know if that seems appropriate by reviewing it on this comment and below.