I'm disappointed that this CSS ever worked

I'm not sure why I thought the sprite highlight box extended outside the
stage

The Stage component will sometimes have a color picker background,
which darkens the entire screen when the color picker loupe is active.
This color picker background element should appear in the same level as
the stage's wrapper, not inside of it. Previously, this was done by
wrapping both the stage's wrapper and color picker background in a div.
Now, they're both wrapped in a React.Fragment to avoid a completely
unnecessary div wrapper.

This makes the layout behavior for stage overlays much more consistent.

Items whose overflow *should* be contained within the stage, like the
monitors and color picker loupe, are now placed within the "stage"
element directly.

Items whose overflow should *not* be contained within the stage, like
the target highlight box and dragged sprite, are now inside a "stage
overlays" container element, which is properly positioned (taking into
account the stage's border width) and sized.

This is made possible by unifying stage layout across both fullscreen &
non-fullscreen modes via moving the fullscreen overlay styles to the
StageWrapper component. Whereas previously, the stage overlays were
positioned *outside* of the stage in fullscreen and had to reposition
themselves correctly, they are now positioned the same in both
fullscreen and regular modes.

The stage + target pane wrapper's width must be constrained to that of
the stage, even when there are lots of sprite tiles. Otherwise, once you
add enough sprites, it'll grow horizontally past the stage size. The old
code set its maximum width explicitly to stop that from happening, but
it can also be done more elegantly with the flex-basis property.
This also has the benefit of taking the stage border width into account.

draft of refactor to make custom confirm modal work for upload; need to further edit sb-file-uploader

Add support for custom confirm modal to sb-file-uploader

Show custom confirm modal when confirming project upload

got custom upload refactor of file upload working, and tested failure case

cleaned up debug code, make project file upload work

simplified logic around canceling file upload

removed old sb-file-uploader.jsx; fixed linter errors

reverted two components to use old strings, not shared

(can do that refactor another time)

removed unnecessary confirm container

removed stray comment

moved, updated sb file uploader tests, related project state tests

removed custom modal, to reduce scope of changes

sb file uploader test uses intl

This reverts commit 45cb96f2.

Also noticed that Delete aria label was not localized.

Use the classNames feature to include/exclude a class based on a boolean instead of ternary operator

* split play-button into container and component
* revised sound library tile:
  * play button in upper right
  * smaller sound icon (make the tile less loaded)

Play button doesn’t have a ‘touch-outside’ listener to stop sounds. That seems to be ok as other events cause the sound to stop.

Both handleClick and handleMouseDown are needed. Must use handleMouseDown for `preventDefault` to skip setting focus on the item. handleClick is needed to prevent the Click from propagating to the item and selecting it.

Update UI play/stop button when the sound ends

Play button is larger (easier to touch). Can both start and stop sounds.
Sound doesn’t restart on mouseEnter if the sound is already playing.
Sound stops if you move off play button

Missing: stop button does not revert to play button when the sound finishes.

Checked with Carl and updated the style of the play button.

Add prop to library items to show a play button. If a play button is present the ‘play on hover’ only applies over the icon rather than the full tile.

If the delete button is the current active element (e.g. focused by tab) make hitting ‘space’ or ‘Enter’ do the actual delete.

Don’t use default focus style it’s ugly.

Don’t allow the image to be dragged.