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.

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.

Fixed some margins, added requires/collab library item section, and reminders to make extension/metadata-only.

* Fix all the little RTL layout bugs

- [ ] borders on toolbox and workspace mirror correctly
- [ ] spacing on stage selector is correct
- [ ] stage size icons are mirrored
- [ ] extension library coming soon text is positioned correctly
- [ ] only mirror blocks icon on the tab (others stay right-handed)
- [ ] drop down icon in create variable modal has correct spacing

* FIx RTL backpack header border-radius

* round the bottom corner of paint/sound editors

This makes the editor’s asset panels match the blocks.

* WIP tips

* WIP first card stack

* WIP use tips reducer to show things to try

* single card deck similar to mask sequence

* collapse option

* Add zoom card

* WIP tips

* Reorganized to redux

* Add zooming to the gifs

* Blue cards + navigation

* Add tips to new nav bar

* Remove blue

* Update design with icons

* deck updates wip

* Updated card decks

* Add videos to libraries

* Update initial card and clicker preview

* Add backdrop to initial card step.

* WIP use vimeo player instead

* New simple spin deck

* Spin around and say hello decks

* Update button and sub-card styles

* Fix "tips" button in menu bar

* Use move cursor

* Fix cursor

* Use same image for deck preview and library

* Fix cursor again

* Update clicker game deck

* Add videos as single-step decks

* Change tips in menu bar to ? icon

* Change “tips” to “how-tos” in library

* Add help icon to cards

* Update deck library images

* Add drag cover for youtube video to prevent catching mouseup

* add a step to spin deck for clicking control

* Blue bar style updates

* Add step pips

* Update clicker game name to run away

* Fix image padding

* Add change color step to spin deck

* Add start sound step to run away deck

* Update say deck to start with adding a sprite

* Remove package lock

* Remove zooming functionality

* Remove unnecassary prototype changes

* Split up rendering of cards into smaller parts

* Use FormattedMessage for all strings

* Automatic lint fixes

* Almost finished with lint errors!

* Fix more lint errors

* Clean up CSS

* Fix webpack config

- Auditing color CSS and componet CSS to make consistent.
- Made a first pass of changes to increase contrast to elements that previously were problematic

* Add coming soon extensions to the library

This implements #1074

* don’t call `onSelect` when disabled

thanks @paulkaplan!

* add speech image to coming soon extension

* Library: Centered sprites

* Design pass on libraries to make sprites look more like they do in the SpriteSelector. Fixed scrolling overflow when reaching the bottom
* Started a colors variables file
* Added a light transform on sprite item hover

Related #12

Configurable SpriteSelectorItems per row (#90). Standardized spacer variable (#84). MenuBar Pass (#130)

* Standardized use of space units where appropriate
* Reversed box classes for easier readability in Inspector
* Sprite Area: removed unused info button
* SpriteSelectorItems: fixed spacing between rows. Isolated layout + component CSS, now reusable in other context. Items per row is now easily configurable
* MenuBar: refactored structure for clickable items

* Covers parts of these issues: GUI layout panes (#69), sprite libraries (#12), import buttons (#64), menu bar (#67), and sprite info area (#53)

~ Refactored layout pane structure by removing `display: flex` from `.box`, by default. Declaring flex instead only where specifically needed. This helped fix layout quirks, and should help us avoid hard to find issues related to nested flex boxes

~ Added descriptive classnames to boxes/containers/wrappers. Moved more padding, margins + layout into these wrappers to help with component reusability.

~ Set up a spacer unit variable inside `gui.css`, to start keeping consistent padding, margins and rounded corners between panes. Used [CSS/PostCSS Modules](https://github.com/css-modules/postcss-modules-values) to avoid SCSS dependency.

~ Refactored inline styles from JSX, into CSS files. 2 reasons: a) prepping for reuse of CSS Module variables. b) Feels easier to debug complex flex layouts when all the styles are in one place vs JS/HTML/CSS syntax mixed together

~ Added menu bar into layout via new component, and sprite info header in sprite selector pane, with stubs for the labels + forms. Sprite items are correctly scrolling, while leaving the header fixed, in Chrome. Mostly working in FFx. Not working in Safari, IE yet.

~ Style pass on library modal

~ Experimenting with a few different transition styles: Logo in menu bar, sprite library items, Add buttons.

Now possible because we send down the correct content type for SVG assets.

The inline css method gives us nothing that CSS modules can't give us. This puts the project more in line with the way www works, and makes CSS actually readable.

Using class names gives us full control of the modal styles.