fix mobile bug

src/enhance/index.js

@@ -100,7 +100,7 @@ function transformEventsForMobile (props) {
   return Object.keys(props).reduce((aux, prop) => {
     let propT = prop;
     switch (prop) {
-      case 'onClick': propT = 'onTouchStart'; break;
+      case 'onClick': propT = 'onTouchEnd'; break;
       // ...
     }
     aux[propT] = props[prop];
@@ -110,7 +110,7 @@ function transformEventsForMobile (props) {
 
 function transformEvents (props) {
   return isMobile
-    ? transformEventsForMobile
+    ? transformEventsForMobile(props)
     : props;
 }
 

src/pages/Home/Scene.js

@@ -16,8 +16,10 @@ import iPhoneXMockupPng from '../../images/screenshots/iphone-x-mockup.png';
 import iPhoneScreenshotPng from '../../images/screenshots/iphone-x.png';
 import { ReactComponent as MentionSvg } from '../../images/svg/mention.svg';
 import { ReactComponent as GoodTeamSvg } from '../../images/svg/good-team.svg';
-import { ReactComponent as ProcessgSvg } from '../../images/svg/process.svg'
-import { ReactComponent as MobileSvg } from '../../images/svg/mobile.svg'
+import { ReactComponent as ProcessgSvg } from '../../images/svg/process.svg';
+import { ReactComponent as MobileSvg } from '../../images/svg/mobile.svg';
+
+import {InteractionMenu, Card} from '../NotificationsRedesign/redesign/ui';
 
 import RobinLogo from '../../images/logos/robin-logo.png';
 import ForwardLogo from '../../images/logos/forward-logo.png';
@@ -32,6 +34,12 @@ const version = require('../../../package.json').version + hash;
 const WIDTH_FOR_MEDIUM_SCREENS = '1100px';
 const WIDTH_FOR_SMALL_SCREENS = '800px';
 
+const HomeInteractionMenu = styled(InteractionMenu)`
+  position: fixed;
+  z-index: 10;
+  left: 58px !important;
+`;
+
 const PageContainer = styled('div')`
   overflow: hidden;
   background: #fcf8f3;
@@ -251,6 +259,7 @@ const IconLink = styled('span')`
   width: 40px;
   transition: all 150ms ease;
   i {
+    font-size: 16px;
     color: inherit;
   }
   &:before {
@@ -350,6 +359,15 @@ const SmallLink = styled('a')`
 
 export default function Scene ({loggedIn, onLogout, ...props}) {
   const [showBorder, setShowBorder] = React.useState(false);
+  const [menu, openMenu] = React.useState(false);
+
+  React.useEffect(() => {
+    const body = window.document.querySelector('body');
+    const hideMenu = () => openMenu(false);
+    // For mobile `touchend`
+    body.addEventListener('click', hideMenu);
+    return () => body.removeEventListener('click', hideMenu);
+  }, []);
 
   // React.useEffect(() => {
   //   const PAGE_OFFSET = 100;
@@ -445,13 +463,19 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
             }
           `}>
             {/* @TODO implement the menu */}
-            <IconLink>
+            <IconLink onClick={() => openMenu(true)}>
               <i className="fas fa-bars"></i>
             </IconLink>
           </div>
         </Container>
       </FixedContainer>
 
+      <HomeInteractionMenu show={menu}>
+        <Card css={css`padding: 0;`}>
+          njskdjnk
+        </Card>
+      </HomeInteractionMenu>
+
       <Container css={css`
         margin: 32px auto;
         flex-direction: column;

src/pages/NotificationsRedesign/redesign/Scene.js

@@ -10,7 +10,7 @@ import Logo from '../../../components/Logo';
 import LoadingIcon from '../../../components/LoadingIcon'
 import {getFact} from '../../../utils/facts';
 import {Mode, Sort, View} from '../index';
-import {withOptimizedTouchEvents} from '../../../enhance';
+import {isMobile} from 'react-device-detect';
 import {
   stringOfError,
   getPRIssueIcon,
@@ -351,9 +351,10 @@ export default function Scene ({
     window.scrollTo(0, 0);
     const body = window.document.querySelector('body');
     const hideDropdownMenu = () => setDropdownOpen(false);
-    // For mobile `touchstart`
-    body.addEventListener('click', hideDropdownMenu);
-    return () => body.removeEventListener('click', hideDropdownMenu);
+    // For mobile `touchend`
+    const eventType = isMobile ? 'touchend' : 'click';
+    body.addEventListener(eventType, hideDropdownMenu);
+    return () => body.removeEventListener(eventType, hideDropdownMenu);
   }, []);
 
   // Updating the counts when new stats come in.

src/pages/NotificationsRedesign/redesign/ui/ui.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import {css, jsx, keyframes} from '@emotion/core';
+import {isMobile} from 'react-device-detect';
 import {navigate} from "@reach/router"
 import {routes} from '../../../../constants';
 import {withOnEnter, withOptimizedTouchEvents} from '../../../../enhance';
@@ -176,7 +177,7 @@ export const IconContainer = withOptimizedTouchEvents(styled('div')`
     overflow: hidden;
   }
   &:hover {
-    background: ${props => props.selected ? 'transparent' : 'rgba(233, 233, 233, .1)'};
+    background: ${props => props.selected ? 'rgba(255, 255, 255, 0)' : 'rgba(233, 233, 233, .1)'};
   }
 `);
 
@@ -481,7 +482,7 @@ export const LoadingNotificationRow = withOptimizedTouchEvents(styled(Notificati
   transition: all 200ms ease;
   opacity: 0.75;
   &:after {
-    background: linear-gradient(90deg, transparent, #f9f8f5, transparent);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #f9f8f5, rgba(255, 255, 255, 0));
     display: block;
     content: "";
     position: absolute;
@@ -617,8 +618,9 @@ export function ProfileSection ({user, onLogout}) {
   React.useEffect(() => {
     const body = window.document.querySelector('body');
     const hideMenu = () => setMenuShow(false);
-    body.addEventListener('click', hideMenu);
-    return () => body.removeEventListener('click', hideMenu);
+    const eventType = isMobile ? 'touchend' : 'click';
+    body.addEventListener(eventType, hideMenu);
+    return () => body.removeEventListener(eventType, hideMenu);
   }, []);
 
   return (
@@ -673,30 +675,30 @@ export function ProfileSection ({user, onLogout}) {
           opacity: 0.7;
         }
       `}>
-        <div onClick={event => {
+        <optimized.div onClick={event => {
           event.stopPropagation();
           navigate(routes.HOME);
           setMenuShow(false);
         }}>
           <h2>Go home</h2>
           <p>Head over back to the home page</p>
-        </div>
-        <div onClick={event => {
+        </optimized.div>
+        <optimized.div onClick={event => {
           event.stopPropagation();
           navigate(routes.NOTIFICATIONS);
           setMenuShow(false);
         }}>
           <h2>Use old design</h2>
           <p>Switch back to the original Meteorite design</p>
-        </div>
-        <div onClick={event => {
+        </optimized.div>
+        <optimized.div onClick={event => {
           event.stopPropagation();
           onLogout();
           setMenuShow(false);
         }}>
           <h2>Sign out</h2>
           <p>Log off your account and return to home page</p>
-        </div>
+        </optimized.div>
       </InteractionMenu>
     </>
   );