Replace new sprite and new backdrop buttons with the new round button.

src/components/asset-button/asset-button.css

+@import "../../css/colors.css";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background: $motion-primary;
+    border-radius: 100%;
+    width: 2.75rem;
+    height: 2.75rem;
+}
+
+.icon {
+    width: 1.75rem;
+    height: 1.75rem;
+}

src/components/asset-button/asset-button.jsx

+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './asset-button.css';
+
+const AssetButton = ({
+    img,
+    className,
+    title,
+    onClick
+}) => (
+    <button
+        className={classNames(styles.container, className)}
+        title={title}
+        onClick={onClick}
+    >
+        <img
+            className={styles.icon}
+            src={img}
+        />
+    </button>
+);
+
+AssetButton.propTypes = {
+    className: PropTypes.string,
+    img: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    title: PropTypes.node.isRequired
+};
+
+export default AssetButton;

src/components/gui/gui.css

@@ -150,16 +150,26 @@
     bottom: 0;
     left: 0;
     z-index: 50; /** Force extension button above the ScratchBlocks flyout. */
-    background: white;
+    background: $motion-primary;
 
-    border: 1px solid #ddd;
+    border: 1px solid $motion-primary;
     box-sizing: content-box; /* To match scratch-block vertical toolbox borders */
 }
 
 .extension-button {
-    font-size: 0.55rem;
-    font-weight: bold;
+    background: none;
+    border: none;
+    outline: none;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
 }
+
+.extension-button-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+}
+
 .extension-button > div {
     margin-top: 0;
 }

src/components/gui/gui.jsx

@@ -108,14 +108,18 @@ const GUIComponent = props => {
                                     />
                                 </Box>
                                 <Box className={styles.extensionButtonContainer}>
-                                    <IconButton
+                                    <button
                                         className={classNames(styles.extensionButton, {
                                             [styles.hidden]: !enableExtensions
                                         })}
-                                        img={addExtensionIcon}
-                                        title={addExtensionMessage}
+                                        title={'Add Extension'}
                                         onClick={onExtensionButtonClick}
-                                    />
+                                    >
+                                        <img
+                                            className={styles.extensionButtonIcon}
+                                            src={addExtensionIcon}
+                                        />
+                                    </button>
                                 </Box>
                             </TabPanel>
                             <TabPanel className={tabClassNames.tabPanel}>

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

@@ -61,8 +61,6 @@
 }
 
 .add-button {
-    font-size: 0.55rem;
-    font-weight: bold;
     position: absolute;
     bottom: 0.75rem;
     right: 1rem;

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

 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 AssetButton from '../asset-button/asset-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="gui.spriteSelector.addSprite"
-    />
-);
-
 const SpriteSelectorComponent = function (props) {
     const {
         onChangeSpriteDirection,
@@ -84,10 +75,10 @@ const SpriteSelectorComponent = function (props) {
                     }
                 </Box>
             </Box>
-            <IconButton
+            <AssetButton
                 className={styles.addButton}
                 img={spriteIcon}
-                title={addSpriteMessage}
+                title={'Add Sprite'}
                 onClick={onNewSpriteClick}
             />
         </Box>

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

@@ -76,10 +76,6 @@ $header-height: calc($stage-menu-height - 2px);
 }
 
 .add-button {
-    font-size: 0.55rem;
-    font-weight: bold;
-    text-align: center;
     position: absolute;
     bottom: 0.75rem;
-    left: 0.25rem;
 }

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

@@ -4,19 +4,11 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
-import IconButton from '../icon-button/icon-button.jsx';
+import AssetButton from '../asset-button/asset-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="gui.stageSelector.targetPaneAddBackdrop"
-    />
-);
-
 const StageSelector = props => {
     const {
         backdropCount,
@@ -53,10 +45,10 @@ const StageSelector = props => {
                 />
             </div>
             <div className={styles.count}>{backdropCount}</div>
-            <IconButton
+            <AssetButton
                 className={styles.addButton}
                 img={backdropIcon}
-                title={addBackdropMessage}
+                title={'Add Backdrop'}
                 onClick={onNewBackdropClick}
             />
         </Box>