Replace Virtual Paper Colored Squares with Icons

[brettfiedler]

Let's add some icons to the virtual papers to make using them less discovery-based.

We can leave the background color and insert the icon with the existing color) and update the style to match the Scissors icon.

Delete (Red Square): Trash icon we use in Creator (white on red) Rotate (Green Square): https://fontawesome.com/icons/arrows-spin?f=classic&s=solid (white on dark green) Stretch (Grey Square): https://fontawesome.com/icons/up-right-and-down-left-from-center?f=classic&s=solid (white on dark grey) Cut: Leave scissors/merge icons as-is, but can we make it a dark blue and make the icon white? Then we'd have all the dot colors used on the virtual papers!

[jessegreenberg]

OK! Done in the above commit. Can you please review? So far we have used bootstrap icons for PP. Can you confirm Font Awesome licensing is OK for PP? I also made the buttons a little bigger.

I am happy to make any other changes, but if you would also like to pixel polish or change colors yourself, you can find them in DebugPrograms.css

https://github.com/phetsims/paper-land/blob/045cb2aaee4f9c33155b7acf9f9a2b506c287160/client/camera/DebugProgram.css#L22-L56

[brettfiedler]

I think that update helps a lot visually. Colors might be okay, but I'll try playing with them later before closing this issue and try to optimize contrast.

Attribution-wise, I only used the FA free icons. So we should be a-okay. If it becomes a problem, then we can locate equivalent Bootstrap icons.

FAs site says:

Attribution Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font Awesome Free files already contain embedded comments with sufficient attribution, so you shouldn't need to do anything additional when using these files normally.

We've kept attribution comments terse, so we ask that you do not actively work to remove them from files, especially code. They're a great way for folks to learn about Font Awesome.

And I can see in, e.g., arrows-spin.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     fill="white"
     viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path d="M256 96c38.4 0 73.7 13.5 101.3 36.1l-32.6 32.6c-4.6 4.6-5.9 11.5-3.5 17.4s8.3 9.9 14.8 9.9H448c8.8 0 16-7.2 16-16V64c0-6.5-3.9-12.3-9.9-14.8s-12.9-1.1-17.4 3.5l-34 34C363.4 52.6 312.1 32 256 32c-10.9 0-21.5 .8-32 2.3V99.2c10.3-2.1 21-3.2 32-3.2zM132.1 154.7l32.6 32.6c4.6 4.6 11.5 5.9 17.4 3.5s9.9-8.3 9.9-14.8V64c0-8.8-7.2-16-16-16H64c-6.5 0-12.3 3.9-14.8 9.9s-1.1 12.9 3.5 17.4l34 34C52.6 148.6 32 199.9 32 256c0 10.9 .8 21.5 2.3 32H99.2c-2.1-10.3-3.2-21-3.2-32c0-38.4 13.5-73.7 36.1-101.3zM477.7 224H412.8c2.1 10.3 3.2 21 3.2 32c0 38.4-13.5 73.7-36.1 101.3l-32.6-32.6c-4.6-4.6-11.5-5.9-17.4-3.5s-9.9 8.3-9.9 14.8V448c0 8.8 7.2 16 16 16H448c6.5 0 12.3-3.9 14.8-9.9s1.1-12.9-3.5-17.4l-34-34C459.4 363.4 480 312.1 480 256c0-10.9-.8-21.5-2.3-32zM256 416c-38.4 0-73.7-13.5-101.3-36.1l32.6-32.6c4.6-4.6 5.9-11.5 3.5-17.4s-8.3-9.9-14.8-9.9H64c-8.8 0-16 7.2-16 16l0 112c0 6.5 3.9 12.3 9.9 14.8s12.9 1.1 17.4-3.5l34-34C148.6 459.4 199.9 480 256 480c10.9 0 21.5-.8 32-2.3V412.8c-10.3 2.1-21 3.2-32 3.2z"/>
</svg>

So we should be good!

[brettfiedler]

@jessegreenberg , I noticed that it's possible (and maybe very easy to), select the icons and drag them away (as though you're going to drag and drop them somewhere) instead of the corners. This is especially noticeable for the rotation icon. Can we make the icons themselves uninteractable?

[jessegreenberg]

I think the above fixes this, anything else @brettfiedler?

[brettfiedler]

Doesn't seem I can hit the issue again! Otherwise all good for this effort. Closing.