diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss index 669c78ec9..228f9b0de 100644 --- a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss +++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss @@ -8,10 +8,6 @@ text-align: center; } - :global(.body-large) { - font-style: italic; - } - .wizzardWrap { display: flex; align-items: center; @@ -26,4 +22,8 @@ .empty { height: auto; margin-top: $sp-4; + + @include ltelg { + padding: $sp-4 $sp-4 $sp-4 0; + } } diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx index 89d906936..4df60f36f 100644 --- a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx +++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx @@ -77,7 +77,7 @@ const AboutMe: FC = (props: AboutMeProps) => {
-

{memberTitleTrait?.profileSelfTitle}

+

{memberTitleTrait?.profileSelfTitle}

{canEdit && !hasEmptyDescription && ( = (props: CommunityAwardsProps) return memberBadges && memberBadges.count ? (
-

Community Awards & Honors

- View all badges + +
diff --git a/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss b/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss index 6c4600f52..945c28398 100644 --- a/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss +++ b/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss @@ -69,6 +69,12 @@ display: flex; align-items: center; + p { + @include ltelg { + word-break: break-all; + } + } + svg { width: 16px; height: 16px; diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss index e6e82f481..1cfea6b61 100644 --- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss +++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss @@ -21,17 +21,29 @@ .profileHeaderContentOuter { margin-top: 75px; + + @include ltelg { + margin-top: 0; + } } .profileHeaderBottom { height: 90px; - background-color: $tc-white + background-color: $tc-white; + + @include ltelg { + height: 30px; + } } } .profileOuter { margin-top: 130px; + .profileInner { + width: 100%; + } + .profileInfoWrap { display: grid; grid-template-columns: 300px 1fr; @@ -39,8 +51,8 @@ margin-bottom: $sp-13; @include ltelg { - grid-template-columns: 1fr; - gap: 0; + display: flex; + flex-direction: column; } .profileInfoLeft { @@ -63,9 +75,10 @@ display: flex; flex-direction: column; margin-top: -275px; + z-index: 1; @include ltelg { - margin-top: 0; + margin-top: $sp-8; } .shortBio { @@ -99,7 +112,12 @@ .sectionWrap { background-color: $tc-white; - padding: $sp-8 $sp-8 0; + padding: $sp-8 $sp-8 $sp-4; margin-bottom: $sp-8; border-radius: 16px; + + @include ltelg { + padding: $sp-4; + padding-bottom: 0; + } } diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx index 3ecf5ee90..017340fda 100644 --- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx +++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx @@ -2,7 +2,6 @@ import { FC } from 'react' import { UserProfile } from '~/libs/core' import { ContentLayout, PageTitle } from '~/libs/ui' -import { useCheckIsMobile } from '~/libs/shared' // import { MemberTCActivityInfo } from '../tc-activity' import { MemberSkillsInfo } from '../skills' @@ -24,103 +23,86 @@ interface ProfilePageLayoutProps { authProfile: UserProfile | undefined } -const ProfilePageLayout: FC = (props: ProfilePageLayoutProps) => { - const isMobile: boolean = useCheckIsMobile() +const ProfilePageLayout: FC = (props: ProfilePageLayoutProps) => ( +
- return ( -
+ {`${props.profile.handle} | Community Profile | Topcoder`} - {`${props.profile.handle} | Community Profile | Topcoder`} +
+ + + +
+
-
- - +
+
+ - -
-
- -
-
- { - !isMobile && ( - - ) - } - - + - - - -
-
- { - isMobile && ( - - ) - } + -
-
- -
+ +
+
+
+
+
+
- + -
-
-
- -
-
+
+
-
+
+ +
+
- {/* */} + {/* */} - + - + -
- ) -} +
+) export default ProfilePageLayout diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss index 7a464efa8..06539f8aa 100644 --- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss +++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss @@ -2,21 +2,38 @@ .container { display: flex; - flex-wrap: wrap; align-items: flex-start; justify-content: space-between; color: $tc-white; + position: relative; + + @include ltelg { + padding-bottom: 150px; + flex-direction: column; + } .photoWrap { position: relative; margin-right: 60px; + @include ltelg { + margin: auto; + position: absolute; + bottom: -125px; + left: calc(50% - 125px); + } + .profilePhoto { width: 300px; height: 300px; border: 12px solid $tc-white; border-radius: 50%; background-color: $tc-white; + + @include ltelg { + width: 250px; + height: 250px; + } } .addButton { @@ -49,6 +66,11 @@ font-size: 40px; font-weight: $font-weight-bold; font-family: $font-barlow; + + @include ltelg { + font-size: 32px; + line-height: 33px; + } } button { @@ -60,6 +82,11 @@ margin-top: $sp-2; font-size: 20px; + @include ltelg { + font-size: 16px; + margin-top: 0; + } + span { font-weight: $font-weight-bold; } @@ -75,7 +102,11 @@ color: $black-100; margin-top: $sp-8; - > span { + @include ltelg { + margin-top: $sp-4; + } + + >span { margin-right: $sp-1; } @@ -83,4 +114,4 @@ margin-left: $sp-2; } } -} +} \ No newline at end of file diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx index fe42d67b6..69427c4e3 100644 --- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx +++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx @@ -11,6 +11,7 @@ import { UserTraitIds, UserTraits, } from '~/libs/core' +import { useCheckIsMobile } from '~/libs/shared' import { AddButton, EditMemberPropertyBtn } from '../../components' import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config' @@ -30,6 +31,8 @@ const DEFAULT_MEMBER_AVATAR: string = 'https://d1aahxkjiobka8.cloudfront.net/static-assets/images/ab4a084a9815ebb1cf8f7b451ce4c88f.svg' const ProfileHeader: FC = (props: ProfileHeaderProps) => { + const isMobile: boolean = useCheckIsMobile() + const photoURL: string = props.profile.photoURL || DEFAULT_MEMBER_AVATAR const hasProfilePicture = !!props.profile.photoURL @@ -108,8 +111,29 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => { }, 1000) } - return ( -
+ function renderOpenForWork(): JSX.Element { + return ( +
+ + {canEdit ? 'I am' : `${props.profile.firstName} is`} + + + {/* Enable this with talent search app */} + {/* { + !canEdit && ( +
+ ) + } + + function renderMemberPhotoWrap(): JSX.Element { + return (
Topcoder - Member Profile Avatar {canEdit && hasProfilePicture && ( @@ -126,6 +150,14 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => { /> )}
+ ) + } + + return ( +
+ { + !isMobile ? renderMemberPhotoWrap() : undefined + } {!traitsLoading && (
@@ -166,24 +198,11 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => { )} { - openForWork || canEdit ? ( -
- - {canEdit ? 'I am' : `${props.profile.firstName} is`} - - - {/* Enable this with talent search app */} - {/* { - !canEdit && ( -
- ) : undefined + openForWork || canEdit ? renderOpenForWork() : undefined + } + + { + isMobile ? renderMemberPhotoWrap() : undefined } { diff --git a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss index 980c932df..e1373ca5d 100644 --- a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss +++ b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss @@ -7,6 +7,10 @@ padding: $sp-6; flex: 1; + @include ltelg { + padding: $sp-4; + } + >p { font-size: 20px; } @@ -21,6 +25,14 @@ color: $tc-white; padding: $sp-8; + @include ltelg { + padding: $sp-4; + } + + :global(.body-large-bold) { + text-align: center; + } + .wins { display: flex; flex-wrap: wrap; diff --git a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss index 971f07d8e..565b2b9c4 100644 --- a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss +++ b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss @@ -8,12 +8,30 @@ padding: $sp-8 $sp-8 $sp-2; border-radius: 16px; + @include ltelg { + padding: $sp-4; + } + + >p { + text-align: left; + } + .achievementsWrap { display: flex; margin: $sp-4 0 $sp-2; + @include ltelg { + flex-direction: column; + + } + > div:not(:last-child) { margin-right: $sp-8; + + @include ltelg { + margin-right: 0; + margin-bottom: $sp-8; + } } } diff --git a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx index d70d700c7..39d48610e 100644 --- a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx +++ b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx @@ -38,7 +38,7 @@ const MemberTCAchievements: FC = (props: MemberTCAchi return memberStats?.wins || tcoWins ? (
-

Achievements @ Topcoder

+

Achievements @ Topcoder

{