diff --git a/web/src/components/TitleScreen.module.css b/web/src/components/TitleScreen.module.css index ff38f90d..1f58df58 100644 --- a/web/src/components/TitleScreen.module.css +++ b/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; } diff --git a/web/src/components/TitleScreen.tsx b/web/src/components/TitleScreen.tsx index b34db863..edc11624 100644 --- a/web/src/components/TitleScreen.tsx +++ b/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 = () => { ) : (
- {""} +
+ {""} + {isLaunching ? ( + + ) : ( + + )} +
+ {isLaunching && !inviteFrom ? ( updateContext({ isLaunching: false })} /> ) : ( diff --git a/web/src/components/icons/CloseIconBig.tsx b/web/src/components/icons/CloseIconBig.tsx new file mode 100644 index 00000000..fab38105 --- /dev/null +++ b/web/src/components/icons/CloseIconBig.tsx @@ -0,0 +1,29 @@ +import React from "react"; + +const CloseIconBig: React.FC> = (props) => ( + + + + +); + +export default CloseIconBig;