Merge pull request #722 from Ekep-Obasi/added-signposting-for-mobile-…

…users

Added signposting for mobile users

src/components/App/DeviceCompatibilityNotification/index.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@mui/material'
+import { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { useIsMobile } from '~/hooks/useIsMobile'
+
+export const DeviceCompatibilityNotice = () => {
+  const [isVisible, setIsVisible] = useState(true)
+  const isMobile = useIsMobile()
+
+  useEffect(() => {
+    setIsVisible(true)
+  }, [isMobile])
+
+  const handleClick = () => {
+    setIsVisible(false)
+  }
+
+  return isMobile && isVisible ? (
+    <Wrapper align="center" direction="column" justify="center" onClick={handleClick}>
+      <img alt="screen" src="jamboard_kiosk.png" />
+      <Flex align="center" direction="column" justify="center">
+        <StyledText>Second Brain is currently</StyledText>
+        <StyledText style={{ fontWeight: 600 }}>optimized for Desktop.</StyledText>
+        <StyledText>Mobile support coming soon.</StyledText>
+      </Flex>
+      <Button color="secondary" onClick={handleClick} variant="contained">
+        Got It
+      </Button>
+    </Wrapper>
+  ) : null
+}
+
+const Wrapper = styled(Flex)`
+  height: 100vh;
+  width: 100vw;
+  background: rgba(0, 0, 0, 0.75);
+  gap: 28px;
+  z-index: 2000000000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+`
+
+const StyledText = styled(Text)`
+  color: #fff;
+  text-align: center;
+  font-family: Barlow;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  margin: 1px;
+`

src/components/App/index.tsx

@@ -5,10 +5,10 @@ import 'react-toastify/dist/ReactToastify.css'
 import { Socket } from 'socket.io-client'
 import * as sphinx from 'sphinx-bridge'
 import styled from 'styled-components'
-import { Flex } from '~/components/common/Flex'
 import { DataRetriever } from '~/components/DataRetriever'
 import { GlobalStyle } from '~/components/GlobalStyle'
 import { Universe } from '~/components/Universe'
+import { Flex } from '~/components/common/Flex'
 import { isDevelopment, isE2E } from '~/constants'
 import useSocket from '~/hooks/useSockets'
 import { getIsAdmin } from '~/network/auth'
@@ -34,6 +34,7 @@ import { MainToolbar } from './MainToolbar'
 import { AppProviders } from './Providers'
 import { SecondarySideBar } from './SecondarySidebar'
 import { SideBar } from './SideBar'
+import { DeviceCompatibilityNotice } from './DeviceCompatibilityNotification'
 import { Toasts } from './Toasts'
 
 const Wrapper = styled(Flex)`
@@ -204,6 +205,8 @@ export const App = () => {
     <AppProviders>
       <GlobalStyle />
 
+      <DeviceCompatibilityNotice />
+
       <Leva hidden={!isDevelopment} />
 
       <Wrapper direction="row">

src/hooks/useIsMobile/index.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+
+const compatibilityBreakPoint = 620
+
+export const useIsMobile = () => {
+  const query = `(max-width: ${compatibilityBreakPoint}px)`
+
+  const [isMobile, setIsMobile] = useState(() => {
+    const mediaQuery = window.matchMedia(query)
+
+    return mediaQuery.matches
+  })
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query)
+
+    setIsMobile(mediaQuery.matches)
+
+    const handleScreenResize = () => {
+      setIsMobile(mediaQuery.matches)
+    }
+
+    window.addEventListener('resize', handleScreenResize)
+
+    return () => mediaQuery.removeEventListener('change', handleScreenResize)
+  }, [query])
+
+  return isMobile
+}