[MRKT-209][refactor](artist): Remove black gap on artist page with no banner. (#925)

* refactor(artist): make 'ProfileHeader' layout configurable and banner-agnostic

* fix(marketplace/artist): render 'BannerImage' while loading

* refactor(marketplace/artist): replace rem-based margin with theme spacing

Author: ITurres

apps/marketplace/src/app/artist/[artistId]/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { Container, Stack, Typography } from "@mui/material";
 import { FunctionComponent, useState } from "react";
 import { ProfileHeader, ProfileModal } from "@newm-web/components";
@@ -16,6 +17,10 @@ const Artist: FunctionComponent<ArtistProps> = ({ params }) => {
   const { isLoading, data: artist, error } = useGetArtistQuery(params.artistId);
   const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
 
+  const artistBannerUrl = artist?.bannerUrl;
+  const showBannerArea = isLoading || !!artistBannerUrl;
+  const profileHeaderLayout = showBannerArea ? "overlay" : "inline";
+
   const socials = {
     instagramUrl: artist?.instagramUrl || "",
     itunesUrl: artist?.appleMusicProfile || "",
@@ -33,12 +38,15 @@ const Artist: FunctionComponent<ArtistProps> = ({ params }) => {
   return (
     <>
       <Stack direction="column">
-        <BannerImage imageUrl={ artist?.bannerUrl } isLoading={ isLoading } />
+        { showBannerArea && (
+          <BannerImage imageUrl={ artistBannerUrl } isLoading={ isLoading } />
+        ) }
 
-        <Container sx={ { flexGrow: 1 } }>
+        <Container sx={ { flexGrow: 1, marginTop: showBannerArea ? 0 : 7 } }>
           <ProfileHeader
             isLoading={ isLoading }
             isVerified={ true }
+            layout={ profileHeaderLayout }
             location={ artist?.location }
             name={ artist?.name }
             pictureUrl={ artist?.pictureUrl }

packages/components/src/lib/ProfileHeader.tsx

@@ -9,6 +9,7 @@ import ProfileHeaderSkeleton from "./skeletons/ProfileHeaderSkeleton";
 interface ProfileHeaderProps {
   readonly isLoading?: boolean;
   readonly isVerified?: boolean;
+  readonly layout?: "overlay" | "inline";
   readonly location?: string;
   readonly name?: string;
   readonly onClickAbout: VoidFunction;
@@ -24,9 +25,12 @@ const ProfileHeader: FunctionComponent<ProfileHeaderProps> = ({
   socials,
   isLoading,
   isVerified = false,
+  layout = "overlay",
 }) => {
   const theme = useTheme();
 
+  const isOverlay = layout === "overlay";
+
   const isBelowMdBreakpoint = useBetterMediaQuery(
     `(max-width: ${theme.breakpoints.values.md}px)`
   );
@@ -40,7 +44,7 @@ const ProfileHeader: FunctionComponent<ProfileHeaderProps> = ({
       alignItems={ ["center", "center", "flex-start"] }
       direction={ ["column", "column", "row"] }
       justifyContent="space-between"
-      mt={ [-12.5, -12.5, 0] }
+      mt={ isOverlay ? [-12.5, -12.5, 0] : 0 }
       px={ 2.5 }
     >
       <Stack
@@ -110,7 +114,7 @@ const ProfileHeader: FunctionComponent<ProfileHeaderProps> = ({
         </Stack>
       </Stack>
 
-      <Box mt={ 2.5 }>
+      <Box mt={ isOverlay ? 2.5 : isBelowMdBreakpoint ? 3 : -2 }>
         <Socials
           instagramUrl={ socials.instagramUrl }
           itunesUrl={ socials.itunesUrl }