Improve homepage bottom bar icons on mobile (#7342)

newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/SurveyCard.js

@@ -33,8 +33,7 @@ export const SurveyCard = ({
           </Text>
           <Text noMargin size="body">
             <Trans>
-              Answer a 1-minute survey to personalize your “Get started”
-              content.
+              Answer a 1-minute survey to personalize your suggested content.
             </Trans>
           </Text>
           <Spacer />

newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenu.js

@@ -6,9 +6,9 @@ import Drawer from '@material-ui/core/Drawer';
 import IconButton from '../../../UI/IconButton';
 import VerticalTabButton from '../../../UI/VerticalTabButton';
 import DoubleChevronArrowLeft from '../../../UI/CustomSvgIcons/DoubleChevronArrowLeft';
-import PickAxeIcon from '../../../UI/CustomSvgIcons/PickAxe';
+import HammerIcon from '../../../UI/CustomSvgIcons/Hammer';
 import SchoolIcon from '../../../UI/CustomSvgIcons/School';
-import GoogleControllerIcon from '../../../UI/CustomSvgIcons/GoogleController';
+import ControllerIcon from '../../../UI/CustomSvgIcons/Controller';
 import BookLeafIcon from '../../../UI/CustomSvgIcons/BookLeaf';
 import SunIcon from '../../../UI/CustomSvgIcons/Sun';
 import StoreIcon from '../../../UI/CustomSvgIcons/Store';
@@ -63,7 +63,7 @@ export type HomePageMenuTab = {|
 
 const homePageMenuTabs: { [tab: HomeTab]: HomePageMenuTab } = {
   'get-started': {
-    label: <Trans>Get Started</Trans>,
+    label: <Trans>Start</Trans>,
     tab: 'get-started',
     id: 'home-get-started-tab',
     getIcon: ({ color, fontSize }) => (
@@ -75,7 +75,7 @@ const homePageMenuTabs: { [tab: HomeTab]: HomePageMenuTab } = {
     tab: 'create',
     id: 'home-create-tab',
     getIcon: ({ color, fontSize }) => (
-      <PickAxeIcon fontSize={fontSize} color={color} />
+      <HammerIcon fontSize={fontSize} color={color} />
     ),
   },
   shop: {
@@ -99,7 +99,7 @@ const homePageMenuTabs: { [tab: HomeTab]: HomePageMenuTab } = {
     tab: 'play',
     id: 'home-play-tab',
     getIcon: ({ color, fontSize }) => (
-      <GoogleControllerIcon fontSize={fontSize} color={color} />
+      <ControllerIcon fontSize={fontSize} color={color} />
     ),
   },
   'team-view': {

newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenuBar.js

@@ -20,18 +20,19 @@ import {
 import { Toolbar, ToolbarGroup } from '../../../UI/Toolbar';
 import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext';
 import { SECTION_DESKTOP_SPACING } from './SectionContainer';
+import Text from '../../../UI/Text';
 
-const iconSize = 20;
-const iconButtonPadding = 8;
+const iconSize = 24;
+const iconButtonPadding = 4;
 /**
  * Padding bottom is bigger than padding top to leave space for the Android/iOS
  * bottom navigation bar.
  */
 const iconButtonMarginBottom = 12;
-const iconButtonLabelPadding = 4;
+const iconButtonLabelSize = 20;
 const toolbarHeight =
   iconSize +
-  2 * iconButtonLabelPadding +
+  iconButtonLabelSize +
   2 * iconButtonPadding +
   iconButtonMarginBottom;
 export const homepageDesktopMenuBarWidth = 230;
@@ -57,6 +58,12 @@ export const styles = {
     fontSize: iconSize,
     height: toolbarHeight,
   },
+  buttonContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
   bottomButtonsContainer: {
     marginBottom: 'env(safe-area-inset-bottom)',
   },
@@ -65,7 +72,11 @@ export const styles = {
     marginBottom: iconButtonMarginBottom,
     fontSize: 'inherit',
   },
-  buttonLabel: { padding: iconButtonLabelPadding, display: 'flex' },
+  icon: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginBottom: 2,
+  },
 };
 
 type Props = {|
@@ -85,7 +96,7 @@ const HomePageMenuBar = ({
 }: Props) => {
   const { isMobile, isMediumScreen } = useResponsiveWindowSize();
   const isMobileOrSmallScreen = isMobile || isMediumScreen;
-  const theme = React.useContext(GDevelopThemeContext);
+  const gdevelopTheme = React.useContext(GDevelopThemeContext);
   const { limits } = React.useContext(AuthenticatedUserContext);
   const tabsToDisplay = getTabsToDisplay({ limits });
   const largeScreenOnlyButtons: {
@@ -119,33 +130,54 @@ const HomePageMenuBar = ({
         square
         style={{
           ...styles.mobileContainer,
-          borderTop: `1px solid ${theme.home.separator.color}`,
+          borderTop: `1px solid ${gdevelopTheme.home.separator.color}`,
         }}
       >
         <Toolbar height={toolbarHeight}>
-          <ToolbarGroup>
+          <ToolbarGroup spaceOut>
             {tabsToDisplay.map(({ label, tab, getIcon, id }) => {
               const isActive = activeTab === tab;
               return (
-                <IconButton
-                  color="default"
-                  key={id}
-                  disableRipple
-                  disableFocusRipple
-                  style={styles.mobileButton}
-                  onClick={() => {
-                    setActiveTab(tab);
+                <div
+                  style={{
+                    ...styles.buttonContainer,
+                    borderTop: `3px solid ${
+                      isActive
+                        ? gdevelopTheme.iconButton.selectedBackgroundColor
+                        : // Always keep the border so there's no layout shift.
+                          'transparent'
+                    }`,
+                    ...(!isActive
+                      ? { color: gdevelopTheme.text.color.secondary }
+                      : {}),
                   }}
-                  selected={isActive}
-                  id={id}
                 >
-                  <span style={styles.buttonLabel}>
-                    {getIcon({
-                      color: isActive ? 'inherit' : 'secondary',
-                      fontSize: 'inherit',
-                    })}
-                  </span>
-                </IconButton>
+                  <IconButton
+                    color="inherit"
+                    key={id}
+                    disableRipple
+                    disableFocusRipple
+                    disableHover
+                    style={styles.mobileButton}
+                    onClick={() => {
+                      setActiveTab(tab);
+                    }}
+                    selected={false}
+                    id={id}
+                  >
+                    <Column noMargin>
+                      <span style={styles.icon}>
+                        {getIcon({
+                          color: 'inherit',
+                          fontSize: 'inherit',
+                        })}
+                      </span>
+                      <Text size="body-small" color="inherit" noMargin>
+                        {label}
+                      </Text>
+                    </Column>
+                  </IconButton>
+                </div>
               );
             })}
           </ToolbarGroup>
@@ -158,7 +190,7 @@ const HomePageMenuBar = ({
     <Paper
       style={{
         ...(isMobileOrSmallScreen ? styles.mobileMenu : styles.desktopMenu),
-        borderRight: `1px solid ${theme.home.separator.color}`,
+        borderRight: `1px solid ${gdevelopTheme.home.separator.color}`,
       }}
       square
       background="dark"

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

@@ -66,7 +66,7 @@ const BottomToolbar = React.memo<Props>((props: Props) => {
   return (
     <Paper background="medium" square style={styles.container}>
       <Toolbar height={toolbarHeight} paddingBottom={toolbarPaddingBottom}>
-        <ToolbarGroup>
+        <ToolbarGroup spaceOut>
           {Object.keys(editors).map(editorId => {
             const { icon, buttonId } = editors[editorId];
             const isSelected = props.selectedEditorId === editorId;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon
+    {...props}
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.2079 4.25C6.08921 4.25 5.15646 5.04939 4.90073 6.12513C4.21877 8.99403 3.61173 11.5052 2.89195 14.2377C2.42794 15.9991 3.14788 17.6469 4.43117 18.3752C5.07736 18.7419 5.85387 18.8626 6.63456 18.6338C7.41151 18.4061 8.12572 17.8531 8.70885 16.9922C8.94115 16.6493 8.85145 16.1829 8.50851 15.9506C8.16556 15.7183 7.69924 15.808 7.46694 16.151C7.034 16.7901 6.58495 17.0852 6.21265 17.1943C5.84409 17.3024 5.48536 17.2487 5.1715 17.0706C4.5347 16.7092 4.03537 15.7856 4.34247 14.6198C5.06704 11.8691 5.67749 9.3435 6.36006 6.47205C6.46711 6.02173 6.83463 5.75 7.2079 5.75H17.6749C18.0509 5.75 18.4247 6.02298 18.5399 6.47691C18.8684 7.77218 19.4991 10.2222 20.6575 14.6198C20.9646 15.7856 20.4653 16.7092 19.8285 17.0706C19.5146 17.2487 19.1559 17.3024 18.7873 17.1943C18.415 17.0852 17.966 16.7901 17.533 16.151C17.3007 15.808 16.8344 15.7183 16.4915 15.9506C16.1485 16.1829 16.0588 16.6493 16.2911 16.9922C16.8743 17.8531 17.5885 18.4061 18.3654 18.6338C19.1461 18.8626 19.9226 18.7419 20.5688 18.3752C21.8521 17.6469 22.572 15.9991 22.108 14.2377C20.9503 9.84271 20.3208 7.39736 19.9938 6.10808C19.7234 5.04219 18.7908 4.25 17.6749 4.25H7.2079Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.24999 8C9.24999 7.58579 8.9142 7.25 8.49999 7.25C8.08577 7.25 7.74999 7.58579 7.74999 8V8.25H7.49999C7.08577 8.25 6.74999 8.58579 6.74999 9C6.74999 9.41421 7.08577 9.75 7.49999 9.75H7.74999V10C7.74999 10.4142 8.08577 10.75 8.49999 10.75C8.9142 10.75 9.24999 10.4142 9.24999 10V9.75H9.49999C9.9142 9.75 10.25 9.41421 10.25 9C10.25 8.58579 9.9142 8.25 9.49999 8.25H9.24999V8Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.75 9C14.75 8.58579 15.0858 8.25 15.5 8.25H16.5C16.9142 8.25 17.25 8.58579 17.25 9C17.25 9.41421 16.9142 9.75 16.5 9.75H15.5C15.0858 9.75 14.75 9.41421 14.75 9Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.74999 13.5C6.74999 12.2573 7.75735 11.25 8.99999 11.25C10.2426 11.25 11.25 12.2573 11.25 13.5C11.25 14.7427 10.2426 15.75 8.99999 15.75C7.75735 15.75 6.74999 14.7427 6.74999 13.5ZM8.99999 12.75C8.58577 12.75 8.24999 13.0858 8.24999 13.5C8.24999 13.9142 8.58577 14.25 8.99999 14.25C9.41421 14.25 9.74999 13.9142 9.74999 13.5C9.74999 13.0858 9.41421 12.75 8.99999 12.75Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 11.25C14.7573 11.25 13.75 12.2573 13.75 13.5C13.75 14.7427 14.7573 15.75 16 15.75C17.2427 15.75 18.25 14.7427 18.25 13.5C18.25 12.2573 17.2427 11.25 16 11.25ZM15.25 13.5C15.25 13.0858 15.5858 12.75 16 12.75C16.4142 12.75 16.75 13.0858 16.75 13.5C16.75 13.9142 16.4142 14.25 16 14.25C15.5858 14.25 15.25 13.9142 15.25 13.5Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon
+    {...props}
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.8427 1.23901C10.5452 1.0407 10.1491 1.07992 9.89633 1.33272L8.83567 2.39338C8.69501 2.53403 8.616 2.7248 8.616 2.92371C8.616 3.12262 8.69502 3.31339 8.83567 3.45404C10.5106 5.12894 11.2421 6.69567 11.5617 7.81432C11.7222 8.37618 11.7804 8.83058 11.7994 9.13557C11.8038 9.20557 11.8061 9.26768 11.8071 9.3214L2.11811 19.0103C1.82522 19.3032 1.82521 19.7781 2.1181 20.071L4.23942 22.1924C4.38007 22.3331 4.57084 22.4121 4.76975 22.4121C4.96867 22.4121 5.15943 22.3331 5.30009 22.1924L15.0228 12.4696L15.3764 12.8232L14.8461 13.3536C14.5532 13.6465 14.5532 14.1213 14.8461 14.4142L17.3209 16.8891C17.4616 17.0298 17.6523 17.1088 17.8512 17.1088C18.0502 17.1088 18.2409 17.0298 18.3816 16.8891L23.3314 11.9393C23.472 11.7987 23.551 11.6079 23.551 11.409C23.551 11.2101 23.472 11.0193 23.3314 10.8786L20.8565 8.40378C20.5636 8.11089 20.0887 8.11089 19.7958 8.40377L19.2655 8.93412L18.9119 8.58057L19.4423 8.05024C19.6012 7.89136 19.6804 7.66961 19.6583 7.446C19.6362 7.2224 19.5149 7.0205 19.328 6.89586L10.8427 1.23901ZM12.1944 13.1768L11.1337 12.1161L3.70909 19.5407L4.76977 20.6014L12.1944 13.1768ZM13.0783 10.1715C13.1987 10.0511 13.2746 9.89331 13.2934 9.72405L13.2936 9.72213L13.2938 9.71991L13.2944 9.71457L13.2957 9.70037C13.2967 9.68934 13.2979 9.67521 13.2991 9.65807C13.3016 9.62378 13.3042 9.5774 13.3059 9.51965C13.3093 9.40416 13.3091 9.24305 13.2965 9.04202C13.2714 8.6399 13.197 8.07783 13.0039 7.40225C12.6543 6.1786 11.9205 4.60016 10.4137 2.93665L10.5222 2.82815L17.7347 7.63646L17.3209 8.05022C17.1803 8.19087 17.1012 8.38164 17.1012 8.58055C17.1012 8.77947 17.1803 8.97023 17.3209 9.11089L18.7351 10.5251C19.028 10.818 19.5029 10.818 19.7958 10.5251L20.3261 9.99476L21.7404 11.409L17.8513 15.2981L16.4371 13.8839L16.9674 13.3535C17.2603 13.0606 17.2603 12.5857 16.9674 12.2929L15.5532 10.8787C15.2603 10.5858 14.7854 10.5858 14.4925 10.8786L13.255 12.1161L12.1944 11.0555L13.0783 10.1715Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

newIDE/app/src/UI/HelpIcon/__snapshots__/HelpIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`HelpIcon renders nothing if the helpPagePath is empty 1`] = `null`;
 
 exports[`HelpIcon renders the icon linking to a help page 1`] = `
 <button
-  className="MuiButtonBase-root MuiIconButton-root makeStyles-root-1 makeStyles-root-3 MuiIconButton-colorSecondary"
+  className="MuiButtonBase-root MuiIconButton-root makeStyles-root-1 MuiIconButton-colorSecondary"
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -22,7 +22,7 @@ exports[`HelpIcon renders the icon linking to a help page 1`] = `
   type="button"
 >
   <span
-    className="MuiIconButton-label makeStyles-label-2 makeStyles-label-4"
+    className="MuiIconButton-label makeStyles-label-2"
   >
     <svg
       aria-hidden={true}

newIDE/app/src/UI/IconButton.js

@@ -7,6 +7,7 @@ import { type MessageDescriptor } from '../Utils/i18n/MessageDescriptor.flow';
 import { adaptAcceleratorString } from '../UI/AcceleratorString';
 import { tooltipEnterDelay } from './Tooltip';
 import GDevelopThemeContext from './Theme/GDevelopThemeContext';
+import { type GDevelopTheme } from './Theme';
 import { makeStyles } from '@material-ui/core/styles';
 
 type IconProps =
@@ -60,25 +61,32 @@ type Props = {|
 
   disableRipple?: boolean,
   disableFocusRipple?: boolean,
+  disableHover?: boolean,
 
-  color?: 'default',
+  color?: 'default' | 'inherit',
 |};
 
-const useStyles = makeStyles({
-  root: props =>
-    props.color
-      ? {
-          color: props.color,
-        }
-      : undefined,
-  label: props =>
-    props.backgroundColor
-      ? {
-          backgroundColor: props.backgroundColor,
-          borderRadius: 4,
-        }
-      : undefined,
-});
+const useStylesForIconButton = ({
+  theme,
+  selected,
+  disableHover,
+}: {|
+  theme: GDevelopTheme,
+  selected?: boolean,
+  disableHover?: boolean,
+|}) =>
+  makeStyles({
+    root: {
+      color: selected ? theme.iconButton.selectedColor : undefined,
+      '&:hover': disableHover ? { backgroundColor: 'transparent' } : {},
+    },
+    label: {
+      backgroundColor: selected
+        ? theme.iconButton.selectedBackgroundColor
+        : undefined,
+      borderRadius: selected ? 4 : undefined,
+    },
+  })();
 
 /**
  * A button showing just an icon, based on Material-UI icon button.
@@ -92,16 +100,15 @@ const IconButton = React.forwardRef<Props, {||}>((props: Props, ref) => {
     acceleratorString,
     color,
     style,
+    disableHover,
     ...otherProps
   } = props;
 
   const gdevelopTheme = React.useContext(GDevelopThemeContext);
-  const classes = useStyles({
-    // Override Material-UI colors only when the button is selected.
-    color: selected ? gdevelopTheme.iconButton.selectedColor : undefined,
-    backgroundColor: selected
-      ? gdevelopTheme.iconButton.selectedBackgroundColor
-      : undefined,
+  const classes = useStylesForIconButton({
+    theme: gdevelopTheme,
+    selected,
+    disableHover,
   });
 
   const iconButton = (

newIDE/app/src/UI/Toolbar.js

@@ -51,7 +51,9 @@ const toolbarGroupStyle = props => ({
   flex: 1,
   display: 'flex',
   alignItems: 'center',
-  justifyContent: props.firstChild
+  justifyContent: props.spaceOut
+    ? 'space-around'
+    : props.firstChild
     ? 'flex-start'
     : props.lastChild
     ? 'flex-end'
@@ -62,6 +64,7 @@ type ToolbarGroupProps = {|
   children?: React.Node,
   firstChild?: boolean,
   lastChild?: boolean,
+  spaceOut?: boolean,
 |};
 
 export const ToolbarGroup = React.memo<ToolbarGroupProps>(