[LangingPage] Add paragraph with call-to-action, sign-up button

docs/deploy/README.md

@@ -19,7 +19,7 @@ PC such as an Intel NUC. The instructions assume that:
   has been cloned on the host machine. This directory is referred to as \<COMBINE\>.
 - the target machine where _The Combine_ is being installed will be referred to as _\<target\>_
 - the user on the target machine that will be used for installing docker, etc. will be referred to as _\<target_user\>_.
-  You must be able to login to _\<target\>_ as _\<target_user\>_ and _\<target_user\>_ must have `sudo` privileges.
+  You must be able to log in to _\<target\>_ as _\<target_user\>_ and _\<target_user\>_ must have `sudo` privileges.
 
 ## Contents
 

docs/deploy/kubernetes_design/README.md

@@ -133,10 +133,10 @@ The following diagram shows the Kubernetes resources used to create the image pu
 
 ### Additional AWS Login Resources
 
-| Resource            | Kind      | Description                                                                                                                                                                   |
-| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| aws-ecr-config      | ConfigMap | `aws-ecr-config` defines the runtime configuration for AWS ECR logins.                                                                                                        |
-| aws-ecr-credentials | Secret    | `aws-ecr-credentials` defines the access accounts and credentials to login to the AWS ECR service. Note that these credentials may be different than the `aws-s3-credentials` |
+| Resource            | Kind      | Description                                                                                                                                                                    |
+| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| aws-ecr-config      | ConfigMap | `aws-ecr-config` defines the runtime configuration for AWS ECR logins.                                                                                                         |
+| aws-ecr-credentials | Secret    | `aws-ecr-credentials` defines the access accounts and credentials to log in to the AWS ECR service. Note that these credentials may be different than the `aws-s3-credentials` |
 
 ## SSL Termination
 

docs/user_guide/docs/account.md

@@ -1,6 +1,6 @@
 # Account
 
-How to sign up, login, and edit your account.
+How to sign up, log in, and edit your account.
 
 ![Login](images/login.png){ .center }
 
@@ -12,9 +12,9 @@ To create a new account, click the [SIGN UP](../sign-up) button on the Login pag
 
     The email address is used to reset your password, so there is only one account allowed per email address.
 
-## Login
+## Log In
 
-[Login](../login) to The Combine with the username and password given at registration.
+[Log in](../login) to The Combine with the username and password given at registration.
 
 If you want to change your password, click the "Forget password?" link. Follow the instructions and a password-reset
 will be sent to the email address associated with your account.

src/components/LandingPage/BottomBar.tsx

@@ -1,10 +1,11 @@
 import { AppBar, Button, Grid, Toolbar, Typography } from "@material-ui/core";
+import { ReactElement } from "react";
 import { Translate } from "react-localize-redux";
 
 export const bottomBarHeight = 55;
 
 /** A  bar shown at the bottom of the landing page. */
