styled splash world/space pages

src/components/attendee/AttendeeHeader/AttendeeHeader.module.scss

@@ -6,6 +6,7 @@
 
 // These is module private.
 $-z-index--header: layer.level(layer.$z-index--header);
+$h-logo-image: 42px;
 
 .attendeeHeader {
   display: flex;
@@ -84,3 +85,7 @@ $-z-index--header: layer.level(layer.$z-index--header);
 .blur {
   filter: blur(100px) contrast(60%) opacity(0);
 }
+
+.logoImage {
+  height: $h-logo-image;
+}

src/components/attendee/AttendeeHeader/AttendeeHeader.tsx

@@ -20,6 +20,8 @@ import { useLiveUser } from "hooks/user/useLiveUser";
 import { useShowHide } from "hooks/useShowHide";
 import { useMediaQuery } from "hooks/viewport/useMediaQuery";
 
+import sparkleLogoImage from "assets/images/sparkle-header.png";
+
 import CN from "./AttendeeHeader.module.scss";
 
 type HeaderTab = "schedule" | "search" | "profile";
@@ -33,11 +35,13 @@ const tabCaptions: Readonly<Record<HeaderTab, String>> = {
 interface AttendeeHeaderProps {
   backButtonSpace?: BaseVenue;
   isBannerOn?: boolean;
+  hasLogo?: boolean;
 }
 
 export const AttendeeHeader: React.FC<AttendeeHeaderProps> = ({
   backButtonSpace,
   isBannerOn,
+  hasLogo,
 }) => {
   const { isShown, hide, show } = useShowHide(false);
   const [overlayLabel, setOverlayLabel] = useState("");
@@ -109,28 +113,43 @@ export const AttendeeHeader: React.FC<AttendeeHeaderProps> = ({
     <>
       <header className={headerClassnames}>
         <div className={containerClasses}>
-          {backButtonSpace ? (
-            <Button onClick={goBack} variant="primary" transparent={isNarrow}>
-              <FontAwesomeIcon icon={faArrowLeft} /> Leave
-              <span className={CN.headerTimeTransparent}>
-                {getDateHoursAndMinutes(currentMilliseconds())}
-              </span>
-            </Button>
+          {hasLogo ? (
+            <img
+              src={sparkleLogoImage}
+              alt="sparkle-logo"
+              className={CN.logoImage}
+            />
           ) : (
-            <Button
-              variant="primary"
-              transparent={isNarrow}
-              onClick={() => handleOverlayOpen(space?.name || "")}
-            >
-              <div className={CN.headerTitle}>
-                {space?.name ?? `This ${SPACE_TAXON.title}`}
-              </div>
-              <span className={CN.headerTimeTransparent}>
-                {getDateHoursAndMinutes(currentMilliseconds())}
-              </span>
-            </Button>
+            <>
+              {backButtonSpace ? (
+                <Button
+                  onClick={goBack}
+                  variant="primary"
+                  transparent={isNarrow}
+                >
+                  <FontAwesomeIcon icon={faArrowLeft} /> Leave
+                  <span className={CN.headerTimeTransparent}>
+                    {getDateHoursAndMinutes(currentMilliseconds())}
+                  </span>
+                </Button>
+              ) : (
+                <Button
+                  variant="primary"
+                  transparent={isNarrow}
+                  onClick={() => handleOverlayOpen(space?.name || "")}
+                >
+                  <div className={CN.headerTitle}>
+                    {space?.name ?? `This ${SPACE_TAXON.title}`}
+                  </div>
+                  <span className={CN.headerTimeTransparent}>
+                    {getDateHoursAndMinutes(currentMilliseconds())}
+                  </span>
+                </Button>
+              )}
+              {!isLaptopSmall && space && <Attendance space={space} />}
+            </>
           )}
-          {!isLaptopSmall && space && <Attendance space={space} />}
+
           <div className={CN.captionWrapper}>{renderedCaptions}</div>
         </div>
       </header>

src/components/attendee/ProfileOverlay/ProfileOverlay.tsx

@@ -149,25 +149,32 @@ export const ProfileOverlay: React.FC<ProfileOverlayProps> = ({
         const validLinks = data.profileLinks?.filter(
           (link) => link.url && link.title !== ""
         );
+
         const requestDto = {
           ...data,
-          profileLinks: data.profileLinks?.filter(
-            (link) => link.url && link.title !== ""
-          ),
+          ...(validLinks?.length && { profileLinks: validLinks }),
         };
-        await updateUserProfile(firebaseUser.uid, requestDto);
 
+        await updateUserProfile(firebaseUser.uid, requestDto);
         reset({
           ...data,
           oldPassword: "",
           newPassword: "",
           confirmNewPassword: "",
-          profileLinks: validLinks,
+          profileLinks: validLinks || values.profileLinks,
         });
         setSuccess(true);
       }
     },
-    [firebaseUser, dirtyFields, checkOldPassword, setError, clearErrors, reset]
+    [
+      firebaseUser,
+      dirtyFields,
+      checkOldPassword,
+      setError,
+      clearErrors,
+      reset,
+      values.profileLinks,
+    ]
   );
 
   const history = useHistory();

src/components/attendee/SplashSpace/SplashSpace.module.scss

@@ -1,6 +1,110 @@
+@use "scss/attendee/theme";
+@use "scss/attendee/space";
+@use "scss/attendee/border";
+@use "scss/attendee/effects/sparkle";
+
+$h-logo-image: 42px;
+$w-enter-button: 150px;
+
+.splashWrapper {
+  height: 100%;
+
+  header {
+    width: 99%;
+  }
+}
+
 .Container {
   display: flex;
-  flex-flow: column;
+  flex-direction: column;
+  position: absolute;
+  top: 50%; /* position the top  edge of the element at the middle of the parent */
+  left: 50%; /* position the left edge of the element at the middle of the parent */
+
+  transform: translate(-50%, -50%);
+  height: 340px;
+
+  svg {
+    margin-right: space.gap(2);
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 270px;
+  width: 800px;
+  background: theme.$c-splash-background-color;
+  border: border.$width--slim solid theme.$sparkle--border;
+  backdrop-filter: blur(sparkle.$blur--lg);
+  /* Note: backdrop-filter has minimal browser support */
+
+  border-radius: border.$radius--xs;
+}
+
+.AttendeeHeader {
+  padding: space.empty(1) 0;
+}
+
+.spaceInfo {
+  height: 100%;
+  min-width: 200px;
+  width: 200px;
+  padding: space.empty(1) 0;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
+  text-align: center;
+  margin-left: space.empty(1);
+}
+
+.divider {
+  border: 1px solid rgba(130, 130, 130, 0.3);
+  height: 90%;
+  margin: 0 space.empty(1);
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  div {
+    margin: space.empty(1) 0;
+  }
+}
+
+.actionWrapper {
+  width: 100%;
+
+  button {
+    margin: auto;
+    width: $w-enter-button;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+a {
+  &:visited {
+    text-decoration: none;
+    color: theme.$c-dark-text;
+  }
+}
+
+.backButton {
+  margin: space.empty(1) 0;
+  align-self: flex-start;
+}
+
+.logoImage {
+  height: $h-logo-image;
+  margin: space.empty(1);
+}
+
+.authDivider {
+  margin: 0 space.empty(0.5);
 }

src/components/attendee/SplashSpace/SplashSpace.tsx

@@ -1,25 +1,35 @@
-import React, { useEffect } from "react";
-import { useHistory } from "react-router-dom";
-import { useSearchParam } from "react-use";
+import React, { useEffect, useMemo } from "react";
+import { Link, useHistory } from "react-router-dom";
+import { useCss, useSearchParam } from "react-use";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "components/attendee/Button";
 
 import {
   ATTENDEE_SPACE_URL,
   ATTENDEE_WORLD_SPLASH_URL,
+  DEFAULT_BACKGROUNDS,
   JOIN_WORLD_URL,
   QUICK_JOIN_PARAM_NAME,
   RETURN_URL_PARAM_NAME,
   SIGN_IN_URL,
   SIGN_UP_URL,
+  STRING_SPACE,
 } from "settings";
 
 import { SpaceWithId, WorldWithId } from "types/id";
 
+import { isDefined } from "utils/types";
 import { generateUrl } from "utils/url";
 
+import { usePreloadAssets } from "hooks/usePreloadAssets";
 import { useLiveUser } from "hooks/user/useLiveUser";
 import { useOnboardingDetails } from "hooks/user/useOnboardingDetails";
 
+import { AttendeeHeader } from "../AttendeeHeader";
+
+import sparkleLogoImage from "assets/images/sparkle-header.png";
+
 import styles from "./SplashSpace.module.scss";
 
 type SplashSpaceProps = {
@@ -112,21 +122,74 @@ export const SplashSpace: React.FC<SplashSpaceProps> = ({ space, world }) => {
 
   const buttonText = isOnboarded ? "Enter" : "Join";
 
+  const [assetsToPreload] = useMemo(
+    () =>
+      [space?.mapBackgroundImageUrl].filter(isDefined).map((url) => ({ url })),
+    [space]
+  );
+
+  usePreloadAssets([assetsToPreload]);
+
+  const { url } = assetsToPreload ?? {};
+  const [defaultBackground] = DEFAULT_BACKGROUNDS;
+
+  const mapStyles = useCss({
+    backgroundImage: `url(${url || defaultBackground})`,
+  });
+
   return (
-    <div className={styles.Container}>
-      <h1>Space splash page!</h1>
-      <Button onClick={navigateToWorldSplash}>Go to World Splash</Button>
-      <p>{space.name}</p>
-      <p>{space.config?.landingPageConfig.description}</p>
-
-      <Button onClick={onActionButtonClick}>{buttonText}</Button>
-
-      {!userId && (
-        <div>
-          <Button onClick={navigateToSignIn}>Sign In</Button>
-          <Button onClick={navigateToSignUp}>Sign Up</Button>
-        </div>
+    <div className={`${styles.splashWrapper} ${mapStyles}`}>
+      {userId ? (
+        <AttendeeHeader hasLogo />
+      ) : (
+        <img
+          src={sparkleLogoImage}
+          alt="sparkle-logo"
+          className={styles.logoImage}
+        />
       )}
+      <div className={styles.Container}>
+        {userId && (
+          <Button
+            onClick={navigateToWorldSplash}
+            className={styles.backButton}
+            variant="intensive"
+          >
+            <FontAwesomeIcon icon={faArrowLeft} />
+            Go to {world.name}
+          </Button>
+        )}
+        <div className={styles.wrapper}>
+          <div className={styles.spaceInfo}>
+            <p>{space.name}</p>
+            <p>{space.config?.landingPageConfig.description}</p>
+          </div>
+          <div className={styles.divider}></div>
+          <div className={styles.contentWrapper}>
+            <div>
+              {space.name} is part of {world.name}
+            </div>
+            <div className={styles.actionWrapper}>
+              <Button onClick={onActionButtonClick} variant="intensive">
+                {buttonText}
+              </Button>
+            </div>
+            {!userId && (
+              <div>
+                You also need a Sparkle id to join.
+                {STRING_SPACE}
+                <Link className={styles.link} to="#" onClick={navigateToSignUp}>
+                  Sign Up
+                </Link>
+                <span className={styles.authDivider}>or</span>
+                <Link className={styles.link} to="#" onClick={navigateToSignIn}>
+                  Login
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 };