Move add sprite and backdrop to their correct containers

src/components/sprite-selector/sprite-selector.css

@@ -59,3 +59,11 @@
     padding-right: calc($space / 2);
     padding-bottom: $space; 
 }
+
+.add-button {
+    font-size: 0.55rem;
+    font-weight: bold;
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+}

src/components/sprite-selector/sprite-selector.jsx

@@ -1,10 +1,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
 import SpriteInfo from '../../containers/sprite-info.jsx';
 import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
+import IconButton from '../icon-button/icon-button.jsx';
+
 import styles from './sprite-selector.css';
+import spriteIcon from './icon--sprite.svg';
+
+const addSpriteMessage = (
+    <FormattedMessage
+        defaultMessage="Add Sprite"
+        description="Button to add a sprite in the target pane"
+        id="targetPane.addSprite"
+    />
+);
 
 const SpriteSelectorComponent = function (props) {
     const {
@@ -15,6 +27,7 @@ const SpriteSelectorComponent = function (props) {
         onChangeSpriteX,
         onChangeSpriteY,
         onDeleteSprite,
+        onNewSpriteClick,
         onSelectSprite,
         selectedId,
         sprites,
@@ -69,6 +82,12 @@ const SpriteSelectorComponent = function (props) {
                     }
                 </Box>
             </Box>
+            <IconButton
+                className={styles.addButton}
+                img={spriteIcon}
+                title={addSpriteMessage}
+                onClick={onNewSpriteClick}
+            />
         </Box>
     );
 };
@@ -81,6 +100,7 @@ SpriteSelectorComponent.propTypes = {
     onChangeSpriteX: PropTypes.func,
     onChangeSpriteY: PropTypes.func,
     onDeleteSprite: PropTypes.func,
+    onNewSpriteClick: PropTypes.func,
     onSelectSprite: PropTypes.func,
     selectedId: PropTypes.string,
     sprites: PropTypes.shape({

src/components/stage-selector/stage-selector.css

@@ -99,3 +99,12 @@ $border-width: 2px;
     width: 100%;
     user-select: none;
 }
+
+.add-button {
+    font-size: 0.55rem;
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0.25rem;
+}

src/components/stage-selector/stage-selector.jsx

@@ -1,10 +1,21 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
+import IconButton from '../icon-button/icon-button.jsx';
 import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
 import styles from './stage-selector.css';
+import backdropIcon from './icon--backdrop.svg';
+
+const addBackdropMessage = (
+    <FormattedMessage
+        defaultMessage="Add Backdrop"
+        description="Button to add a backdrop in the target pane"
+        id="targetPane.addBackdrop"
+    />
+);
 
 const StageSelector = props => {
     const {
@@ -12,6 +23,7 @@ const StageSelector = props => {
         selected,
         url,
         onClick,
+        onNewBackdropClick,
         ...componentProps
     } = props;
     return (
@@ -41,7 +53,12 @@ const StageSelector = props => {
                     <div className={styles.label}>Backdrops</div>
                     <div className={styles.count}>{backdropCount}</div>
                 </div>
-
+                <IconButton
+                    className={styles.addButton}
+                    img={backdropIcon}
+                    title={addBackdropMessage}
+                    onClick={onNewBackdropClick}
+                />
             </div>
         </Box>
     );
@@ -50,6 +67,7 @@ const StageSelector = props => {
 StageSelector.propTypes = {
     backdropCount: PropTypes.number.isRequired,
     onClick: PropTypes.func,
+    onNewBackdropClick: PropTypes.func,
     selected: PropTypes.bool.isRequired,
     url: PropTypes.string
 };

src/components/target-pane/icon--add.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.48 7.48"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>icon--add</title><line class="cls-1" x1="3.74" y1="6.48" x2="3.74" y2="1"/><line class="cls-1" x1="1" y1="3.74" x2="6.48" y2="3.74"/></svg>

src/components/target-pane/target-pane.css

@@ -23,12 +23,3 @@
     cursor: pointer;
     user-select: none;
 }
-
-.add-button {
-    font-size: 0.55rem;
-    font-weight: bold;
-}
-
-/* @todo: This is hacky. Better: move buttons in their corresponding panes, and set values relatively */
-.add-button-wrapper--sprite   { right: 7rem; }
-.add-button-wrapper--stage    { right: 0.8rem; }

src/components/target-pane/target-pane.jsx

@@ -1,7 +1,5 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
 
 import VM from 'scratch-vm';
 
@@ -12,27 +10,8 @@ import SoundLibrary from '../../containers/sound-library.jsx';
 import SpriteLibrary from '../../containers/sprite-library.jsx';
 import SpriteSelectorComponent from '../sprite-selector/sprite-selector.jsx';
 import StageSelector from '../../containers/stage-selector.jsx';
-import IconButton from '../icon-button/icon-button.jsx';
 
 import styles from './target-pane.css';
-import spriteIcon from './icon--sprite.svg';
-import backdropIcon from './icon--backdrop.svg';
-
-const addSpriteMessage = (
-    <FormattedMessage
-        defaultMessage="Add Sprite"
-        description="Button to add a sprite in the target pane"
-        id="targetPane.addSprite"
-    />
-);
-
-const addBackdropMessage = (
-    <FormattedMessage
-        defaultMessage="Add Backdrop"
-        description="Button to add a backdrop in the target pane"
-        id="targetPane.addBackdrop"
-    />
-);
 
 /*
  * Pane that contains the sprite selector, sprite info, stage selector,
@@ -54,7 +33,6 @@ const TargetPane = ({
     onChangeSpriteY,
     onDeleteSprite,
     onNewSpriteClick,
-    onNewBackdropClick,
     onRequestCloseBackdropLibrary,
     onRequestCloseCostumeLibrary,
     onRequestCloseSoundLibrary,
@@ -80,6 +58,7 @@ const TargetPane = ({
             onChangeSpriteX={onChangeSpriteX}
             onChangeSpriteY={onChangeSpriteY}
             onDeleteSprite={onDeleteSprite}
+            onNewSpriteClick={onNewSpriteClick}
             onSelectSprite={onSelectSprite}
         />
         <Box className={styles.stageSelectorWrapper}>
@@ -94,22 +73,6 @@ const TargetPane = ({
                 onSelect={onSelectSprite}
             />}
             <Box>
-                <Box className={classNames(styles.addButtonWrapper, styles.addButtonWrapperSprite)}>
-                    <IconButton
-                        className={styles.addButton}
-                        img={spriteIcon}
-                        title={addSpriteMessage}
-                        onClick={onNewSpriteClick}
-                    />
-                </Box>
-                <Box className={classNames(styles.addButtonWrapper, styles.addButtonWrapperStage)}>
-                    <IconButton
-                        className={styles.addButton}
-                        img={backdropIcon}
-                        title={addBackdropMessage}
-                        onClick={onNewBackdropClick}
-                    />
-                </Box>
                 <SpriteLibrary
                     visible={spriteLibraryVisible}
                     vm={vm}
@@ -164,7 +127,6 @@ TargetPane.propTypes = {
     onChangeSpriteX: PropTypes.func,
     onChangeSpriteY: PropTypes.func,
     onDeleteSprite: PropTypes.func,
-    onNewBackdropClick: PropTypes.func,
     onNewSpriteClick: PropTypes.func,
     onRequestCloseBackdropLibrary: PropTypes.func,
     onRequestCloseCostumeLibrary: PropTypes.func,

src/containers/stage-selector.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {connect} from 'react-redux';
-
+import {openBackdropLibrary} from '../reducers/modals';
 import StageSelectorComponent from '../components/stage-selector/stage-selector.jsx';
 
 class StageSelector extends React.Component {
@@ -44,7 +44,14 @@ const mapStateToProps = (state, {assetId}) => ({
     url: assetId && state.vm.runtime.storage.get(assetId).encodeDataURI()
 });
 
+const mapDispatchToProps = dispatch => ({
+    onNewBackdropClick: e => {
+        e.preventDefault();
+        dispatch(openBackdropLibrary());
+    }
+});
+
 export default connect(
     mapStateToProps,
-    () => ({}) // omit dispatch prop
+    mapDispatchToProps
 )(StageSelector);

src/containers/target-pane.jsx

@@ -4,7 +4,6 @@ import React from 'react';
 import {connect} from 'react-redux';
 
 import {
-    openBackdropLibrary,
     openSpriteLibrary,
     closeBackdropLibrary,
     closeCostumeLibrary,
@@ -95,10 +94,6 @@ const mapStateToProps = state => ({
     backdropLibraryVisible: state.modals.backdropLibrary
 });
 const mapDispatchToProps = dispatch => ({
-    onNewBackdropClick: e => {
-        e.preventDefault();
-        dispatch(openBackdropLibrary());
-    },
     onNewSpriteClick: e => {
         e.preventDefault();
         dispatch(openSpriteLibrary());