Add icons to help understand to scroll during in app tutorial (#7057)

newIDE/app/src/InAppTutorial/InAppTutorialElementHighlighter.js

@@ -8,8 +8,11 @@ import ArrowTop from '../UI/CustomSvgIcons/ArrowTop';
 import ArrowBottom from '../UI/CustomSvgIcons/ArrowBottom';
 import ArrowLeft from '../UI/CustomSvgIcons/ArrowLeft';
 import ArrowRight from '../UI/CustomSvgIcons/ArrowRight';
+import PointerFinger from '../UI/CustomSvgIcons/PointerFinger';
+import Mouse from '../UI/CustomSvgIcons/Mouse';
 import useIsElementVisibleInScroll from '../Utils/UseIsElementVisibleInScroll';
 import { aboveMaterialUiMaxZIndex } from '../UI/MaterialUISpecificUtil';
+import { useResponsiveWindowSize } from '../UI/Responsive/ResponsiveWindowMeasurer';
 
 type Props = {|
   element: HTMLElement,
@@ -32,9 +35,10 @@ const styles = {
   scrollDirectionArrow: {
     color: '#1D1D26',
     display: 'flex',
+    alignItems: 'center',
     backgroundColor: highlighterPrimaryColor,
     boxShadow: `0 0 12px 2px ${highlighterPrimaryColor}`,
-    padding: 2,
+    padding: '2px 5px 2px 2px',
     borderRadius: 3,
   },
 };
@@ -43,6 +47,7 @@ function InAppTutorialElementHighlighter({ element }: Props) {
   const forceUpdate = useForceUpdate();
   useOnResize(forceUpdate);
   const [showHighlighter, setShowHighlighter] = React.useState<boolean>(true);
+  const { isMobile } = useResponsiveWindowSize();
 
   const scrollParent = getScrollParent(element);
   const scrollParentRectangle = scrollParent
@@ -136,7 +141,7 @@ function InAppTutorialElementHighlighter({ element }: Props) {
           }}
         />
       )}
-      {!showHighlighter && scrollParentRectangle && (
+      {!showHighlighter && Icon && scrollParentRectangle && (
         <div
           id="in-app-tutorial-scroll-indicator"
           style={{
@@ -161,7 +166,12 @@ function InAppTutorialElementHighlighter({ element }: Props) {
           }}
         >
           <div style={styles.scrollDirectionArrow}>
-            {Icon && <Icon fontSize="large" />}
+            {Icon && (
+              <>
+                <Icon fontSize="large" />
+                {isMobile ? <PointerFinger /> : <Mouse />}
+              </>
+            )}
           </div>
         </div>
       )}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="16" height="16" viewBox="3 2.5 19 19">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.5 10C7.5 7.23858 9.73858 5 12.5 5C15.2614 5 17.5 7.23858 17.5 10V14C17.5 16.7614 15.2614 19 12.5 19C9.73858 19 7.5 16.7614 7.5 14V10Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+    <path
+      d="M12.5 9V11"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      fill="none"
+    />
+  </SvgIcon>
+));

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

@@ -0,0 +1,25 @@
+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 203.079 203.079"
+    fill="currentColor"
+  >
+    <path
+      d="M192.231,104.082V102c0-12.407-10.094-22.5-22.5-22.5c-2.802,0-5.484,0.519-7.961,1.459
+	C159.665,70.722,150.583,63,139.731,63c-2.947,0-5.76,0.575-8.341,1.61C128.667,55.162,119.624,48,109.231,48
+	c-2.798,0-5.496,0.541-8,1.516V22.5c0-12.407-10.094-22.5-22.5-22.5s-22.5,10.093-22.5,22.5v66.259
+	c-3.938-5.029-8.673-9.412-14.169-11.671c-6.133-2.52-12.587-2.219-18.667,0.872c-11.182,5.686-15.792,19.389-10.277,30.548
+	l27.95,56.563c0.79,1.552,19.731,38.008,54.023,38.008h40c31.54,0,57.199-25.794,57.199-57.506l-0.031-41.491H192.231z
+	 M135.092,188.079h-40c-24.702,0-40.091-28.738-40.646-29.796l-27.88-56.42c-1.924-3.893-0.33-8.519,3.629-10.532
+	c2.182-1.11,4.081-1.223,6.158-0.372c8.281,3.395,16.41,19.756,19.586,29.265l2.41,7.259l12.883-4.559V22.5
+	c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5V109h0.136h14.864h0.136V71c0-4.187,3.748-8,7.864-8c4.262,0,8,3.505,8,7.5v15v26h15
+	v-26c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5V102v16.5h15V102c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5v10.727h0.035
+	l0.025,32.852C177.291,169.014,158.36,188.079,135.092,188.079z"
+    />
+  </SvgIcon>
+));

newIDE/app/src/stories/componentStories/InAppTutorial/InAppTutorialElementHighlighterAndTooltipDisplayer.stories.js

@@ -64,7 +64,10 @@ const elementIdToShowQuitButton = {
 
 export const Default = () => {
   const [listItemRef, setListItemRef] = React.useState<any>(null);
-  const [elementToHighlight, setElementToHighlight] = React.useState<any>(null);
+  const [
+    elementToHighlight,
+    setElementToHighlight,
+  ] = React.useState<?HTMLElement>(null);
   const [textFieldValue, setTextFieldValue] = React.useState<string>(
     'Object.Variable'
   );
@@ -90,9 +93,12 @@ export const Default = () => {
   React.useEffect(
     () => {
       if (elementToHighlightId.startsWith('#')) {
-        setElementToHighlight(
-          queryElementOrItsMostVisuallySignificantParent(elementToHighlightId)
+        const {
+          elementToHighlight,
+        } = queryElementOrItsMostVisuallySignificantParent(
+          elementToHighlightId
         );
+        setElementToHighlight(elementToHighlight);
       }
     },
     [elementToHighlightId]