Change fullscreen sim button to use arrows

[srietkerk]

Closes microsoft/pxt-arcade#7229. It might be good to have someone else try to build this locally since the svgs look a little wonky.. I originally got the icons from font awesome and had copilot change the dimensions/resolution which is why it looks so zoomed in. I needed to make the edits to the icons because they were too small originally.

Upload target: https://arcade.makecode.com/app/8f84624f977576ef9912f0d082e2e0c2239e7a4d-efc73b318c#editor

[Copilot]

Copilot wasn't able to review any files in this pull request.

[riknoll]

@srietkerk which version of fontawesome did you take these from? if it's the version we already include, you should be able to just change the button's icon css class to reference the fontawesome icon and remove these files from the svgicon directory entirely.

if these aren't present in our version of fontawesome, then you're going to have to change the icons. these are not resized correctly. i suggest opening them in inkscape and making whatever adjustments you need manually

[srietkerk]

I think I just pulled from the latest version, but it looks like there is a version of these arrows in the version that we use as well. Is it possible to have a Semantic UI button reference fontawesome icons?

[srietkerk]

Nevermind, I think I see what you mean. I'm testing it now.

[srietkerk]

Alright, made the change to just use the font awesome font library. Here's what it looks like:
Tutorial/smaller sim view:

Editor:

[riknoll]

@srietkerk is there a reason you're making this icon bigger than the other icons?

[srietkerk]

It doesn't have to be, it's kinda just a personal preference. This is without the size being modified for the regular view and I just think it's hard to tell what it is, especially with all the extra stuff that's happening in the editor.

[srietkerk]

I think the minimize icon is worse as well:

[riknoll]

i think we should keep the icon size consistent. if we want to change it, we should change all of them

[srietkerk]

Sizing fixed
upload target: https://arcade.makecode.com/app/9e05c21c91f0d446cdd5f0b78aa3a2d1154eb198-a0a16f514a#

[Jaqster]

This is a minor comment, but is there any way to make the arrows point in the same direction as the ones on YouTube? Just thinking that the more we can create familiar icons, the easier it will be for people to recognize what they mean...

[riknoll]

@srietkerk you can add the fa-flip-horizontal class to flip them horizontally. also, i think the opacity of all the other icons is set to 0.9, so this one should be too

[srietkerk]

Alrighty, flipped the arrows and decreased the opacity of the icon.