-export default function BottomBar() {
+export default function BottomBar(): ReactElement {
   const { REACT_APP_VERSION } = process.env;
   return (
     <div style={{ marginTop: bottomBarHeight }}>

src/components/LandingPage/LandingButtons.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, Grid, Typography } from "@material-ui/core";
+import { ReactElement } from "react";
 import { Translate } from "react-localize-redux";
 
 import history, { openUserGuide, Path } from "browserHistory";
@@ -19,7 +20,9 @@ interface LandingButtonsProps {
   top?: boolean;
 }
 
-export default function LandingButtons(props: LandingButtonsProps) {
+export default function LandingButtons(
+  props: LandingButtonsProps
+): ReactElement {
   return (
     <Card
       style={{
@@ -33,11 +36,7 @@ export default function LandingButtons(props: LandingButtonsProps) {
         alignItems="center"
         style={{ height: "100%" }}
       >
-        <LandingButton
-          onClick={() => history.push(Path.SignUp)}
-          textId="login.signUp"
-          buttonId={`${idAffix}-signUp`}
-        />
+        <SignUpButton />
         <LandingButton
           onClick={() => history.push(Path.Login)}
           textId="login.login"
@@ -53,21 +52,31 @@ export default function LandingButtons(props: LandingButtonsProps) {
   );
 }
 
+interface SignUpButtonProps {
+  buttonIdPrefix?: string;
+}
+export function SignUpButton(props: SignUpButtonProps): ReactElement {
+  return (
+    <LandingButton
+      onClick={() => history.push(Path.SignUp)}
+      textId="login.signUp"
+      buttonId={`${props.buttonIdPrefix ?? idAffix}-signUp`}
+      filled
+    />
+  );
+}
+
 interface LandingButtonProps {
   onClick: () => void;
   textId: string;
   buttonId: string;
+  filled?: boolean;
 }
-function LandingButton(props: LandingButtonProps) {
+function LandingButton(props: LandingButtonProps): ReactElement {
   return (
-    <Grid
-      item
-      style={{
-        textAlign: "center",
-      }}
-    >
+    <Grid item style={{ textAlign: "center" }}>
       <Button
-        variant="contained"
+        variant={props.filled ? "contained" : "outlined"}
         color="primary"
         onClick={props.onClick}
         style={{ height: buttonHeight, width: buttonWidth }}

src/components/LandingPage/TopBar.tsx

@@ -1,12 +1,13 @@
 import { AppBar, Grid, Hidden, Toolbar, Typography } from "@material-ui/core";
+import { ReactElement } from "react";
 import { Translate } from "react-localize-redux";
 
 import logo from "resources/CombineLogoV1White.png";
 
 export const topBarHeight = 70;
 
 /** A  bar shown at the top of the landing page. */
-export default function TopBar() {
+export default function TopBar(): ReactElement {
   return (
     <div className="NavigationBar" style={{ marginBottom: topBarHeight }}>
       <AppBar position="fixed">

src/components/LandingPage/index.tsx

@@ -1,10 +1,12 @@
-import { Box, Grid, Hidden, Typography } from "@material-ui/core";
-import React from "react";
+import { Box, Button, Grid, Hidden, Typography } from "@material-ui/core";
+import React, { ReactElement } from "react";
 import { Translate } from "react-localize-redux";
 
+import history, { Path } from "browserHistory";
 import BottomBar, { bottomBarHeight } from "components/LandingPage/BottomBar";
 import LandingButtons, {
   horizontalButtonsHeight,
+  SignUpButton,
 } from "components/LandingPage/LandingButtons";
 import TopBar, { topBarHeight } from "components/LandingPage/TopBar";
 import tractor from "resources/tractor.png";
@@ -13,7 +15,7 @@ import theme from "types/theme";
 const heightBetweenBars =
   window.innerHeight - topBarHeight - bottomBarHeight - theme.spacing(1);
 
-export default function LandingPage() {
+export default function LandingPage(): ReactElement {
   return (
     <React.Fragment>
       <TopBar />
@@ -49,22 +51,32 @@ export default function LandingPage() {
   );
 }
 
-function body() {
+function body(): ReactElement {
   return (
     <React.Fragment>
-      <Typography
-        variant="body2"
-        align="justify"
-        style={{ padding: theme.spacing(3) }}
-      >
-        <Translate id="landingPage.descriptionP1" />
-        {<br />}
-        {<br />}
-        <Translate id="landingPage.descriptionP2" />
-        {<br />}
-        {<br />}
-        <Translate id="landingPage.descriptionP3" />
-      </Typography>
+      <div style={{ padding: theme.spacing(3) }}>
+        <Typography variant="body2" align="justify">
+          <Translate id="landingPage.descriptionP1" />
+          {<br />}
+          {<br />}
+          <Translate id="landingPage.descriptionP2" />
+          {<br />}
+          {<br />}
+          <Translate id="landingPage.descriptionP3" />
+          {<br />}
+        </Typography>
+        <Typography
+          variant="h6"
+          align="justify"
+          style={{
+            paddingTop: theme.spacing(2),
+            paddingBottom: theme.spacing(1),
+          }}
+        >
+          <Translate id="landingPage.descriptionP4" />
+        </Typography>
+        <SignUpButton buttonIdPrefix="landing-body" />
+      </div>
       <img
         src={tractor}
         alt="Tractor"

src/components/Login/LoginPage/LoginComponent.tsx

@@ -198,7 +198,7 @@ export default class Login extends React.Component<
                 </div>
               )}
 
-              {/* User Guide, Sign Up, and Login buttons */}
+              {/* User Guide, Sign Up, and Log In buttons */}
               <Grid container justifyContent="flex-end" spacing={2}>
                 <Grid item xs={4} sm={6}>
                   <Button id={`${idAffix}-guide`} onClick={openUserGuide}>

src/resources/translations.json

@@ -38,6 +38,11 @@
       "People with little prior linguistic knowledge and limited computer experience can be quickly trained to use The Combine's main word-harvesting capabilities. Then the resulting words can be organized and edited within The Combine before exporting the data to use in other tools such as FLEx.",
       "People with little prior linguistic knowledge and limited computer experience can be quickly trained to use The Combine's main word-harvesting capabilities. Then the resulting words can be organized and edited within The Combine before exporting the data to use in other tools such as FLEx.",
       "People with little prior linguistic knowledge and limited computer experience can be quickly trained to use The Combine's main word-harvesting capabilities. Then the resulting words can be organized and edited within The Combine before exporting the data to use in other tools such as FLEx."
+    ],
+    "descriptionP4": [
+      "Sign up to get started with your word collection!",
+      "Sign up to get started with your word collection!",
+      "Sign up to get started with your word collection!"
     ]
   },
   "treeView": {
@@ -119,7 +124,7 @@
       "¿Se te olvidó tu contraseña?",
       "Mot de passe oublié ?"
     ],
-    "login": ["Login", "Iniciar sesión", "Se connecter"],
+    "login": ["Log in", "Iniciar sesión", "Se connecter"],
     "failed": [
       "Failed to log in. Please check your username and password.",
       "Error al iniciar sesión. Por favor verifique su nombre de usuario y contraseña.",