feat(app-general): add google chrome suggestion banner

packages/game-app/src/App.tsx

@@ -1,8 +1,11 @@
 import React, { Suspense, useEffect, useState } from 'react';
 import { Redirect, Route, Switch, useLocation, useHistory } from 'react-router-dom';
-import { PrivateRoute, RoutingPath } from '@pipeline/routing';
+import { PrivateRoute, RoutingPath, useNavigateOutsideTo } from '@pipeline/routing';
 import { useBootstrapIsFinished } from './_shared';
 import { AuthUser, useLoggedUser } from '@pipeline/auth';
+import PersistentBanner from './_shared/components/PersistentBanner';
+import { Box, Link, Typography } from '@pipeline/components';
+import { useTranslate } from '@pipeline/i18n';
 
 const Signup = React.lazy(() => import('./signup/components/Signup'));
 const EmailVerificationRequired = React.lazy(() => import('./signup/components/EmailVerificationRequired'));
@@ -14,6 +17,8 @@ const Login = React.lazy(() => import('./login/components/Login'));
 const GameView = React.lazy(() => import('./gameView/components/GameView'));
 const CreateGameView = React.lazy(() => import('./createGame/components/CreateGameView'));
 
+const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+
 /**
  * Returns route and default redirect according to auth condition:
  *
@@ -60,6 +65,7 @@ function App() {
 
   const location = useLocation<{ desiredUrl: string }>();
   const history = useHistory();
+  const t = useTranslate();
 
   useEffect(() => {
     if (!state && user?.emailVerified && location.state?.desiredUrl) {
@@ -69,6 +75,8 @@ function App() {
     }
   }, [location, user, history, state]);
 
+  const goToChrome = useNavigateOutsideTo('https://www.google.com/chrome/', true);
+
   return bootstrapIsFinished ? (
     <Suspense fallback={null}>
       <Switch>
@@ -77,6 +85,18 @@ function App() {
         <PrivateRoute path={RoutingPath.CreateGame} component={CreateGameView} />
         {renderAuthRoutes(user)}
       </Switch>
+      {!isChrome && (
+        <PersistentBanner key="googleChrome">
+          <Box>
+            <Typography as="span" fontSize="18px">
+              {t('general.chromeBanner')}
+            </Typography>
+            <Link onClick={goToChrome} variant="blue">
+              {t('general.chrome')}
+            </Link>
+          </Box>
+        </PersistentBanner>
+      )}
     </Suspense>
   ) : (
     <div>LOADING ...</div>

packages/game-app/src/_shared/components/PersistentBanner/PersistentBanner.styled.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const Banner = styled.div`
+  position: absolute;
+  z-index: 1000;
+  left: 50px;
+  right: 50px;
+  bottom: 16px;
+  height: 50px;
+  background: #d7d2cb;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+Banner.displayName = 'Banner';
+
+export const CloseIconWrapper = styled.div`
+  position: absolute;
+  right: 4px;
+  top: 4px;
+`;
+
+CloseIconWrapper.displayName = 'CloseIconWrapper';

packages/game-app/src/_shared/components/PersistentBanner/PersistentBanner.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Banner, CloseIconWrapper } from './PersistentBanner.styled';
+import { ReactComponent as ClearIcon } from '../../../assets/icons/clear-search.svg';
+import IconButton from '../IconButton';
+
+type Props = {
+  key: string;
+};
+
+// todo do we have to persist the closed banner?
+const PersistentBanner: React.FC<Props> = ({ key, children }) => {
+  const [visible, setVisible] = useState<boolean | null>(true);
+
+  const close = useCallback(() => {
+    setVisible(false);
+    // localStorage.setItem(`bannerClosed:${key}`, 'true');
+    //}, [key])
+  }, []);
+
+  /* for persistence
+  useEffect(() => {
+    const bannerClosed = localStorage.getItem(`bannerClosed:${key}`);
+    setVisible(!(bannerClosed === 'true'))
+  }, [key])
+  */
+
+  return visible
+    ? createPortal(
+        <Banner>
+          <CloseIconWrapper>
+            <IconButton variant="clearSmall" onClick={close}>
+              <ClearIcon />
+            </IconButton>
+          </CloseIconWrapper>
+          {children}
+        </Banner>,
+        document.body,
+      )
+    : null;
+};
+
+PersistentBanner.displayName = 'PersistentBanner';
+
+export default PersistentBanner;

packages/game-app/src/_shared/components/PersistentBanner/index.ts

@@ -0,0 +1,3 @@
+import PersistentBanner from './PersistentBanner';
+
+export default PersistentBanner;

packages/game-app/src/assets/i18n/en.ts

@@ -177,6 +177,8 @@ const translations = {
       required: 'This field is required',
     },
     emptyOptionLabel: 'None selected',
+    chromeBanner: 'To get the best experience, we recommend that you view this service in',
+    chrome: 'Google Chrome',
   },
   card: {
     type: {