New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Replace Virtual Paper Colored Squares with Icons #232
Comments
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 paper-land/client/camera/DebugProgram.css Lines 22 to 56 in 045cb2a
|
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:
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! |
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!
The text was updated successfully, but these errors were encountered: