Improve some icons in the editor (variables, mobile toolbar) (#6700)

newIDE/app/src/EventsFunctionsList/index.js

@@ -1054,15 +1054,15 @@ const EventsFunctionsList = React.forwardRef<
                     extensionGlobalVariablesItemId,
                     i18n._(t`Extension global variables`),
                     onSelectExtensionGlobalVariables,
-                    'res/icons_default/publish_black.svg'
+                    'res/icons_default/global_variable24_black.svg'
                   )
                 ),
                 new LeafTreeViewItem(
                   new ActionTreeViewItemContent(
                     extensionSceneVariablesItemId,
                     i18n._(t`Extension scene variables`),
                     onSelectExtensionSceneVariables,
-                    'res/icons_default/scene_black.svg'
+                    'res/icons_default/scene_variable24_black.svg'
                   )
                 ),
               ];

newIDE/app/src/EventsSheet/EventsTree/VariableDeclaration.js

@@ -11,7 +11,7 @@ import {
   shouldActivate,
   shouldValidate,
 } from '../../UI/KeyboardShortcuts/InteractionKeys';
-import LocalIcon from '../../UI/CustomSvgIcons/ExternalEvents';
+import LocalVariableIcon from '../../UI/CustomSvgIcons/LocalVariable';
 import { getVariableTypeIcon } from '../ParameterFields/VariableField';
 
 const gd: libGDevelop = global.gd;
