Log in link when trying to join team logged out

app/components/Catcher.tsx

@@ -24,13 +24,9 @@ export function Catcher() {
             </p>
           ) : (
             <form action={getLogInUrl(location)} method="post">
-              <p className="four-zero-one__paragraph">
+              <p className="button-text-paragraph">
                 You should try{" "}
-                <Button
-                  className="four-zero-one__log-in-button"
-                  type="submit"
-                  variant="minimal"
-                >
+                <Button type="submit" variant="minimal">
                   logging in
                 </Button>
               </p>

app/routes/to/$organization.$tournament/join-team.tsx

@@ -6,6 +6,7 @@ import {
   useMatches,
   useNavigate,
   useTransition,
+  useLocation,
 } from "remix";
 import invariant from "tiny-invariant";
 import { Button } from "~/components/Button";
@@ -16,7 +17,7 @@ import {
   joinTeamViaInviteCode,
 } from "~/services/tournament";
 import styles from "~/styles/tournament-join-team.css";
-import { getUser, requireUser } from "~/utils";
+import { getLogInUrl, getUser, requireUser } from "~/utils";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -131,6 +132,7 @@ export default function JoinTeamPage() {
 }
 
 function Contents({ data }: { data: Data }) {
+  const location = useLocation();
   const navigate = useNavigate();
   const [, parentRoute] = useMatches();
   const parentRouteData = parentRoute.data as FindTournamentByNameForUrlI;
@@ -159,7 +161,17 @@ function Contents({ data }: { data: Data }) {
         </>
       );
     case "LOG_IN":
-      return <>Please log in to join this team.</>;
+      return (
+        <form action={getLogInUrl(location)} method="post">
+          <p className="button-text-paragraph">
+            Please{" "}
+            <Button type="submit" variant="minimal">
+              log in
+            </Button>{" "}
+            to join this team.
+          </p>
+        </form>
+      );
     case "ALREADY_JOINED":
       return (
         <>You are already a member of {data.teamName} for this tournament.</>

app/styles/global.css

@@ -273,13 +273,13 @@ select::selection {
   color: var(--theme-secondary);
 }
 
-.four-zero-one__paragraph {
+.button-text-paragraph {
   display: flex;
   justify-content: center;
   gap: var(--s-1);
 }
 
-.four-zero-one__log-in-button {
+.button-text-paragraph > button {
   font-size: var(--fonts-md);
 }