diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.less b/src/components/ProfileInfo/ProfileBio/ProfileBio.less index 6362e24b..f365c21d 100644 --- a/src/components/ProfileInfo/ProfileBio/ProfileBio.less +++ b/src/components/ProfileInfo/ProfileBio/ProfileBio.less @@ -57,7 +57,9 @@ .profile-header{ width: 100%; height: 5rem; - background-color: var(--primary-color); + background-size: cover; + background-repeat: no-repeat; + background-position: center; border-radius: 10px 10px 0px 0px; } diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx index f7acc921..efe45997 100644 --- a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx +++ b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx @@ -3,13 +3,16 @@ import { Link } from 'react-router-dom'; import { ProfileImage } from '@/components/ProfileImage/ProfileImage'; import { getFullName, getProfileImageUrl } from '@/utils/profileUtils'; import { ICON_EDIT_WHITE } from '@/utils/assets'; +import { groupBannerUrl } from '@/utils/apiUtils'; import type { Profile } from '@/types/Profile'; import { TypeLinkToBootstrapIcon, type Link as Link_API } from '@/types/Link'; +import type { Group } from '@/types/Group'; import './ProfileBio.less'; export type ProfileBioProps = { profile: Profile; + organization?: Group | null; links: Link_API[]; }; @@ -19,15 +22,23 @@ export function ProfileBio(props: ProfileBioProps) { const isOnOwnProfile = location.pathname.replace(/\/+$/, "") == linkToOwnProfile; const renderEditButton = props.profile.user.ownerOfSession && isOnOwnProfile; + const headerBackground = props.organization + ? { backgroundImage: `url(${groupBannerUrl(props.organization)})` } + : { backgroundColor: "var(--primary-color)" } + + console.dir({headerBackground}); + return (