Merge remote-tracking branch 'origin/master' into master

.all-contributorsrc

@@ -343,6 +343,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "JLambertazzo",
+      "name": "Julien Bertazzo Lambert",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/42924425?v=4",
+      "profile": "https://github.com/JLambertazzo",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 5,

README.md

@@ -146,6 +146,7 @@ Thanks go to these wonderful people ([emoji key](https://allcontributors.org/doc
   <tr>
     <td align="center"><a href="http://ruisaraiva.dev"><img src="https://avatars2.githubusercontent.com/u/7356098?v=4" width="100px;" alt=""/><br /><sub><b>Rui Saraiva</b></sub></a><br /><a href="https://github.com/responsively-org/responsively-app/commits?author=ruisaraiva19" title="Code">💻</a></td>
     <td align="center"><a href="http://www.bakirci.nl"><img src="https://avatars2.githubusercontent.com/u/9880089?v=4" width="100px;" alt=""/><br /><sub><b>Mehmet Bakirci</b></sub></a><br /><a href="https://github.com/responsively-org/responsively-app/commits?author=MBakirci" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/JLambertazzo"><img src="https://avatars0.githubusercontent.com/u/42924425?v=4" width="100px;" alt=""/><br /><sub><b>Julien Bertazzo Lambert</b></sub></a><br /><a href="https://github.com/responsively-org/responsively-app/commits?author=JLambertazzo" title="Code">💻</a></td>
   </tr>
 </table>
 

desktop-app/app/components/ToggleTouch/index.js

@@ -9,6 +9,7 @@ export default function ToggleTouch({iconProps}) {
   const [isTouchMode, setIsTouchMode] = useState(false);
   const [isHover, setHover] = useState(false);
   const [hasPendingState, setPendingState] = useState(false);
+  const [hasTooltip, setTooltip] = useState(false);
   const commonClasses = useCommonStyles();
 
   useEffect(() => {
@@ -25,6 +26,7 @@ export default function ToggleTouch({iconProps}) {
 
   const handleToggleTouch = () => {
     setIsTouchMode(!isTouchMode);
+    setTooltip(!isTouchMode);
     if (isHover) {
       return setPendingState(true);
     }
@@ -50,16 +52,18 @@ export default function ToggleTouch({iconProps}) {
         [commonClasses.iconSelected]: isTouchMode,
       })}
       onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => {
+      onPointerLeave={() => {
         setHover(false);
+      }}
+      onPointerMove={() => {
         if (!hasPendingState) {
           return;
         }
         syncState(isTouchMode);
         setPendingState(false);
       }}
     >
-      <Tooltip title="Toggle Touch Mode">
+      <Tooltip title={hasTooltip ? '' : 'Toggle Touch Mode'}>
         <div onClick={handleToggleTouch}>
           <ToggleTouchIcon {...iconProps} />
         </div>