Skip to content

Commit c53e4e7

Browse files
kkartunovkkartunov
committed
MP-24 photo picker modal & default initials
1 parent 2742105 commit c53e4e7

File tree

5 files changed

+103
-64
lines changed

5 files changed

+103
-64
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@
3232
}
3333

3434
.profileHeaderBottom {
35-
height: 90px;
35+
height: 30px;
3636
background-color: $tc-white;
37-
38-
@include ltelg {
39-
height: 30px;
40-
}
4137
}
4238
}
4339

4440
.profileOuter {
45-
margin-top: 130px;
41+
margin-top: 185px;
42+
43+
@include ltelg {
44+
margin-top: 155px;
45+
}
4646

4747
.profileInner {
4848
width: 100%;

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberPhotoModal/ModifyMemberPhotoModal.module.scss‎

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,13 @@
77
}
88

99
.modalBody {
10-
display: flex;
11-
flex-direction: column;
10+
display: grid;
11+
grid-template-columns: 255px 1fr;
12+
gap: 30px;
13+
14+
@include ltelg {
15+
grid-template-columns: 1fr;
16+
}
1217

1318
:global(.body-main-bold) {
1419
margin-top: $sp-2;
@@ -19,26 +24,39 @@
1924
margin-left: $sp-4;
2025
}
2126

22-
form {
23-
input {
24-
display: none;
25-
}
26-
27-
button {
28-
margin: $sp-4 0;
29-
}
30-
31-
p {
32-
color: $red-100;
27+
.imageArea {
28+
border: 1px dashed $turq-160;
29+
border-radius: 4px;
30+
background-color: rgba(224, 250, 243, 0.3);
31+
width: 255px;
32+
height: 255px;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
cursor: pointer;
37+
38+
form {
39+
input {
40+
display: none;
41+
}
42+
43+
.error {
44+
color: $red-120;
45+
text-align: center;
46+
margin: 0 $sp-4;
47+
}
48+
49+
:global(.body-small-bold) {
50+
color: $turq-160;
51+
text-transform: uppercase;
52+
}
3353
}
34-
}
3554

36-
.preview {
37-
img {
38-
max-width: 200px;
39-
max-height: 200px;
40-
border: 3px solid #fff;
41-
border-radius: 50%;
55+
.preview {
56+
img {
57+
max-width: 255px;
58+
max-height: 255px;
59+
}
4260
}
4361
}
4462
}

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberPhotoModal/ModifyMemberPhotoModal.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
7373
<BaseModal
7474
onClose={props.onClose}
7575
open
76-
title='Your Photo'
76+
title='Change Photo'
77+
size='lg'
7778
buttons={(
7879
<div className={styles.modalButtons}>
7980
<Button
@@ -82,7 +83,7 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
8283
secondary
8384
/>
8485
<Button
85-
label='Save'
86+
label='Save profile picture'
8687
onClick={handleModifyPhotoSave}
8788
primary
8889
disabled={isSaving || !file}
@@ -91,38 +92,41 @@ const ModifyMemberPhotoModal: FC<ModifyMemberPhotoModalProps> = (props: ModifyMe
9192
)}
9293
>
9394
<div className={styles.modalBody}>
94-
<p>Show the community who you are. Don&apos;t worry, you look great.</p>
95-
<p className='body-main-bold'>Requirements:</p>
96-
<ul>
97-
<li>PNG or JPG format.</li>
98-
<li>Maximum size: 2MB.</li>
99-
</ul>
100-
<form>
101-
<input
102-
ref={fileElRef}
103-
accept='image/png,image/jpeg'
104-
type='file'
105-
onChange={handleFilePickChange}
106-
/>
107-
<Button
108-
label='Upload New Photo'
109-
primary
110-
onClick={handleFilePickClick}
111-
/>
95+
<div className={styles.imageArea} onClick={handleFilePickClick}>
96+
<form>
97+
<input
98+
ref={fileElRef}
99+
accept='image/png,image/jpeg'
100+
type='file'
101+
onChange={handleFilePickChange}
102+
/>
103+
{
104+
fileSelectError && (
105+
<p className={styles.error}>{fileSelectError}</p>
106+
)
107+
}
108+
{
109+
!file && !fileSelectError && (
110+
<p className='body-small-bold'>Browse</p>
111+
)
112+
}
113+
</form>
112114
{
113-
fileSelectError && (
114-
<p>{fileSelectError}</p>
115+
file && (
116+
<div className={styles.preview}>
117+
<img src={URL.createObjectURL(file)} alt='preview' />
118+
</div>
115119
)
116120
}
117-
</form>
118-
{
119-
file && (
120-
<div className={styles.preview}>
121-
<p className='body-main-bold'>Preview:</p>
122-
<img src={URL.createObjectURL(file)} alt='preview' />
123-
</div>
124-
)
125-
}
121+
</div>
122+
<div>
123+
<p>Add a photo that you would like to share to the customers and community members.</p>
124+
<p className='body-main-bold'>Requirements:</p>
125+
<ul>
126+
<li>PNG or JPG format.</li>
127+
<li>Maximum size: 2MB.</li>
128+
</ul>
129+
</div>
126130
</div>
127131
</BaseModal>
128132
)

‎src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
@include ltelg {
2020
margin: auto;
2121
position: absolute;
22-
bottom: -125px;
22+
bottom: -150px;
2323
left: calc(50% - 125px);
2424
}
2525

@@ -28,7 +28,16 @@
2828
height: 300px;
2929
border: 12px solid $tc-white;
3030
border-radius: 50%;
31-
background-color: $tc-white;
31+
background: linear-gradient(90deg, #075F96, #038664);
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
36+
> span {
37+
font-size: 100px;
38+
line-height: 100px;
39+
font-family: $font-barlow;
40+
}
3241

3342
@include ltelg {
3443
width: 250px;

‎src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,10 @@ interface ProfileHeaderProps {
2727
refreshProfile: (handle: string) => void
2828
}
2929

30-
const DEFAULT_MEMBER_AVATAR: string
31-
= 'https://d1aahxkjiobka8.cloudfront.net/static-assets/images/ab4a084a9815ebb1cf8f7b451ce4c88f.svg'
32-
3330
const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
3431
const isMobile: boolean = useCheckIsMobile()
3532

36-
const photoURL: string = props.profile.photoURL || DEFAULT_MEMBER_AVATAR
33+
const photoURL: string | undefined = props.profile.photoURL
3734
const hasProfilePicture = !!props.profile.photoURL
3835

3936
const canEdit: boolean = props.authProfile?.handle === props.profile.handle
@@ -135,7 +132,18 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
135132
function renderMemberPhotoWrap(): JSX.Element {
136133
return (
137134
<div className={styles.photoWrap}>
138-
<img src={photoURL} alt='Topcoder - Member Profile Avatar' className={styles.profilePhoto} />
135+
{
136+
photoURL ? (
137+
<img src={photoURL} alt='Topcoder - Member Profile Avatar' className={styles.profilePhoto} />
138+
) : (
139+
<div className={styles.profilePhoto}>
140+
<span className={styles.initials}>
141+
{props.profile.firstName[0]}
142+
{props.profile.lastName[0]}
143+
</span>
144+
</div>
145+
)
146+
}
139147
{canEdit && hasProfilePicture && (
140148
<EditMemberPropertyBtn
141149
className={styles.button}

0 commit comments

Comments
 (0)