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 (
-
+
{ renderEditButton ? - - Editar - +
+ + Editar + +
: null }
diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx index 4d76457f..b1dddf78 100644 --- a/src/pages/Group/Group.tsx +++ b/src/pages/Group/Group.tsx @@ -1,12 +1,14 @@ -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { Navigate, useLoaderData } from "react-router-dom"; import { GroupContext, GroupIntro, GroupTabRenderer, GroupTabs, fetchGroupPageData, type AvailableTabs, type GroupContextType, type GroupPageLoaderResponse } from "@/pages/Group"; import { ProfileBio, ProfileGroups } from "@/components/ProfileInfo"; +import { AuthContext } from "@/contexts/Auth"; import "./Group.less"; export function GroupPage() { const page = useLoaderData() as GroupPageLoaderResponse; + const authContext = useContext(AuthContext); const [currentTab, setCurrentTab] = useState("contents"); const [context, setContext] = useState(makeContext(page)); @@ -24,7 +26,7 @@ export function GroupPage() {
- +
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx index bccbef32..e32d471b 100644 --- a/src/pages/Profile/ProfilePage.tsx +++ b/src/pages/Profile/ProfilePage.tsx @@ -66,7 +66,7 @@ export function ProfilePage() {
- +