Use RaisedButton for buttons to add elements

newIDE/app/src/BehaviorsEditor/index.js

@@ -12,6 +12,8 @@ import NewBehaviorDialog from './NewBehaviorDialog';
 import { getBehaviorHelpPagePath } from './BehaviorsHelpPagePaths';
 import BehaviorsEditorService from './BehaviorsEditorService';
 import { isNullPtr } from '../Utils/IsNullPtr';
+import { Column, Line } from '../UI/Grid';
+import RaisedButton from 'material-ui/RaisedButton';
 const gd = global.gd;
 
 const styles = {
@@ -30,14 +32,17 @@ const styles = {
   },
 };
 const AddBehaviorLine = ({ onAdd }) => (
-  <div style={styles.addBehaviorLine}>
-    <EmptyMessage style={styles.addBehaviorText}>
-      Click to add a behavior to the object:
-    </EmptyMessage>
-    <IconButton onClick={onAdd}>
-      <Add />
-    </IconButton>
-  </div>
+  <Column>
+    <Line justifyContent="flex-end" expand>
+      <RaisedButton
+        label={<Trans>Add a behavior to the object</Trans>}
+        primary
+        onClick={onAdd}
+        labelPosition="before"
+        icon={<Add />}
+      />
+    </Line>
+  </Column>
 );
 
 export default class BehaviorsEditor extends Component {

newIDE/app/src/EventsBasedBehaviorEditor/EventsBasedBehaviorPropertiesEditor.js

@@ -20,6 +20,7 @@ import newNameGenerator from '../Utils/NewNameGenerator';
 import InlineCheckbox from '../UI/InlineCheckbox';
 import Visibility from 'material-ui/svg-icons/action/visibility';
 import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';
+import Add from 'material-ui/svg-icons/content/add';
 
 const gd = global.gd;
 
@@ -295,13 +296,17 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
                     </Trans>
                   </EmptyMessage>
                 ) : null}
-                <Line justifyContent="center">
-                  <RaisedButton
-                    primary
-                    label={<Trans>Add a property</Trans>}
-                    onClick={this._addProperty}
-                  />
-                </Line>
+                <Column>
+                  <Line justifyContent="flex-end" expand>
+                    <RaisedButton
+                      primary
+                      label={<Trans>Add a property</Trans>}
+                      onClick={this._addProperty}
+                      labelPosition="before"
+                      icon={<Add />}
+                    />
+                  </Line>
+                </Column>
               </div>
             </Line>
           </Column>

newIDE/app/src/EventsFunctionsExtensionEditor/EventsFunctionConfigurationEditor/EventsFunctionParametersEditor.js

@@ -21,6 +21,7 @@ import ObjectTypeSelector from '../../ObjectTypeSelector';
 import BehaviorTypeSelector from '../../BehaviorTypeSelector';
 import { isBehaviorLifecycleFunction } from '../../EventsFunctionsExtensionsLoader/MetadataDeclarationHelpers';
 import { getParametersIndexOffset } from '../../EventsFunctionsExtensionsLoader';
+import Add from 'material-ui/svg-icons/content/add';
 
 const gd = global.gd;
 
@@ -278,15 +279,19 @@ export default class EventsFunctionParametersEditor extends React.Component<
                     <Trans>No parameters for this function.</Trans>
                   </EmptyMessage>
                 ) : null}
-                <Line justifyContent="center">
-                  {!freezeParameters && (
-                    <RaisedButton
-                      primary
-                      label={<Trans>Add a parameter</Trans>}
-                      onClick={this._addParameter}
-                    />
-                  )}
-                </Line>
+                <Column>
+                  <Line justifyContent="flex-end" expand>
+                    {!freezeParameters && (
+                      <RaisedButton
+                        primary
+                        label={<Trans>Add a parameter</Trans>}
+                        onClick={this._addParameter}
+                        labelPosition="before"
+                        icon={<Add />}
+                      />
+                    )}
+                  </Line>
+                </Column>
               </div>
             </Line>
             {helpPagePath ? (

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/SpritesList.js

@@ -1,9 +1,10 @@
 // @flow
+import { Trans } from '@lingui/macro';
+
 import React, { Component } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import { mapFor } from '../../../Utils/MapFor';
 import Add from 'material-ui/svg-icons/content/add';
-import IconButton from 'material-ui/IconButton';
 import DirectionTools from './DirectionTools';
 import MiniToolbar from '../../../UI/MiniToolbar';
 import ImageThumbnail, {
@@ -22,6 +23,7 @@ import {
 } from '../../../ResourcesList/ResourceSource.flow';
 import { type ResourceExternalEditor } from '../../../ResourcesList/ResourceExternalEditor.flow';
 import { applyResourceDefaults } from '../../../ResourcesList/ResourceUtils';
+import FlatButton from 'material-ui/FlatButton';
 const gd = global.gd;
 const path = require('path');
 
@@ -49,9 +51,7 @@ const styles = {
 const AddSpriteButton = SortableElement(({ displayHint, onAdd }) => {
   return (
     <div style={styles.addSpriteButton}>
-      <IconButton onClick={onAdd} style={styles.spriteThumbnailImage}>
-        <Add />
-      </IconButton>
+      <FlatButton label={<Trans>Add</Trans>} icon={<Add />} />
     </div>
   );
 });

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/index.js

@@ -32,6 +32,7 @@ import {
   type ChooseResourceFunction,
 } from '../../../ResourcesList/ResourceSource.flow';
 import { type ResourceExternalEditor } from '../../../ResourcesList/ResourceExternalEditor.flow';
+import { Column, Line } from '../../../UI/Grid';
 
 const gd = global.gd;
 
@@ -45,11 +46,6 @@ const styles = {
   animationTools: {
     flexShrink: 0,
   },
-  lastLine: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
   addAnimation: {
     display: 'flex',
   },
@@ -59,17 +55,20 @@ const styles = {
 };
 
 const AddAnimationLine = ({ onAdd, extraTools }) => (
-  <div style={styles.lastLine}>
-    {extraTools}
-    <div style={styles.addAnimation}>
-      <EmptyMessage style={styles.addAnimationText}>
-        Click to add an animation:
-      </EmptyMessage>
-      <IconButton onClick={onAdd}>
-        <Add />
-      </IconButton>
-    </div>
-  </div>
+  <Column>
+    <Line justifyContent="space-between" expand>
+      {extraTools}
+      <div style={styles.addAnimation}>
+        <RaisedButton
+          label={<Trans>Add an animation</Trans>}
+          primary
+          onClick={onAdd}
+          labelPosition="before"
+          icon={<Add />}
+        />
+      </div>
+    </Line>
+  </Column>
 );
 
 type AnimationProps = {|
@@ -343,6 +342,14 @@ class AnimationsListContainer extends React.Component<
   render() {
     return (
       <div>
+        {this.props.spriteObject.getAnimationsCount() === 0 && (
+          <EmptyMessage>
+            <Trans>
+              This object has no animations containing images. Start by adding
+              an animation.
+            </Trans>
+          </EmptyMessage>
+        )}
         <SortableAnimationsList
           spriteObject={this.props.spriteObject}
           objectName={this.props.objectName}