Change logo for tour dialog at the beginning of spyder

[juanis2112]

The idea is to design a logo for the new dialog added in https://github.com/spyder-ide/spyder/pull/13953 to make it more appealing and "fun".

[isabela-pf]

There’s a few directions we could go with this icon depending on what part of the message we want to emphasize and how we think they look. Quick note: these icons are designed in the same style as the work being done on #11 and #14. I also started with them sharing the same color, but I’m not sure if I like the contrast for this dialog since a dialog is designed to stand out while the work for empty panes is meant to not distract until a user is ready to explore that pane. That’s why there are two color options (both tied to the color work happening on #13).

The main concept I had to emphasize the tour was a map. The first version is supposed to be like exploring a map, though with magnifying glasses being so closely tied to search features, I could see this not being chosen.

Another idea with the map is to emphasize how the tour shows the user where they are.

We could also focus on the “welcome” part of the message and go with a simple hand wave. Yes it doesn’t emphasize the tour, but I do like that it feels human and easy enough to recognize that this is ideal for people new to Spyder.

Finally, I wanted to show the binoculars work since we discussed it when meeting along with the concept of exploring space. This is the best angle for them to actually look like binoculars, but having any setting around it doesn’t work with the small space/icon role. Even though this isn’t the option I’d recommend, I wanted to include it to follow up on our discussion.

[ccordoba12]

Hey @isabela-pf, thanks a lot for your work on this! These are the ones I like the most:

I especially like the saluting hand, I agree it feels human and welcoming. What you think about using both? One to the left and the other to the right of the text? I think they both apply because we're welcoming people and telling them about the tour at the same time.

I also started with them sharing the same color, but I’m not sure if I like the contrast for this dialog since a dialog is designed to stand out while the work for empty panes is meant to not distract until a user is ready to explore that pane

I also think that using a more contrasting shade of blue looks better. But I'm not sure about a shade leaning towards cyan. Let's see what @juanis2112 and @steff456 think about it.

[isabela-pf]

Based on their feedback, we're going more towards the map but adding in some of the details from other options. I also made a few changes to try and make the dialog a little more prominent, mainly making the dialog larger and giving it larger margins so it feels less crowded.

As for color, we agreed on going with the lighter option. I also toned down the cyan and made it a little more pure blue.

I can't think of any other ways to make the tour more prominent based on existing Spyder interactions. I don't think it should be more disruptive than a standard dialog, since any fresh install of Spyder will bring it up and many users might not need it. If it does end up happening, I do think it could work as a notification (like discussed in #8) because then the tour can be put off but still saved for later in the center. Looking like this:

[ccordoba12]

Based on their feedback, we're going more towards the map but adding in some of the details from other options. I also made a few changes to try and make the dialog a little more prominent, mainly making the dialog larger and giving it larger margins so it feels less crowded.

Thanks for your help @isabela-pf! Looks good to me now.

@juanis2112, @steff456, what do you think?

[juanis2112]

I think this looks great! Thanks Isabella! Let me know @steff456 and @ccordoba12 if I can tag this as ready for implementation and do it as soon as possible so we can have it for Spyder 4.2

[ccordoba12]

Please proceed with the implementation @juanis2112. If @steff456 has additional comments, she can leave them in the corresponding PR.