update auth styles

src/components/FirebaseUi.tsx

@@ -29,9 +29,20 @@ const useStyles = makeStyles()((theme) => ({
       color: theme.palette.text.secondary,
       fontFamily: theme.typography.fontFamily,
     },
-    "& .firebaseui-tos": {
+    "& .firebaseui-provider-sign-in-footer > .firebaseui-tos": {
       ...(theme.typography.caption as any),
       color: theme.palette.text.disabled,
+      textAlign: "left",
+      marginTop: theme.spacing(1),
+      marginBottom: 0,
+      "& .firebaseui-link": {
+        textDecorationColor: theme.palette.divider,
+        "&:hover": { textDecorationColor: "currentcolor" },
+      },
+    },
+    "& .firebaseui-link": {
+      color: "inherit",
+      textDecoration: "underline",
     },
     "& .firebaseui-country-selector": {
       color: theme.palette.text.primary,
@@ -259,9 +270,10 @@ export default function FirebaseUi(props: IFirebaseUiProps) {
       <Typography
         variant="button"
         display="block"
-        textAlign="center"
         color="textSecondary"
-        sx={{ mt: -1, mb: -3 }}
+        sx={{
+          "&&": { mt: -1, mb: -3, textAlign: "center", alignSelf: "center" },
+        }}
       >
         Continue with
       </Typography>

src/config/firebaseui.ts

@@ -65,8 +65,8 @@ export const defaultUiConfig: firebaseui.auth.Config = {
   signInFlow: "popup",
   signInSuccessUrl: "/",
   signInOptions: [authOptions.google],
-  // tosUrl: EXTERNAL_LINKS.terms,
-  // privacyPolicyUrl: EXTERNAL_LINKS.privacy,
+  tosUrl: EXTERNAL_LINKS.terms,
+  privacyPolicyUrl: EXTERNAL_LINKS.privacy,
 };
 
 export const getSignInOptions = (

src/layouts/AuthLayout.tsx

@@ -105,7 +105,6 @@ export default function AuthLayout({
 
             display: "flex",
             flexDirection: "column",
-            // textAlign: "center",
 
             "& > :not(style) + :not(style)": { mt: 4 },
           } as any
@@ -125,8 +124,8 @@ export default function AuthLayout({
         <Stack
           spacing={4}
           justifyContent="center"
-          alignItems="center"
-          style={{ textAlign: "center", flexGrow: 1 }}
+          alignItems="flex-start"
+          style={{ flexGrow: 1 }}
         >
           {children}
         </Stack>
@@ -145,7 +144,7 @@ export default function AuthLayout({
 
         <Typography
           variant="caption"
-          color="text.secondary"
+          color="text.disabled"
           sx={{ display: hideProject ? "none" : "block", mb: -0.5 }}
         >
           Project: <span style={{ userSelect: "all" }}>{projectId}</span>

src/pages/Auth/AuthPage.tsx

@@ -1,8 +1,12 @@
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, Link } from "react-router-dom";
+
+import { Typography, Link as MuiLink } from "@mui/material";
 
 import AuthLayout from "@src/layouts/AuthLayout";
 import FirebaseUi from "@src/components/FirebaseUi";
 
+import { ROUTES } from "@src/constants/routes";
+
 export default function AuthPage() {
   const [searchParams] = useSearchParams();
 
@@ -13,7 +17,23 @@ export default function AuthPage() {
   }
 
   return (
-    <AuthLayout title="Sign in">
+    <AuthLayout
+      title="Sign in"
+      description={
+        <Typography
+          color="text.secondary"
+          align="right"
+          display="block"
+          component="span"
+          sx={{ mt: -4.25, alignSelf: "flex-end" }}
+        >
+          or{" "}
+          <MuiLink component={Link} to={ROUTES.signUp} color="text.secondary">
+            sign up
+          </MuiLink>
+        </Typography>
+      }
+    >
       <FirebaseUi uiConfig={uiConfig} />
     </AuthLayout>
   );

src/pages/Auth/SignUpPage.tsx

@@ -1,10 +1,11 @@
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, Link } from "react-router-dom";
 
-import { Typography, Link } from "@mui/material";
+import { Typography, Link as MuiLink } from "@mui/material";
 
 import AuthLayout from "@src/layouts/AuthLayout";
 import FirebaseUi from "@src/components/FirebaseUi";
-import { EXTERNAL_LINKS } from "@src/constants/externalLinks";
+
+import { ROUTES } from "@src/constants/routes";
 
 export default function SignUpPage() {
   const [searchParams] = useSearchParams();
@@ -20,6 +21,18 @@ export default function SignUpPage() {
       title="Sign up"
       description={
         <>
+          <Typography
+            color="text.secondary"
+            align="right"
+            display="block"
+            component="span"
+            sx={{ mt: -4.25, mb: 2, alignSelf: "flex-end" }}
+          >
+            or{" "}
+            <MuiLink component={Link} to={ROUTES.auth} color="text.secondary">
+              sign in
+            </MuiLink>
+          </Typography>
           Welcome! To join this project, sign up with the email address
           {searchParams.get("email") ? (
             <>
@@ -32,31 +45,6 @@ export default function SignUpPage() {
       }
     >
       <FirebaseUi uiConfig={uiConfig} />
-      <Typography
-        variant="caption"
-        color="text.secondary"
-        style={{ marginTop: 16 }}
-      >
-        By signing up, you agree to our{" "}
-        <Link
-          href={EXTERNAL_LINKS.terms}
-          target="_blank"
-          rel="noopener noreferrer"
-          color="text.secondary"
-        >
-          Terms and Conditions
-        </Link>{" "}
-        and{" "}
-        <Link
-          href={EXTERNAL_LINKS.privacy}
-          target="_blank"
-          rel="noopener noreferrer"
-          color="text.secondary"
-        >
-          Privacy Policy
-        </Link>
-        .
-      </Typography>
     </AuthLayout>
   );
 }