@@ -98,7 +98,7 @@ export const VariableDeclaration = (props: Props) => {
         <Trans>
           Declare{' '}
           <span>
-            <LocalIcon
+            <LocalVariableIcon
               className={classNames({
                 [icon]: true,
               })}

newIDE/app/src/EventsSheet/ParameterFields/GlobalVariableField.js

@@ -12,7 +12,7 @@ import {
   type FieldFocusFunction,
 } from './ParameterFieldCommons';
 import { enumerateVariables } from './EnumerateVariables';
-import GlobalIcon from '../../UI/CustomSvgIcons/Publish';
+import GlobalVariableIcon from '../../UI/CustomSvgIcons/GlobalVariable';
 
 export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
   function GlobalVariableField(props: ParameterFieldProps, ref) {
@@ -84,4 +84,4 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
 
 export const renderInlineGlobalVariable = (
   props: ParameterInlineRendererProps
-) => renderVariableWithIcon(props, 'global variable', GlobalIcon);
+) => renderVariableWithIcon(props, 'global variable', GlobalVariableIcon);

newIDE/app/src/EventsSheet/ParameterFields/ObjectVariableField.js

@@ -14,7 +14,7 @@ import {
 import { getLastObjectParameterValue } from './ParameterMetadataTools';
 import getObjectByName from '../../Utils/GetObjectByName';
 import getObjectGroupByName from '../../Utils/GetObjectGroupByName';
-import ObjectIcon from '../../UI/CustomSvgIcons/Object';
+import ObjectVariableIcon from '../../UI/CustomSvgIcons/ObjectVariable';
 import { enumerateVariables } from './EnumerateVariables';
 import { intersectionBy } from 'lodash';
 
@@ -178,4 +178,4 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
 
 export const renderInlineObjectVariable = (
   props: ParameterInlineRendererProps
-) => renderVariableWithIcon(props, 'object variable', ObjectIcon);
+) => renderVariableWithIcon(props, 'object variable', ObjectVariableIcon);

newIDE/app/src/EventsSheet/ParameterFields/SceneVariableField.js

@@ -12,7 +12,7 @@ import {
   type FieldFocusFunction,
 } from './ParameterFieldCommons';
 import { enumerateVariables } from './EnumerateVariables';
-import SceneIcon from '../../UI/CustomSvgIcons/Scene';
+import SceneVariableIcon from '../../UI/CustomSvgIcons/SceneVariable';
 
 export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
   function SceneVariableField(props: ParameterFieldProps, ref) {
@@ -91,4 +91,4 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
 
 export const renderInlineSceneVariable = (
   props: ParameterInlineRendererProps
-) => renderVariableWithIcon(props, 'scene variable', SceneIcon);
+) => renderVariableWithIcon(props, 'scene variable', SceneVariableIcon);

newIDE/app/src/EventsSheet/ParameterFields/VariableField.js

@@ -34,10 +34,10 @@ import VariableStructureIcon from '../../VariablesList/Icons/VariableStructureIc
 import UnknownTypeIcon from '../../UI/CustomSvgIcons/Cross';
 import { type EnumeratedVariable } from './EnumerateVariables';
 import { LineStackLayout } from '../../UI/Layout';
-import GlobalIcon from '../../UI/CustomSvgIcons/Publish';
-import SceneIcon from '../../UI/CustomSvgIcons/Scene';
-import ObjectIcon from '../../UI/CustomSvgIcons/Object';
-import LocalIcon from '../../UI/CustomSvgIcons/ExternalEvents';
+import GlobalVariableIcon from '../../UI/CustomSvgIcons/GlobalVariable';
+import SceneVariableIcon from '../../UI/CustomSvgIcons/SceneVariable';
+import ObjectVariableIcon from '../../UI/CustomSvgIcons/ObjectVariable';
+import LocalVariableIcon from '../../UI/CustomSvgIcons/LocalVariable';
 import { ProjectScopedContainersAccessor } from '../../InstructionOrExpression/EventsScope.flow';
 
 const gd: libGDevelop = global.gd;
@@ -128,14 +128,14 @@ export const getVariableSourceIcon = (
   switch (variableSourceType) {
     case gd.VariablesContainer.Global:
     case gd.VariablesContainer.ExtensionGlobal:
-      return GlobalIcon;
+      return GlobalVariableIcon;
     case gd.VariablesContainer.Scene:
     case gd.VariablesContainer.ExtensionScene:
-      return SceneIcon;
+      return SceneVariableIcon;
     case gd.VariablesContainer.Object:
-      return ObjectIcon;
+      return ObjectVariableIcon;
     case gd.VariablesContainer.Local:
-      return LocalIcon;
+      return LocalVariableIcon;
     default:
       return UnknownTypeIcon;
   }

newIDE/app/src/EventsSheet/Toolbar.js

@@ -17,7 +17,7 @@ import RedoIcon from '../UI/CustomSvgIcons/Redo';
 import ToolbarSearchIcon from '../UI/CustomSvgIcons/ToolbarSearch';
 import EditSceneIcon from '../UI/CustomSvgIcons/EditScene';
 import { getShortcutDisplayName, useShortcutMap } from '../KeyboardShortcuts';
-import AddLocalVariableIcon from '../UI/CustomSvgIcons/ExternalEvents';
+import AddLocalVariableIcon from '../UI/CustomSvgIcons/LocalVariable';
 
 type Props = {|
   onAddStandardEvent: () => void,

newIDE/app/src/ProjectManager/index.js

@@ -999,7 +999,7 @@ const ProjectManager = React.forwardRef<Props, ProjectManagerInterface>(
                     globalVariablesItemId,
                     i18n._(t`Global variables`),
                     openProjectVariables,
-                    'res/icons_default/publish_black.svg'
+                    'res/icons_default/global_variable24_black.svg'
                   )
                 ),
                 new LeafTreeViewItem(

newIDE/app/src/SceneEditor/ScenePropertiesDialog.js

@@ -25,6 +25,7 @@ import { Accordion, AccordionHeader, AccordionBody } from '../UI/Accordion';
 import { IconContainer } from '../UI/IconContainer';
 import { getBehaviorTutorialIds } from '../Utils/GDevelopServices/Tutorial';
 import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
+import SceneVariable from '../UI/CustomSvgIcons/SceneVariable';
 
 const gd: libGDevelop = global.gd;
 
@@ -212,6 +213,7 @@ const ScenePropertiesDialog = ({
       secondaryActions={[
         <RaisedButton
           key="edit-scene-variables"
+          icon={<SceneVariable fontSize="small" />}
           label={<Trans>Edit scene variables</Trans>}
           fullWidth
           onClick={() => {

newIDE/app/src/SceneEditor/SwipeableDrawerEditorsDisplay/BottomToolbar.js

@@ -12,23 +12,19 @@ import { type EditorId } from '..';
 import Paper from '../../UI/Paper';
 
 const iconSize = 24;
-const iconButtonPaddingTop = 8;
 /**
- * Padding bottom is bigger than padding top to leave space for the Android/iOS
+ * Padding bottom is added to toolbar to leave space for the Android/iOS
  * bottom navigation bar.
  */
-const iconButtonPaddingBottom = 20;
-const iconButtonPaddingHorizontal = 8;
+const toolbarPaddingBottom = 12;
+const iconButtonPadding = 8;
 const iconButtonLabelPadding = 2;
 const toolbarHeight =
-  iconSize +
-  2 * iconButtonLabelPadding +
-  iconButtonPaddingTop +
-  iconButtonPaddingBottom;
+  iconSize + 2 * iconButtonLabelPadding + 2 * iconButtonPadding;
 
 const styles = {
   iconButton: {
-    padding: `${iconButtonPaddingTop}px ${iconButtonPaddingHorizontal}px ${iconButtonPaddingBottom}px ${iconButtonPaddingHorizontal}px`,
+    padding: iconButtonPadding,
     fontSize: 'inherit',
   },
   buttonLabel: {
@@ -69,7 +65,7 @@ const editors = {
 const BottomToolbar = React.memo<Props>((props: Props) => {
   return (
     <Paper background="medium" square style={styles.container}>
-      <Toolbar height={toolbarHeight}>
+      <Toolbar height={toolbarHeight} paddingBottom={toolbarPaddingBottom}>
         <ToolbarGroup>
           {Object.keys(editors).map(editorId => {
             const { icon, buttonId } = editors[editorId];

newIDE/app/src/UI/CustomSvgIcons/GlobalVariable.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.3407 6.4739C20.789 6.322 21.2756 6.56232 21.4275 7.01068C22.134 9.09598 21.9387 10.8304 21.0598 12.0678C20.1927 13.2886 18.7768 13.8571 17.3888 13.8571C16.039 13.8571 15.0362 13.48 14.1952 12.7894C13.4047 12.1402 12.79 11.2338 12.1615 10.3062C11.5644 9.42514 11.0121 8.90437 10.4432 8.59341C9.87912 8.28509 9.22524 8.14286 8.35349 8.14286C7.57792 8.14286 6.76118 8.57683 6.27981 9.42361C6.04587 9.83515 5.5226 9.97912 5.11106 9.74517C4.69952 9.51123 4.55555 8.98796 4.7895 8.57642C5.5639 7.21414 6.93813 6.42858 8.35349 6.42858C9.41788 6.42858 10.3774 6.60381 11.2654 7.08915C12.1485 7.57184 12.8869 8.3209 13.5806 9.34456C14.2429 10.3218 14.7207 11.0027 15.2832 11.4646C15.7953 11.8851 16.406 12.1429 17.3888 12.1429C18.3335 12.1429 19.1764 11.759 19.6622 11.0751C20.1363 10.4077 20.3881 9.28499 19.8039 7.56076C19.652 7.11241 19.8923 6.62581 20.3407 6.4739Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.43276 12.2737C4.06677 11.6439 4.88063 11.4015 5.60704 11.4015C6.79924 11.4015 8.00928 11.8281 8.58396 13.0646C8.7233 13.3643 8.59323 13.7203 8.29346 13.8596C7.99368 13.999 7.63771 13.8689 7.49838 13.5691C7.19518 12.9168 6.54304 12.5986 5.60704 12.5986C5.13633 12.5986 4.64666 12.7552 4.27643 13.123C3.91237 13.4846 3.59854 14.1156 3.59854 15.1923C3.59854 16.2462 3.94405 16.8741 4.35034 17.2434C4.77081 17.6257 5.31729 17.7861 5.79326 17.7861C6.30247 17.7861 6.72159 17.6617 7.01762 17.3679C7.25418 17.1331 7.47817 16.7244 7.55807 16.0037H6.19229C5.86172 16.0037 5.59374 15.7357 5.59374 15.4051C5.59374 15.0746 5.86172 14.8066 6.19229 14.8066H8.18749C8.51806 14.8066 8.78604 15.0746 8.78604 15.4051C8.78604 16.6944 8.46334 17.6196 7.86096 18.2175C7.25915 18.8149 6.48116 18.9832 5.79326 18.9832C5.0721 18.9832 4.22195 18.7446 3.54507 18.1292C2.854 17.501 2.40143 16.5327 2.40143 15.1923C2.40143 13.8748 2.79257 12.9096 3.43276 12.2737Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

newIDE/app/src/UI/CustomSvgIcons/ObjectVariable.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21.5467 15.2885C21.9397 15.1575 22.3644 15.3699 22.4954 15.7628C22.9101 17.0072 22.809 18.0878 22.2554 18.88C21.7101 19.6604 20.8236 20.0172 19.9687 20.0172C19.1489 20.0172 18.522 19.7815 17.9977 19.3438C17.5231 18.9477 17.1593 18.4019 16.8142 17.8843L16.8034 17.8681C16.4817 17.3855 16.1994 17.1236 15.9288 16.9733C15.6632 16.8257 15.3449 16.75 14.8864 16.75C14.3597 16.75 13.5181 17.3145 13.8067 18.7571C13.8879 19.1633 13.6245 19.5584 13.2183 19.6396C12.8122 19.7209 12.417 19.4575 12.3358 19.0513C11.8982 16.8637 13.2349 15.25 14.8864 15.25C15.5169 15.25 16.1061 15.3558 16.6573 15.662C17.2035 15.9655 17.6472 16.4296 18.0515 17.0361C18.4293 17.6028 18.6774 17.9573 18.9589 18.1923C19.1958 18.39 19.4764 18.5172 19.9687 18.5172C20.4259 18.5172 20.8101 18.3295 21.0258 18.0208C21.2332 17.724 21.3836 17.171 21.0723 16.2372C20.9414 15.8442 21.1537 15.4195 21.5467 15.2885Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.9432 4.31562C11.1384 4.22813 11.3616 4.22813 11.5568 4.31562L18.7912 7.55864C18.8534 7.58487 18.9113 7.61926 18.9637 7.66045C19.0011 7.68989 19.0354 7.72268 19.0663 7.75827C19.1807 7.88993 19.25 8.06188 19.25 8.25V13.5C19.25 13.9142 18.9142 14.25 18.5 14.25C18.0858 14.25 17.75 13.9142 17.75 13.5V9.40812L12 11.9857V14.5C12 14.9142 11.6642 15.25 11.25 15.25C10.8358 15.25 10.5 14.9142 10.5 14.5V11.9857L4.75 9.40812V15.7687L10.3125 18.3182C10.689 18.4908 10.8544 18.9359 10.6818 19.3125C10.5092 19.689 10.0641 19.8544 9.68751 19.6818L3.70293 16.9389C3.66548 16.9227 3.62961 16.9036 3.59562 16.8818C3.50238 16.8222 3.42589 16.7444 3.36877 16.6552C3.28869 16.5302 3.24668 16.383 3.25 16.2331V8.25C3.25 8.06185 3.31928 7.88988 3.43373 7.75821C3.46418 7.72314 3.49797 7.69079 3.53477 7.66169C3.58749 7.61994 3.64596 7.58513 3.70879 7.55863L10.9432 4.31562ZM5.83349 8.25L11.25 10.6781L16.6665 8.25L11.25 5.82191L5.83349 8.25Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));