[Landing Page] Improve layout (#3078)

src/components/HarvestThreshWinnow/index.tsx

@@ -30,8 +30,8 @@ const imageMetadata: ImageMetadata[] = [
 ];
 
 interface HarvestThreshWinnowProps {
+  height?: number;
   loading?: boolean;
-  maxSize?: number;
 }
 
 // Opacity of the 3 images, each fading in then fading out while the next fades in.
@@ -57,28 +57,28 @@ export default function HarvestThreshWinnow(
     }
   }, [props.loading]);
 
-  const size = Math.min(
+  const imageSize = Math.min(
     0.75 * window.innerHeight,
     0.25 * window.innerWidth,
-    props.maxSize || 1000
+    props.height || 1000
   );
 
   const imageStyle: CSSProperties = {
     border: "1px solid black",
-    borderRadius: size,
+    borderRadius: imageSize,
+    height: imageSize,
     position: "relative",
-    width: size,
   };
 
   const overlap = 0.23;
 
   return (
-    <div style={{ height: size, position: "relative", margin: 10 }}>
+    <div style={{ height: imageSize, position: "relative", margin: 10 }}>
       <img
         alt={ImageAlt.Harvest}
         id={ImageId.Harvest}
         src={harvest}
-        style={{ ...imageStyle, left: overlap * size }}
+        style={{ ...imageStyle, left: overlap * imageSize }}
       />
       <img
         alt={ImageAlt.Thresh}
@@ -90,18 +90,18 @@ export default function HarvestThreshWinnow(
         alt={ImageAlt.Winnow}
         id={ImageId.Winnow}
         src={winnow}
-        style={{ ...imageStyle, right: overlap * size }}
+        style={{ ...imageStyle, right: overlap * imageSize }}
       />
       <div
         id={ImageId.License}
         style={{
           // Use -10 to offset the button padding
           bottom: -10,
-          left: 0.2 * size - 10,
+          left: 0.2 * imageSize - 10,
           position: "absolute",
         }}
       >
-        <ImageAttributions images={imageMetadata} width={0.15 * size} />
+        <ImageAttributions images={imageMetadata} width={0.15 * imageSize} />
       </div>
     </div>
   );

src/components/LandingPage/BottomBar.tsx

@@ -1,4 +1,4 @@
-import { AppBar, Button, Grid, Toolbar, Typography } from "@mui/material";
+import { AppBar, Button, Stack, Toolbar, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -15,38 +15,33 @@ export default function BottomBar(): ReactElement {
     <div style={{ marginTop: bottomBarHeight }}>
       <AppBar
         position="fixed"
-        style={{
-          top: "auto",
-          bottom: 0,
-        }}
+        style={{ bottom: 0, maxHeight: bottomBarHeight, top: "auto" }}
       >
         <Toolbar variant="dense">
-          <Grid
-            container
-            justifyContent="space-between"
-            spacing={2}
+          <Stack
             alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+            spacing={1}
+            style={{ width: "100%" }}
           >
-            <Grid item>
-              <Typography variant="caption">{combineAppRelease}</Typography>
-            </Grid>
-            <Grid item>
-              <Button
-                size="small"
-                color="inherit"
-                onClick={() =>
-                  window.open(
-                    "https://software.sil.org/language-software-privacy-policy/"
-                  )
-                }
-                id="privacy-policy"
-              >
-                <Typography variant="caption">
-                  {t("landingPage.privacyPolicy")}
-                </Typography>
-              </Button>
-            </Grid>
-          </Grid>
+            <Typography variant="caption">{combineAppRelease}</Typography>
+            <Button
+              size="small"
+              color="inherit"
+              onClick={() =>
+                window.open(
+                  "https://software.sil.org/language-software-privacy-policy/"
+                )
+              }
+              id="privacy-policy"
+              style={{ margin: 0 }}
+            >
+              <Typography variant="caption">
+                {t("landingPage.privacyPolicy")}
+              </Typography>
+            </Button>
+          </Stack>
         </Toolbar>
       </AppBar>
     </div>

src/components/LandingPage/LandingButtons.tsx

@@ -1,4 +1,5 @@
-import { Button, Card, Grid, Typography } from "@mui/material";
+import { Info } from "@mui/icons-material";
+import { Button, Card, Stack, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -9,15 +10,13 @@ import { openUserGuide } from "utilities/pathUtilities";
 
 const idAffix = "landing";
 
-const buttonHeight = 50;
-const buttonWidth = 145;
-
-export const horizontalButtonsHeight =
-  buttonHeight + parseInt(theme.spacing(2));
-const horizontalButtonsWidth = 3 * buttonWidth + parseInt(theme.spacing(7));
-
-const verticalButtonsHeight = 3 * buttonHeight + parseInt(theme.spacing(7));
-export const verticalButtonsWidth = buttonWidth + parseInt(theme.spacing(2));
+const buttonHeight = 56;
+const buttonWidth = 144;
+const iconButtonWidth = buttonWidth / 4;
+const gap = parseInt(theme.spacing(1));
+export const horizontalButtonsHeight = buttonHeight + gap;
+const horizontalButtonsWidth = 2 * buttonWidth + iconButtonWidth + 2 * gap;
+export const verticalButtonsWidth = buttonWidth + 2 * gap;
 
 interface LandingButtonsProps {
   top?: boolean;
@@ -28,17 +27,11 @@ export default function LandingButtons(
 ): ReactElement {
   const navigate = useNavigate();
   return (
-    <Card
-      style={{
-        height: props.top ? horizontalButtonsHeight : verticalButtonsHeight,
-        width: props.top ? horizontalButtonsWidth : verticalButtonsWidth,
-      }}
-    >
-      <Grid
-        container
+    <Card style={{ padding: gap, maxWidth: horizontalButtonsWidth }}>
+      <Stack
+        direction={props.top ? "row" : "column"}
         justifyContent="space-around"
-        alignItems="center"
-        style={{ height: "100%" }}
+        spacing={1}
       >
         <SignUpButton />
         <LandingButton
@@ -50,8 +43,9 @@ export default function LandingButtons(
           onClick={() => openUserGuide()}
           textId="userMenu.userGuide"
           buttonId={`${idAffix}-guide`}
+          icon={props.top ? <Info /> : undefined}
         />
-      </Grid>
+      </Stack>
     </Card>
   );
 }
@@ -77,21 +71,27 @@ interface LandingButtonProps {
   textId: string;
   buttonId: string;
   filled?: boolean;
+  icon?: ReactElement;
 }
+
+/** Button for the Landing Page. (Prop `icon` overrides `textId`.) */
 function LandingButton(props: LandingButtonProps): ReactElement {
   const { t } = useTranslation();
 
   return (
-    <Grid item style={{ textAlign: "center" }}>
-      <Button
-        variant={props.filled ? "contained" : "outlined"}
-        color="primary"
-        onClick={props.onClick}
-        style={{ height: buttonHeight, width: buttonWidth }}
-        id={props.buttonId}
-      >
+    <Button
+      variant={props.filled ? "contained" : "outlined"}
+      color="primary"
+      onClick={props.onClick}
+      style={{
+        height: buttonHeight,
+        width: props.icon ? iconButtonWidth : buttonWidth,
+      }}
+      id={props.buttonId}
+    >
+      {props.icon || (
         <Typography variant="subtitle1">{t(props.textId)}</Typography>
-      </Button>
-    </Grid>
+      )}
+    </Button>
   );
 }

src/components/LandingPage/TopBar.tsx

@@ -1,4 +1,4 @@
-import { AppBar, Grid, Hidden, Toolbar, Typography } from "@mui/material";
+import { AppBar, Hidden, Stack, Toolbar, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -14,23 +14,21 @@ export default function TopBar(): ReactElement {
     <div className="NavigationBar" style={{ marginBottom: topBarHeight }}>
       <AppBar position="fixed">
         <Toolbar>
-          <Grid
-            container
+          <Stack
+            alignItems="center"
+            direction="row"
             justifyContent="space-between"
             spacing={2}
-            alignItems="center"
+            style={{ width: "100%" }}
           >
-            <Grid item>
-              <img src={logo} height="50" alt="Logo" />
-            </Grid>
-            <Hidden smDown>
-              <Grid item>
-                <Typography variant="h5">
-                  {t("landingPage.subtitle")}
-                </Typography>
-              </Grid>
+            <img src={logo} height="50" alt="Logo" />
+            <Hidden smDown mdUp>
+              <Typography variant="h6">{t("landingPage.subtitle")}</Typography>
+            </Hidden>
+            <Hidden mdDown>
+              <Typography variant="h5">{t("landingPage.subtitle")}</Typography>
             </Hidden>
-          </Grid>
+          </Stack>
         </Toolbar>
       </AppBar>
     </div>

src/components/LandingPage/index.tsx

@@ -1,13 +1,13 @@
-import { Box, Grid, Hidden, Typography } from "@mui/material";
+import { Box, Grid, Hidden, Stack, Typography } from "@mui/material";
 import { ReactElement, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import HarvestThreshWinnow from "components/HarvestThreshWinnow";
 import BottomBar, { bottomBarHeight } from "components/LandingPage/BottomBar";
 import LandingButtons, {
-  horizontalButtonsHeight,
   SignUpButton,
+  horizontalButtonsHeight,
   verticalButtonsWidth,
 } from "components/LandingPage/LandingButtons";
 import TopBar, { topBarHeight } from "components/LandingPage/TopBar";
@@ -31,22 +31,22 @@ export default function LandingPage(): ReactElement {
   return (
     <>
       <TopBar />
-      <Grid container alignItems="flex-start" justifyContent="space-around">
+      <Grid container>
         <Hidden smDown>
-          <Grid item sm md xl>
+          <Grid item sm>
             <Box style={{ maxHeight: heightBetweenBars, overflow: "auto" }}>
               <Body />
             </Box>
           </Grid>
-          <Grid item width={verticalButtonsWidth}>
+          <Grid item sm="auto">
             <LandingButtons />
           </Grid>
         </Hidden>
         <Hidden smUp>
-          <Grid item xs>
+          <Grid item xs={12}>
             <LandingButtons top />
           </Grid>
-          <Grid item xs>
+          <Grid item xs={12}>
             <Box
               style={{
                 maxHeight: heightBetweenBars - horizontalButtonsHeight,
@@ -67,15 +67,8 @@ function Body(): ReactElement {
   const { t } = useTranslation();
 
   return (
-    <Box
-      alignItems="center"
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      rowGap={theme.spacing(4)}
-      style={{ padding: theme.spacing(3) }}
-    >
-      <div>
+    <Stack alignItems="center" spacing={3}>
+      <Box sx={{ p: theme.spacing(3), paddingBottom: 0 }}>
         <Typography variant="body2" align="justify">
           {t("landingPage.descriptionP1")}
           {<br />}
@@ -86,18 +79,18 @@ function Body(): ReactElement {
           {t("landingPage.descriptionP3")}
           {<br />}
         </Typography>
-        <Typography
-          variant="h6"
-          align="justify"
-          style={{ paddingTop: theme.spacing(2) }}
-        >
+        <Typography sx={{ paddingTop: theme.spacing(3) }} variant="h6">
           {t("landingPage.descriptionP4")}
         </Typography>
-      </div>
-      <SignUpButton buttonIdPrefix="landing-body" />
-      <HarvestThreshWinnow
-        maxSize={Math.min(400, (window.innerWidth - verticalButtonsWidth) / 5)}
-      />
-    </Box>
+      </Box>
+      <Box>
+        <SignUpButton buttonIdPrefix="landing-body" />
+      </Box>
+      <Box>
+        <HarvestThreshWinnow
+          height={Math.min(400, (window.innerWidth - verticalButtonsWidth) / 5)}
+        />
+      </Box>
+    </Stack>
   );
 }