Skip to content

Commit 95881ce

Browse files
vas3avas3a
committed
Merge branch 'dev' of github.com:topcoder-platform/platform-ui into TAL_talent-search-results-page
2 parents 4d43439 + e8d8836 commit 95881ce

File tree

29 files changed

+515
-209
lines changed

29 files changed

+515
-209
lines changed

‎src/apps/profiles/src/lib/assets/profile-header-bg-mobile.png‎

103 KB
Loading

‎src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
text-align: center;
99
}
1010

11-
:global(.body-large) {
12-
font-style: italic;
13-
}
14-
1511
.wizzardWrap {
1612
display: flex;
1713
align-items: center;
@@ -26,4 +22,8 @@
2622
.empty {
2723
height: auto;
2824
margin-top: $sp-4;
25+
26+
@include ltelg {
27+
padding: $sp-4 $sp-4 $sp-4 0;
28+
}
2929
}

‎src/apps/profiles/src/member-profile/about-me/AboutMe.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
7676
<MemberRatingCard profile={props.profile} />
7777

7878
<div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
79-
<p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
79+
<p className='body-main-medium'>{memberTitleTrait?.profileSelfTitle}</p>
8080
{canEdit && !hasEmptyDescription && (
8181
<EditMemberPropertyBtn
8282
onClick={handleEditClick}

‎src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,12 @@
44
display: flex;
55
flex-direction: column;
66
margin-top: $sp-8;
7+
padding-bottom: $sp-4;
78

89
.title {
910
display: flex;
10-
justify-content: space-between;
11+
justify-content: flex-end;
1112
align-items: center;
12-
margin-bottom: $sp-10;
13-
14-
.viewAllLink {
15-
text-transform: uppercase;
16-
color: $turq-160;
17-
font-weight: $font-weight-bold;
18-
font-size: 14px;
19-
}
2013
}
2114

2215
.badges {
@@ -40,6 +33,12 @@
4033
transition: 0.25s ease-in-out;
4134
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
4235

36+
@include ltelg {
37+
padding-bottom: 0;
38+
padding-left: $sp-2;
39+
min-width: 100%;
40+
}
41+
4342
&:hover {
4443
box-shadow: 0 0 16px rgba(22, 103, 154, 0.5);
4544
}

‎src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
33
import { bind } from 'lodash'
44

55
import { useMemberBadges, UserBadge, UserBadgesResponse, UserProfile } from '~/libs/core'
6+
import { Button } from '~/libs/ui'
67

78
import { MemberBadgeModal } from '../../components'
89

@@ -29,8 +30,13 @@ const CommunityAwards: FC<CommunityAwardsProps> = (props: CommunityAwardsProps)
2930
return memberBadges && memberBadges.count ? (
3031
<div className={styles.container}>
3132
<div className={styles.title}>
32-
<h4>Community Awards & Honors</h4>
33-
<Link to='badges' className={styles.viewAllLink}>View all badges</Link>
33+
<Link to='badges'>
34+
<Button
35+
label='View all badges'
36+
link
37+
variant='linkblue'
38+
/>
39+
</Link>
3440
</div>
3541

3642
<div className={styles.badges}>

‎src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { bind, compact, sortBy, values } from 'lodash'
1+
import { bind, compact, sortBy, uniq, values } from 'lodash'
22
import { Dispatch, FC, MutableRefObject, SetStateAction, useMemo, useRef, useState } from 'react'
33
import { toast } from 'react-toastify'
44
import classNames from 'classnames'
@@ -67,7 +67,7 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
6767
}
6868

6969
function handleLanguagesSave(): void {
70-
const formLanguages = compact(values(formValues))
70+
const formLanguages = uniq(compact(values(formValues)))
7171

7272
if (formLanguages.length) {
7373
const filteredLanguages = formLanguages
@@ -139,7 +139,7 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
139139
onClose={props.onClose}
140140
open
141141
size='lg'
142-
title='My Languages'
142+
title='Languages'
143143
buttons={(
144144
<div className={styles.modalButtons}>
145145
<Button

‎src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@
6969
display: flex;
7070
align-items: center;
7171

72+
p {
73+
@include ltelg {
74+
word-break: break-all;
75+
}
76+
}
77+
7278
svg {
7379
width: 16px;
7480
height: 16px;

‎src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
.profileHeaderWrap {
1010
background: url('../../lib/assets/profile-header-bg.png') no-repeat right top / auto, linear-gradient(#0d83c5, #0e89d5);
1111

12+
@include ltelg {
13+
background: url('../../lib/assets/profile-header-bg-mobile.png') no-repeat right top /100% 100%;
14+
}
15+
1216
.profileHeaderContent {
1317
padding: 0;
1418
max-height: 260px;
@@ -21,16 +25,28 @@
2125

2226
.profileHeaderContentOuter {
2327
margin-top: 75px;
28+
29+
@include ltelg {
30+
margin-top: 0;
31+
}
2432
}
2533

2634
.profileHeaderBottom {
27-
height: 90px;
28-
background-color: $tc-white
35+
height: 30px;
36+
background-color: $tc-white;
2937
}
3038
}
3139

3240
.profileOuter {
33-
margin-top: 130px;
41+
margin-top: 185px;
42+
43+
@include ltelg {
44+
margin-top: 155px;
45+
}
46+
47+
.profileInner {
48+
width: 100%;
49+
}
3450

3551
.profileInfoWrap {
3652
display: grid;
@@ -39,8 +55,8 @@
3955
margin-bottom: $sp-13;
4056

4157
@include ltelg {
42-
grid-template-columns: 1fr;
43-
gap: 0;
58+
display: flex;
59+
flex-direction: column;
4460
}
4561

4662
.profileInfoLeft {
@@ -63,9 +79,10 @@
6379
display: flex;
6480
flex-direction: column;
6581
margin-top: -275px;
82+
z-index: 1;
6683

6784
@include ltelg {
68-
margin-top: 0;
85+
margin-top: $sp-8;
6986
}
7087

7188
.shortBio {
@@ -99,7 +116,12 @@
99116

100117
.sectionWrap {
101118
background-color: $tc-white;
102-
padding: $sp-8 $sp-8 0;
119+
padding: $sp-8 $sp-8 $sp-4;
103120
margin-bottom: $sp-8;
104121
border-radius: 16px;
122+
123+
@include ltelg {
124+
padding: $sp-4;
125+
padding-bottom: 0;
126+
}
105127
}

‎src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx‎

Lines changed: 56 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { FC } from 'react'
22

33
import { UserProfile } from '~/libs/core'
44
import { ContentLayout, PageTitle } from '~/libs/ui'
5-
import { useCheckIsMobile } from '~/libs/shared'
65

76
// import { MemberTCActivityInfo } from '../tc-activity'
87
import { MemberSkillsInfo } from '../skills'
@@ -24,103 +23,86 @@ interface ProfilePageLayoutProps {
2423
authProfile: UserProfile | undefined
2524
}
2625

27-
const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => {
28-
const isMobile: boolean = useCheckIsMobile()
26+
const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => (
27+
<div className={styles.container}>
2928

30-
return (
31-
<div className={styles.container}>
29+
<PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
3230

33-
<PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
31+
<div className={styles.profileHeaderWrap}>
32+
<ContentLayout
33+
outerClass={styles.profileHeaderContentOuter}
34+
contentClass={styles.profileHeaderContent}
35+
>
36+
<ProfileHeader
37+
profile={props.profile}
38+
authProfile={props.authProfile}
39+
refreshProfile={props.refreshProfile}
40+
/>
41+
</ContentLayout>
42+
<div className={styles.profileHeaderBottom} />
43+
</div>
3444

35-
<div className={styles.profileHeaderWrap}>
36-
<ContentLayout
37-
outerClass={styles.profileHeaderContentOuter}
38-
contentClass={styles.profileHeaderContent}
39-
>
40-
<ProfileHeader
45+
<ContentLayout
46+
outerClass={styles.profileOuter}
47+
innerClass={styles.profileInner}
48+
>
49+
<div className={styles.profileInfoWrap}>
50+
<div className={styles.profileInfoLeft}>
51+
<AboutMe
4152
profile={props.profile}
4253
authProfile={props.authProfile}
4354
refreshProfile={props.refreshProfile}
4455
/>
45-
</ContentLayout>
46-
<div className={styles.profileHeaderBottom} />
47-
</div>
4856

49-
<ContentLayout
50-
outerClass={styles.profileOuter}
51-
>
52-
<div className={styles.profileInfoWrap}>
53-
<div className={styles.profileInfoLeft}>
54-
{
55-
!isMobile && (
56-
<AboutMe
57-
profile={props.profile}
58-
authProfile={props.authProfile}
59-
refreshProfile={props.refreshProfile}
60-
/>
61-
)
62-
}
63-
64-
<MemberLanguages profile={props.profile} authProfile={props.authProfile} />
57+
<MemberLanguages profile={props.profile} authProfile={props.authProfile} />
6558

66-
<MemberLinks profile={props.profile} authProfile={props.authProfile} />
67-
68-
<MemberLocalInfo
69-
profile={props.profile}
70-
authProfile={props.authProfile}
71-
refreshProfile={props.refreshProfile}
72-
/>
73-
</div>
74-
<div className={styles.profileInfoRight}>
75-
{
76-
isMobile && (
77-
<AboutMe
78-
profile={props.profile}
79-
authProfile={props.authProfile}
80-
refreshProfile={props.refreshProfile}
81-
/>
82-
)
83-
}
59+
<MemberLinks profile={props.profile} authProfile={props.authProfile} />
8460

85-
<div className={styles.sectionWrap}>
86-
<div className={styles.skillsWrap}>
87-
<MemberSkillsInfo
88-
profile={props.profile}
89-
authProfile={props.authProfile}
90-
refreshProfile={props.refreshProfile}
91-
/>
92-
</div>
61+
<MemberLocalInfo
62+
profile={props.profile}
63+
authProfile={props.authProfile}
64+
refreshProfile={props.refreshProfile}
65+
/>
66+
</div>
67+
<div className={styles.profileInfoRight}>
68+
<div className={styles.sectionWrap}>
69+
<div className={styles.skillsWrap}>
70+
<MemberSkillsInfo
71+
profile={props.profile}
72+
authProfile={props.authProfile}
73+
refreshProfile={props.refreshProfile}
74+
/>
9375
</div>
76+
</div>
9477

95-
<MemberTCAchievements profile={props.profile} />
78+
<MemberTCAchievements profile={props.profile} />
9679

97-
<div className={styles.expirenceWrap}>
98-
<div>
99-
<div className={styles.sectionWrap}>
100-
<WorkExpirence
101-
profile={props.profile}
102-
authProfile={props.authProfile}
103-
/>
104-
</div>
105-
</div>
80+
<div className={styles.expirenceWrap}>
81+
<div>
10682
<div className={styles.sectionWrap}>
107-
<EducationAndCertifications
83+
<WorkExpirence
10884
profile={props.profile}
10985
authProfile={props.authProfile}
11086
/>
11187
</div>
11288
</div>
89+
<div className={styles.sectionWrap}>
90+
<EducationAndCertifications
91+
profile={props.profile}
92+
authProfile={props.authProfile}
93+
/>
94+
</div>
11395
</div>
11496
</div>
97+
</div>
11598

116-
{/* <MemberTCActivityInfo profile={props.profile} /> */}
99+
{/* <MemberTCActivityInfo profile={props.profile} /> */}
117100

118-
</ContentLayout>
101+
</ContentLayout>
119102

120-
<OnboardingCompleted authProfile={props.authProfile} />
103+
<OnboardingCompleted authProfile={props.authProfile} />
121104

122-
</div>
123-
)
124-
}
105+
</div>
106+
)
125107

126108
export default ProfilePageLayout

0 commit comments

Comments
 (0)