Bring consistency on arrow direction for UI items that can be opened/…

…closed (#7322)

newIDE/app/src/Course/CourseChapterView.js

@@ -18,7 +18,7 @@ import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
 import Divider from '@material-ui/core/Divider';
 import FlatButton from '../UI/FlatButton';
 import ChevronArrowBottom from '../UI/CustomSvgIcons/ChevronArrowBottom';
-import ChevronArrowTop from '../UI/CustomSvgIcons/ChevronArrowTop';
+import ChevronArrowRight from '../UI/CustomSvgIcons/ChevronArrowRight';
 import Cloud from '../UI/CustomSvgIcons/Cloud';
 import CourseChapterTaskItem from './CourseChapterTaskItem';
 import { useResponsiveWindowSize } from '../UI/Responsive/ResponsiveWindowMeasurer';
@@ -51,6 +51,9 @@ const getYoutubeVideoIdFromUrl = (youtubeUrl: ?string): ?string => {
 };
 
 const styles = {
+  icon: {
+    fontSize: 18,
+  },
   stickyTitle: {
     position: 'sticky',
     top: -1, // If 0, it somehow lets a 1px gap between the parent, letting the user see the text scroll behind.
@@ -383,9 +386,9 @@ const CourseChapterView = React.forwardRef<Props, HTMLDivElement>(
                 }
                 leftIcon={
                   openTasks ? (
-                    <ChevronArrowTop size="small" />
+                    <ChevronArrowBottom style={styles.icon} />
                   ) : (
-                    <ChevronArrowBottom size="small" />
+                    <ChevronArrowRight style={styles.icon} />
                   )
                 }
                 onClick={() => setOpenTasks(!openTasks)}

newIDE/app/src/EventsSheet/EventsTree/style.css

@@ -117,36 +117,37 @@
 /**
  * Expand/collapse buttons
  */
-.gd-events-sheet .rst__collapseButton, .rst__expandButton {
+.gd-events-sheet .rst__collapseButton,
+.gd-events-sheet .rst__expandButton {
     border-radius: 0;
     border: none;
     box-shadow: none;
     background-repeat: no-repeat;
     background-color: transparent;
-    height: 12px;
-    width: 22px;
+    height: var(--icon-size); /*Keep the height of a single-line event, more-or-less*/
+    width: 16px; /*Leave space for the line to be visible between the button and the handle*/
+    background-color: var(--event-sheet-event-tree-background-color);
+    border-radius: 4px;
 }
 
 .gd-events-sheet .rst__collapseButton:hover:not(:active), .rst__expandButton:hover:not(:active) {
     background-size: initial !important; /*Avoid buttons size to change*/
-    height: 12px !important; /*Avoid buttons size to change*/
-    width: 22px !important; /*Avoid buttons size to change*/
+    height: var(--icon-size) !important; /*Avoid buttons size to change*/
+    width: 16px !important; /*Avoid buttons size to change*/
 }
 
-.gd-events-sheet  .rst__expandButton {
-    background-image: url('./unfold.png');
-    background-position: 11px 3px !important;
+.gd-events-sheet .rst__expandButton {
+    background-image: url('./Chevron-right.svg');
 }
 .gd-events-sheet .light-theme .rst__expandButton {
-    background-image: url('./unfoldDark.png');
+    background-image: url('./Chevron-right_black.svg');
 }
 
-.gd-events-sheet  .rst__collapseButton {
-    background-image: url('./fold.png');
-    background-position: center 7px !important;
+.gd-events-sheet .rst__collapseButton {
+    background-image: url('./Chevron-down.svg');
 }
 .gd-events-sheet .light-theme .rst__collapseButton {
-    background-image: url('./foldDark.png');
+    background-image: url('./Chevron-down_black.svg');
 }
 
 /**

newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js

@@ -29,7 +29,7 @@ import GridListTile from '@material-ui/core/GridListTile';
 import ImageTileRow from '../../../../UI/ImageTileRow';
 import { formatTutorialToImageTileComponent, TUTORIAL_CATEGORY_TEXTS } from '.';
 import GuidedLessons from '../InAppTutorials/GuidedLessons';
-import ChevronArrowRight from '../../../../UI/CustomSvgIcons/ChevronArrowRight';
+import ArrowRight from '../../../../UI/CustomSvgIcons/ArrowRight';
 import Upload from '../../../../UI/CustomSvgIcons/Upload';
 import FlingGame from '../InAppTutorials/FlingGame';
 import AuthenticatedUserContext from '../../../../Profile/AuthenticatedUserContext';
@@ -129,7 +129,7 @@ export const TutorialsRow = ({
             })
           )}
         onShowAll={() => onSelectCategory(category)}
-        showAllIcon={<ChevronArrowRight fontSize="small" />}
+        showAllIcon={<ArrowRight fontSize="small" />}
         getColumnsFromWindowSize={getTutorialsColumnsFromWidth}
         getLimitFromWindowSize={getTutorialsColumnsFromWidth}
       />

newIDE/app/src/MainFrame/EditorContainers/HomePage/TeamSection/ManageEducationAccountDialog/index.js

@@ -31,7 +31,7 @@ import AlertMessage from '../../../../../UI/AlertMessage';
 import Link from '../../../../../UI/Link';
 import TeamAvailableSeats from '../TeamAvailableSeats';
 import { copyTextToClipboard } from '../../../../../Utils/Clipboard';
-import ChevronArrowTop from '../../../../../UI/CustomSvgIcons/ChevronArrowTop';
+import ChevronArrowRight from '../../../../../UI/CustomSvgIcons/ChevronArrowRight';
 import ChevronArrowBottom from '../../../../../UI/CustomSvgIcons/ChevronArrowBottom';
 import Paper from '../../../../../UI/Paper';
 import Checkbox from '../../../../../UI/Checkbox';
@@ -930,7 +930,7 @@ const ManageEducationAccountDialog = ({ onClose }: Props) => {
                                   setIsArchivedAccountsSectionOpen(false)
                                 }
                               >
-                                <ChevronArrowTop />
+                                <ChevronArrowBottom />
                               </IconButton>
                             ) : (
                               <IconButton
@@ -941,7 +941,7 @@ const ManageEducationAccountDialog = ({ onClose }: Props) => {
                                   setIsArchivedAccountsSectionOpen(true)
                                 }
                               >
-                                <ChevronArrowBottom />
+                                <ChevronArrowRight />
                               </IconButton>
                             )}
                             <Text size="sub-title">

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/CompactBehaviorPropertiesEditor.js

@@ -14,6 +14,12 @@ import { useForceRecompute } from '../../Utils/UseForceUpdate';
 import { type Schema, type ActionButton } from '../../CompactPropertiesEditor';
 import ShareExternal from '../../UI/CustomSvgIcons/ShareExternal';
 
+export const styles = {
+  icon: {
+    fontSize: 18,
+  },
+};
+
 export const getSchemaWithOpenFullEditorButton = ({
   schema,
   fullEditorLabel,
@@ -149,7 +155,7 @@ export const CompactBehaviorPropertiesEditor = ({
         <FlatButton
           fullWidth
           primary
-          leftIcon={<ChevronArrowRight />}
+          leftIcon={<ChevronArrowRight style={styles.icon} />}
           label={<Trans>Show more</Trans>}
           onClick={() => {
             setShowAdvancedOptions(true);
@@ -170,7 +176,7 @@ export const CompactBehaviorPropertiesEditor = ({
         <FlatButton
           fullWidth
           primary
-          leftIcon={<ChevronArrowTop />}
+          leftIcon={<ChevronArrowTop style={styles.icon} />}
           label={<Trans>Show less</Trans>}
           onClick={() => {
             setShowAdvancedOptions(false);

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/index.js

@@ -27,8 +27,11 @@ import { ColumnStackLayout, LineStackLayout } from '../../UI/Layout';
 import { IconContainer } from '../../UI/IconContainer';
 import Remove from '../../UI/CustomSvgIcons/Remove';
 import useForceUpdate, { useForceRecompute } from '../../Utils/UseForceUpdate';
+import ChevronArrowTop from '../../UI/CustomSvgIcons/ChevronArrowTop';
 import ChevronArrowRight from '../../UI/CustomSvgIcons/ChevronArrowRight';
 import ChevronArrowBottom from '../../UI/CustomSvgIcons/ChevronArrowBottom';
+import ChevronArrowDownWithRoundedBorder from '../../UI/CustomSvgIcons/ChevronArrowDownWithRoundedBorder';
+import ChevronArrowRightWithRoundedBorder from '../../UI/CustomSvgIcons/ChevronArrowRightWithRoundedBorder';
 import Add from '../../UI/CustomSvgIcons/Add';
 import { useManageObjectBehaviors } from '../../BehaviorsEditor';
 import Object3d from '../../UI/CustomSvgIcons/Object3d';
@@ -44,13 +47,10 @@ import SelectOption from '../../UI/SelectOption';
 import { ChildObjectPropertiesEditor } from './ChildObjectPropertiesEditor';
 import { getSchemaWithOpenFullEditorButton } from './CompactObjectPropertiesSchema';
 import FlatButton from '../../UI/FlatButton';
-import ChevronArrowTop from '../../UI/CustomSvgIcons/ChevronArrowTop';
 import Help from '../../UI/CustomSvgIcons/Help';
 import { getHelpLink } from '../../Utils/HelpLink';
 import Window from '../../Utils/Window';
 import CompactTextField from '../../UI/CompactTextField';
-import SquaredDoubleChevronArrowDown from '../../UI/CustomSvgIcons/SquaredDoubleChevronArrowDown';
-import SquaredDoubleChevronArrowUp from '../../UI/CustomSvgIcons/SquaredDoubleChevronArrowUp';
 import { textEllipsisStyle } from '../../UI/TextEllipsis';
 import Link from '../../UI/Link';
 
@@ -164,11 +164,12 @@ const TopLevelCollapsibleSection = ({
     <Column noOverflowParent>
       <LineStackLayout alignItems="center" justifyContent="space-between">
         <LineStackLayout noMargin alignItems="center">
+          s
           <IconButton size="small" onClick={toggleFolded}>
             {isFolded ? (
-              <SquaredDoubleChevronArrowUp style={styles.icon} />
+              <ChevronArrowRightWithRoundedBorder style={styles.icon} />
             ) : (
-              <SquaredDoubleChevronArrowDown style={styles.icon} />
+              <ChevronArrowDownWithRoundedBorder style={styles.icon} />
             )}
           </IconButton>
           <Text size="sub-title" noMargin style={textEllipsisStyle}>
@@ -456,7 +457,7 @@ export const CompactObjectPropertiesEditor = ({
                   <FlatButton
                     fullWidth
                     primary
-                    leftIcon={<ChevronArrowRight />}
+                    leftIcon={<ChevronArrowRight style={styles.icon} />}
                     label={<Trans>Show more</Trans>}
                     onClick={() => {
                       setShowObjectAdvancedOptions(true);
@@ -482,7 +483,7 @@ export const CompactObjectPropertiesEditor = ({
                   <FlatButton
                     fullWidth
                     primary
-                    leftIcon={<ChevronArrowTop />}
+                    leftIcon={<ChevronArrowTop style={styles.icon} />}
                     label={<Trans>Show less</Trans>}
                     onClick={() => {
                       setShowObjectAdvancedOptions(false);

newIDE/app/src/UI/Accordion.js

@@ -1,13 +1,23 @@
 // @flow
 import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
 import MUIAccordion from '@material-ui/core/Accordion';
 import MUIAccordionSummary from '@material-ui/core/AccordionSummary';
 import MUIAccordionDetails from '@material-ui/core/AccordionDetails';
 import MUIAccordionActions from '@material-ui/core/AccordionActions';
 import IconButton from './IconButton';
 import GDevelopThemeContext from './Theme/GDevelopThemeContext';
 import { Column, Line } from '../UI/Grid';
-import ChevronArrowBottom from './CustomSvgIcons/ChevronArrowBottom';
+import ChevronArrowRight from './CustomSvgIcons/ChevronArrowRight';
+
+const useStylesForExpandIcon = () =>
+  makeStyles(theme => ({
+    root: {
+      '& .MuiAccordionSummary-expandIcon.Mui-expanded': {
+        transform: 'rotate(90deg)',
+      },
+    },
+  }))();
 
 const styles = {
   bodyRoot: {
@@ -41,16 +51,19 @@ type AccordionHeadProps = {|
  * Based on Material-UI AccordionSummary (but we could almost remove it).
  */
 export const AccordionHeader = (props: AccordionHeadProps) => {
+  const classes = useStylesForExpandIcon();
+  console.log(classes);
   return (
     <Column noMargin={props.noMargin} expand>
       <Line noMargin expand alignItems="center">
         <Column noMargin expand>
           <MUIAccordionSummary
+            classes={classes}
             style={styles.accordionSummaryWithExpandOnLeft}
             expandIcon={
               props.expandIcon || (
                 <IconButton size="small">
-                  <ChevronArrowBottom />
+                  <ChevronArrowRight />
                 </IconButton>
               )
             }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
 export default React.memo(props => (
-  <SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16">
+  <SvgIcon width="16" height="16" viewBox="0 0 16 16" {...props} fill="none">
     <path
       fillRule="evenodd"
       clipRule="evenodd"

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect
+      x="0.5"
+      y="0.5"
+      width="15"
+      height="15"
+      rx="3.5"
+      stroke="currentColor"
+      fill="none"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.49303 6.80026C5.69538 6.61236 6.01175 6.62408 6.19965 6.82643L7.99992 8.76519L9.80019 6.82643C9.98809 6.62408 10.3045 6.61236 10.5068 6.80026C10.7092 6.98816 10.7209 7.30453 10.533 7.50688L8.36632 9.84022C8.27171 9.9421 8.13896 9.99999 7.99992 9.99999C7.86089 9.99999 7.72813 9.9421 7.63352 9.84022L5.46686 7.50688C5.27896 7.30453 5.29067 6.98816 5.49303 6.80026Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

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

@@ -2,7 +2,7 @@ import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
 export default React.memo(props => (
-  <SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16">
+  <SvgIcon width="16" height="16" viewBox="0 0 16 16" {...props} fill="none">
     <path
       fillRule="evenodd"
       clipRule="evenodd"

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect
+      x="0.5"
+      y="0.5"
+      width="15"
+      height="15"
+      rx="3.5"
+      stroke="currentColor"
+      fill="none"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.80035 5.49309C6.98825 5.29073 7.30462 5.27902 7.50698 5.46692L9.84031 7.63359C9.94219 7.72819 10.0001 7.86095 10.0001 7.99998C10.0001 8.13902 9.94219 8.27177 9.84031 8.36638L7.50698 10.533C7.30462 10.7209 6.98825 10.7092 6.80035 10.5069C6.61245 10.3045 6.62417 9.98815 6.82652 9.80025L8.76528 7.99998L6.82652 6.19971C6.62417 6.01181 6.61245 5.69544 6.80035 5.49309Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));