[PwaLayout] Create vertical/horizontal layouts. Hide app bar.

src/components/pwa/Landing.tsx

@@ -1,29 +1,72 @@
-import { Button, Grid, Box } from '@mui/material';
+import { Button, Box, Divider, Stack, Container, Grid } from '@mui/material';
 import logo from '../../images/logo_blue.png';
 import { usePwaActions } from './store';
+import useHeight from '../layout/ViewPort/hooks/useHeight';
+import useWidth from '../layout/ViewPort/hooks/useWidth';
 
-export default function Landing() {
+const Header = () => (
+  <Stack spacing={0}>
+    <Box sx={{ color: 'primary.dark', fontWeight: 700, fontSize: 28, textAlign: 'center' }}>Welcome to</Box>
+    <Box sx={{ color: 'primary.dark', fontWeight: 700, fontSize: 28, textAlign: 'center' }}>MINDapps!</Box>
+    <Box sx={{ mt: 1 }}>
+      <Divider sx={{ backgroundColor: 'primary.main', height: 6 }} />
+    </Box>
+  </Stack>
+);
+
+const StartButton = () => {
   const { next } = usePwaActions();
   return (
-    <Box sx={{ textAlign: 'center', display: 'flex', justifyContent: 'center', px: 1, py: 2 }}>
-      <Box sx={{ maxWidth: 400, borderRadius: 5, border: 4, borderColor: 'black', px: 1, py: 4 }}>
-        <Grid container spacing={6}>
-          <Grid item xs={12} sx={{ fontWeight: 700, fontSize: 24, textAlign: 'center' }}>
-            Welcome to MINDapps!
-          </Grid>
-          <Grid item xs={12} sx={{ textAlign: 'center' }}>
-            <img src={logo} alt='mindapp' style={{ maxWidth: 88 }} />
-          </Grid>
-          <Grid item xs={12} sx={{ fontSize: 18, textAlign: 'center' }}>
-            Take this quiz to find a suitable app.
-          </Grid>
-          <Grid item xs={12} sx={{ textAlign: 'center' }}>
-            <Button onClick={next} variant='contained' size='large' sx={{ minHeight: 64 }}>
-              Start Quiz!
-            </Button>
-          </Grid>
+    <Button
+      onClick={next}
+      variant='contained'
+      size='large'
+      sx={{ backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main' }, fontSize: 22, minHeight: 64, fontWeight: 700 }}
+    >
+      START QUIZ!
+    </Button>
+  );
+};
+
+const HorizontalLayout = () => {
+  return (
+    <Stack spacing={0} alignItems='center' justifyContent='space-evenly' height='100vh' px={2}>
+      <Grid container justifyContent='space-around' alignItems='center' spacing={8}>
+        <Grid item>
+          <Header />
+          <img src={logo} alt='mindapp' style={{ width: 132, marginTop: 32 }} />
+        </Grid>
+        <Grid item xs>
+          <Box sx={{ fontSize: 16, textAlign: 'center' }}>
+            Answer a few questions, and we will recommend mental health apps that meet your needs and preferences.
+          </Box>
+          <Box sx={{ mt: 4, textAlign: 'center' }}>
+            <StartButton />
+          </Box>
         </Grid>
+      </Grid>
+    </Stack>
+  );
+};
+
+const VerticalLayout = () => {
+  return (
+    <Stack spacing={0} alignItems='center' justifyContent='space-evenly' height='100vh'>
+      <Header />
+      <Box sx={{ fontSize: 16, textAlign: 'center', maxWidth: 400 }}>
+        Answer a few questions, and we will recommend mental health apps that meet your needs and preferences.
       </Box>
-    </Box>
+      <img src={logo} alt='mindapp' style={{ width: 160 }} />
+      <Box sx={{ textAlign: 'center' }}>
+        <StartButton />
+      </Box>
+    </Stack>
   );
+};
+
+export default function Landing() {
+  const height = useHeight();
+  const width = useWidth();
+  const isLandscape = width > height && height < 500;
+  return <Container>{isLandscape ? <HorizontalLayout /> : <VerticalLayout />}</Container>;
 }

src/components/pwa/Pwa.tsx

@@ -35,7 +35,7 @@ export default function Pwa() {
   const index = useSelector((s: AppState) => s.pwa.index);
   const values = useSelector((s: AppState) => s.pwa.values, stringifyEqual);
 
-  const showWelcome = index < 0 ? true : false;
+  const showLanding = index < 0 ? true : false;
 
   const question =
     index >= 0 && index <= questions.length - 1 ? questions[index] : { id: undefined, label: '', options: [], Field: () => <></>, onSelect: undefined };
@@ -100,7 +100,7 @@ export default function Pwa() {
 
   return (
     <Container maxWidth='lg' disableGutters={index === searchIndex} sx={{ pt: 0, pb: 1, px: 0 }}>
-      {showWelcome ? (
+      {showLanding ? (
         <Landing />
       ) : (
         <>

src/components/pwa/PwaLayout.tsx

@@ -6,6 +6,9 @@ import ScrollElementProvider from '../layout/ScrollElementProvider';
 import useHeight from '../layout/ViewPort/hooks/useHeight';
 import PwaAppBar from './PwaAppBar';
 import { useAppTableDataInit } from '../pages/useAppTableData';
+import { useSelector } from 'react-redux';
+import { AppState } from '../../store';
+import { searchIndex } from './questions';
 
 const useStyles = makeStyles(({ breakpoints, palette, appBarHeight }: any) =>
   createStyles({
@@ -45,10 +48,13 @@ export function PwaLayout({ children }) {
 
   useAppTableDataInit({ trigger: true });
 
+  const index = useSelector((s: AppState) => s.pwa.index);
+  const showLanding = index < 0 ? true : false;
+
   const classes = useStyles({
     leftDrawerOpen: false,
     fullHeight: true,
-    overflow: 'auto',
+    overflow: showLanding || index === searchIndex ? 'hidden' : 'auto',
     contentHeight,
     footerHeight: 0,
     appBarHeight,
@@ -59,8 +65,8 @@ export function PwaLayout({ children }) {
     <div data-testid='app-container' className={classes.root}>
       <main id='app-content' ref={setScrollElement} className={classes.content}>
         <ScrollElementProvider value={scrollElement}>
-          <PwaAppBar />
-          <div className={classes.toolbar} />
+          {!showLanding && <PwaAppBar />}
+          {!showLanding && <div className={classes.toolbar} />}
           <div className={classes.innerContent}>{children}</div>
         </ScrollElementProvider>
       </main>