AuthLayout: add hideLinks

src/components/Auth/AuthLayout.tsx

@@ -16,6 +16,7 @@ import { EXTERNAL_LINKS } from "constants/externalLinks";
 export interface IAuthLayoutProps {
   hideLogo?: boolean;
   hideProject?: boolean;
+  hideLinks?: boolean;
   title?: React.ReactNode;
   description?: React.ReactNode;
   children: React.ReactNode;
@@ -25,6 +26,7 @@ export interface IAuthLayoutProps {
 export default function AuthLayout({
   hideLogo,
   hideProject,
+  hideLinks,
   title,
   description,
   children,
@@ -48,6 +50,7 @@ export default function AuthLayout({
         style={{
           textAlign: "center",
           marginBottom: -8,
+          display: hideLogo && hideLinks ? "none" : "block",
           visibility: hideLogo ? "hidden" : "visible",
         }}
       >
@@ -133,7 +136,13 @@ export default function AuthLayout({
         direction="row"
         flexWrap="wrap"
         justifyContent="center"
-        style={{ maxWidth: 360, width: "100%", padding: "0 4px" }}
+        style={{
+          maxWidth: 360,
+          width: "100%",
+          padding: "0 4px",
+          display: hideLogo && hideLinks ? "none" : "flex",
+          visibility: hideLinks ? "hidden" : "visible",
+        }}
       >
         <Link href={EXTERNAL_LINKS.homepage} {...linkProps}>
           {EXTERNAL_LINKS.homepage.split("//").pop()?.replace(/\//g, "")}

src/pages/Auth/SignUp.tsx

@@ -26,6 +26,7 @@ export default function SignUpPage() {
       <div style={{ flexGrow: 1 }}>
         <AuthLayout
           hideLogo={!isMobile}
+          hideLinks={!isMobile}
           title="Sign Up"
           description={
             <>

src/pages/Deploy.tsx

@@ -2,11 +2,12 @@ import { useLocation } from "react-router-dom";
 import queryString from "query-string";
 
 import { useMediaQuery, Stack, Typography, Link } from "@mui/material";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 
 import MarketingBanner from "components/Auth/MarketingBanner";
 import AuthLayout from "components/Auth/AuthLayout";
 
-import { EXTERNAL_LINKS } from "constants/externalLinks";
+import { EXTERNAL_LINKS, WIKI_LINKS } from "constants/externalLinks";
 import { name } from "@root/package.json";
 
 export default function DeployPage() {
@@ -28,11 +29,29 @@ export default function DeployPage() {
         <AuthLayout
           hideLogo={!isMobile}
           hideProject
+          hideLinks={!isMobile}
           title="Get Started"
           description={
             <>
-              To get started with {name}, set up {name} Run on your Google Cloud
-              Platform project with this one-click deploy button.
+              <Typography variant="inherit" paragraph>
+                Set up {name} on your Google Cloud Platform project with this
+                one-click deploy button.
+              </Typography>
+
+              <Typography variant="inherit">
+                You must have a project set up on Google Cloud Platform or
+                Firebase.
+                <br />
+                <Link
+                  href={WIKI_LINKS.setUpAuth}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  color="text.primary"
+                >
+                  Learn how to create one
+                  <InlineOpenInNewIcon />
+                </Link>
+              </Typography>
             </>
           }
         >