Fixes

web/src/components/TitleScreen.module.css

@@ -119,6 +119,35 @@
 .banner {
   border-bottom: 1px solid #262019;
   min-height: 160px;
+  position: relative;
+}
+
+.loginButton {
+  display: flex;
+  padding: 5px 10px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+
+  position: absolute;
+  right: 10px;
+  top: 10px;
+
+  border: 1px solid #7E8E7F;
+  background: rgba(255, 255, 255, 0.70);
+  backdrop-filter: blur(3px);
+  color: #000;
+  font-family: Pangolin, cursive;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.closeButton {
+  position: absolute;
+  right: 24px;
+  top: 24px;
 }
 
 

web/src/components/TitleScreen.tsx

@@ -13,6 +13,7 @@ import LaunchForm from "./LaunchForm";
 import MoonstreamLogo2 from "./icons/MoonstreamLogo2";
 import { useGameContext } from "../contexts/GameContext";
 import { useRouter } from "next/router";
+import CloseIconBig from "./icons/CloseIconBig";
 
 const TitleScreen = () => {
   const { user, isLoading } = useUser();
@@ -50,11 +51,32 @@ const TitleScreen = () => {
           ) : (
             <div className={styles.loginContainer}>
               <div className={styles.content} style={{ maxWidth: isLaunching ? "320px" : "400px" }}>
-                <img
-                  className={styles.banner}
-                  src={`${FULLCOUNT_ASSETS}/banners/Bl-banner-updated-logo.jpeg`}
-                  alt={""}
-                />
+                <div className={styles.banner}>
+                  <img
+                    className={styles.banner}
+                    src={`${FULLCOUNT_ASSETS}/banners/Bl-banner-updated-logo.jpeg`}
+                    alt={""}
+                  />
+                  {isLaunching ? (
+                    <button
+                      className={styles.loginButton}
+                      onClick={() => {
+                        setIsLogging(true);
+                        updateContext({ isLaunching: false });
+                      }}
+                    >
+                      Log in
+                    </button>
+                  ) : (
+                    <button
+                      className={styles.closeButton}
+                      onClick={() => updateContext({ isLaunching: true })}
+                    >
+                      <CloseIconBig stroke={"white"} />
+                    </button>
+                  )}
+                </div>
+
                 {isLaunching && !inviteFrom ? (
                   <LaunchForm onClose={() => updateContext({ isLaunching: false })} />
                 ) : (

web/src/components/icons/CloseIconBig.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const CloseIconBig: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M20.4852 20.4706L3.51465 3.5"
+      stroke={props.stroke ?? "#7E8E7F"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.51381 20.4706L20.4844 3.5"
+      stroke={props.stroke ?? "#7E8E7F"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CloseIconBig;